56 lines
1.8 KiB
TypeScript
56 lines
1.8 KiB
TypeScript
import { Input } from 'antd';
|
|
import { SearchProps } from 'antd/es/input'
|
|
import { useState } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';
|
|
const { Search } = Input;
|
|
|
|
const SearchField = ({ searchBy }: any) => {
|
|
const navigate = useNavigate()
|
|
const [searchParams,] = useSearchParams();
|
|
const location = useLocation()
|
|
const { t } = useTranslation();
|
|
|
|
|
|
const [searchValue, setSearchValue] = useState(searchParams.get(searchBy ?? "search") || "");
|
|
|
|
const onSearch: SearchProps['onSearch'] = (value, _e, info) => {
|
|
if (value || value !== "") {
|
|
navigate(`${location?.pathname}?${searchBy ?? "search"}=${value}`, { replace: true });
|
|
} else {
|
|
const params = new URLSearchParams(location.search);
|
|
params.delete(searchBy ?? "search");
|
|
navigate(`${location.pathname}?${params.toString()}`, { replace: true });
|
|
}
|
|
}
|
|
|
|
const onChange = (e: any) => {
|
|
const value = e.target.value
|
|
setSearchValue(e.target.value);
|
|
if (value === "") {
|
|
const params = new URLSearchParams(location.search);
|
|
params.delete(searchBy ?? "search");
|
|
navigate(`${location.pathname}?${params.toString()}`, { replace: true });
|
|
}
|
|
}
|
|
|
|
|
|
return (
|
|
<div className='SearchField'
|
|
>
|
|
<Search
|
|
allowClear
|
|
enterButton={t("search")}
|
|
size="middle"
|
|
placeholder={t(searchBy ?? "search")}
|
|
onSearch={onSearch}
|
|
style={{ width: 250 }}
|
|
value={searchValue}
|
|
onChange={onChange}
|
|
/>
|
|
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default SearchField |