2BChannelCmsBrowser/src/components/DataSearch/index.js

import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { Input, Select, Button, Icon } from 'antd';
import styles from './index.less';

export default class DataSearch extends PureComponent {
  constructor(props) {
    super(props);
    const { select, selectOptions, selectProps, keyword, field } = this.props;
    this.state = {
      selectValue: select && selectProps ? selectProps.defaultValue : '',
      inputValue: keyword || '',
      mode: field && selectOptions.filter(item => item.value === field)[0].mode || 'input',
    };
  }
  handleSearch = () => {
    const query = { keyword: this.state.inputValue };
    if (this.props.select) {
      query.field = this.state.selectValue;
    }
    this.props.onSearch && this.props.onSearch(query);
  }
  handleSelectChange = (value) => {
    // 进行模式匹配
    const { selectOptions } = this.props;
    const match = selectOptions.filter(item => item.value === value)[0];
    this.setState({
      ...this.state,
      selectValue: value,
      inputValue: '',
      mode: match.mode,
    });
  }
  handleInputChange = (e) => {
    this.setState({
      ...this.state,
      inputValue: e.target.value,
    });
  }
  handleInputSelectChange = (value) => {
    this.setState({
      ...this.state,
      inputValue: value,
    });
  }
  handleInputSelectClear = (value) => {
    if (!value) {
      this.setState({
        inputValue: '',
      }, () => this.handleSearch());
    }
  }
  handleClearInput = () => {
    this.setState({
      inputValue: '',
    }, () => this.handleSearch());
  }
  renderKeyWordComponent = () => {
    const { mode, inputValue } = this.state;
    const { size, filterSelectProps = {} } = this.props;
    const { data = [] } = filterSelectProps;
    const suffix = inputValue ? <Icon type="close-circle" onClick={this.handleClearInput} /> : null;
    const input = (
      <Input
        placeholder="请输入"
        suffix={suffix}
        onChange={this.handleInputChange}
        onPressEnter={this.handleSearch}
        size={size}
        value={inputValue}
      />
    );
    const select = (
      <Select
        allowClear
        showSearch
        size={size}
        value={inputValue}
        placeholder="请选择/请输入进行筛选"
        optionFilterProp="children"
        style={{ flexShrink: 1, flexGrow: 1 }}
        onChange={this.handleInputSelectClear}
        onSelect={this.handleInputSelectChange}
        filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
      >
        {data.map(item => <Select.Option key={item.value} value={item.value}>{item.name}</Select.Option>)}
      </Select>
    );

    switch (mode) {
      case 'input':
        return input;
        break;
      case 'select':
        return select;
        break;
      default:
        return input;
        break;
    }
  }

  render() {
    const { size, select, selectOptions, selectProps, style } = this.props;
    return (
      <Input.Group compact size={size} className={styles.search} style={style}>
        {select && (
        <Select onChange={this.handleSelectChange} size={size} {...selectProps}>
          {selectOptions && selectOptions.map((item, key) => <Option value={item.value} key={key}>{item.name || item.value}</Option>)}
        </Select>
)}
        {this.renderKeyWordComponent()}
        <Button onClick={this.handleSearch} size={size} type="primary" icon="search">搜索</Button>
      </Input.Group>
    );
  }
}