You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
83 lines
2.1 KiB
83 lines
2.1 KiB
import React from 'react';
|
|
import { useDispatch } from 'react-redux';
|
|
import { debounce } from "lodash"
|
|
|
|
import { setSearchValue } from '../../../redux/search/slice';
|
|
|
|
export const Search: React.FC = () => {
|
|
const dispatch = useDispatch();
|
|
const [value, setValue] = React.useState<string>('');
|
|
const inputRef = React.useRef<HTMLInputElement>(null);
|
|
|
|
const onClickClear = () => {
|
|
dispatch(setSearchValue(''));
|
|
setValue('');
|
|
inputRef.current?.focus();
|
|
};
|
|
|
|
const updateSearchValue = React.useCallback(
|
|
debounce((str: string) => {
|
|
dispatch(setSearchValue(str));
|
|
}, 150),
|
|
[],
|
|
);
|
|
|
|
const onChangeInput = (event: React.ChangeEvent<HTMLInputElement>) => {
|
|
setValue(event.target.value);
|
|
updateSearchValue(event.target.value);
|
|
};
|
|
|
|
return (
|
|
<div className={'root'}>
|
|
<svg
|
|
className={'icon'}
|
|
enableBackground="new 0 0 32 32"
|
|
id="EditableLine"
|
|
version="1.1"
|
|
viewBox="0 0 32 32"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<circle
|
|
cx="14"
|
|
cy="14"
|
|
fill="none"
|
|
id="XMLID_42_"
|
|
r="9"
|
|
stroke="#000000"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeMiterlimit="10"
|
|
strokeWidth="2"
|
|
/>
|
|
<line
|
|
fill="none"
|
|
id="XMLID_44_"
|
|
stroke="#000000"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeMiterlimit="10"
|
|
strokeWidth="2"
|
|
x1="27"
|
|
x2="20.366"
|
|
y1="27"
|
|
y2="20.366"
|
|
/>
|
|
</svg>
|
|
<input
|
|
ref={inputRef}
|
|
value={value}
|
|
onChange={onChangeInput}
|
|
className={'input'}
|
|
placeholder="Поиск пиццы..."
|
|
/>
|
|
{value && (
|
|
<svg
|
|
onClick={onClickClear}
|
|
className={'clearIcon'}
|
|
viewBox="0 0 20 20"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M10 8.586L2.929 1.515 1.515 2.929 8.586 10l-7.071 7.071 1.414 1.414L10 11.414l7.071 7.071 1.414-1.414L11.414 10l7.071-7.071-1.414-1.414L10 8.586z" />
|
|
</svg>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|