index.js
20 lines
| 1 | import { TextControl } from '@wordpress/components'; |
| 2 | import { useEffect } from '@wordpress/element'; |
| 3 | import useDebounceState from '../../hooks/useDebounceState'; |
| 4 | |
| 5 | export default function DebouncedTextControl( props ) { |
| 6 | const [ debounceValue, setValue, value ] = useDebounceState( props?.value, 800 ); |
| 7 | |
| 8 | useEffect( () => { |
| 9 | props.onChange( debounceValue ); |
| 10 | }, [ debounceValue ] ); |
| 11 | |
| 12 | return ( |
| 13 | <TextControl |
| 14 | { ...props } |
| 15 | value={ value } |
| 16 | onChange={ setValue } |
| 17 | /> |
| 18 | ); |
| 19 | } |
| 20 |