choerodon-ui/lib/rc-components/cascader/MenusSingle.js

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

"use strict";

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

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

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

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

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

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

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

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

var _propTypes = _interopRequireDefault(require("prop-types"));

var _arrayTreeFilter = _interopRequireDefault(require("array-tree-filter"));

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

var _en_US = _interopRequireDefault(require("./locale/en_US"));

var _isFunction = _interopRequireDefault(require("lodash/isFunction"));

var _icon = _interopRequireDefault(require("../../icon"));

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 = (0, _getPrototypeOf2["default"])(Derived),
        result;

    if (isNativeReflectConstruct()) {
      var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor;
      result = Reflect.construct(Super, arguments, NewTarget);
    } else {
      result = Super.apply(this, arguments);
    }

    return (0, _possibleConstructorReturn2["default"])(this, result);
  };
}

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

  var _super = _createSuper(Menus);

  function Menus(props) {
    var _this;

    (0, _classCallCheck2["default"])(this, Menus);
    _this = _super.call(this, props);
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "saveMenuItem", function (index) {
      return function (node) {
        _this.menuItems[index] = node;
      };
    });
    _this.menuItems = {};
    return _this;
  }

  (0, _createClass2["default"])(Menus, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      this.scrollActiveItemToView();
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate(prevProps) {
      if (!prevProps.visible && this.props.visible) {
        this.scrollActiveItemToView();
      }
    }
    /**
     * render th li list
     * @param {*} option
     * @param {*} menuIndex
     */

  }, {
    key: "getOption",
    value: function getOption(option, menuIndex) {
      var _this$props = this.props,
          prefixCls = _this$props.prefixCls,
          expandTrigger = _this$props.expandTrigger,
          singleMenuItemStyle = _this$props.singleMenuItemStyle,
          selectedValues = _this$props.selectedValues;
      var onSelect = this.props.onSelect.bind(this, option, menuIndex, false);
      var expandProps = {
        onClick: function onClick() {
          return onSelect('click');
        }
      };
      var hasChildren = option.children && option.children.length > 0;
      var menuItemCls = "".concat(prefixCls, "-menu-item"); // TODO: add item style

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

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

      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.label === 'string') {
        title = option.label;
      }

      return _react["default"].createElement("li", (0, _extends2["default"])({
        key: option.key || option.value,
        className: menuItemCls,
        title: title,
        style: singleMenuItemStyle
      }, expandProps), option.label);
    }
    /**
     *  be active value is a array of items
     * @param string[] values
     */

  }, {
    key: "getActiveOptions",
    value: function getActiveOptions(values) {
      var activeValue = values || this.props.activeValue;
      var options = this.props.options;
      return (0, _arrayTreeFilter["default"])(options, function (o, level) {
        return o.value === activeValue[level];
      });
    }
  }, {
    key: "getShowOptions",
    value: function getShowOptions() {
      var options = this.props.options;
      var result = this.getActiveOptions().map(function (activeOption) {
        return activeOption.children;
      }).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 = (0, _reactDom.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.value;
    }
  }, {
    key: "getTabItem",

    /**
     * render th li list
     * @param {*} option
     * @param {*} menuIndex
     */
    value: function getTabItem(option, menuIndex) {
      var _this$props2 = this.props,
          prefixCls = _this$props2.prefixCls,
          singleMenuItemRender = _this$props2.singleMenuItemRender;
      var onSelect = this.props.onSelect.bind(this, option, menuIndex, true);
      var expandProps = {
        onClick: onSelect
      };
      var menuItemCls = "".concat(prefixCls, "-menu-tab-item");
      var label = option.label;

      if ((0, _isFunction["default"])(singleMenuItemRender)) {
        label = singleMenuItemItem(option.label);
      }

      return _react["default"].createElement("span", (0, _extends2["default"])({
        key: option.key || option.value,
        className: menuItemCls
      }, expandProps), label, _react["default"].createElement(_icon["default"], {
        type: "arrow_drop_down"
      }));
    }
  }, {
    key: "render",
    value: function render() {
      var _this3 = this;

      var _this$props3 = this.props,
          prefixCls = _this$props3.prefixCls,
          dropdownMenuColumnStyle = _this$props3.dropdownMenuColumnStyle,
          isTabSelected = _this$props3.isTabSelected,
          locale = _this$props3.locale,
          singleMenuStyle = _this$props3.singleMenuStyle,
          singlePleaseRender = _this$props3.singlePleaseRender;
      var showOptions = this.getShowOptions();
      var showOptionsIndex = showOptions.length - 1;
      var activeOptions = this.getActiveOptions();
      var dropdownMenuColumnStyleSingle = (0, _objectSpread2["default"])({}, dropdownMenuColumnStyle, {}, singleMenuStyle);
      var tabItemRender = activeOptions.map(function (item, indexItem) {
        return _this3.getTabItem(item, indexItem);
      });
      var tabItemRenderResult;

      if (showOptions && activeOptions && !isTabSelected && showOptions.length > activeOptions.length) {
        var pleaseRenderProps = {
          key: "please_check",
          className: "".concat(prefixCls, "-menu-tab-item ").concat(prefixCls, "-menu-tab-please"),
          text: locale.pleaseSelect
        };

        if ((0, _isFunction["default"])(singlePleaseRender)) {
          tabItemRenderResult = singlePleaseRender(pleaseRenderProps);
        } else {
          var pleaseItem = _react["default"].createElement("span", pleaseRenderProps, pleaseRenderProps.text, _react["default"].createElement(_icon["default"], {
            type: "arrow_drop_down"
          }));

          tabItemRenderResult = tabItemRender.length > 0 ? [].concat((0, _toConsumableArray2["default"])(tabItemRender), [pleaseItem]) : pleaseItem;
        }
      }

      if (isTabSelected) {
        showOptionsIndex = activeOptions.length - 1 < 0 ? 0 : activeOptions.length - 1;
      }

      return _react["default"].createElement("div", {
        className: "".concat(prefixCls, "-mode-single ")
      }, _react["default"].createElement("div", {
        className: "".concat(prefixCls, "-menu-tab")
      }, tabItemRenderResult || tabItemRender), _react["default"].createElement("ul", {
        className: "".concat(prefixCls, "-menu ").concat(prefixCls, "-menu-single "),
        key: showOptionsIndex,
        style: dropdownMenuColumnStyleSingle
      }, showOptions[showOptionsIndex].map(function (option) {
        return _this3.getOption(option, showOptionsIndex);
      })));
    }
  }]);
  return Menus;
}(_react.Component);

exports["default"] = Menus;
(0, _defineProperty2["default"])(Menus, "defaultProps", {
  options: [],
  value: [],
  activeValue: [],
  onSelect: function onSelect() {},
  prefixCls: 'rc-cascader-menus',
  visible: false,
  expandTrigger: 'click',
  selectedValues: [],
  isTabSelected: false,
  locale: _en_US["default"],
  singleMenuStyle: {
    width: '3rem'
  },
  singleMenuItemStyle: {
    minWidth: '1rem'
  }
});
(0, _defineProperty2["default"])(Menus, "propTypes", {
  // 选择的值
  value: _propTypes["default"].array,
  // 当前激活的值
  activeValue: _propTypes["default"].array,
  // 可选内容
  options: _propTypes["default"].array.isRequired,
  // 注入样式开头
  prefixCls: _propTypes["default"].string,
  // 触发展开事件
  expandTrigger: _propTypes["default"].string,
  // 被选择后触发
  onSelect: _propTypes["default"].func,
  // 是否可见
  visible: _propTypes["default"].bool,
  // 下拉列表的样式配置
  dropdownMenuColumnStyle: _propTypes["default"].object,
  // 标识是由于tab select 触发的事件
  isTabSelected: _propTypes["default"].bool,
  selectedValues: _propTypes["default"].array,
  locale: _propTypes["default"].object,
  singleMenuStyle: _propTypes["default"].object,
  singleMenuItemStyle: _propTypes["default"].object,
  singlePleaseRender: _propTypes["default"].func,
  singleMenuItemRender: _propTypes["default"].func
});
//# sourceMappingURL=MenusSingle.js.map