choerodon-ui/lib/menu/index.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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

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

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

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

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

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

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

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

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

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

var _openAnimation = _interopRequireDefault(require("../_util/openAnimation"));

var _warning = _interopRequireDefault(require("../_util/warning"));

var _SubMenu = _interopRequireDefault(require("./SubMenu"));

var _MenuItem = _interopRequireDefault(require("./MenuItem"));

var _menu = _interopRequireWildcard(require("../rc-components/menu"));

var _LayoutSiderContext = _interopRequireDefault(require("../layout/LayoutSiderContext"));

var _MenuContext = require("./MenuContext");

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

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

  function Menu(props, context) {
    var _this;

    (0, _classCallCheck2["default"])(this, Menu);
    _this = _super.call(this, props, context);
    _this.inlineOpenKeys = [];

    _this.handleClick = function (e) {
      _this.handleOpenChange([]);

      var onClick = _this.props.onClick;

      if (onClick) {
        onClick(e);
      }
    };

    _this.handleOpenChange = function (openKeys) {
      _this.setOpenKeys(openKeys);

      var onOpenChange = _this.props.onOpenChange;

      if (onOpenChange) {
        onOpenChange(openKeys);
      }
    };

    (0, _warning["default"])(!('onOpen' in props || 'onClose' in props), '`onOpen` and `onClose` are removed, please use `onOpenChange` instead');
    (0, _warning["default"])(!('inlineCollapsed' in props && props.mode !== 'inline'), '`inlineCollapsed` should only be used when Menu\'s `mode` is inline.');
    var openKeys;

    if ('defaultOpenKeys' in props) {
      openKeys = props.defaultOpenKeys;
    } else if ('openKeys' in props) {
      openKeys = props.openKeys;
    }

    _this.state = {
      openKeys: openKeys || []
    };
    return _this;
  }

  (0, _createClass2["default"])(Menu, [{
    key: "getContextValue",
    value: function getContextValue() {
      var theme = this.props.theme;
      return {
        inlineCollapsed: this.getInlineCollapsed(),
        menuTheme: theme
      };
    }
  }, {
    key: "getPrefixCls",
    value: function getPrefixCls() {
      var prefixCls = this.props.prefixCls;
      var getPrefixCls = this.context.getPrefixCls;
      return getPrefixCls('menu', prefixCls);
    }
  }, {
    key: "componentWillReceiveProps",
    value: function componentWillReceiveProps(nextProps, nextContext) {
      var _this$props = this.props,
          mode = _this$props.mode,
          inlineCollapsed = _this$props.inlineCollapsed;

      if (mode === 'inline' && nextProps.mode !== 'inline') {
        this.switchModeFromInline = true;
      }

      if ('openKeys' in nextProps) {
        this.setState({
          openKeys: nextProps.openKeys
        });
        return;
      }

      var openKeys = this.state.openKeys;
      var siderCollapsed = this.context.siderCollapsed;

      if (nextProps.inlineCollapsed && !inlineCollapsed || nextContext.siderCollapsed && !siderCollapsed) {
        var menuNode = (0, _reactDom.findDOMNode)(this);
        this.switchModeFromInline = !!openKeys.length && !!menuNode.querySelectorAll(".".concat(this.getPrefixCls(), "-submenu-open")).length;
        this.inlineOpenKeys = openKeys;
        this.setState({
          openKeys: []
        });
      }

      if (!nextProps.inlineCollapsed && inlineCollapsed || !nextContext.siderCollapsed && siderCollapsed) {
        this.setState({
          openKeys: this.inlineOpenKeys
        });
        this.inlineOpenKeys = [];
      }
    }
  }, {
    key: "setOpenKeys",
    value: function setOpenKeys(openKeys) {
      if (!('openKeys' in this.props)) {
        this.setState({
          openKeys: openKeys
        });
      }
    }
  }, {
    key: "getRealMenuMode",
    value: function getRealMenuMode() {
      var inlineCollapsed = this.getInlineCollapsed();

      if (this.switchModeFromInline && inlineCollapsed) {
        return 'inline';
      }

      var mode = this.props.mode;
      return inlineCollapsed ? 'vertical' : mode;
    }
  }, {
    key: "getInlineCollapsed",
    value: function getInlineCollapsed() {
      var inlineCollapsed = this.props.inlineCollapsed;
      var _this$context$siderCo = this.context.siderCollapsed,
          siderCollapsed = _this$context$siderCo === void 0 ? inlineCollapsed : _this$context$siderCo;
      return siderCollapsed;
    }
  }, {
    key: "getMenuOpenAnimation",
    value: function getMenuOpenAnimation(menuMode) {
      var _this2 = this;

      var _this$props2 = this.props,
          openAnimation = _this$props2.openAnimation,
          openTransitionName = _this$props2.openTransitionName;
      var menuOpenAnimation = openAnimation || openTransitionName;

      if (openAnimation === undefined && openTransitionName === undefined) {
        switch (menuMode) {
          case 'horizontal':
            menuOpenAnimation = 'slide-up';
            break;

          case 'vertical':
          case 'vertical-left':
          case 'vertical-right':
            // When mode switch from inline
            // submenu should hide without animation
            if (this.switchModeFromInline) {
              menuOpenAnimation = '';
              this.switchModeFromInline = false;
            } else {
              menuOpenAnimation = 'zoom-big';
            }

            break;

          case 'inline':
            menuOpenAnimation = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, _openAnimation["default"]), {}, {
              leave: function leave(node, done) {
                return _openAnimation["default"].leave(node, function () {
                  // Make sure inline menu leave animation finished before mode is switched
                  _this2.switchModeFromInline = false;

                  _this2.setState({}); // when inlineCollapsed change false to true, all submenu will be unmounted,
                  // so that we don't need handle animation leaving.


                  if (_this2.getRealMenuMode() === 'vertical') {
                    return;
                  }

                  done();
                });
              }
            });
            break;

          default:
        }
      }

      return menuOpenAnimation;
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props3 = this.props,
          className = _this$props3.className,
          theme = _this$props3.theme;
      var openKeys = this.state.openKeys;
      var prefixCls = this.getPrefixCls();
      var menuMode = this.getRealMenuMode();
      var menuOpenAnimation = this.getMenuOpenAnimation(menuMode);
      var menuClassName = (0, _classnames["default"])(className, "".concat(prefixCls, "-").concat(theme), (0, _defineProperty2["default"])({}, "".concat(prefixCls, "-inline-collapsed"), this.getInlineCollapsed()));
      var menuProps = {
        openKeys: openKeys,
        onOpenChange: this.handleOpenChange,
        className: menuClassName,
        mode: menuMode
      };

      if (menuMode !== 'inline') {
        // closing vertical popup submenu after click it
        menuProps.onClick = this.handleClick;
        menuProps.openTransitionName = menuOpenAnimation;
      } else {
        menuProps.openAnimation = menuOpenAnimation;
      }

      var collapsedWidth = this.context.collapsedWidth;

      if (this.getInlineCollapsed() && (collapsedWidth === 0 || collapsedWidth === '0' || collapsedWidth === '0px')) {
        return null;
      }

      return /*#__PURE__*/_react["default"].createElement(_MenuContext.MenuContextProvider, (0, _extends2["default"])({}, this.getContextValue()), /*#__PURE__*/_react["default"].createElement(_menu["default"], (0, _extends2["default"])({}, this.props, menuProps, {
        prefixCls: prefixCls
      })));
    }
  }], [{
    key: "contextType",
    get: function get() {
      return _LayoutSiderContext["default"];
    }
  }]);
  return Menu;
}(_react.PureComponent);

exports["default"] = Menu;
Menu.displayName = 'Menu';
Menu.Divider = _menu.Divider;
Menu.Item = _MenuItem["default"];
Menu.SubMenu = _SubMenu["default"];
Menu.ItemGroup = _menu.ItemGroup;
Menu.defaultProps = {
  className: '',
  theme: 'light',
  focusable: false
};
//# sourceMappingURL=index.js.map