46 lines
1.1 KiB
TypeScript
46 lines
1.1 KiB
TypeScript
import { Input, InputProps } from '@chakra-ui/react'
|
|
import {
|
|
ChangeEvent,
|
|
ForwardedRef,
|
|
forwardRef,
|
|
useEffect,
|
|
useState,
|
|
} from 'react'
|
|
import { useDebounce } from 'use-debounce'
|
|
|
|
type Props = Omit<InputProps, 'onChange' | 'value'> & {
|
|
initialValue: string
|
|
onChange: (debouncedValue: string) => void
|
|
}
|
|
|
|
export const DebouncedInput = forwardRef(
|
|
(
|
|
{ onChange, initialValue, ...props }: Props,
|
|
ref: ForwardedRef<HTMLInputElement>
|
|
) => {
|
|
const [currentValue, setCurrentValue] = useState(initialValue)
|
|
const [debouncedValue] = useDebounce(
|
|
currentValue,
|
|
process.env.NEXT_PUBLIC_E2E_TEST ? 0 : 1000
|
|
)
|
|
|
|
useEffect(() => {
|
|
if (debouncedValue === initialValue) return
|
|
onChange(debouncedValue)
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [debouncedValue])
|
|
|
|
const handleChange = (e: ChangeEvent<HTMLInputElement>) =>
|
|
setCurrentValue(e.target.value)
|
|
|
|
return (
|
|
<Input
|
|
{...props}
|
|
ref={ref}
|
|
value={currentValue}
|
|
onChange={handleChange}
|
|
/>
|
|
)
|
|
}
|
|
)
|