33 lines
859 B
TypeScript
33 lines
859 B
TypeScript
import { t } from '@lingui/macro';
|
|
import { CloseButton, TextInput } from '@mantine/core';
|
|
import { useDebouncedValue } from '@mantine/hooks';
|
|
import { IconSearch } from '@tabler/icons-react';
|
|
import { useEffect, useState } from 'react';
|
|
|
|
export function TableSearchInput({
|
|
searchCallback
|
|
}: Readonly<{
|
|
searchCallback: (searchTerm: string) => void;
|
|
}>) {
|
|
const [value, setValue] = useState<string>('');
|
|
const [searchText] = useDebouncedValue(value, 500);
|
|
|
|
useEffect(() => {
|
|
searchCallback(searchText);
|
|
}, [searchText]);
|
|
|
|
return (
|
|
<TextInput
|
|
value={value}
|
|
leftSection={<IconSearch />}
|
|
placeholder={t`Search`}
|
|
onChange={(event) => setValue(event.target.value)}
|
|
rightSection={
|
|
value.length > 0 ? (
|
|
<CloseButton size="xs" onClick={() => setValue('')} />
|
|
) : null
|
|
}
|
|
/>
|
|
);
|
|
}
|