choerodon-ui/es/menu/index.js

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

import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _inherits from "@babel/runtime/helpers/inherits";
import _createSuper from "@babel/runtime/helpers/createSuper";
import React, { PureComponent } from 'react';
import { findDOMNode } from 'react-dom';
import classNames from 'classnames';
import animation from '../_util/openAnimation';
import warning from '../_util/warning';
import SubMenu from './SubMenu';
import Item from './MenuItem';
import RcMenu, { Divider, ItemGroup } from '../rc-components/menu';
import LayoutSiderContext from '../layout/LayoutSiderContext';
import { MenuContextProvider } from './MenuContext';

var Menu = /*#__PURE__*/function (_PureComponent) {
  _inherits(Menu, _PureComponent);

  var _super = _createSuper(Menu);

  function Menu(props, context) {
    var _this;

    _classCallCheck(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);
      }
    };

    warning(!('onOpen' in props || 'onClose' in props), '`onOpen` and `onClose` are removed, please use `onOpenChange` instead');
    warning(!('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;
  }

  _createClass(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 = 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 = _objectSpread(_objectSpread({}, animation), {}, {
              leave: function leave(node, done) {
                return animation.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 = classNames(className, "".concat(prefixCls, "-").concat(theme), _defineProperty({}, "".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.createElement(MenuContextProvider, _extends({}, this.getContextValue()), /*#__PURE__*/React.createElement(RcMenu, _extends({}, this.props, menuProps, {
        prefixCls: prefixCls
      })));
    }
  }], [{
    key: "contextType",
    get: function get() {
      return LayoutSiderContext;
    }
  }]);

  return Menu;
}(PureComponent);

export { Menu as default };
Menu.displayName = 'Menu';
Menu.Divider = Divider;
Menu.Item = Item;
Menu.SubMenu = SubMenu;
Menu.ItemGroup = ItemGroup;
Menu.defaultProps = {
  className: '',
  theme: 'light',
  focusable: false
};
//# sourceMappingURL=index.js.map