import React, { useRef } from 'react'; import { AutoComplete, Input } from 'antd'; import classNames from 'classnames'; import PropType from 'prop-types'; import useMergeValue from 'use-merge-value'; import { SearchOutlined } from '@ant-design/icons'; import styles from './index.less'; const HeaderSearch = props => { const { className, defaultValue, onVisibleChange, placeholder, open, defaultOpen, filterOption, ...restProps } = props; const inputRef = useRef(null); const [value, setValue] = useMergeValue(defaultValue, { value: props.value, onChange: props.onChange, }); const [searchMode, setSearchMode] = useMergeValue(defaultOpen || false, { value: props.open, onChange: onVisibleChange, }); const inputClass = classNames(styles.input, { [styles.show]: searchMode, }); return ( <div className={classNames(className, styles.headerSearch)} onClick={() => { setSearchMode(true); setValue(''); if (searchMode && inputRef.current) { inputRef.current.focus(); } }} onTransitionEnd={({ propertyName }) => { if (propertyName === 'width' && !searchMode) { if (onVisibleChange) { onVisibleChange(searchMode); } } }} > <SearchOutlined key="Icon" style={{ cursor: 'pointer', }} /> <AutoComplete key="AutoComplete" className={inputClass} value={value} style={{ height: 28, marginTop: -6, }} filterOption={filterOption} options={restProps.options} onChange={setValue} > <Input ref={inputRef} defaultValue={defaultValue} aria-label={placeholder} placeholder={placeholder} onKeyDown={e => { if (e.key === 'Enter') { if (restProps.onSearch) { restProps.onSearch(value); } } }} onBlur={() => { setSearchMode(false); }} /> </AutoComplete> </div> ); }; HeaderSearch.propTypes = { onSearch: PropType.func, onChange: PropType.func, onVisibleChange: PropType.func, className: PropType.string, placeholder: PropType.string, options: PropType.array, defaultOpen: PropType.bool, open: PropType.bool, defaultValue: PropType.string, value: PropType.string, }; export default HeaderSearch;