sourcecode/front/src/components/TreeSelect/index.js

import React, { Component } from 'react';
import { TreeSelect as ATreeSelect } from 'antd';
import { search } from '../../services/Tools';
import './index.less';

export default class TreeSelect extends Component {
  constructor(props) {
    super(props);
    this.nodeMap = {};
    this.closeKey = null;
    this.Select = null;
    this.ignore = props.ignore;
    this.treeData = this.getTreeData(props.treeData);
    this.state = {
      open: false,
      value: props.value,
    };
    if (props.value && props.initData) {
      props.initData([props.value]).then(list => {
        this.makeValue(list);
        this.setState({});
      });
    }
  }

  getNode(node) {
    const list = [];
    if (node.children) {
      node.children.forEach(n => {
        if (this.ignore === n.key) return;
        list.push(this.getNode(n));
      });
    }
    this.nodeMap[node.key] = {
      key: node.key,
      value: node.value === undefined ? node.key : node.value,
      title: node.title,
      children: list,
    };
    return this.nodeMap[node.key];
  }

  getTreeData(treeData) {
    if (!treeData) return [];
    const list = [];
    treeData.forEach(data => {
      if (this.ignore === data.key) return;
      list.push(this.getNode(data));
    });
    return list;
  }

  makeValue(list) {
    list.forEach(data => {
      if (!this.nodeMap[data.pKey]) {
        this.treeData.push(this.getNode(data));
      } else if (search(this.nodeMap[data.pKey].children, 'key', data.key) === -1) {
        this.nodeMap[data.pKey].children.push(this.getNode(data));
      }
    });
  }

  onSelect(value) {
    if (this.closeKey) clearTimeout(this.closeKey);
    this.Select.focus();
    if (this.props.loadData && !this.nodeMap[value].loaded) {
      this.props.loadData(value).then(list => {
        this.makeValue(list);
        this.nodeMap[value].loaded = true;
        this.setState({});
      });
    }
    return false;
  }

  onChange(value) {
    if (this.props.isNode) {
      if (this.props.isNode(value)) {
        this.props.onChange(value);
        this.updateValue(value);
      }
    } else {
      this.props.onChange(value);
      this.updateValue(value);
    }
  }

  updateValue(value) {
    this.setState({ value });
    this.close();
  }

  close() {
    this.setState({ open: false });
  }

  onDropdownVisibleChange(open) {
    if (open) {
      this.setState({ open: true });
    }
  }

  onBlur() {
    this.closeKey = setTimeout(() => {
      this.setState({ open: false });
    }, 200);
  }

  render() {
    return (
      <ATreeSelect
        {...this.props}
        className="tree-select-layout"
        ref={ref => {
          this.Select = ref;
        }}
        open={this.state.open}
        disabled={!!this.props.disabled}
        placeholder={this.props.placeholder}
        treeDefaultExpandAll
        treeData={this.treeData}
        value={this.state.value}
        onSelect={value => this.onSelect(value)}
        onChange={value => this.onChange(value)}
        onDropdownVisibleChange={e => this.onDropdownVisibleChange(e)}
        onBlur={e => this.onBlur(e)}
      />
    );
  }
}