All files / src/components/elements TabbedSearch.tsx

0% Statements 0/15
0% Branches 0/6
0% Functions 0/7
0% Lines 0/15

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70                                                                                                                                           
import { useState } from "react";
import styled from "styled-components";
import { Box, Button, Input } from "rimble-ui";
import { colors } from "../../themes";
import { Tabs } from "../layouts";
import { SearchIcon } from "./Icons";
 
export const StyledTabbedInput = styled(Input)`
  border-radius: 0 0 4px 4px !important;
  border: 0 !important;
  padding: 34px 50px 34px 24px !important;
  width: 100%;
`;
 
export interface TabbedSearchBoxProps {
  placeholderText?: string;
  onSearch(value: string): void;
}
 
export const TabbedSearchBox: React.FunctionComponent<TabbedSearchBoxProps> = (props) => {
  const urlParams = new URLSearchParams(window.location.search);
  const filter = urlParams.get("filter");
  const [search, setSearch] = useState(filter || "");
 
  function onKeyDown(event: any) {
    if (event.code === "Enter") {
      props.onSearch(search);
    }
  }
 
  return (
    <Box position="relative" width="100%">
      <StyledTabbedInput
        onChange={(event: any) => setSearch(event.target.value)}
        onKeyDown={(event: any) => onKeyDown(event)}
        placeholder={props.placeholderText || "Search"}
        required
        type="text"
        value={search}
      />
      <Button.Text
        onClick={() => props.onSearch(search)}
        style={{ position: "absolute", top: 10, right: 5, zIndex: 9 }}
      >
        <SearchIcon />
      </Button.Text>
    </Box>
  );
};
 
export interface TabbedSearchProps {
  activeTab: string;
  tabs: any;
}
 
export const TabbedSearch: React.FunctionComponent<TabbedSearchProps> = (props) => {
  const [activeTabName, setActiveTabName] = useState(props.activeTab);
 
  return (
    <Box border={2} borderRadius={1}>
      <Tabs
        bg={colors.primary.background}
        tabs={props.tabs}
        activeTabName={activeTabName}
        onTabClicked={(tabName) => setActiveTabName(tabName)}
      />
    </Box>
  );
};