68 lines
1.8 KiB
TypeScript
68 lines
1.8 KiB
TypeScript
import React, { useState, useEffect, useRef } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { useFilterStateState } from "../../zustand/Filter";
|
|
import { useDebounce } from "../../utils/useDebounce";
|
|
|
|
interface Props {
|
|
placeholder: string;
|
|
searchBy: string;
|
|
}
|
|
|
|
const SearchField: React.FC<Props> = ({ placeholder, searchBy }) => {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
const [searchQuery, setSearchQuery] = useState<string>("");
|
|
const inputRef = useRef<HTMLInputElement>(null);
|
|
|
|
const { setFilter,Filter } = useFilterStateState();
|
|
|
|
const handleInputChange = (value: string) => {
|
|
setSearchQuery(value);
|
|
};
|
|
console.log(searchBy,"searchBy");
|
|
|
|
const handleInputChangeWithDebounce = useDebounce((value: string) => {
|
|
setFilter({
|
|
[searchBy]: value,
|
|
});
|
|
});
|
|
|
|
const handleToggleDropdown = () => {
|
|
setIsOpen(!isOpen);
|
|
};
|
|
|
|
const handleClickOutside = (event: MouseEvent) => {
|
|
if (inputRef.current && !inputRef.current.contains(event.target as Node)) {
|
|
setIsOpen(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
document.addEventListener("mousedown", handleClickOutside);
|
|
return () => {
|
|
document.removeEventListener("mousedown", handleClickOutside);
|
|
};
|
|
}, []);
|
|
|
|
const [t] = useTranslation();
|
|
return (
|
|
<div className={`search-field ${isOpen ? "open" : ""}`}>
|
|
<div className="search-header" onClick={handleToggleDropdown}>
|
|
{/* <IoSearch className="search__icon" /> */}
|
|
<input
|
|
ref={inputRef}
|
|
type="text"
|
|
className="search__input"
|
|
placeholder={t(placeholder)}
|
|
value={searchQuery}
|
|
onChange={(e) => {
|
|
handleInputChange(e.target.value);
|
|
handleInputChangeWithDebounce(e.target.value);
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SearchField;
|