All files / src/components/elements SearchBox.tsx

0% Statements 0/10
0% Branches 0/6
0% Functions 0/5
0% Lines 0/10

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                                                                           
import React, { useState } from "react";
import { Box, Button, Input } from "rimble-ui";
import { SearchIcon } from ".";
 
export interface SearchBoxProps {
  placeholderText?: string;
  onSearch(value: string): void;
}
 
export const SearchBox: React.FunctionComponent<SearchBoxProps> = (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%">
      <Input
        onChange={(event: any) => setSearch(event.target.value)}
        onKeyDown={(event: any) => onKeyDown(event)}
        placeholder={props.placeholderText || "Search"}
        required
        type="text"
        value={search}
        width="100%"
      />
      <Button.Text onClick={() => props.onSearch(search)} style={{ position: "absolute", top: 0, right: 0, zIndex: 9 }}>
        <SearchIcon size="24px" />
      </Button.Text>
    </Box>
  );
};