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

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

import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _extends from "@babel/runtime/helpers/extends";
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _inherits from "@babel/runtime/helpers/inherits";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";

function _createSuper(Derived) {
  function isNativeReflectConstruct() {
    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
    if (Reflect.construct.sham) return false;
    if (typeof Proxy === "function") return true;

    try {
      Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
      return true;
    } catch (e) {
      return false;
    }
  }

  return function () {
    var Super = _getPrototypeOf(Derived),
        result;

    if (isNativeReflectConstruct()) {
      var NewTarget = _getPrototypeOf(this).constructor;

      result = Reflect.construct(Super, arguments, NewTarget);
    } else {
      result = Super.apply(this, arguments);
    }

    return _possibleConstructorReturn(this, result);
  };
}

import { __decorate } from "tslib";
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { action, computed, observable } from 'mobx';
import { observer } from 'mobx-react';
import Tree from '../../../es/tree';
import TreeNode from './TreeNode';
import { DISABLED_FIELD, MORE_KEY, Select } from '../select/Select';
import normalizeTreeNodes from './normalizeTreeNodes';
import autobind from '../_util/autobind';
import isIE from '../_util/isIE';
import { defaultRenderer } from '../tree';
import { getTreeNodes } from '../tree/util';
import Icon from '../icon';

var TreeSelect =
/*#__PURE__*/
function (_Select) {
  _inherits(TreeSelect, _Select);

  var _super = _createSuper(TreeSelect);

  function TreeSelect() {
    var _this;

    _classCallCheck(this, TreeSelect);

    _this = _super.apply(this, arguments);
    _this.stateForceRenderKeys = [];
    return _this;
  }

  _createClass(TreeSelect, [{
    key: "handleSearch",
    value: function handleSearch(text) {
      if (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: "handleTreeSelect",
    value: function handleTreeSelect(_e, _ref) {
      var _this2 = this;

      var node = _ref.node;
      var record = node.record,
          disabled = node.disabled,
          key = node.key;

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

        if (multiple) {
          if (this.isSelected(record)) {
            var records = record.treeReduce(function (array, r) {
              return _this2.isSelected(r) ? array.concat(r) : array;
            }, []);
            var parents = record.parents.filter(function (parent) {
              return _this2.isSelected(parent);
            });
            this.unChoose(records.concat(parents));
          } else {
            var _records = record.treeReduce(function (array, r) {
              return _this2.isSelected(r) ? array : array.concat(r);
            }, []);

            var _parents = [];
            record.parents.every(function (parent, index) {
              var children = parent.children;

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

                return true;
              }

              return false;
            });
            this.choose(_records.concat(_parents));
          }
        } else {
          this.choose(record);
        }
      }
    }
  }, {
    key: "handleTreeNode",
    value: function handleTreeNode(e) {
      var onOption = this.props.onOption;
      var props = onOption(e) || {};
      props.className = classNames(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 _dataSet$props = dataSet.props,
            idField = _dataSet$props.idField,
            parentField = _dataSet$props.parentField;
        var record = event.props.record;

        if (idField && parentField && record && !record.children) {
          var id = record.get(idField);
          promises.push(dataSet.queryMore(-1, _defineProperty({}, parentField, id)));
        }
      }

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

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

      var IeMenuStyle = !this.dropdownMatchSelectWidth && isIE() ? {
        padding: '.08rem'
      } : {};
      var treeData = getTreeNodes(options, this.treeData, _toConsumableArray(forceRenderKeys.values()), optionRenderer, // @ts-ignore
      this.handleTreeNode, async || !!loadData, textField, treeDefaultExpandAll, optionsFilter, this.matchRecordBySearch, text);

      if (!treeData || !treeData.length) {
        return React.createElement("div", {
          className: menuPrefixCls
        }, React.createElement("div", {
          className: "".concat(menuPrefixCls, "-item ").concat(menuPrefixCls, "-item-disabled")
        }, this.loading ? ' ' : this.getNotFoundContent()));
      }

      if (options.paging && options.currentPage < options.totalPage) {
        treeData.push({
          key: MORE_KEY,
          eventKey: MORE_KEY,
          title: React.createElement(Icon, {
            type: "more_horiz"
          }),
          className: "".concat(this.getMenuPrefixCls(), "-item ").concat(menuPrefixCls, "-item-more"),
          isLeaf: true
        });
      }

      var props = {};

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

      return React.createElement(Tree, _extends({
        ref: this.saveMenu,
        ripple: true,
        disabled: menuDisabled,
        onSelect: this.handleTreeSelect,
        onCheck: this.handleTreeSelect,
        onExpand: this.handleExpand,
        style: _objectSpread({}, IeMenuStyle, {}, dropdownMenuStyle),
        selectable: true,
        focusable: false,
        treeData: treeData,
        defaultExpandAll: treeDefaultExpandAll,
        defaultExpandedKeys: treeDefaultExpandedKeys,
        selectedKeys: selectedKeys,
        checkedKeys: selectedKeys,
        checkable: 'treeCheckable' in this.props ? treeCheckable : multiple,
        className: menuPrefixCls,
        multiple: multiple,
        loadData: async ? this.handleLoadData : loadData
      }, props, menuProps));
    }
  }, {
    key: "forceRenderKeys",
    get: function get() {
      if (this.expandedKeys) {
        this.stateForceRenderKeys = _toConsumableArray(new Set([].concat(_toConsumableArray(this.stateForceRenderKeys), _toConsumableArray(this.expandedKeys))));
      } else {
        this.stateForceRenderKeys = this.props.treeDefaultExpandedKeys || [];
      }

      return this.stateForceRenderKeys;
    }
  }, {
    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;
      return options || field && field.options || normalizeTreeNodes({
        textField: textField,
        valueField: valueField,
        disabledField: DISABLED_FIELD,
        parentField: parentField,
        idField: idField,
        multiple: multiple,
        children: children
      });
    }
  }, {
    key: "treeData",
    get: function get() {
      return this.optionsWithCombo.filter(function (r) {
        return !r.parent;
      });
    }
  }, {
    key: "selectedKeys",
    get: function get() {
      var _this3 = this;

      var idField = this.idField;
      return this.options.reduce(function (array, r) {
        return _this3.isSelected(r) ? array.concat(String(r.get(idField))) : array;
      }, []);
    }
  }]);

  return TreeSelect;
}(Select);

TreeSelect.displayName = 'TreeSelect';
TreeSelect.propTypes = _objectSpread({
  treeCheckable: PropTypes.bool,
  treeDefaultExpandAll: PropTypes.bool,
  treeDefaultExpandedKeys: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]))
}, Select.propTypes);
TreeSelect.defaultProps = _objectSpread({}, Select.defaultProps, {
  suffixCls: 'tree-select',
  dropdownMatchSelectWidth: false,
  reverse: false
});
TreeSelect.TreeNode = TreeNode;

__decorate([observable], TreeSelect.prototype, "expandedKeys", void 0);

__decorate([computed], TreeSelect.prototype, "forceRenderKeys", null);

__decorate([computed], TreeSelect.prototype, "parentField", null);

__decorate([computed], TreeSelect.prototype, "idField", null);

__decorate([computed], TreeSelect.prototype, "options", null);

__decorate([computed], TreeSelect.prototype, "treeData", null);

__decorate([computed], TreeSelect.prototype, "selectedKeys", null);

__decorate([action], TreeSelect.prototype, "handleSearch", null);

__decorate([autobind, action], TreeSelect.prototype, "handleExpand", null);

__decorate([autobind], TreeSelect.prototype, "handleTreeSelect", null);

__decorate([autobind], TreeSelect.prototype, "handleTreeNode", null);

__decorate([autobind], TreeSelect.prototype, "handleLoadData", null);

__decorate([autobind], TreeSelect.prototype, "getMenu", null);

TreeSelect = __decorate([observer], TreeSelect);
export default TreeSelect;
//# sourceMappingURL=TreeSelect.js.map