qm-ui/src/SearchInput.js

千米公有云管理端UI基础组件库

import React from 'react'
import { Select } from 'antd'

const Option = Select.Option

/**
 * search input
 * @author gcy[of1518]
 */
export default class SearchInput extends React.Component {
  static defaultProps = {
    net: '', // async function
    option: {
      key: 'label', // string | function
      title: 'label', // string | function
    },
    itemLimit: 20, // number | string | array
    value: undefined, // value
    onChange: () => undefined, // onchange
  }

  constructor(props) {
    super(props)
    this.state = {
      value: props.value || '',
      data: [],
      dataSnap: [],
    }
  }

  componentWillReceiveProps(nextProps) {
    let { value } = nextProps
    if (!value) {
      this.setState({ value: '' })
    }
  }

  async componentDidMount() {
    let data = (await this.props.net()) || [] // net
    this.setState({ data, dataSnap: data })
  }

  render() {
    // option
    let { option, itemLimit, placeholder } = this.props
    let { data: options, value } = this.state
    let { key, title } = option
    options.length = Math.min(options.length, itemLimit)
    options =
      (options || []).map((o, k) => <Option value={o[key] || k}>{o[title] || ''}</Option>) || null

    return (
      <Select
        combobox
        value={value}
        placeholder={!!value ? '' : placeholder}
        notFoundContent=""
        style={this.props.style}
        defaultActiveFirstOption={false}
        showArrow={false}
        filterOption={false}
        onSearch={this.handleSearch}
        onSelect={this.handleSelect}>
        {options}
      </Select>
    )
  }

  /**
   * change对结果过滤
   */
  handleSearch = value => {
    let { option } = this.props
    let { dataSnap } = this.state
    let { key, title } = option
    let data = dataSnap.filter(v => String(v[title] || '').includes(value))
    if (!data || data.length <= 0) {
      data = [{ [key]: value, [title]: value }].concat(data)
    }
    this.setState({
      value,
      data,
    })
  }

  /**
   * select勾选完后，直接on change
   */
  handleSelect = (value, option) => {
    this.setState({ value })
    this.props.onChange(value, option)
  }
}