diff options
Diffstat (limited to 'src/lib/ServiceSearch.tsx')
-rw-r--r-- | src/lib/ServiceSearch.tsx | 31 |
1 files changed, 31 insertions, 0 deletions
diff --git a/src/lib/ServiceSearch.tsx b/src/lib/ServiceSearch.tsx new file mode 100644 index 0000000..b2509d3 --- /dev/null +++ b/src/lib/ServiceSearch.tsx @@ -0,0 +1,31 @@ +import React, { useContext } from 'react'; +import _ from 'lodash'; +import { InputBase } from '../components/Input'; +import ServiceContext from './ServiceContext'; +import useQuery from '../hooks/useQuery'; + +const ServiceSearch: React.FC = () => { + const service = useContext(ServiceContext); + const { query, setQuery } = useQuery(); + + const placeholder = `Искать ${service.name.toLowerCase()}`; + + const handleChange = _.debounce((event: React.ChangeEvent<HTMLInputElement>) => { + if (service.searchBy) { + const newQuery = service.searchBy.reduce((acc, key) => { + acc[`${key}[$regex]`] = event.target.value; + return acc; + }, query); + + setQuery(newQuery); + } + }, 250); + + return ( + <div className="mr-6 flex items-center"> + <InputBase placeholder={placeholder} onChange={handleChange} /> + </div> + ); +}; + +export default ServiceSearch; |