import React, { useState, useEffect, useCallback, useRef } from 'react'; import { useDebounceFn } from 'ahooks'; import { Input } from 'antd'; import Icon from '@/tenants-ui/Icon'; import cx from 'classnames'; import styles from './index.less'; export default ({ placeholder, onSearch, onCancel }) => { const ref = useRef(); const [focus, setFocus] = useState(false); const [searchValue, setSearchValue] = useState(''); const { run } = useDebounceFn( (val) => { onSearch(val); }, { wait: 500, }, ); const handleClose = useCallback((e) => { if (e.keyCode === 27) { setFocus(false); setSearchValue(''); onCancel(); ref.current.blur(); } }, []); useEffect(() => { document.addEventListener('keyup', handleClose); return () => { document.removeEventListener('keyup', handleClose); }; }, []); return (