qm-ui/src/AsyncSelect.js

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

/**
 * 商品分类
 */
import React, { Component } from 'react'
import { Select } from 'antd'
import { QMFetch } from 'qm-ux'
import { splitObject } from './_util/ObjectUtil'

const Option = Select.Option

export default class AsyncSelect extends Component {
  static defaultProps = {
    host: '',
    url: '',
    optionKey: 'id',
    optionValue: 'id',
    optionTitle: 'name',

    value: [],
  }

  constructor(props) {
    super(props)
    this.state = {
      optionData: [],
    }
  }

  componentWillMount() {
    let { host, url } = this.props || {}
    this.onFetch({ host, url })
  }

  render() {
    let { optionData } = this.state
    let [{ url, optionKey, optionValue, optionTitle }, props] = splitObject(this.props, [
      'host',
      'url',
      'optionKey',
      'optionValue',
      'optionTitle',
    ])
    let optionNode = optionData
      ? optionData.map((v, k) => (
          <Option
            key={v[optionKey]}
            value={v[optionValue] || undefined}
            title={v[optionTitle] || ''}>
            {v[optionTitle] || '--'}
          </Option>
        ))
      : null

    return <Select {...props}>{optionNode}</Select>
  }

  /**
   * onChange
   */
  onChange(value) {
    this.props.onChange(value)
  }

  /**
   * 服务器异步获取数据
   *
   * @param {Object} url
   */
  onFetch({ host, url }) {
    if (typeof url === 'string' && !!url.trim()) {
      let self = this
      QMFetch({ host, url }).then(res => {
        let { data } = res || []
        self.setState({ optionData: data })
      })
    }
  }
}