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> ); }; |