File size: 2,334 Bytes
9705b6c | 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 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 | import { forwardRef, useState, useCallback, useMemo, Ref } from 'react';
import { Search, X } from 'lucide-react';
import { useSetRecoilState } from 'recoil';
import debounce from 'lodash/debounce';
import { useLocalize } from '~/hooks';
import store from '~/store';
type SearchBarProps = {
clearSearch: () => void;
};
const SearchBar = forwardRef((props: SearchBarProps, ref: Ref<HTMLDivElement>) => {
const { clearSearch } = props;
const setSearchQuery = useSetRecoilState(store.searchQuery);
const [showClearIcon, setShowClearIcon] = useState(false);
const [text, setText] = useState('');
const localize = useLocalize();
const clearText = useCallback(() => {
setShowClearIcon(false);
setSearchQuery('');
clearSearch();
setText('');
}, [setSearchQuery, clearSearch]);
const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) => {
const { value } = e.target as HTMLInputElement;
if (e.key === 'Backspace' && value === '') {
clearText();
}
};
const sendRequest = useCallback((value: string) => setSearchQuery(value), [setSearchQuery]);
const debouncedSendRequest = useMemo(() => debounce(sendRequest, 350), [sendRequest]);
const onChange = (e: React.FormEvent<HTMLInputElement>) => {
const { value } = e.target as HTMLInputElement;
setShowClearIcon(value.length > 0);
setText(value);
debouncedSendRequest(value);
};
return (
<div
ref={ref}
className="relative flex w-full cursor-pointer items-center gap-3 rounded-md border border-white/20 px-3 py-3 text-sm text-white transition-colors duration-200 hover:bg-gray-500/10"
>
{<Search className="absolute left-3 h-4 w-4" />}
<input
type="text"
className="m-0 mr-0 w-full border-none bg-transparent p-0 pl-7 text-sm leading-tight outline-none"
value={text}
onChange={onChange}
onKeyDown={(e) => {
e.code === 'Space' ? e.stopPropagation() : null;
}}
placeholder={localize('com_nav_search_placeholder')}
onKeyUp={handleKeyUp}
/>
<X
className={`absolute right-3 h-5 w-5 cursor-pointer ${
showClearIcon ? 'opacity-100' : 'opacity-0'
} transition-opacity duration-1000`}
onClick={clearText}
/>
</div>
);
});
export default SearchBar;
|