choerodon-ui/lib/rc-components/tree-select/SelectTrigger.js

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

"use strict";

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

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 _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

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

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

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

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

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

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

var _reactDom = _interopRequireDefault(require("react-dom"));

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

var _trigger = _interopRequireDefault(require("../trigger"));

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

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

var _toArray = _interopRequireDefault(require("../util/Children/toArray"));

var BUILT_IN_PLACEMENTS = {
  bottomLeft: {
    points: ['tl', 'bl'],
    offset: [0, 4],
    overflow: {
      adjustX: 0,
      adjustY: 1
    }
  },
  topLeft: {
    points: ['bl', 'tl'],
    offset: [0, -4],
    overflow: {
      adjustX: 0,
      adjustY: 1
    }
  }
};

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

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

  function SelectTrigger() {
    var _this;

    (0, _classCallCheck2["default"])(this, SelectTrigger);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _super.call.apply(_super, [this].concat(args));
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
      _expandedKeys: [],
      fireOnExpand: false,
      dropdownWidth: null
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onExpand", function (expandedKeys) {
      // rerender
      _this.setState({
        _expandedKeys: expandedKeys,
        fireOnExpand: true
      }, function () {
        if (_this.trigger && _this.trigger.forcePopupAlign) {
          _this.trigger.forcePopupAlign();
        }
      });
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "highlightTreeNode", function (treeNode) {
      var props = _this.props;
      var filterVal = treeNode.props[(0, _util.labelCompatible)(props.treeNodeFilterProp)];

      if (typeof filterVal === 'string') {
        return props.inputValue && filterVal.indexOf(props.inputValue) > -1;
      }

      return false;
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "filterTreeNode", function (input, child) {
      if (!input) {
        return true;
      }

      var filterTreeNode = _this.props.filterTreeNode;

      if (!filterTreeNode) {
        return true;
      }

      if (child.props.disabled) {
        return false;
      }

      return filterTreeNode.call((0, _assertThisInitialized2["default"])(_this), input, child);
    });
    return _this;
  }

  (0, _createClass2["default"])(SelectTrigger, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      this.setDropdownWidth();
    }
  }, {
    key: "componentWillReceiveProps",
    value: function componentWillReceiveProps(nextProps) {
      if (nextProps.inputValue && nextProps.inputValue !== this.props.inputValue) {
        // set autoExpandParent to true
        this.setState({
          _expandedKeys: [],
          fireOnExpand: false
        });
      }
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate() {
      this.setDropdownWidth();
    }
  }, {
    key: "setDropdownWidth",
    value: function setDropdownWidth() {
      var width = _reactDom["default"].findDOMNode(this).offsetWidth;

      if (width !== this.state.dropdownWidth) {
        this.setState({
          dropdownWidth: width
        });
      }
    }
  }, {
    key: "getPopupEleRefs",
    value: function getPopupEleRefs() {
      return this.popupEle;
    }
  }, {
    key: "getPopupDOMNode",
    value: function getPopupDOMNode() {
      return this.trigger.getPopupDomNode();
    }
  }, {
    key: "getDropdownTransitionName",
    value: function getDropdownTransitionName() {
      var props = this.props;
      var transitionName = props.transitionName;

      if (!transitionName && props.animation) {
        transitionName = "".concat(this.getDropdownPrefixCls(), "-").concat(props.animation);
      }

      return transitionName;
    }
  }, {
    key: "getDropdownPrefixCls",
    value: function getDropdownPrefixCls() {
      return "".concat(this.props.prefixCls, "-dropdown");
    }
  }, {
    key: "processTreeNode",
    value: function processTreeNode(treeNodes) {
      var _this2 = this;

      var filterPoss = [];
      this._expandedKeys = [];
      (0, _util.loopAllChildren)(treeNodes, function (child, index, pos) {
        if (_this2.filterTreeNode(_this2.props.inputValue, child)) {
          filterPoss.push(pos);

          _this2._expandedKeys.push(child.key);
        }
      }); // Include the filtered nodes's ancestral nodes.

      var processedPoss = [];
      filterPoss.forEach(function (pos) {
        var arr = pos.split('-');
        arr.reduce(function (pre, cur) {
          var res = "".concat(pre, "-").concat(cur);

          if (processedPoss.indexOf(res) < 0) {
            processedPoss.push(res);
          }

          return res;
        });
      });
      var filterNodesPositions = [];
      (0, _util.loopAllChildren)(treeNodes, function (child, index, pos) {
        if (processedPoss.indexOf(pos) > -1) {
          filterNodesPositions.push({
            node: child,
            pos: pos
          });
        }
      });
      var hierarchyNodes = (0, _util.flatToHierarchy)(filterNodesPositions);

      var recursive = function recursive(children) {
        return children.map(function (child) {
          if (child.children) {
            return /*#__PURE__*/(0, _react.cloneElement)(child.node, {}, recursive(child.children));
          }

          return child.node;
        });
      };

      return recursive(hierarchyNodes);
    }
  }, {
    key: "renderTree",
    value: function renderTree(keys, halfCheckedKeys, newTreeNodes, multiple) {
      var props = this.props;
      var trProps = {
        multiple: multiple,
        prefixCls: "".concat(props.prefixCls, "-tree"),
        showIcon: props.treeIcon,
        showLine: props.treeLine,
        defaultExpandAll: props.treeDefaultExpandAll,
        defaultExpandedKeys: props.treeDefaultExpandedKeys,
        filterTreeNode: this.highlightTreeNode
      };

      if (props.treeCheckable) {
        trProps.selectable = false;
        trProps.checkable = props.treeCheckable;
        trProps.onCheck = props.onSelect;
        trProps.checkStrictly = props.treeCheckStrictly;

        if (props.inputValue) {
          // enable checkStrictly when search tree.
          trProps.checkStrictly = true;
        } else {
          trProps._treeNodesStates = props._treeNodesStates;
        }

        if (trProps.treeCheckStrictly && halfCheckedKeys.length) {
          trProps.checkedKeys = {
            checked: keys,
            halfChecked: halfCheckedKeys
          };
        } else {
          trProps.checkedKeys = keys;
        }
      } else {
        trProps.selectedKeys = keys;
        trProps.onSelect = props.onSelect;
      } // expand keys


      if (!trProps.defaultExpandAll && !trProps.defaultExpandedKeys && !props.loadData) {
        trProps.expandedKeys = keys;
      }

      trProps.autoExpandParent = true;
      trProps.onExpand = this.onExpand;

      if (this._expandedKeys && this._expandedKeys.length) {
        trProps.expandedKeys = this._expandedKeys;
      }

      if (this.state.fireOnExpand) {
        trProps.expandedKeys = this.state._expandedKeys;
        trProps.autoExpandParent = false;
      } // async loadData


      if (props.loadData) {
        trProps.loadData = props.loadData;
      }

      return /*#__PURE__*/_react["default"].createElement(_tree["default"], (0, _extends2["default"])({
        ref: (0, _util.saveRef)(this, 'popupEle')
      }, trProps), newTreeNodes);
    }
  }, {
    key: "render",
    value: function render() {
      var _popupClassName;

      var props = this.props;
      var multiple = props.multiple;
      var dropdownPrefixCls = this.getDropdownPrefixCls();
      var popupClassName = (_popupClassName = {}, (0, _defineProperty2["default"])(_popupClassName, props.dropdownClassName, !!props.dropdownClassName), (0, _defineProperty2["default"])(_popupClassName, "".concat(dropdownPrefixCls, "--").concat(multiple ? 'multiple' : 'single'), 1), _popupClassName);
      var visible = props.visible;
      var search = multiple || !props.showSearch ? null : /*#__PURE__*/_react["default"].createElement("span", {
        className: "".concat(dropdownPrefixCls, "-search")
      }, props.inputElement);

      var recursive = function recursive(children) {
        // Note: if use `React.Children.map`, the node's key will be modified.
        return (0, _toArray["default"])(children).map(function handler(child) {
          // eslint-disable-line
          if (!child) {
            return null;
          }

          if (child && child.props.children) {
            // null or String has no Prop
            return /*#__PURE__*/_react["default"].createElement(_tree.TreeNode, (0, _extends2["default"])({}, child.props, {
              key: child.key
            }), recursive(child.props.children));
          }

          return /*#__PURE__*/_react["default"].createElement(_tree.TreeNode, (0, _extends2["default"])({}, child.props, {
            key: child.key
          }));
        });
      }; // const s = Date.now();


      var treeNodes;

      if (props._cachetreeData && this.treeNodes) {
        treeNodes = this.treeNodes;
      } else {
        treeNodes = recursive(props.treeData || props.treeNodes);
        this.treeNodes = treeNodes;
      } // console.log(Date.now()-s);


      if (props.inputValue) {
        treeNodes = this.processTreeNode(treeNodes);
      }

      var keys = [];
      var halfCheckedKeys = [];
      (0, _util.loopAllChildren)(treeNodes, function (child) {
        if (props.value.some(function (item) {
          return item.value === (0, _util.getValuePropValue)(child);
        })) {
          keys.push(child.key);
        }

        if (props.halfCheckedValues && props.halfCheckedValues.some(function (item) {
          return item.value === (0, _util.getValuePropValue)(child);
        })) {
          halfCheckedKeys.push(child.key);
        }
      });
      var notFoundContent;

      if (!treeNodes.length) {
        if (props.notFoundContent) {
          notFoundContent = /*#__PURE__*/_react["default"].createElement("span", {
            className: "".concat(props.prefixCls, "-not-found")
          }, props.notFoundContent);
        } else if (!search) {
          visible = false;
        }
      }

      var popupElement = /*#__PURE__*/_react["default"].createElement("div", null, search, notFoundContent || this.renderTree(keys, halfCheckedKeys, treeNodes, multiple));

      var popupStyle = (0, _objectSpread2["default"])({}, props.dropdownStyle);
      var widthProp = props.dropdownMatchSelectWidth ? 'width' : 'minWidth';

      if (this.state.dropdownWidth) {
        popupStyle[widthProp] = "".concat(this.state.dropdownWidth, "px");
      }

      return /*#__PURE__*/_react["default"].createElement(_trigger["default"], {
        action: props.disabled ? [] : ['click'],
        ref: (0, _util.saveRef)(this, 'trigger'),
        popupPlacement: "bottomLeft",
        builtinPlacements: BUILT_IN_PLACEMENTS,
        popupAlign: props.dropdownPopupAlign,
        prefixCls: dropdownPrefixCls,
        popupTransitionName: this.getDropdownTransitionName(),
        onPopupVisibleChange: props.onDropdownVisibleChange,
        popup: popupElement,
        popupVisible: visible,
        getPopupContainer: props.getPopupContainer,
        popupClassName: (0, _classnames["default"])(popupClassName),
        popupStyle: popupStyle
      }, this.props.children);
    }
  }]);
  return SelectTrigger;
}(_react.Component);

var _default = SelectTrigger;
exports["default"] = _default;
//# sourceMappingURL=SelectTrigger.js.map