rsuite/lib/Dropdown/DropdownMenu.js

A suite of react components

"use strict";

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

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

exports.__esModule = true;
exports.default = void 0;

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

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

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

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

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

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

var _Collapse = _interopRequireDefault(require("../Animation/Collapse"));

var _shallowEqual = _interopRequireDefault(require("../utils/shallowEqual"));

var _DropdownMenuItem = _interopRequireDefault(require("./DropdownMenuItem"));

var _Icon = _interopRequireDefault(require("../Icon"));

var _Ripple = _interopRequireDefault(require("../Ripple"));

var _utils = require("../utils");

var _mergeRefs = _interopRequireDefault(require("../utils/mergeRefs"));

var DropdownMenu =
/*#__PURE__*/
function (_React$Component) {
  (0, _inheritsLoose2.default)(DropdownMenu, _React$Component);

  function DropdownMenu() {
    var _this;

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

    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;

    _this.handleToggleChange = function (eventKey, event) {
      var _this$props$onToggle, _this$props;

      (_this$props$onToggle = (_this$props = _this.props).onToggle) === null || _this$props$onToggle === void 0 ? void 0 : _this$props$onToggle.call(_this$props, eventKey, event);
    };

    _this.addPrefix = function (name) {
      return (0, _utils.prefix)(_this.props.classPrefix)(name);
    };

    return _this;
  }

  var _proto = DropdownMenu.prototype;

  _proto.getMenuItemsAndStatus = function getMenuItemsAndStatus(children) {
    var _this2 = this;

    var hasActiveItem;
    var _this$props2 = this.props,
        activeKey = _this$props2.activeKey,
        onSelect = _this$props2.onSelect,
        classPrefix = _this$props2.classPrefix,
        _this$props2$openKeys = _this$props2.openKeys,
        openKeys = _this$props2$openKeys === void 0 ? [] : _this$props2$openKeys;
    var items = React.Children.map(children, function (item, index) {
      var _item$type;

      if (!item) {
        return null;
      }

      var displayName = item === null || item === void 0 ? void 0 : (_item$type = item.type) === null || _item$type === void 0 ? void 0 : _item$type.displayName;
      var active;

      if (~(displayName === null || displayName === void 0 ? void 0 : displayName.indexOf('(DropdownMenuItem)')) || ~(displayName === null || displayName === void 0 ? void 0 : displayName.indexOf('(DropdownMenu)'))) {
        active = _this2.isActive(item.props, activeKey);

        if (active) {
          hasActiveItem = true;
        }
      }

      if (~(displayName === null || displayName === void 0 ? void 0 : displayName.indexOf('(DropdownMenuItem)'))) {
        var onItemSelect = item.props.onSelect;
        return React.cloneElement(item, {
          key: index,
          active: active,
          onSelect: (0, _utils.createChainedFunction)(onSelect, onItemSelect)
        });
      } else if (~(displayName === null || displayName === void 0 ? void 0 : displayName.indexOf('(DropdownMenu)'))) {
        var _classNames;

        var itemsAndStatus = _this2.getMenuItemsAndStatus(item.props.children);

        var _item$props = item.props,
            icon = _item$props.icon,
            open = _item$props.open,
            trigger = _item$props.trigger,
            pullLeft = _item$props.pullLeft,
            eventKey = _item$props.eventKey,
            title = _item$props.title,
            className = _item$props.className;
        var expanded = openKeys.some(function (key) {
          return (0, _shallowEqual.default)(key, eventKey);
        });
        var itemClassName = (0, _classnames.default)(className, _this2.addPrefix("pull-" + (pullLeft ? 'left' : 'right')), (_classNames = {}, _classNames[_this2.addPrefix('item-focus')] = _this2.isActive(item.props, activeKey), _classNames));
        return React.createElement(_DropdownMenuItem.default, {
          icon: icon,
          open: open,
          trigger: trigger,
          expanded: expanded,
          className: itemClassName,
          pullLeft: pullLeft,
          componentClass: "div",
          submenu: true
        }, React.createElement("div", {
          className: _this2.addPrefix('toggle'),
          onClick: _this2.handleToggleChange.bind(_this2, eventKey),
          role: "menu",
          tabIndex: -1
        }, React.createElement("span", null, title), React.createElement(_Icon.default, {
          className: _this2.addPrefix('toggle-icon'),
          icon: pullLeft ? 'angle-left' : 'angle-right'
        }), React.createElement(_Ripple.default, null)), _this2.renderCollapse(function (transitionProps, ref) {
          var _ref = transitionProps || {},
              className = _ref.className,
              transitionRestProps = (0, _objectWithoutPropertiesLoose2.default)(_ref, ["className"]);

          return React.createElement("ul", (0, _extends2.default)({}, transitionRestProps, {
            ref: ref,
            role: "menu",
            className: (0, _classnames.default)(classPrefix, className)
          }), itemsAndStatus.items);
        }, expanded));
      }

      return item;
    });
    return {
      items: items,
      active: hasActiveItem
    };
  };

  _proto.isActive = function isActive(props, activeKey) {
    var _this3 = this;

    if (props.active || typeof activeKey !== 'undefined' && (0, _shallowEqual.default)(props.eventKey, activeKey)) {
      return true;
    }

    if (_utils.ReactChildren.some(props.children, function (child) {
      return _this3.isActive(child.props, activeKey);
    })) {
      return true;
    }

    return props.active;
  };

  _proto.renderCollapse = function renderCollapse(children, expanded) {
    return this.props.collapsible ? React.createElement(_Collapse.default, {
      in: expanded,
      exitedClassName: this.addPrefix('collapse-out'),
      exitingClassName: this.addPrefix('collapsing'),
      enteredClassName: this.addPrefix('collapse-in'),
      enteringClassName: this.addPrefix('collapsing')
    }, children) : children();
  };

  _proto.render = function render() {
    var _classNames2;

    var _this$props3 = this.props,
        children = _this$props3.children,
        className = _this$props3.className,
        classPrefix = _this$props3.classPrefix,
        expanded = _this$props3.expanded,
        htmlElementRef = _this$props3.htmlElementRef,
        props = (0, _objectWithoutPropertiesLoose2.default)(_this$props3, ["children", "className", "classPrefix", "expanded", "htmlElementRef"]);

    var _this$getMenuItemsAnd = this.getMenuItemsAndStatus(children),
        items = _this$getMenuItemsAnd.items,
        active = _this$getMenuItemsAnd.active;

    var unhandled = (0, _utils.getUnhandledProps)(DropdownMenu, props);
    var classes = (0, _classnames.default)(classPrefix, className, (_classNames2 = {}, _classNames2[this.addPrefix('active')] = active, _classNames2));
    return this.renderCollapse(function (transitionProps, ref) {
      var _ref2 = transitionProps || {},
          transitionClassName = _ref2.className,
          transitionRestProps = (0, _objectWithoutPropertiesLoose2.default)(_ref2, ["className"]);

      return React.createElement("ul", (0, _extends2.default)({}, unhandled, transitionRestProps, {
        className: (0, _classnames.default)(classes, transitionClassName),
        role: "menu",
        ref: (0, _mergeRefs.default)(htmlElementRef, ref)
      }), items);
    }, expanded);
  };

  return DropdownMenu;
}(React.Component);

DropdownMenu.displayName = 'DropdownMenu';
DropdownMenu.propTypes = {
  activeKey: _propTypes.default.any,
  className: _propTypes.default.string,
  children: _propTypes.default.node,
  icon: _propTypes.default.node,
  classPrefix: _propTypes.default.string,
  pullLeft: _propTypes.default.bool,
  onSelect: _propTypes.default.func,
  title: _propTypes.default.node,
  open: _propTypes.default.bool,
  trigger: _propTypes.default.oneOfType([_propTypes.default.array, _propTypes.default.oneOf(['click', 'hover'])]),
  eventKey: _propTypes.default.any,
  openKeys: _propTypes.default.array,
  expanded: _propTypes.default.bool,
  collapsible: _propTypes.default.bool,
  onToggle: _propTypes.default.func
};

var _default = (0, _utils.defaultProps)({
  classPrefix: 'dropdown-menu'
})(DropdownMenu);

exports.default = _default;
module.exports = exports.default;