@m-materials/com-tree/lib/index.js

基于antd TreeSelect 下拉树结构选择器

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports["default"] = void 0;

var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));

var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));

var _react = _interopRequireDefault(require("react"));

var _lodash = require("lodash");

var _antd = require("antd");

var _reactCustomScrollbars = require("react-custom-scrollbars");

var _axios = _interopRequireDefault(require("axios"));

var _classnames = _interopRequireDefault(require("classnames"));

require("./index.css");

var _excluded = ["allowClear", "placeholder", "disabled", "searchPlaceHolder", "showSearch"];
var Search = _antd.Input.Search;
var TreeNode = _antd.Tree.TreeNode;
var childFieldKey = 'children';

var ComTree = /*#__PURE__*/function (_React$Component) {
  (0, _inheritsLoose2["default"])(ComTree, _React$Component);

  function ComTree(props) {
    var _this;

    _this = _React$Component.call(this, props) || this;

    _this.hideComboList = function (e) {
      var showTree = _this.state.showTree;
      var tDom = ReactDOM.findDOMNode(_this.comboList);

      if (showTree) {
        if (tDom && tDom.contains(e.target)) {
          _this.focus();
        } else {
          setTimeout(function () {
            _this.setState({
              showTree: false
            });
          }, 200);
        }
      }
    };

    _this.showComboList = function (showTree) {
      if (showTree) {
        var store = _this.props.store;

        if (store) {
          _this.getData();
        }

        _this.setState({
          showTree: showTree
        });
      }
    };

    _this.getReaderData = function (obj) {
      var reader = _this.props.reader;
      var data = [];

      if (reader.data) {
        data = _this.getReader(reader.data, obj) || [];
      }

      return data;
    };

    _this.getReader = function (readerField, obj) {
      var data = null;

      if (obj && typeof obj === 'object' && readerField) {
        var s = readerField.split('.');
        var d = obj[s[0]];

        for (var i = 1; i < s.length; i++) {
          d = d[s[i]];

          if (d instanceof Array && d.length > 0 && i < s.length - 1) {
            d = d[0];
          }
        }

        if (d) {
          data = d;
        }
      }

      return data;
    };

    _this.getData = function () {
      var _this$props = _this.props,
          cascadeParams = _this$props.cascadeParams,
          store = _this$props.store;

      var _ref = store || {},
          params = _ref.params;

      var superParams = (0, _extends3["default"])({}, params || {});

      if (cascadeParams) {
        _this.loaded = false;
        superParams = (0, _extends3["default"])({}, superParams, {
          cascadeParams: cascadeParams
        });
      }

      if (!_this.loaded) {
        _this.loadData(superParams);
      }
    };

    _this.loadData = function (params) {
      var _this$props2 = _this.props,
          store = _this$props2.store,
          afterLoaded = _this$props2.afterLoaded,
          reader = _this$props2.reader;

      var _ref2 = store || {},
          url = _ref2.url,
          type = _ref2.type,
          _ref2$dataPath = _ref2.dataPath,
          dataPath = _ref2$dataPath === void 0 ? 'data' : _ref2$dataPath;

      var methodType = type || 'GET';

      _this.setState({
        loading: true
      });

      var requestOptions = {
        method: methodType,
        url: url,
        headers: {
          neverCancel: true
        }
      };

      if (methodType.toLocaleLowerCase() === 'get') {
        requestOptions.params = params;
      } else {
        requestOptions.data = params;
      }

      if (url) {
        (0, _axios["default"])(requestOptions).then(function (res) {
          if (res.success) {
            var resultData = res[dataPath] || [];
            var ds = [];

            if (reader && reader.data) {
              ds = _this.getReaderData(resultData);
            } else if (resultData instanceof Array) {
              ds = resultData;
            }

            _this.data = ds;

            _this.setState({
              treeData: [].concat(ds)
            });

            if (afterLoaded && afterLoaded instanceof Function) {
              afterLoaded(ds);
            }
          }
        })["finally"](function () {
          _this.loaded = true;

          _this.setState({
            loading: false
          });
        });
      }
    };

    _this.onClearValue = function () {
      var _this$props3 = _this.props,
          afterClear = _this$props3.afterClear,
          form = _this$props3.form,
          name = _this$props3.name,
          reader = _this$props3.reader,
          _this$props3$field = _this$props3.field,
          field = _this$props3$field === void 0 ? [] : _this$props3$field;

      _this.setState({
        value: undefined
      }, function () {
        var _data;

        var data = (_data = {}, _data[name] = null, _data);

        if (reader && reader.field && field.length === reader.field.length) {
          field.forEach(function (f) {
            data[f] = null;
          });
        }

        if (form) {
          form.setFieldsValue(data);
        }

        if (afterClear && afterClear instanceof Function) {
          afterClear();
        }
      });
    };

    _this.filterNodes = function (filterName, valueKey, treeData, expandedKeys) {
      var reader = _this.props.reader;
      var childKey = reader.childKey;
      var newArr = [];
      treeData.forEach(function (treeNode) {
        var nodeChildren = treeNode[childKey] || treeNode[childFieldKey];

        var fieldValue = _this.getReader(filterName, treeNode);

        if (fieldValue.toLowerCase().indexOf(valueKey) > -1) {
          newArr.push(treeNode);
          expandedKeys.push(_this.getRowKey(treeNode));
        } else if (nodeChildren && nodeChildren.length > 0) {
          var _extends2;

          var ab = _this.filterNodes(filterName, valueKey, nodeChildren, expandedKeys);

          var obj = (0, _extends3["default"])({}, treeNode, (_extends2 = {}, _extends2[childKey || childFieldKey] = ab, _extends2));

          if (ab && ab.length > 0) {
            newArr.push(obj);
          }
        }
      });
      return newArr;
    };

    _this.getLocalFilterData = function () {
      var expKeys = _this.state.expandedKeys;
      var _this$props4 = _this.props,
          reader = _this$props4.reader,
          name = _this$props4.name;
      var newData = [].concat(_this.data);
      var expandedKeys = [].concat(expKeys);
      var searchValue = _this.quickSearchValue;

      if (searchValue) {
        var filterName = name;

        if (reader && reader.name) {
          filterName = reader.name;
        }

        newData = _this.filterNodes(filterName, searchValue.toLowerCase(), newData, expandedKeys);
      }

      return {
        treeData: newData,
        expandedKeys: expandedKeys
      };
    };

    _this.onExpand = function (expandedKeys) {
      _this.setState({
        expandedKeys: expandedKeys,
        autoExpandParent: false
      });
    };

    _this.handlerSearchChange = function (e) {
      _this.quickSearchValue = e.target.value;
    };

    _this.setCursorPosition = function (ctrl, pos) {
      if (ctrl !== null && ctrl !== void 0 && ctrl.setSelectionRange) {
        ctrl.focus();
        ctrl.setSelectionRange(pos, pos);
      } else if (ctrl !== null && ctrl !== void 0 && ctrl.createTextRange) {
        var range = ctrl.createTextRange();
        range.collapse(true);
        range.moveEnd('character', pos);
        range.moveStart('character', pos);
        range.select();
      }
    };

    _this.focus = function () {
      if (_this.searchInput && _this.searchInput.input) {
        _this.setCursorPosition(_this.searchInput.input.input, _this.quickSearchValue.length);
      }
    };

    _this.onSearch = function () {
      var _this$getLocalFilterD = _this.getLocalFilterData(),
          treeData = _this$getLocalFilterD.treeData,
          expandedKeys = _this$getLocalFilterD.expandedKeys;

      _this.setState({
        treeData: treeData,
        expandedKeys: expandedKeys,
        autoExpandParent: true
      }, _this.focus);
    };

    _this.initComboList = function (ref) {
      if (ref) {
        var width = _this.props.width;
        _this.comboList = ref;

        if (width && width > 0) {
          ref.parentNode.style.width = width + "px";
        }
      }
    };

    _this.getRowKey = function (item) {
      var _this$props$rowKey = _this.props.rowKey,
          rowKey = _this$props$rowKey === void 0 ? 'id' : _this$props$rowKey;
      var key;

      if (typeof rowKey === 'function') {
        key = rowKey(item);
      } else if (typeof rowKey === 'string') {
        key = item[rowKey];
      } else {
        key = item.key;
      }

      if (!key) {
        throw new Error('rowKey is empty');
      }

      return key;
    };

    _this.getItemBySelectedKeys = function (selectedKeys) {
      var nodeData = [];

      for (var i = 0; i < selectedKeys.length; i++) {
        _this.getTreeNodeByKey(_this.data, nodeData, selectedKeys[i]);
      }

      return nodeData;
    };

    _this.getTreeNodeByKey = function (treeNodes, nodeData, key) {
      var reader = _this.props.reader;
      var childKey = reader.childKey;

      for (var i = 0; i < treeNodes.length; i += 1) {
        var node = treeNodes[i];

        var rowKey = _this.getRowKey(node);

        var nodeChildren = node[childKey] || node[childFieldKey];

        if (rowKey === key) {
          nodeData.push(node);
        }

        if (nodeChildren && nodeChildren.length > 0) {
          _this.getTreeNodeByKey(nodeChildren, nodeData, key);
        }
      }
    };

    _this.onSelect = function (selectedKeys, e) {
      var _this$props5 = _this.props,
          afterSelect = _this$props5.afterSelect,
          reader = _this$props5.reader,
          form = _this$props5.form,
          name = _this$props5.name,
          _this$props5$field = _this$props5.field,
          field = _this$props5$field === void 0 ? [] : _this$props5$field;

      if (e.selected) {
        var selectNodes = _this.getItemBySelectedKeys(selectedKeys);

        var item = selectNodes.length > 0 ? selectNodes[0] : null;

        _this.setState({
          showTree: false,
          value: _this.getReader(reader.name, item)
        }, function () {
          var _ref3, _ref4;

          var data = name ? (_ref3 = {}, _ref3[name] = _this.getReader(reader.name, item), _ref3) : (_ref4 = {}, _ref4[reader.name] = _this.getReader(reader.name, item), _ref4);
          var formData = form ? form.getFieldsValue() : {};

          if (reader && reader.field && field.length > 0 && field.length === reader.field.length) {
            field.forEach(function (f, idx) {
              data[f] = _this.getReader(reader.field ? reader.field[idx] : '', item);
            });
          }

          Object.assign(formData, data);

          if (form) {
            debugger;
            form.setFieldsValue(formData);
          }

          if (afterSelect) {
            afterSelect(item);
          }
        });
      }
    };

    _this.renderTreeNodes = function (data) {
      var reader = _this.props.reader;
      var searchValue = _this.quickSearchValue;
      return data.map(function (item) {
        var name = reader.name,
            childKey = reader.childKey;
        var readerValue = item[name] || '';
        var readerChildren = item[childKey] || item[childFieldKey];
        var i = readerValue.indexOf(searchValue.toLowerCase());
        var beforeStr = readerValue.substr(0, i);
        var afterStr = readerValue.substr(i + searchValue.length);
        var title = i > -1 ? /*#__PURE__*/_react["default"].createElement("span", null, beforeStr, /*#__PURE__*/_react["default"].createElement("span", {
          style: {
            color: '#f50'
          }
        }, searchValue), afterStr) : /*#__PURE__*/_react["default"].createElement("span", null, readerValue);

        if (readerChildren && readerChildren.length > 0) {
          return {
            title: title,
            key: _this.getRowKey(item),
            children: _this.renderTreeNodes(readerChildren)
          };
        }

        return {
          title: title,
          key: _this.getRowKey(item)
        };
      });
    };

    var defaultValue = props.defaultValue,
        value = props.value,
        _props$dataSource = props.dataSource,
        dataSource = _props$dataSource === void 0 ? [] : _props$dataSource;
    var defaultV = value || defaultValue || undefined; // 是否已经加载完成

    _this.loaded = false;
    _this.data = [].concat(dataSource); // Dom节点

    _this.comboList; // HTMLDivElement | undefined;
    // 当前选中节点

    _this.select; // React.ReactNode;
    // 快速查询的value

    _this.quickSearchValue = ''; // string = '';
    // searchInput ref

    _this.searchInput; // any;

    _this.state = {
      value: defaultV,
      loading: false,
      showTree: false,
      treeData: dataSource,
      autoExpandParent: true,
      defaultSelectedKeys: [],
      expandedKeys: []
    };
    return _this;
  } // 鼠标移入自动加载数据


  var _proto = ComTree.prototype;

  _proto.componentDidMount = function componentDidMount() {
    document.addEventListener('mousedown', this.hideComboList, false);
    var store = this.props.store;

    if (store && store.autoLoad === true) {
      this.getData();
    }

    console.log(this.props);
  };

  _proto.componentWillUnmount = function componentWillUnmount() {
    document.removeEventListener('mousedown', this.hideComboList);
  };

  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
    if (!(0, _lodash.isEqual)(prevProps.cascadeParams, this.props.cascadeParams) || !(0, _lodash.isEqual)(prevProps.value, this.props.value)) {
      var _this$props6 = this.props,
          defaultValue = _this$props6.defaultValue,
          value = _this$props6.value;
      var defaultV = value || defaultValue || undefined;
      this.setState({
        value: defaultV
      });
    }
  };

  _proto.render = function render() {
    var _this2 = this;

    var _this$props7 = this.props,
        allowClear = _this$props7.allowClear,
        placeholder = _this$props7.placeholder,
        disabled = _this$props7.disabled,
        searchPlaceHolder = _this$props7.searchPlaceHolder,
        showSearch = _this$props7.showSearch,
        others = (0, _objectWithoutPropertiesLoose2["default"])(_this$props7, _excluded);
    var _this$state = this.state,
        loading = _this$state.loading,
        value = _this$state.value,
        treeData = _this$state.treeData,
        expandedKeys = _this$state.expandedKeys,
        autoExpandParent = _this$state.autoExpandParent,
        defaultSelectedKeys = _this$state.defaultSelectedKeys;
    return /*#__PURE__*/_react["default"].createElement("div", {
      className: "ComTree"
    }, /*#__PURE__*/_react["default"].createElement(_antd.Select, (0, _extends3["default"])({
      ref: function ref(ele) {
        return _this2.select = ele;
      },
      onDropdownVisibleChange: this.showComboList // open={showTree}
      ,
      value: value,
      allowClear: allowClear,
      placeholder: placeholder,
      onChange: this.onClearValue,
      disabled: disabled
    }, others, {
      dropdownRender: function dropdownRender() {
        return /*#__PURE__*/_react["default"].createElement("div", {
          className: (0, _classnames["default"])('seid-combo-tree'),
          ref: function ref(_ref5) {
            return _this2.initComboList(_ref5);
          }
        }, showSearch ? /*#__PURE__*/_react["default"].createElement("div", {
          className: "action-bar"
        }, /*#__PURE__*/_react["default"].createElement(Search, {
          ref: function ref(node) {
            return _this2.searchInput = node;
          },
          placeholder: searchPlaceHolder,
          onChange: _this2.handlerSearchChange,
          onSearch: _this2.onSearch,
          onPressEnter: _this2.onSearch
        })) : null, /*#__PURE__*/_react["default"].createElement("div", {
          className: "list-body"
        }, /*#__PURE__*/_react["default"].createElement(_antd.Skeleton, {
          loading: loading,
          active: true
        }, /*#__PURE__*/_react["default"].createElement(_reactCustomScrollbars.Scrollbars, {
          style: {
            height: 220
          }
        }, treeData && treeData.length === 0 ? /*#__PURE__*/_react["default"].createElement(Empty, {
          image: Empty.PRESENTED_IMAGE_SIMPLE
        }) : /*#__PURE__*/_react["default"].createElement(_antd.Tree, {
          autoExpandParent: autoExpandParent,
          expandedKeys: expandedKeys,
          defaultSelectedKeys: defaultSelectedKeys,
          onExpand: _this2.onExpand,
          onSelect: _this2.onSelect,
          treeData: _this2.renderTreeNodes(treeData)
        })))));
      }
    })));
  };

  return ComTree;
}(_react["default"].Component);

exports["default"] = ComTree;
ComTree.propTypes = {};
ComTree.defaultProps = {
  disabled: false,
  showSearch: true,
  store: null,
  dataSource: [],
  allowClear: false,
  placeholder: '',
  searchPlaceHolder: '',
  searchProperties: ['code', 'name'],
  rowKey: 'id',
  name: '',
  field: []
};