choerodon-ui/es/rc-components/cascader/Menus.js

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

import _extends from "@babel/runtime/helpers/extends";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/inherits";
import _createSuper from "@babel/runtime/helpers/createSuper";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import React, { Component } from 'react';
import arrayTreeFilter from 'array-tree-filter';
import { findDOMNode } from 'react-dom';
import Icon from '../../icon';

var Menus = /*#__PURE__*/function (_Component) {
  _inherits(Menus, _Component);

  var _super = _createSuper(Menus);

  function Menus(props) {
    var _this;

    _classCallCheck(this, Menus);

    _this = _super.call(this, props);

    _defineProperty(_assertThisInitialized(_this), "saveMenuItem", function (index) {
      return function (node) {
        _this.menuItems[index] = node;
      };
    });

    _this.menuItems = {};
    return _this;
  }

  _createClass(Menus, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      this.scrollActiveItemToView();
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate(prevProps) {
      if (!prevProps.visible && this.props.visible) {
        this.scrollActiveItemToView();
      }
    }
  }, {
    key: "expandIcon",
    get: function get() {
      var expandIcon = this.props.expandIcon;

      if (expandIcon) {
        return expandIcon;
      }

      return /*#__PURE__*/React.createElement(Icon, {
        type: "navigate_next"
      });
    }
  }, {
    key: "getFieldName",
    value: function getFieldName(name) {
      var _this$props = this.props,
          fieldNames = _this$props.fieldNames,
          defaultFieldNames = _this$props.defaultFieldNames; // 防止只设置单个属性的名字

      return fieldNames[name] || defaultFieldNames[name];
    }
  }, {
    key: "getOption",
    value: function getOption(option, menuIndex) {
      var _this$props2 = this.props,
          prefixCls = _this$props2.prefixCls,
          expandTrigger = _this$props2.expandTrigger,
          selectedValues = _this$props2.selectedValues;
      var expandIcon = this.expandIcon;
      var onSelect = this.props.onSelect.bind(this, option, menuIndex, false);
      var expandProps = {
        onClick: function onClick() {
          return onSelect('click');
        }
      };
      var menuItemCls = "".concat(prefixCls, "-menu-item");
      var expandIconNode = null;
      var childrenField = this.getFieldName('children');
      var labelField = this.getFieldName('label');
      var valueField = this.getFieldName('value');
      var hasChildren = option[childrenField] && option[childrenField].length > 0;

      if (hasChildren || option.isLeaf === false) {
        menuItemCls += " ".concat(prefixCls, "-menu-item-expand");
        expandIconNode = /*#__PURE__*/React.createElement("span", {
          className: "".concat(prefixCls, "-menu-item-expand-icon")
        }, expandIcon);
      }

      if (selectedValues.findIndex(function (item) {
        return item === option.value;
      }) > -1) {
        menuItemCls += " ".concat(prefixCls, "-menu-item-selected");
      }

      if (expandTrigger === 'hover' && (hasChildren || option.isLeaf === false)) {
        expandProps = {
          onMouseEnter: this.delayOnSelect.bind(this, onSelect),
          onMouseLeave: this.delayOnSelect.bind(this),
          onClick: function onClick() {
            return onSelect('click');
          }
        };
      }

      if (this.isActiveOption(option, menuIndex)) {
        menuItemCls += " ".concat(prefixCls, "-menu-item-active");
        expandProps.ref = this.saveMenuItem(menuIndex);
      }

      if (option.disabled) {
        menuItemCls += " ".concat(prefixCls, "-menu-item-disabled");
      }

      if (option.loading) {
        menuItemCls += " ".concat(prefixCls, "-menu-item-loading");
      }

      var title = '';

      if (option.title) {
        title = option.title;
      } else if (typeof option[labelField] === 'string') {
        title = option[labelField];
      }

      return /*#__PURE__*/React.createElement("li", _extends({
        key: option.key || option[valueField],
        className: menuItemCls,
        title: title
      }, expandProps), option[labelField], expandIconNode);
    }
  }, {
    key: "getActiveOptions",
    value: function getActiveOptions(values) {
      var activeValue = values || this.props.activeValue;
      var options = this.props.options;
      var childrenField = this.getFieldName('children');
      var valueField = this.getFieldName('value');
      return arrayTreeFilter(options, function (o, level) {
        return o[valueField] === activeValue[level];
      }, {
        childrenKeyName: childrenField
      });
    }
  }, {
    key: "getShowOptions",
    value: function getShowOptions() {
      var options = this.props.options;
      var childrenField = this.getFieldName('children');
      var result = this.getActiveOptions().map(function (activeOption) {
        return activeOption[childrenField];
      }).filter(function (activeOption) {
        return !!activeOption;
      });
      result.unshift(options);
      return result;
    }
  }, {
    key: "delayOnSelect",
    value: function delayOnSelect(onSelect) {
      var _this2 = this;

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

      if (this.delayTimer) {
        clearTimeout(this.delayTimer);
        this.delayTimer = null;
      }

      if (typeof onSelect === 'function') {
        this.delayTimer = setTimeout(function () {
          onSelect('hover', args);
          _this2.delayTimer = null;
        }, 150);
      }
    }
  }, {
    key: "scrollActiveItemToView",
    value: function scrollActiveItemToView() {
      // scroll into view
      var optionsLength = this.getShowOptions().length;

      for (var i = 0; i < optionsLength; i++) {
        var itemComponent = this.menuItems[i];

        if (itemComponent) {
          var target = findDOMNode(itemComponent);
          target.parentNode.scrollTop = target.offsetTop;
        }
      }
    }
  }, {
    key: "isActiveOption",
    value: function isActiveOption(option, menuIndex) {
      var _this$props$activeVal = this.props.activeValue,
          activeValue = _this$props$activeVal === void 0 ? [] : _this$props$activeVal;
      return activeValue[menuIndex] === option[this.getFieldName('value')];
    }
  }, {
    key: "render",
    value: function render() {
      var _this3 = this;

      var _this$props3 = this.props,
          prefixCls = _this$props3.prefixCls,
          dropdownMenuColumnStyle = _this$props3.dropdownMenuColumnStyle;
      return /*#__PURE__*/React.createElement("div", {
        className: "".concat(prefixCls, "-mode-multiple")
      }, this.getShowOptions().map(function (options, menuIndex) {
        return /*#__PURE__*/React.createElement("ul", {
          className: "".concat(prefixCls, "-menu"),
          key: menuIndex,
          style: dropdownMenuColumnStyle
        }, options.map(function (option) {
          return _this3.getOption(option, menuIndex);
        }));
      }));
    }
  }]);

  return Menus;
}(Component);

_defineProperty(Menus, "defaultProps", {
  options: [],
  value: [],
  activeValue: [],
  onSelect: function onSelect() {},
  prefixCls: 'rc-cascader-menus',
  visible: false,
  selectedValues: [],
  expandTrigger: 'click'
});

export { Menus as default };
//# sourceMappingURL=Menus.js.map