src/components/Search.tsx


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 debounce from 'lodash-es/debounce';
import React, { useCallback, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';

import s0 from './Search.module.scss';

function RuleSearch({ dispatch, searchText, updateSearchText, className }) {
  const { t } = useTranslation();
  const [text, setText] = useState(searchText);
  const updateSearchTextInternal = useCallback(
    (v) => {
      dispatch(updateSearchText(v));
    },
    [dispatch, updateSearchText]
  );
  const updateSearchTextDebounced = useMemo(
    () => debounce(updateSearchTextInternal, 300),
    [updateSearchTextInternal]
  );
  const onChange = (e) => {
    setText(e.target.value);
    updateSearchTextDebounced(e.target.value);
  };

  return (
    <div className={className || s0.RuleSearch}>
      <input
        type="text"
        value={text}
        onChange={onChange}
        className={s0.input}
        placeholder={t('Search')}
      />
    </div>
  );
}

export default RuleSearch;