prometheus

1
import React, { ChangeEvent, FC, useEffect } from 'react';
2
import { Input, InputGroup, InputGroupAddon, InputGroupText } from 'reactstrap';
3
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
4
import { faSearch } from '@fortawesome/free-solid-svg-icons';
5

6
export interface SearchBarProps {
7
  handleChange: (e: string) => void;
8
  placeholder: string;
9
  defaultValue: string;
10
}
11

12
const SearchBar: FC<SearchBarProps> = ({ handleChange, placeholder, defaultValue }) => {
13
  let filterTimeout: NodeJS.Timeout;
14

15
  const handleSearchChange = (e: ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => {
16
    clearTimeout(filterTimeout);
17
    filterTimeout = setTimeout(() => {
18
      handleChange(e.target.value);
19
    }, 300);
20
  };
21

22
  useEffect(() => {
23
    handleChange(defaultValue);
24
  }, [defaultValue, handleChange]);
25

26
  return (
27
    <InputGroup>
28
      <InputGroupAddon addonType="prepend">
29
        <InputGroupText>{<FontAwesomeIcon icon={faSearch} />}</InputGroupText>
30
      </InputGroupAddon>
31
      <Input autoFocus onChange={handleSearchChange} placeholder={placeholder} defaultValue={defaultValue} />
32
    </InputGroup>
33
  );
34
};
35

36
export default SearchBar;
37