text: import React, { PureComponent } from 'react';
  import PropTypes from 'prop-types';
  import { Input, Icon, AutoComplete } from 'antd';
  import classNames from 'classnames';
  import styles from './index.less';
  
  export default class HeaderSearch extends PureComponent {
  	static defaultProps = {
  		defaultActiveFirstOption: false,
  		onPressEnter: () => {},
  		onSearch: () => {},
  		className: '',
  		placeholder: '',
  		dataSource: [],
  		defaultOpen: false,
  	};
  	static propTypes = {
  		className: PropTypes.string,
  		placeholder: PropTypes.string,
  		onSearch: PropTypes.func,
  		onPressEnter: PropTypes.func,
  		defaultActiveFirstOption: PropTypes.bool,
  		dataSource: PropTypes.array,
  		defaultOpen: PropTypes.bool,
  	};
  	state = {
  		searchMode: this.props.defaultOpen,
  		value: '',
  	};
  	componentWillUnmount() {
  		clearTimeout(this.timeout);
  	}
  	onKeyDown = e => {
  		if (e.key === 'Enter') {
  			this.timeout = setTimeout(() => {
  				this.props.onPressEnter(this.state.value); // Fix duplicate onPressEnter
  			}, 0);
  		}
  	};
  	onChange = value => {
  		this.setState({ value });
  		if (this.props.onChange) {
  			this.props.onChange();
  		}
  	};
  	enterSearchMode = () => {
  		this.setState({ searchMode: true }, () => {
  			if (this.state.searchMode) {
  				this.input.focus();
  			}
  		});
  	};
  	leaveSearchMode = () => {
  		this.setState({
  			searchMode: false,
  			value: '',
  		});
  	};
  	render() {
  		const { className, placeholder, ...restProps } = this.props;
  		delete restProps.defaultOpen; // for rc-select not affected
  		const inputClass = classNames(styles.input, {
  			[styles.show]: this.state.searchMode,
  		});
  		return (
  			<span className={classNames(className, styles.headerSearch)} onClick={this.enterSearchMode}>
  				<Icon type="search" key="Icon" />
  				<AutoComplete
  					key="AutoComplete"
  					{...restProps}
  					className={inputClass}
  					value={this.state.value}
  					onChange={this.onChange}
  				>
  					<Input
  						placeholder={placeholder}
  						ref={node => {
  							this.input = node;
  						}}
  						onKeyDown={this.onKeyDown}
  						onBlur={this.leaveSearchMode}
  					/>
  				</AutoComplete>
  			</span>
  		);
  	}
  }
  