github.com/thanos-io/thanos@v0.32.5/pkg/ui/react-app/src/components/SearchBar.tsx (about)

     1  import React, { ChangeEvent, FC } 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: ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => void;
     8    placeholder: string;
     9  }
    10  
    11  const SearchBar: FC<SearchBarProps> = ({ handleChange, placeholder }) => {
    12    let filterTimeout: NodeJS.Timeout;
    13  
    14    const handleSearchChange = (e: ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => {
    15      clearTimeout(filterTimeout);
    16      // TODO e.persist() should be removed once the upgrade to react v17 is done.
    17      // https://reactjs.org/docs/legacy-event-pooling.html
    18      e.persist();
    19      filterTimeout = setTimeout(() => {
    20        handleChange(e);
    21      }, 300);
    22    };
    23  
    24    return (
    25      <InputGroup>
    26        <InputGroupAddon addonType="prepend">
    27          <InputGroupText>{<FontAwesomeIcon icon={faSearch} />}</InputGroupText>
    28        </InputGroupAddon>
    29        <Input autoFocus onChange={handleSearchChange} placeholder={placeholder} />
    30      </InputGroup>
    31    );
    32  };
    33  
    34  export default SearchBar;