choerodon-ui/pro/lib/tree-select/TreeSelect.js

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

"use strict";

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

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

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

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

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

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 _tslib = require("tslib");

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

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

var _mobx = require("mobx");

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

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

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

var _TreeNode = _interopRequireDefault(require("./TreeNode"));

var _Select2 = require("../select/Select");

var _normalizeTreeNodes = _interopRequireDefault(require("./normalizeTreeNodes"));

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

var _isIE = _interopRequireDefault(require("../_util/isIE"));

var _tree2 = require("../tree");

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

var _EventManager = require("../_util/EventManager");

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

function recordIsDisabled(record) {
  return record.get(_Select2.DISABLED_FIELD) || record.get('__treeNodeProps') && record.get('__treeNodeProps').disableCheckbox;
}

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

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

  function TreeSelect() {
    (0, _classCallCheck2["default"])(this, TreeSelect);
    return _super.apply(this, arguments);
  }

  (0, _createClass2["default"])(TreeSelect, [{
    key: "parentField",
    get: function get() {
      return this.getProp('parentField') || 'parentValue';
    }
  }, {
    key: "idField",
    get: function get() {
      return this.getProp('idField') || this.valueField;
    }
  }, {
    key: "options",
    get: function get() {
      var field = this.field,
          textField = this.textField,
          valueField = this.valueField,
          idField = this.idField,
          parentField = this.parentField,
          multiple = this.multiple,
          _this$observableProps = this.observableProps,
          children = _this$observableProps.children,
          options = _this$observableProps.options,
          getContextConfig = this.getContextConfig;
      return options || field && field.getOptions(this.record) || (0, _normalizeTreeNodes["default"])({
        textField: textField,
        valueField: valueField,
        disabledField: _Select2.DISABLED_FIELD,
        parentField: parentField,
        idField: idField,
        multiple: multiple,
        children: children,
        getConfig: getContextConfig
      });
    }
  }, {
    key: "treeData",
    get: function get() {
      return this.optionsWithCombo.filter(function (r) {
        return !r.parent;
      });
    }
  }, {
    key: "selectedKeys",
    get: function get() {
      var _this = this;

      var idField = this.idField;
      return this.options.reduce(function (array, r) {
        return _this.isSelected(r) ? array.concat(String(r.get(idField))) : array;
      }, []);
    }
  }, {
    key: "checkStrictly",
    get: function get() {
      var _this$props = this.props,
          dataSet = _this$props.dataSet,
          checkStrictly = _this$props.checkStrictly;

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

      return checkStrictly;
    }
  }, {
    key: "handleSearch",
    value: function handleSearch(text) {
      if (!(0, _Select2.isSearchTextEmpty)(text)) {
        var options = this.options;
        var idField = options.props.idField;
        this.expandedKeys = options.map(function (r) {
          return String(r.get(idField));
        });
      }
    }
  }, {
    key: "handleExpand",
    value: function handleExpand(keys) {
      this.expandedKeys = keys;
    }
  }, {
    key: "multiple",
    get: function get() {
      return !!this.getProp('multiple') || !!this.props.treeCheckable;
    }
  }, {
    key: "handleTreeSelect",
    value: function handleTreeSelect(_e, _ref) {
      var node = _ref.node;
      var record = node.record,
          disabled = node.disabled,
          key = node.key;

      if (key === _Select2.MORE_KEY) {
        var options = this.options;
        options.queryMore(options.currentPage + 1);
      } else if (!disabled) {
        var multiple = this.multiple;

        if (multiple) {
          if (this.isSelected(record)) {
            this.unChoose(record);
          } else {
            this.choose(record);
          }
        } else {
          this.choose(record);
        }
      }
    }
  }, {
    key: "handleTreeCheck",
    value: function handleTreeCheck(_e, _ref2) {
      var _this2 = this;

      var node = _ref2.node;
      var record = node.record,
          disabled = node.disabled,
          key = node.key,
          disableCheckbox = node.disableCheckbox;
      var valueField = this.valueField,
          checkStrictly = this.checkStrictly;

      if (key === _Select2.MORE_KEY) {
        var options = this.options;
        options.queryMore(options.currentPage + 1);
      } else if (!disabled && !disableCheckbox) {
        var multiple = this.multiple;

        if (multiple) {
          if (checkStrictly) {
            if (this.isSelected(record)) {
              this.unChoose(record);
            } else {
              this.choose(record);
            }

            return;
          }

          var disabledChildRecords = [];
          var records = record.treeReduce(function (array, r) {
            if (recordIsDisabled(r)) {
              disabledChildRecords.push(r);
              return array;
            }

            return _this2.isSelected(r) || r.parents.some(function (parent) {
              return disabledChildRecords.includes(parent);
            }) ? array : array.concat(r);
          }, []);
          var parents = [];
          record.parents.every(function (parent, index) {
            if (recordIsDisabled(parent)) {
              return false;
            }

            var children = parent.children;

            if (children && children.every(function (child) {
              return recordIsDisabled(child) || (index === 0 ? records.includes(child) : parents.includes(child)) || _this2.isSelected(child);
            })) {
              parents.push(parent);
              return true;
            }

            return false;
          });
          var showCheckedStrategy = this.getProp('showCheckedStrategy');

          if (showCheckedStrategy === _enum.CheckedStrategy.SHOW_ALL) {
            if (this.isSelected(record)) {
              var unChooseRecords = record.treeReduce(function (array, r) {
                return _this2.isSelected(r) && !recordIsDisabled(r) && r.parents.every(function (parent) {
                  return !disabledChildRecords.includes(parent);
                }) ? array.concat(r) : array;
              }, []);
              var disabledParentRecords = [];
              var unChooseParents = record.parents.filter(function (parent) {
                if (recordIsDisabled(parent)) {
                  disabledParentRecords.push.apply(disabledParentRecords, [parent].concat((0, _toConsumableArray2["default"])(parent.parents)));
                  return false;
                }

                return _this2.isSelected(parent) && !disabledParentRecords.includes(parent);
              });
              this.unChoose(unChooseRecords.concat(unChooseParents));
            } else {
              this.choose(records.concat(parents));
            }
          } else if (showCheckedStrategy === _enum.CheckedStrategy.SHOW_PARENT) {
            var _disabledParentRecords = [];

            if (this.isSelected(record) || record.parents.some(function (parent) {
              if (recordIsDisabled(parent)) {
                _disabledParentRecords.push.apply(_disabledParentRecords, [parent].concat((0, _toConsumableArray2["default"])(parent.parents)));
              }

              return _this2.isSelected(parent) && !recordIsDisabled(parent) && !_disabledParentRecords.includes(parent);
            })) {
              var recordFirstDisabledParent = record.parents.find(function (parent) {
                return recordIsDisabled(parent);
              });
              var selectedRecords = this.options.filter(function (option) {
                if (recordIsDisabled(option)) {
                  return _this2.isSelected(option);
                }

                if (key === option.get(valueField) || option.children && option.children.includes(record)) {
                  return false;
                }

                var firstDisabledParent = option.parents.find(function (parent) {
                  return recordIsDisabled(parent);
                });

                if (firstDisabledParent && !record.parents.includes(firstDisabledParent) || recordFirstDisabledParent && !option.parents.includes(recordFirstDisabledParent) || firstDisabledParent && recordFirstDisabledParent && (firstDisabledParent.parents.includes(recordFirstDisabledParent) || recordFirstDisabledParent.parents.includes(firstDisabledParent))) {
                  return _this2.isSelected(option);
                }

                if (firstDisabledParent && recordFirstDisabledParent === firstDisabledParent) {
                  if (record.parents.includes(option) || option.parents.includes(record)) {
                    return false;
                  }

                  if (record.parents.some(function (recordParent) {
                    return recordParent === option.parent && recordParent.parents.includes(firstDisabledParent);
                  }) && (option.parents.some(function (parent) {
                    return _this2.isSelected(parent) && parent.parents.includes(firstDisabledParent);
                  }) || _this2.isSelected(option))) {
                    return true;
                  }

                  if (option.parents.some(function (optionParent) {
                    return record.parents.includes(optionParent) && optionParent.parents.includes(firstDisabledParent);
                  }) && _this2.isSelected(option)) {
                    return true;
                  }

                  return _this2.isSelected(option);
                }

                if (record.parents.includes(option) || option.parents.includes(record)) {
                  return false;
                }

                if (option.parent && record.parents.includes(option.parent) && (option.parents.some(function (parent) {
                  return _this2.isSelected(parent);
                }) || _this2.isSelected(option))) {
                  return true;
                }

                if (option.parents.some(function (optionParent) {
                  return record.parents.includes(optionParent);
                }) && _this2.isSelected(option)) {
                  return true;
                }

                return false;
              });
              this.setValue(selectedRecords.map(this.processRecordToObject, this));
            } else {
              var preSelected = this.options.filter(function (option) {
                return _this2.isSelected(option);
              }).concat(record, parents);

              var _selectedRecords = preSelected.filter(function (child) {
                return recordIsDisabled(child) || child.parent && recordIsDisabled(child.parent) || !(child.parent && preSelected.includes(child.parent));
              });

              this.setValue(_selectedRecords.map(this.processRecordToObject, this));
            }
          } else if (showCheckedStrategy === 'SHOW_CHILD') {
            if (!record.parent) {
              var disabledRootRecords = this.options.filter(function (option) {
                return recordIsDisabled(option) && option.parents.every(function (optionParent) {
                  return !recordIsDisabled(optionParent);
                });
              });

              if (disabledRootRecords && this.options.every(function (option) {
                return recordIsDisabled(option) || option.parents.some(function (optionParent) {
                  return disabledRootRecords.includes(optionParent);
                }) || _this2.isSelected(option) && (!option.children || !!option.children && option.children.every(function (child) {
                  return disabledRootRecords.includes(child);
                })) || !!option.children && option.children.some(function (optionChild) {
                  return !recordIsDisabled(optionChild);
                });
              })) {
                var unchooseRecords = this.options.filter(function (option) {
                  return !recordIsDisabled(option) && option.parents.every(function (optionParent) {
                    return !recordIsDisabled(optionParent);
                  }) && _this2.isSelected(option);
                });
                this.unChoose(unchooseRecords);
              } else if (!disabledRootRecords && this.options.every(function (option) {
                return !option.children && _this2.isSelected(option) || !!option.children;
              })) {
                this.unChooseAll();
              } else {
                this.choose(records.filter(function (childRecord) {
                  return !childRecord.children || childRecord.children.every(function (childChild) {
                    return recordIsDisabled(childChild);
                  });
                }));
              }

              return;
            }

            if (this.isSelected(record) && (!record.children || record.children.every(function (recordChild) {
              return recordIsDisabled(recordChild);
            }))) {
              this.unChoose(record);
            } else if (!this.isSelected(record) && record.children && record.parent) {
              var allLeafChildren = [];
              var selectedChildren = [];
              record.treeReduce(function (_, r) {
                if (r.parents.every(function (parent) {
                  return !disabledChildRecords.includes(parent);
                }) && (!recordIsDisabled(r) && !r.children || r.children && r.children.every(function (recordChild) {
                  return recordIsDisabled(recordChild);
                }))) {
                  allLeafChildren.push(r);

                  if (_this2.isSelected(r)) {
                    selectedChildren.push(r);
                  }
                }

                return [];
              }, []);

              if (allLeafChildren.length === selectedChildren.length && selectedChildren.length !== 0) {
                this.unChoose(selectedChildren);
              } else {
                this.choose(records.filter(function (chooseRecord) {
                  return !chooseRecord.children || chooseRecord.children.every(function (childChild) {
                    return recordIsDisabled(childChild);
                  });
                }));
              }
            } else {
              this.choose(records.filter(function (chooseRecord) {
                return !chooseRecord.children || chooseRecord.children.every(function (childChild) {
                  return recordIsDisabled(childChild);
                });
              }));
            }
          }
        } else {
          this.choose(record);
        }
      }
    }
  }, {
    key: "handleTreeNode",
    value: function handleTreeNode(e) {
      var onOption = this.props.onOption;
      var props = onOption(e) || {};
      props.className = (0, _classnames["default"])(props.className, "".concat(this.getMenuPrefixCls(), "-item"));
      return props;
    }
  }, {
    key: "handleLoadData",
    value: function handleLoadData(event) {
      var loadData = this.props.loadData;
      var dataSet = this.options;
      var promises = [];

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

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

      return Promise.all(promises);
    }
  }, {
    key: "renderSelectAll",
    value: function renderSelectAll() {// noop
    }
  }, {
    key: "getMenu",
    value: function getMenu() {
      var menuProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
      var options = this.options;
      var menuPrefixCls = this.getMenuPrefixCls();
      var menuDisabled = this.disabled,
          textField = this.textField,
          selectedKeys = this.selectedKeys,
          expandedKeys = this.expandedKeys,
          multiple = this.multiple,
          text = this.text,
          checkStrictly = this.checkStrictly,
          optionsFilter = this.optionsFilter,
          _this$props2 = this.props,
          dropdownMenuStyle = _this$props2.dropdownMenuStyle,
          _this$props2$optionRe = _this$props2.optionRenderer,
          optionRenderer = _this$props2$optionRe === void 0 ? _tree2.defaultRenderer : _this$props2$optionRe,
          treeDefaultExpandAll = _this$props2.treeDefaultExpandAll,
          treeDefaultExpandedKeys = _this$props2.treeDefaultExpandedKeys,
          treeCheckable = _this$props2.treeCheckable,
          async = _this$props2.async,
          loadData = _this$props2.loadData;
      /**
       * fixed when ie the scroll width would cover the item width
       */

      var IeMenuStyle = !this.dropdownMatchSelectWidth && (0, _isIE["default"])() ? {
        padding: '.08rem'
      } : {};
      var treeData = (0, _util.getTreeNodes)(options, this.treeData, optionRenderer, this.handleTreeNode, async || !!loadData, textField, optionsFilter, this.matchRecordBySearch, text);

      if (!treeData || !treeData.length) {
        return /*#__PURE__*/_react["default"].createElement("div", {
          className: menuPrefixCls
        }, /*#__PURE__*/_react["default"].createElement("div", {
          className: "".concat(menuPrefixCls, "-item ").concat(menuPrefixCls, "-item-disabled")
        }, this.loading ? ' ' : this.getNotFoundContent()));
      }

      if (options.paging && options.currentPage < options.totalPage) {
        treeData.push({
          key: _Select2.MORE_KEY,
          eventKey: _Select2.MORE_KEY,
          title: this.getPagingOptionContent(),
          className: "".concat(menuPrefixCls, "-item ").concat(menuPrefixCls, "-item-more"),
          isLeaf: true
        });
      }

      var props = {};

      if (expandedKeys) {
        props.expandedKeys = expandedKeys.slice();
      }

      return /*#__PURE__*/_react["default"].createElement(_tree["default"], (0, _extends2["default"])({
        ref: this.saveMenu,
        ripple: true,
        disabled: menuDisabled,
        onMouseDown: _EventManager.preventDefault,
        onSelect: treeCheckable ? this.handleTreeCheck : this.handleTreeSelect,
        onCheck: this.handleTreeCheck,
        onExpand: this.handleExpand,
        style: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, IeMenuStyle), dropdownMenuStyle),
        selectable: true,
        focusable: false,
        treeData: treeData,
        defaultExpandAll: treeDefaultExpandAll,
        defaultExpandedKeys: treeDefaultExpandedKeys,
        selectedKeys: selectedKeys,
        checkedKeys: selectedKeys,
        checkable: treeCheckable,
        className: menuPrefixCls,
        multiple: multiple,
        loadData: async ? this.handleLoadData : loadData,
        checkStrictly: checkStrictly
      }, props, menuProps));
    }
  }]);
  return TreeSelect;
}(_Select2.Select);

TreeSelect.displayName = 'TreeSelect';
TreeSelect.defaultProps = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, _Select2.Select.defaultProps), {}, {
  suffixCls: 'tree-select',
  dropdownMatchSelectWidth: false,
  showCheckedStrategy: 'SHOW_ALL',
  reverse: false
});
TreeSelect.TreeNode = _TreeNode["default"];
(0, _tslib.__decorate)([_mobx.observable], TreeSelect.prototype, "expandedKeys", void 0);
(0, _tslib.__decorate)([_mobx.computed], TreeSelect.prototype, "parentField", null);
(0, _tslib.__decorate)([_mobx.computed], TreeSelect.prototype, "idField", null);
(0, _tslib.__decorate)([_mobx.computed], TreeSelect.prototype, "options", null);
(0, _tslib.__decorate)([_mobx.computed], TreeSelect.prototype, "treeData", null);
(0, _tslib.__decorate)([_mobx.computed], TreeSelect.prototype, "selectedKeys", null);
(0, _tslib.__decorate)([_mobx.action], TreeSelect.prototype, "handleSearch", null);
(0, _tslib.__decorate)([_autobind["default"], _mobx.action], TreeSelect.prototype, "handleExpand", null);
(0, _tslib.__decorate)([_mobx.computed], TreeSelect.prototype, "multiple", null);
(0, _tslib.__decorate)([_autobind["default"]], TreeSelect.prototype, "handleTreeSelect", null);
(0, _tslib.__decorate)([_autobind["default"]], TreeSelect.prototype, "handleTreeCheck", null);
(0, _tslib.__decorate)([_autobind["default"]], TreeSelect.prototype, "handleTreeNode", null);
(0, _tslib.__decorate)([_autobind["default"]], TreeSelect.prototype, "handleLoadData", null);
(0, _tslib.__decorate)([_autobind["default"]], TreeSelect.prototype, "getMenu", null);
TreeSelect = (0, _tslib.__decorate)([_mobxReact.observer], TreeSelect);
var _default = TreeSelect;
exports["default"] = _default;
//# sourceMappingURL=TreeSelect.js.map