choerodon-ui/pro/lib/tree/index.js

An enterprise-class UI design language and React-based implementation

"use strict";

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

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
exports.defaultRenderer = defaultRenderer;

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

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

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

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

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

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

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

var _tslib = require("tslib");

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

var _mobxReact = require("mobx-react");

var _mobx = require("mobx");

var _defaultTo = _interopRequireDefault(require("lodash/defaultTo"));

var _noop = _interopRequireDefault(require("lodash/noop"));

var _xor = _interopRequireDefault(require("lodash/xor"));

var _isNil = _interopRequireDefault(require("lodash/isNil"));

var _tree = _interopRequireWildcard(require("../../../lib/tree"));

var _autobind = _interopRequireDefault(require("../_util/autobind"));

var _util = require("./util");

var _enum = require("../data-set/enum");

var _spin = _interopRequireDefault(require("../spin"));

var _excluded = ["dataSet", "renderer", "titleField", "treeNodeRenderer", "onTreeNode", "loadData", "async", "selectable", "filter"];

function defaultRenderer(_ref) {
  var text = _ref.text;
  return text;
}

function defaultNodeCover() {
  return {};
}

function getCheckedKeys(checkedKeys) {
  return Array.isArray(checkedKeys) ? checkedKeys : (0, _typeof2["default"])(checkedKeys) === 'object' ? checkedKeys.checked : [];
}

var Tree = /*#__PURE__*/function (_Component) {
  (0, _inherits2["default"])(Tree, _Component);

  var _super = (0, _createSuper2["default"])(Tree);

  function Tree(props, context) {
    var _this;

    (0, _classCallCheck2["default"])(this, Tree);
    _this = _super.call(this, props, context);
    _this.inCheckExpansion = false;
    (0, _mobx.runInAction)(function () {
      _this.stateCheckedKeys = [];
      _this.stateExpandedKeys = [];
      _this.stateLoadedKeys = [];
    });
    return _this;
  }

  (0, _createClass2["default"])(Tree, [{
    key: "componentWillMount",
    value: function componentWillMount() {
      this.handleDataSetLoad();
      this.processDataSetListener(true);
    }
  }, {
    key: "componentWillReceiveProps",
    value: function componentWillReceiveProps(nextProps) {
      var _this$props = this.props,
          defaultExpandAll = _this$props.defaultExpandAll,
          defaultSelectedKeys = _this$props.defaultSelectedKeys,
          defaultExpandedKeys = _this$props.defaultExpandedKeys,
          defaultCheckedKeys = _this$props.defaultCheckedKeys;

      if (defaultExpandAll !== nextProps.defaultExpandAll || defaultExpandedKeys !== nextProps.defaultExpandedKeys || defaultCheckedKeys !== nextProps.defaultCheckKeys || defaultSelectedKeys !== nextProps.defaultSelectedKeys) {
        this.processDataSetListener(false);
        this.processDataSetListener(true);
      }
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      this.processDataSetListener(false);
    }
  }, {
    key: "processDataSetListener",
    value: function processDataSetListener(flag) {
      var _this$props2 = this.props,
          dataSet = _this$props2.dataSet,
          selectable = _this$props2.selectable,
          checkable = _this$props2.checkable;

      if (dataSet) {
        var handler = flag ? dataSet.addEventListener : dataSet.removeEventListener;
        handler.call(dataSet, _enum.DataSetEvents.load, this.handleDataSetLoad);

        if (checkable && selectable === false) {
          handler.call(dataSet, _enum.DataSetEvents.batchSelect, this.handleBatchSelect);
          handler.call(dataSet, _enum.DataSetEvents.batchUnSelect, this.handleUnBatchSelect);
        }
      }
    }
  }, {
    key: "handleDataSetLoad",
    value: function handleDataSetLoad() {
      this.initDefaultExpandedRows();
      this.initDefaultCheckRows();
      this.initDefaultSelectRows();
      this.initDefaultLoadedRows();
    }
  }, {
    key: "initDefaultExpandedRows",
    value: function initDefaultExpandedRows() {
      var _this$props3 = this.props,
          defaultExpandAll = _this$props3.defaultExpandAll,
          dataSet = _this$props3.dataSet,
          defaultExpandedKeys = _this$props3.defaultExpandedKeys;
      this.stateExpandedKeys = this.dealDefaultCheckExpand(dataSet, defaultExpandedKeys, defaultExpandAll);
    }
  }, {
    key: "initDefaultCheckRows",
    value: function initDefaultCheckRows() {
      var _this$props4 = this.props,
          dataSet = _this$props4.dataSet,
          checkable = _this$props4.checkable,
          selectable = _this$props4.selectable,
          defaultCheckedKeys = _this$props4.defaultCheckedKeys;
      this.stateCheckedKeys = this.dealDefaultCheckExpand(dataSet, defaultCheckedKeys);

      if (dataSet) {
        var _dataSet$props = dataSet.props,
            checkField = _dataSet$props.checkField,
            idField = _dataSet$props.idField;

        if (checkable && selectable === false) {
          if (checkField) {
            var field = dataSet.getField(checkField);
            dataSet.forEach(function (record) {
              if (record.get(checkField) === (field ? field.get(_enum.BooleanValue.trueValue, record) : true)) {
                record.isSelected = true;
              }
            });
          } else {
            this.stateCheckedKeys = dataSet.selected.map(function (selected) {
              return String(idField ? selected.get(idField) : selected.id);
            });
          }
        }
      }
    }
  }, {
    key: "initDefaultLoadedRows",
    value: function initDefaultLoadedRows() {
      this.stateLoadedKeys = [];
    }
  }, {
    key: "initDefaultSelectRows",
    value: function initDefaultSelectRows() {
      var _this$props5 = this.props,
          dataSet = _this$props5.dataSet,
          defaultSelectedKeys = _this$props5.defaultSelectedKeys;

      if (dataSet && defaultSelectedKeys) {
        var idField = dataSet.props.idField;
        defaultSelectedKeys.map(function (selectKey) {
          var found = dataSet.find(function (record) {
            return selectKey === String(idField ? record.get(idField) : record.id);
          });

          if (found) {
            dataSet.select(found);
          }

          return null;
        });
      }
    }
    /**
     * 处理tree的props expand check的默认事件
     * @param dataSet
     * @param defaultAll
     * @param defaultKeys
     */

  }, {
    key: "dealDefaultCheckExpand",
    value: function dealDefaultCheckExpand(dataSet, defaultKeys, defaultAll) {
      var defaultStateKeys = [];

      if (dataSet) {
        var _dataSet$props2 = dataSet.props,
            idField = _dataSet$props2.idField,
            expandField = _dataSet$props2.expandField;

        if (defaultAll && !expandField) {
          defaultStateKeys = dataSet.reduce(function (array, record) {
            if (record.children) {
              array.push((0, _util.getKey)(record, idField));
            }

            return array;
          }, []);
        } else if (defaultKeys && !expandField) {
          defaultStateKeys = dataSet.reduce(function (array, record) {
            defaultKeys.map(function (key) {
              if ((0, _util.getKey)(record, idField) === key) {
                array.push(key);
              }

              return null;
            });
            return array;
          }, []);
        }
      }

      return defaultStateKeys;
    }
  }, {
    key: "expandedKeys",
    get: function get() {
      var dataSet = this.props.dataSet;

      if (dataSet) {
        var _dataSet$props3 = dataSet.props,
            expandField = _dataSet$props3.expandField,
            idField = _dataSet$props3.idField;

        if (expandField) {
          var keys = [];
          dataSet.forEach(function (record) {
            if (record.isExpanded) {
              keys.push((0, _util.getKey)(record, idField));
            }
          });
          return keys;
        }
      }

      return this.stateExpandedKeys;
    }
  }, {
    key: "checkedKeys",
    get: function get() {
      var dataSet = this.props.dataSet;

      if (dataSet) {
        var _dataSet$props4 = dataSet.props,
            checkField = _dataSet$props4.checkField,
            idField = _dataSet$props4.idField;

        if (checkField) {
          var keys = [];
          var field = dataSet.getField(checkField);
          dataSet.forEach(function (record) {
            var key = (0, _util.getKey)(record, idField);

            if (record.get(checkField) === (field ? field.get(_enum.BooleanValue.trueValue, record) : true)) {
              keys.push(key);
            }
          });
          return keys;
        }
      }

      return this.stateCheckedKeys;
    }
  }, {
    key: "selectedKeys",
    get: function get() {
      var dataSet = this.props.dataSet;

      if (dataSet) {
        var idField = dataSet.props.idField;
        return dataSet.selected.map(function (record) {
          return (0, _util.getKey)(record, idField);
        });
      }

      return [];
    }
  }, {
    key: "checkStrictly",
    get: function get() {
      var _this$props6 = this.props,
          dataSet = _this$props6.dataSet,
          checkStrictly = _this$props6.checkStrictly;

      if (dataSet && !(0, _isNil["default"])(dataSet.props.treeCheckStrictly)) {
        return dataSet.props.treeCheckStrictly;
      }

      if (dataSet && dataSet.props.checkField) {
        return false;
      }

      return checkStrictly;
    }
  }, {
    key: "setExpand",
    value: function setExpand(eventObj) {
      var dataSet = this.props.dataSet;

      if (dataSet) {
        var _dataSet$props5 = dataSet.props,
            expandField = _dataSet$props5.expandField,
            idField = _dataSet$props5.idField;

        if (expandField) {
          var node = eventObj.node,
              expanded = eventObj.expanded;
          var eventKey = node.eventKey;
          var found = dataSet.find(function (record) {
            return eventKey === (0, _util.getKey)(record, idField);
          });

          if (found) {
            found.isExpanded = !!expanded;
            return false;
          }
        }
      }

      return true;
    }
  }, {
    key: "setCheck",
    value: function setCheck(eventObj) {
      var dataSet = this.props.dataSet;

      if (dataSet) {
        var _dataSet$props6 = dataSet.props,
            checkField = _dataSet$props6.checkField,
            idField = _dataSet$props6.idField;

        if (checkField) {
          var node = eventObj.node,
              checked = eventObj.checked;
          var eventKey = node.eventKey;
          var found = dataSet.find(function (record) {
            return eventKey === String(idField ? record.get(idField) : record.id);
          });

          if (found) {
            var field = dataSet.getField(checkField);
            found.set(checkField, field ? checked ? field.get(_enum.BooleanValue.trueValue, found) : field.get(_enum.BooleanValue.falseValue, found) : checked);
            return false;
          }
        }
      }

      return true;
    }
  }, {
    key: "handleExpand",
    value: function handleExpand(expandedKeys, eventObj) {
      var _this2 = this;

      if (this.setExpand(eventObj)) {
        (0, _mobx.runInAction)(function () {
          _this2.stateExpandedKeys = expandedKeys;
        });
      }

      var _this$props$onExpand = this.props.onExpand,
          onExpand = _this$props$onExpand === void 0 ? _noop["default"] : _this$props$onExpand;
      onExpand(expandedKeys, eventObj);
    }
  }, {
    key: "handleCheck",
    value: function handleCheck(checkedKeys, eventObj, oldCheckedKeys) {
      var _this3 = this;

      var checkedKeysArr = getCheckedKeys(checkedKeys);
      var oldCheckedKeysArr = getCheckedKeys(oldCheckedKeys);
      this.inCheckExpansion = true;
      var _this$props7 = this.props,
          dataSet = _this$props7.dataSet,
          selectable = _this$props7.selectable;

      if (this.setCheck(eventObj)) {
        (0, _mobx.runInAction)(function () {
          _this3.stateCheckedKeys = checkedKeysArr;
        });
      }

      if (dataSet && selectable === false) {
        var idField = dataSet.props.idField;
        var diffKeys = (0, _xor["default"])(oldCheckedKeysArr, checkedKeysArr);
        dataSet.forEach(function (record) {
          diffKeys.forEach(function (key) {
            if ((0, _util.getKey)(record, idField) === key) {
              if (!record.isSelected) {
                dataSet.select(record);
              } else {
                dataSet.unSelect(record);
              }
            }
          });
        });
      }

      var _this$props$onCheck = this.props.onCheck,
          onCheck = _this$props$onCheck === void 0 ? _noop["default"] : _this$props$onCheck;
      onCheck(checkedKeys, eventObj, oldCheckedKeys);
      this.inCheckExpansion = false;
    }
  }, {
    key: "handleBatchSelect",
    value: function handleBatchSelect(_ref2) {
      var dataSet = _ref2.dataSet,
          records = _ref2.records;
      this.handleDataSetSelect({
        dataSet: dataSet,
        records: records
      }, true);
    }
  }, {
    key: "handleUnBatchSelect",
    value: function handleUnBatchSelect(_ref3) {
      var dataSet = _ref3.dataSet,
          records = _ref3.records;
      this.handleDataSetSelect({
        dataSet: dataSet,
        records: records
      }, false);
    }
  }, {
    key: "handleDataSetSelect",
    value: function handleDataSetSelect(_ref4, checked) {
      var _this4 = this;

      var dataSet = _ref4.dataSet,
          records = _ref4.records;

      if (!this.inCheckExpansion) {
        var _dataSet$props7 = dataSet.props,
            checkField = _dataSet$props7.checkField,
            idField = _dataSet$props7.idField;

        if (checkField) {
          var field = dataSet.getField(checkField);
          records.forEach(function (record) {
            record.set(checkField, field ? checked ? field.get(_enum.BooleanValue.trueValue, record) : field.get(_enum.BooleanValue.falseValue, record) : checked);
          });
        } else {
          (0, _mobx.runInAction)(function () {
            _this4.stateCheckedKeys = dataSet.selected.map(function (selected) {
              return String(idField ? selected.get(idField) : selected.id);
            });
          });
        }
      }
    }
  }, {
    key: "handleSelect",
    value: function handleSelect(selectedKeys, eventObj) {
      var _this$props8 = this.props,
          dataSet = _this$props8.dataSet,
          _this$props8$onSelect = _this$props8.onSelect,
          onSelect = _this$props8$onSelect === void 0 ? _noop["default"] : _this$props8$onSelect;

      if (dataSet) {
        var idField = dataSet.props.idField;
        var node = eventObj.node,
            selected = eventObj.selected;
        var eventKey = node.eventKey;
        var found = dataSet.find(function (record) {
          return eventKey === String(idField ? record.get(idField) : record.id);
        });

        if (found) {
          if (selected) {
            dataSet.select(found);
          } else {
            dataSet.unSelect(found);
          }
        }

        onSelect(selectedKeys, eventObj);
      }
    }
  }, {
    key: "handleLoadData",
    value: function handleLoadData(event) {
      var _this5 = this;

      var _this$props9 = this.props,
          dataSet = _this$props9.dataSet,
          loadData = _this$props9.loadData,
          async = _this$props9.async;
      var promises = [];

      if (async && dataSet) {
        var record = event.props.record;
        promises.push(dataSet.queryMoreChild(record));
      }

      if (loadData) {
        promises.push(loadData(event));
      }

      return Promise.all(promises).then((0, _mobx.action)(function () {
        _this5.stateLoadedKeys.push(event.key);

        _this5.handleAfterLoadData(event);
      }));
    }
  }, {
    key: "handleAfterLoadData",
    value: function handleAfterLoadData(event) {
      var _this$props10 = this.props,
          dataSet = _this$props10.dataSet,
          selectable = _this$props10.selectable;

      if (dataSet && selectable === false) {
        var _dataSet$props8 = dataSet.props,
            checkField = _dataSet$props8.checkField,
            idField = _dataSet$props8.idField;
        var loadRootRecord = dataSet.find(function (record) {
          return (0, _util.getKey)(record, idField) === String(event.key);
        });

        if (!loadRootRecord) {
          return;
        }

        var loadRecords = (0, _defaultTo["default"])(loadRootRecord.children, []);

        if (checkField) {
          var field = dataSet.getField(checkField);
          loadRecords.forEach(function (record) {
            if (record.get(checkField) === (field ? field.get(_enum.BooleanValue.trueValue, record) : true)) {
              dataSet.select(record);
            }
          });

          if (!loadRootRecord.isSelected && loadRecords.every(function (record) {
            return record.isSelected;
          })) {
            dataSet.select(loadRootRecord);
          } else if (loadRootRecord.isSelected && loadRecords.some(function (record) {
            return !record.isSelected;
          })) {
            dataSet.unSelect(loadRootRecord);
          }
        } else if (event.checked) {
          loadRecords.forEach(function (record) {
            dataSet.select(record);
          });
        }
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props11 = this.props,
          dataSet = _this$props11.dataSet,
          _this$props11$rendere = _this$props11.renderer,
          renderer = _this$props11$rendere === void 0 ? defaultRenderer : _this$props11$rendere,
          titleField = _this$props11.titleField,
          treeNodeRenderer = _this$props11.treeNodeRenderer,
          onTreeNode = _this$props11.onTreeNode,
          loadData = _this$props11.loadData,
          async = _this$props11.async,
          selectable = _this$props11.selectable,
          optionsFilter = _this$props11.filter,
          otherProps = (0, _objectWithoutProperties2["default"])(_this$props11, _excluded);

      if (dataSet) {
        var props = {};
        props.treeData = (0, _util.getTreeNodes)(dataSet, dataSet.treeData, renderer, onTreeNode || treeNodeRenderer || defaultNodeCover, async || !!loadData, titleField, optionsFilter) || [];
        props.onExpand = this.handleExpand;
        props.onCheck = this.handleCheck;
        props.onSelect = this.handleSelect;
        props.selectable = selectable;
        props.loadData = this.handleLoadData;
        props.expandedKeys = this.expandedKeys.slice();

        if (!('checkedKeys' in otherProps)) {
          props.checkedKeys = this.checkedKeys.slice();
        }

        if (!('multiple' in otherProps)) {
          props.multiple = dataSet.props.selection === _enum.DataSetSelection.multiple;
        }

        if (!('selectedKeys' in otherProps)) {
          props.selectedKeys = this.selectedKeys.slice();
        }

        if (!('loadedKeys' in otherProps)) {
          props.loadedKeys = this.stateLoadedKeys.slice();
        }

        props.checkStrictly = this.checkStrictly;
        return /*#__PURE__*/_react["default"].createElement(_spin["default"], {
          dataSet: dataSet
        }, /*#__PURE__*/_react["default"].createElement(_tree["default"], (0, _extends2["default"])({}, otherProps, props)));
      }

      return /*#__PURE__*/_react["default"].createElement(_tree["default"], (0, _extends2["default"])({}, otherProps));
    }
  }]);
  return Tree;
}(_react.Component);

Tree.displayName = 'Tree<PRO>';
Tree.TreeNode = _tree.TreeNode;
(0, _tslib.__decorate)([_mobx.observable], Tree.prototype, "stateCheckedKeys", void 0);
(0, _tslib.__decorate)([_mobx.observable], Tree.prototype, "stateExpandedKeys", void 0);
(0, _tslib.__decorate)([_mobx.observable], Tree.prototype, "stateLoadedKeys", void 0);
(0, _tslib.__decorate)([_autobind["default"]], Tree.prototype, "handleDataSetLoad", null);
(0, _tslib.__decorate)([_mobx.action], Tree.prototype, "initDefaultExpandedRows", null);
(0, _tslib.__decorate)([_mobx.action], Tree.prototype, "initDefaultCheckRows", null);
(0, _tslib.__decorate)([_mobx.action], Tree.prototype, "initDefaultLoadedRows", null);
(0, _tslib.__decorate)([_mobx.action], Tree.prototype, "initDefaultSelectRows", null);
(0, _tslib.__decorate)([_mobx.computed], Tree.prototype, "expandedKeys", null);
(0, _tslib.__decorate)([_mobx.computed], Tree.prototype, "selectedKeys", null);
(0, _tslib.__decorate)([_autobind["default"]], Tree.prototype, "handleExpand", null);
(0, _tslib.__decorate)([_autobind["default"]], Tree.prototype, "handleCheck", null);
(0, _tslib.__decorate)([_autobind["default"]], Tree.prototype, "handleBatchSelect", null);
(0, _tslib.__decorate)([_autobind["default"]], Tree.prototype, "handleUnBatchSelect", null);
(0, _tslib.__decorate)([_autobind["default"]], Tree.prototype, "handleDataSetSelect", null);
(0, _tslib.__decorate)([_autobind["default"]], Tree.prototype, "handleSelect", null);
(0, _tslib.__decorate)([_autobind["default"]], Tree.prototype, "handleLoadData", null);
(0, _tslib.__decorate)([_autobind["default"]], Tree.prototype, "handleAfterLoadData", null);
Tree = (0, _tslib.__decorate)([_mobxReact.observer], Tree);
var _default = Tree;
exports["default"] = _default;
//# sourceMappingURL=index.js.map