@6thquake/react-material/MenuBar/OriginMenuBar.js

React components that implement Google's Material Design.

"use strict";

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

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
Object.defineProperty(exports, "SubMenuBar", {
  enumerable: true,
  get: function get() {
    return _SubMenuBar.default;
  }
});
Object.defineProperty(exports, "MenuBarItem", {
  enumerable: true,
  get: function get() {
    return _MenuBarItem.default;
  }
});
Object.defineProperty(exports, "MenuBarItemGroup", {
  enumerable: true,
  get: function get() {
    return _MenuBarItemGroup.default;
  }
});
exports.default = void 0;

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

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

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

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

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

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

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

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

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

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

var _withStyles = _interopRequireDefault(require("../styles/withStyles"));

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

var _rcMenu = _interopRequireWildcard(require("rc-menu"));

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

var _SubMenuBar = _interopRequireDefault(require("./SubMenuBar"));

var _MenuBarItem = _interopRequireDefault(require("./MenuBarItem"));

var _MenuBarItemGroup = _interopRequireDefault(require("./MenuBarItemGroup"));

var _styles = _interopRequireDefault(require("./styles"));

/**
 * @ignore - do not document.
 */
var menuPrefixCls = 'rm-menu';
var effect = {
  animationDuration: 0.3,
  animationFillMode: 'both',
  transformOrigin: '0 0'
};

function leave(node, done) {
  done();
}

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

  function OriginNavBar(props) {
    var _this;

    (0, _classCallCheck2.default)(this, OriginNavBar);
    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(OriginNavBar).call(this, props));
    _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);
      }
    };

    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)(OriginNavBar, [{
    key: "getChildContext",
    value: function getChildContext() {
      return {
        inlineCollapsed: this.getInlineCollapsed(),
        rMMenuTheme: this.props.theme
      };
    } //  todo remove unsafe life

  }, {
    key: "componentWillReceiveProps",
    value: function componentWillReceiveProps(nextProps, nextContext) {
      // componentWillReceiveProps(nextProps, nextContext) {
      var prefixCls = this.props.prefixCls;

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

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

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

      if (!nextProps.inlineCollapsed && this.props.inlineCollapsed || !nextContext.siderCollapsed && this.context.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;

      if (this.context.siderCollapsed !== undefined) {
        return this.context.siderCollapsed;
      }

      return inlineCollapsed;
    }
  }, {
    key: "getMenuOpenAnimation",
    value: function getMenuOpenAnimation(menuMode) {
      var _this$props = this.props,
          openAnimation = _this$props.openAnimation,
          openTransitionName = _this$props.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 = {// leave: (node, done) => {
              //   this.switchModeFromInline = false;
              //   this.setState({});
              //   if (this.getRealMenuMode() === 'vertical') {
              //     return;
              //   }
              //   done();
              // }
            };
            this.switchModeFromInline = false;
            break;

          default:
        }
      }

      return menuOpenAnimation;
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props2 = this.props,
          prefixCls = _this$props2.prefixCls,
          className = _this$props2.className,
          theme = _this$props2.theme;
      var _this$props3 = this.props,
          classes = _this$props3.classes,
          props = (0, _objectWithoutProperties2.default)(_this$props3, ["classes"]);
      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: this.state.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 _react.default.createElement(_rcMenu.default, (0, _extends2.default)({}, props, menuProps, {
        mode: "horizontal",
        selectable: false
      }));
    }
  }]);
  return OriginNavBar;
}(_react.default.Component);

OriginNavBar.Divider = _rcMenu.Divider;
OriginNavBar.Item = _MenuBarItem.default;
OriginNavBar.SubMenu = _SubMenuBar.default;
OriginNavBar.ItemGroup = _MenuBarItemGroup.default;
OriginNavBar.propTypes = {
  /**
   * @ignore
   */
  className: _propTypes.default.string,

  /**
   * 初始选中的菜单项 key 数组
   */
  defaultOpenKeys: _propTypes.default.arrayOf(_propTypes.default.string),

  /**
   * 初始展开的 SubMenu 菜单项 key 数组
   */
  defaultSelectedKeys: _propTypes.default.arrayOf(_propTypes.default.string),

  /**
   * inline 时菜单是否收起状态
   */
  inlineCollapsed: _propTypes.default.bool,

  /**
   * 菜单类型，现在支持垂直、水平、和内嵌模式三种
   */
  mode: _propTypes.default.oneOf(['vertical', 'horizontal', 'inline']),

  /**
   * 是否允许多选
   */
  multiple: _propTypes.default.bool,

  /**
   * 点击 MenuItem 调用此函数 ，参数 ({item, key, keyPath})
   */
  onClick: _propTypes.default.func,

  /**
   * 取消选中时调用，仅在 multiple 生效，参数 ({item, key, selectedKeys})
   */
  onDeselect: _propTypes.default.func,

  /**
   * SubMenu 展开/关闭的回调，参数 (openKeys)
   */
  onOpenChange: _propTypes.default.func,

  /**
   * 被选中时调用，参数 ({item, key, selectedKeys})
   */
  onSelect: _propTypes.default.func,

  /**
   * 当前展开的 SubMenu 菜单项 key 数组
   */
  openKeys: _propTypes.default.arrayOf(_propTypes.default.string),

  /**
   * @ignore
   */
  prefixCls: _propTypes.default.string,

  /**
   * 是否允许选中
   */
  selectable: _propTypes.default.bool,

  /**
   * 当前选中的菜单项 key 数组
   */
  selectedKeys: _propTypes.default.arrayOf(_propTypes.default.string),

  /**
   * 主题颜色
   */
  theme: _propTypes.default.oneOf(['light', 'dark'])
};
OriginNavBar.defaultProps = {
  prefixCls: menuPrefixCls,
  className: '',
  theme: 'light'
};
OriginNavBar.childContextTypes = {
  inlineCollapsed: _propTypes.default.bool,
  rMMenuTheme: _propTypes.default.string
};
OriginNavBar.contextTypes = {
  siderCollapsed: _propTypes.default.bool,
  collapsedWidth: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
};

var _default = (0, _withStyles.default)(_styles.default, {
  name: 'RMOriginNavBar'
})(OriginNavBar);

exports.default = _default;