src/components/search-input/search-input.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import React, {useState, useEffect} from 'react';
   6 import {
   7     IconButton,
   8     FormControl,
   9     InputLabel,
  10     Input,
  11     InputAdornment,
  12     Tooltip,
  13 } from '@material-ui/core';
  14 import SearchIcon from '@material-ui/icons/Search';
  15
  16 interface SearchInputDataProps {
  17     value: string;
  18     label?: string;
  19     selfClearProp: string;
  20 }
  21
  22 interface SearchInputActionProps {
  23     onSearch: (value: string) => any;
  24     debounce?: number;
  25 }
  26
  27 type SearchInputProps = SearchInputDataProps & SearchInputActionProps;
  28
  29 export const DEFAULT_SEARCH_DEBOUNCE = 1000;
  30
  31 export const SearchInput = (props: SearchInputProps) => {
  32     const [timeout, setTimeout] = useState(0);
  33     const [value, setValue] = useState("");
  34     const [label, setLabel] = useState("Search");
  35     const [selfClearProp, setSelfClearProp] = useState("");
  36
  37     useEffect(() => {
  38         if (props.value) {
  39             setValue(props.value);
  40         }
  41         if (props.label) {
  42             setLabel(props.label);
  43         }
  44
  45         return () => {
  46             setValue("");
  47             clearTimeout(timeout);
  48         };
  49     }, [props.value, props.label]); // eslint-disable-line react-hooks/exhaustive-deps
  50
  51     useEffect(() => {
  52         if (selfClearProp !== props.selfClearProp) {
  53             setValue("");
  54             setSelfClearProp(props.selfClearProp);
  55             handleChange({ target: { value: "" } } as any);
  56         }
  57     }, [props.selfClearProp]); // eslint-disable-line react-hooks/exhaustive-deps
  58
  59     const handleSubmit = (event: React.FormEvent<HTMLElement>) => {
  60         event.preventDefault();
  61         clearTimeout(timeout);
  62         props.onSearch(value);
  63     };
  64
  65     const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
  66         const { target: { value: eventValue } } = event;
  67         clearTimeout(timeout);
  68         setValue(eventValue);
  69
  70         setTimeout(window.setTimeout(
  71             () => {
  72                 props.onSearch(eventValue);
  73             },
  74              props.debounce || DEFAULT_SEARCH_DEBOUNCE
  75         ));
  76     };
  77
  78     return <form onSubmit={handleSubmit}>
  79         <FormControl>
  80             <InputLabel>{label}</InputLabel>
  81             <Input
  82                 type="text"
  83                 data-cy="search-input"
  84                 value={value}
  85                 onChange={handleChange}
  86                 endAdornment={
  87                     <InputAdornment position="end">
  88                         <Tooltip title='Search'>
  89                             <IconButton
  90                                 onClick={handleSubmit}>
  91                                 <SearchIcon />
  92                             </IconButton>
  93                         </Tooltip>
  94                     </InputAdornment>
  95                 } />
  96         </FormControl>
  97     </form>;
  98 };