import { forwardRef , useState , useEffect , ChangeEvent } from 'react' ; import { noop } from '@proton/shared/lib/helpers/function' ; import Input , { Props as InputProps } from './Input' ; import useDebounceInput from './useDebounceInput' ; param delay param onChange param value interface Props extends Omit < InputProps , 'onChange' > { delay ? : number ; onChange ? : ( value : string ) => void ; value ? : string ; } const SearchInput = forwardRef < HTMLInputElement , Props > ( ( { delay = 200 , onChange = noop , value = '' , ... rest } , ref ) => { const [ keywords , setKeywords ] = useState ( value ) ; const words = useDebounceInput ( keywords , delay ) ; const handleChange = ( { target } ) => setKeywords ( target . value ) ; useEffect ( ( ) => { onChange ( words ) ; } , [ words ] ) ; useEffect ( ( ) => { setKeywords ( value ) ; } , [ value ] ) ; return < Input ref = { ref } value = { keywords } onChange = { handleChange } type = "search" { ... rest } />; } ) ; export default SearchInput ;