Ant Design3.0-Select中扩展菜单

主要是业务代码量比较大，如果把antd从3.0改到4.0存在一定的风险，所以只能自己解决Select 中 扩展菜单存在的缺陷，虽然antd的开发人员已经意识到组件存在缺陷，但是他们提供的那个代码也无法运行，哎～

antd 3.0 版本中扩展菜单无法控制扩展组件，无法改成 Input，而且点一下，浮窗还会消失，所以，重新封装一个组件比较好

antd3.0中的扩展菜单是这种样式

要把他改成这样

进行了一些封装

import React, { Component } from 'react';
import { Divider, Select, Button, Input } from '@hyperchain/ql-oa-antd';

const Option = Select.Option;

class DropdownSelect extends Component {
  constructor(props) {
    super(props);

    this.state = {
      // propsValue: props.value,
      dropdownSelectProps: {
        isOpen: false,
        inputValue: '',
        isOutRegion: false
      }
    };
  }


  monitorClick = () => {
    const { dropdownSelectProps } = this.state;
    if (dropdownSelectProps.isOutRegion) {
      dropdownSelectProps.isOpen = false;
      dropdownSelectProps.isOutRegion = false;
      dropdownSelectProps.inputValue = '';
      document.removeEventListener('click', this.monitorClick);
      this.setState({
        dropdownSelectProps
      });
    }
  }


  addDropdownSelectItem = (dSelectOption, item) => {
    const { dropdownSelectProps } = this.state;
    const id = `${item.field}-input`;
    const inputValue = document.getElementById(id).value;
    if (!inputValue) {
      return;
    }

    const newItem = {
      label: inputValue,
      value: inputValue
    };
    const newOptionData = [...dSelectOption, newItem];
    item.optionData = newOptionData;
    dropdownSelectProps.inputValue = '';
    this.setState({
      dropdownSelectProps
    });
  }

  onStartMoniorClick = (flag) => {
    const { dropdownSelectProps } = this.state;
    if (flag) {
      document.addEventListener('click', this.monitorClick);
    }
    dropdownSelectProps.isOutRegion = flag;
  }

  dropInput = (v) => {
    const { dropdownSelectProps } = this.state;
    dropdownSelectProps.inputValue = v.target.value;
    this.setState({
      dropdownSelectProps
    });
  }

  onDropdownVisibleChange = dropdownSelectOpen => {
    const { dropdownSelectProps } = this.state;
    if (dropdownSelectProps.isOpen && !dropdownSelectProps.isOutRegion) {
      return;
    }
    dropdownSelectProps.isOpen = dropdownSelectOpen;
    this.setState({ dropdownSelectProps });
  };


  handleChange = (e) => {
    const { onChange } = this.props;
    onChange(e);
  };

render() {
  const { item = {}, value } = this.props;
  const { dropdownSelectProps } = this.state;
  const { showSearch = false, disabled = false, labelInValue = false, placeholder = `请选择${item.title || ''}` } = item;

  const dSelectOption = item.optionData || [];

  return (
    <Select
      defaultValue={value}
      id={item.field}
      placeholder={placeholder}
      style={{ width: '100%' }}
      disabled={disabled}
      mode="multiple"
      showSearch={showSearch}
      labelInValue={labelInValue}
      notFoundContent={null}
      onChange={this.handleChange}
      onSearch={this.handleSearch}
      onDropdownVisibleChange={this.onDropdownVisibleChange}
      open={dropdownSelectProps.isOpen}
      dropdownRender={menu => (
        <div
          onMouseLeave={() => this.onStartMoniorClick(true)}
          onMouseEnter={() => this.onStartMoniorClick(false)}
        >
          {menu}
          <Divider style={{ margin: '4px 0' }} />
          <div
            style={{ padding: '4px 8px', cursor: 'pointer', display: 'flex' }}
          >
            <Input
              id={`${item.field}-input`}
              value={dropdownSelectProps.inputValue}
              onChange={this.dropInput}
            />
            <Button
              icon="plus"
              onClick={() => this.addDropdownSelectItem(dSelectOption, item)}
              style={{ marginLeft: 8 }}
            >新增
            </Button>
          </div>
        </div>
      )}
    >
      {dSelectOption.map(el => (
        <Option key={el.value} value={el.value}>
          {el.label}
        </Option>
            ))}
    </Select>
    );
  }
}

export default DropdownSelect;