diff --git a/src/components/input/DebouncedTextArea.tsx b/src/components/input/DebouncedTextArea.tsx new file mode 100644 index 00000000..3df2c032 --- /dev/null +++ b/src/components/input/DebouncedTextArea.tsx @@ -0,0 +1,44 @@ +'use client'; + +import { ChangeEvent, ChangeEventHandler, useEffect, useState } from 'react'; +import { useDebounce } from 'use-debounce'; + +import TextArea, { TextAreaProps } from '@/components/input/TextArea'; + +interface DebouncedTextAreaProps extends TextAreaProps { + delay?: number; +} + +const DebouncedTextArea = (props: DebouncedTextAreaProps) => { + const { delay, onChange } = props; + + const [internalChangeEvent, setInternalChangeEvent] = + useState>(); + const [internalValue, setInternalValue] = useState(props.value); + + const [debouncedChangeEvent] = useDebounce(internalChangeEvent, delay ?? 300); + const [debouncedValue] = useDebounce(internalValue, delay ?? 300); + + const internalChangeHandler: ChangeEventHandler = ( + e + ) => { + setInternalValue(e.target.value); + setInternalChangeEvent(e); + }; + + useEffect(() => { + if (debouncedChangeEvent) { + onChange?.(debouncedChangeEvent); + } + }, [debouncedValue]); + + return ( +