mirror of
https://github.com/iconoir-icons/iconoir
synced 2024-06-26 17:30:16 +02:00
64 lines
1.7 KiB
TypeScript
64 lines
1.7 KiB
TypeScript
import React from 'react';
|
|
import { IconListFilters } from './IconList';
|
|
import { LargeInput } from './Input';
|
|
|
|
export interface FiltersEditorProps {
|
|
filters: IconListFilters;
|
|
// eslint-disable-next-line no-unused-vars
|
|
onChange: (filters: IconListFilters) => void;
|
|
}
|
|
export function FiltersEditor({ filters, onChange }: FiltersEditorProps) {
|
|
const [, startTransition] = (React as any).useTransition();
|
|
const [search, setSearch] = React.useState(filters.search);
|
|
|
|
// Keep track if the user hits tab before scrolling, so we can scroll the search
|
|
// field to the top of the page automatically.
|
|
const didScrollRef = React.useRef(false);
|
|
React.useEffect(() => {
|
|
const scrollEvent = () => {
|
|
didScrollRef.current = true;
|
|
window.removeEventListener('scroll', scrollEvent);
|
|
};
|
|
window.addEventListener('scroll', scrollEvent);
|
|
return () => {
|
|
window.removeEventListener('scroll', scrollEvent);
|
|
};
|
|
}, []);
|
|
|
|
React.useEffect(() => {
|
|
setSearch(filters.search);
|
|
}, [filters]);
|
|
|
|
function updateFilters(partial: Partial<IconListFilters>) {
|
|
startTransition(() => {
|
|
onChange({
|
|
...filters,
|
|
...partial,
|
|
});
|
|
});
|
|
}
|
|
|
|
return (
|
|
<LargeInput
|
|
placeholder={'Search...'}
|
|
value={search}
|
|
type={'search'}
|
|
autoCapitalize={'none'}
|
|
tabIndex={1}
|
|
onFocus={(e) => {
|
|
if (!didScrollRef.current) {
|
|
e.target.scrollIntoView({
|
|
block: 'start',
|
|
behavior: 'auto',
|
|
});
|
|
}
|
|
}}
|
|
onChange={(e) => {
|
|
const value = e.target.value;
|
|
setSearch(value);
|
|
updateFilters({ search: value });
|
|
}}
|
|
/>
|
|
);
|
|
}
|