31 lines
611 B
TypeScript
31 lines
611 B
TypeScript
import { TextInput, type TextInputProps } from '@mantine/core';
|
|
import { useEffect } from 'react';
|
|
|
|
export function DebouncedInput({
|
|
value,
|
|
onChange,
|
|
debounce = 500,
|
|
...props
|
|
}: {
|
|
value: string | number;
|
|
onChange: (value: string | number) => void;
|
|
debounce?: number;
|
|
} & Omit<TextInputProps, 'onChange'>) {
|
|
useEffect(() => {
|
|
const timeout = setTimeout(() => {
|
|
onChange(value);
|
|
}, debounce);
|
|
|
|
return () => clearTimeout(timeout);
|
|
}, [value]);
|
|
|
|
return (
|
|
<TextInput
|
|
{...props}
|
|
value={value}
|
|
onClick={(e) => e.stopPropagation()}
|
|
onChange={(e) => onChange(e.target.value)}
|
|
/>
|
|
);
|
|
}
|