text: import React, { PureComponent } from 'react';
  import PropTypes from 'prop-types';
  import { Input, Icon, AutoComplete } from 'antd';
  import classNames from 'classnames';
  import Debounce from 'lodash-decorators/debounce';
  import Bind from 'lodash-decorators/bind';
  import styles from './index.less';
  
  export default class HeaderSearch extends PureComponent {
    static propTypes = {
      className: PropTypes.string,
      placeholder: PropTypes.string,
      onSearch: PropTypes.func,
      onPressEnter: PropTypes.func,
      defaultActiveFirstOption: PropTypes.bool,
      dataSource: PropTypes.array,
      defaultOpen: PropTypes.bool,
      onVisibleChange: PropTypes.func,
    };
  
    static defaultProps = {
      defaultActiveFirstOption: false,
      onPressEnter: () => {},
      onSearch: () => {},
      className: '',
      placeholder: '',
      dataSource: [],
      defaultOpen: false,
      onVisibleChange: () => {},
    };
  
    static getDerivedStateFromProps(props) {
      if ('open' in props) {
        return {
          searchMode: props.open,
        };
      }
      return null;
    }
  
    constructor(props) {
      super(props);
      this.state = {
        searchMode: props.defaultOpen,
        value: '',
      };
    }
  
    componentWillUnmount() {
      clearTimeout(this.timeout);
    }
  
    onKeyDown = e => {
      if (e.key === 'Enter') {
        const { onPressEnter } = this.props;
        const { value } = this.state;
        this.timeout = setTimeout(() => {
          onPressEnter(value); // Fix duplicate onPressEnter
        }, 0);
      }
    };
  
    onChange = value => {
      const { onChange } = this.props;
      this.setState({ value });
      if (onChange) {
        onChange(value);
      }
    };
  
    enterSearchMode = () => {
      const { onVisibleChange } = this.props;
      onVisibleChange(true);
      this.setState({ searchMode: true }, () => {
        const { searchMode } = this.state;
        if (searchMode) {
          this.input.focus();
        }
      });
    };
  
    leaveSearchMode = () => {
      this.setState({
        searchMode: false,
        value: '',
      });
    };
  
    // NOTE: 不能小于500，如果长按某键，第一次触发auto repeat的间隔是500ms，小于500会导致触发2次
    @Bind()
    @Debounce(500, {
      leading: true,
      trailing: false,
    })
    debouncePressEnter() {
      const { onPressEnter } = this.props;
      const { value } = this.state;
      onPressEnter(value);
    }
  
    render() {
      const { className, placeholder, open, ...restProps } = this.props;
      const { searchMode, value } = this.state;
      delete restProps.defaultOpen; // for rc-select not affected
      const inputClass = classNames(styles.input, {
        [styles.show]: searchMode,
      });
      return (
        <span
          className={classNames(className, styles.headerSearch)}
          onClick={this.enterSearchMode}
          onTransitionEnd={({ propertyName }) => {
            if (propertyName === 'width' && !searchMode) {
              const { onVisibleChange } = this.props;
              onVisibleChange(searchMode);
            }
          }}
        >
          <Icon type="search" key="Icon" />
          <AutoComplete
            key="AutoComplete"
            {...restProps}
            className={inputClass}
            value={value}
            onChange={this.onChange}
          >
            <Input
              ref={node => {
                this.input = node;
              }}
              aria-label={placeholder}
              placeholder={placeholder}
              onKeyDown={this.onKeyDown}
              onBlur={this.leaveSearchMode}
            />
          </AutoComplete>
        </span>
      );
    }
  }
  