import useDebouncedCallback from '../hooks/use-debounced-callback';
import { Icon, Button } from '@elementor/app-ui';
import { useState, useEffect } from 'react';
import './search-input.scss';
export default function SearchInput( props ) {
const [ localValue, setLocalValue ] = useState( props.value || '' );
const debouncedOnChange = useDebouncedCallback( ( value ) => props.onChange( value ), props.debounceTimeout );
useEffect( () => {
if ( props.value !== localValue ) {
setLocalValue( props.value );
}
}, [ props.value ] );
return (
<div className={ `eps-search-input__container ${ props.className }` }>
<input
className={ `eps-search-input eps-search-input--${ props.size }` }
placeholder={ props.placeholder }
value={ localValue }
onChange={ ( e ) => {
setLocalValue( e.target.value );
debouncedOnChange( e.target.value );
} }
/>
<Icon className={ `eicon-search-bold eps-search-input__icon eps-search-input__icon--${ props.size }` } />
{
props.value &&
<Button
text={ __( 'Clear', 'elementor' ) }
hideText={ true }
className={ `eicon-close-circle eps-search-input__clear-icon eps-search-input__clear-icon--${ props.size }` }
onClick={ () => props.onChange( '' ) }
/>
}
</div>
);
}
SearchInput.propTypes = {
placeholder: PropTypes.string,
value: PropTypes.string.isRequired,
onChange: PropTypes.func.isRequired,
className: PropTypes.string,
size: PropTypes.oneOf( [ 'md', 'sm' ] ),
debounceTimeout: PropTypes.number,
};
SearchInput.defaultProps = {
className: '',
size: 'md',
debounceTimeout: 300,
};