@txdfe/at/lib/menu/view/menu.js

一个设计体系组件库

"use strict";

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

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

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

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

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

var _subMenu = _interopRequireDefault(require("./sub-menu"));

var _util = require("../../util");

var _util2 = require("./util");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }

function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }

function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }

function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }

function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }

function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }

function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var bindCtx = _util.func.bindCtx;
var pickOthers = _util.obj.pickOthers,
    isNil = _util.obj.isNil;

var noop = function noop() {};

var MENUITEM_OVERFLOWED_CLASSNAME = 'menuitem-overflowed';
/**
 * Menu
 */

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

  var _super = _createSuper(Menu);

  function Menu(props) {
    var _this;

    _classCallCheck(this, Menu);

    _this = _super.call(this, props);

    _defineProperty(_assertThisInitialized(_this), "addIndicators", function (children) {
      var arr = [];
      var lastVisibleIndex = _this.state.lastVisibleIndex;
      children.forEach(function (child, index) {
        var overflowedItems = [];

        if (index > lastVisibleIndex) {
          child = /*#__PURE__*/_react["default"].cloneElement(child, {
            key: "more-".concat(index),
            style: {
              display: 'none'
            },
            className: "".concat(child.className || '', " ").concat(MENUITEM_OVERFLOWED_CLASSNAME)
          });
        }

        if (index === lastVisibleIndex + 1) {
          overflowedItems = children.slice(lastVisibleIndex + 1).map(function (c, i) {
            return /*#__PURE__*/_react["default"].cloneElement(c, {
              key: "more-".concat(index, "-").concat(i)
            });
          });
          arr.push(_this.getIndicatorsItem(overflowedItems));
        }

        arr.push(child);
      });
      arr.push(_this.getIndicatorsItem([], true));
      return arr;
    });

    var _this$props = _this.props,
        _children = _this$props.children,
        selectedKeys = _this$props.selectedKeys,
        defaultSelectedKeys = _this$props.defaultSelectedKeys,
        focusedKey = _this$props.focusedKey,
        focusable = _this$props.focusable,
        autoFocus = _this$props.autoFocus,
        hozInLine = _this$props.hozInLine;
    _this.state = {
      lastVisibleIndex: undefined
    };
    _this.newChildren = _this.getNewChildren({
      children: _children,
      hozInLine: hozInLine
    });

    if (focusable) {
      _this.tabbableKey = _this.getFirstAvaliablelChildKey('0');
    }

    _this.state = {
      lastVisibleIndex: undefined,
      openKeys: _this.getInitOpenKeys(props),
      selectedKeys: _this.normalizeToArray(selectedKeys || defaultSelectedKeys),
      focusedKey: !isNil(_this.props.focusedKey) ? focusedKey : focusable && autoFocus ? _this.tabbableKey : null
    };
    bindCtx(_assertThisInitialized(_this), ['handleOpen', 'handleSelect', 'handleItemClick', 'handleItemKeyDown', 'onBlur', 'adjustChildrenWidth']);
    _this.popupNodes = [];
    return _this;
  }

  _createClass(Menu, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      this.menuNode = (0, _reactDom.findDOMNode)(this);
      this.adjustChildrenWidth();

      if (this.props.hozInLine) {
        _util.events.on(window, 'resize', this.adjustChildrenWidth);
      }
    }
  }, {
    key: "UNSAFE_componentWillReceiveProps",
    value: function UNSAFE_componentWillReceiveProps(nextProps) {
      var state = {};

      if ('openKeys' in nextProps) {
        state.openKeys = this.normalizeToArray(nextProps.openKeys);
      }

      if ('selectedKeys' in nextProps) {
        state.selectedKeys = this.normalizeToArray(nextProps.selectedKeys);
      }

      if ('focusedKey' in nextProps) {
        state.focusedKey = nextProps.focusedKey;
      }

      if (Object.keys(state).length) {
        this.setState(state);
      }
    }
  }, {
    key: "UNSAFE_componentWillUpdate",
    value: function UNSAFE_componentWillUpdate(nextProps, nextState) {
      if (this.state.lastVisibleIndex !== nextState.lastVisibleIndex) {
        this.adjustChildrenWidth();
      }

      this.newChildren = this.getNewChildren(nextProps);

      if (this.props.focusable) {
        if (this.tabbableKey in this.k2n) {
          if (this.state.focusedKey) {
            this.tabbableKey = this.state.focusedKey;
          }
        } else {
          this.tabbableKey = this.getFirstAvaliablelChildKey('0');
        }
      }
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      _util.events.off(window, 'resize', this.adjustChildrenWidth);
    }
  }, {
    key: "adjustChildrenWidth",
    value: function adjustChildrenWidth() {
      var _this$props2 = this.props,
          direction = _this$props2.direction,
          prefix = _this$props2.prefix,
          hozInLine = _this$props2.hozInLine;

      if (direction !== 'hoz' || !hozInLine) {
        return;
      }

      if (!this.menuNode) {
        return;
      }

      var children = this.menuNode.children;

      if (children.length < 2) {
        return;
      }

      var spaceWidth = (0, _util2.getWidth)(this.menuNode);
      var currentSumWidth = 0;
      var lastVisibleIndex = -1;
      var menuItemNodes = [].slice.call(children).filter(function (node) {
        return node.className.split(' ').indexOf("".concat(prefix, "menu-more")) < 0;
      });
      var overflowedItems = menuItemNodes.filter(function (c) {
        return c.className.split(' ').indexOf(MENUITEM_OVERFLOWED_CLASSNAME) >= 0;
      });
      overflowedItems.forEach(function (c) {
        _util.dom.setStyle(c, 'display', 'inline-block');
      });
      var lastIndicator = children[children.length - 1];

      _util.dom.setStyle(lastIndicator, 'display', 'inline-block');

      var moreWidth = (0, _util2.getWidth)(lastIndicator);

      _util.dom.setStyle(lastIndicator, 'display', 'none');

      this.menuItemSizes = menuItemNodes.map(function (c) {
        return (0, _util2.getWidth)(c);
      });
      overflowedItems.forEach(function (c) {
        _util.dom.setStyle(c, 'display', 'none');
      });
      this.menuItemSizes.forEach(function (liWidth) {
        currentSumWidth += liWidth;

        if (currentSumWidth + moreWidth <= spaceWidth) {
          lastVisibleIndex++;
        }
      });
      this.setState({
        lastVisibleIndex: lastVisibleIndex
      });
    }
  }, {
    key: "onBlur",
    value: function onBlur(e) {
      this.setState({
        focusedKey: undefined
      });
      this.props.onBlur && this.props.onBlur(e);
    }
  }, {
    key: "getInitOpenKeys",
    value: function getInitOpenKeys(props) {
      var _this2 = this;

      var initOpenKeys;
      var openKeys = props.openKeys,
          defaultOpenKeys = props.defaultOpenKeys,
          defaultOpenAll = props.defaultOpenAll,
          mode = props.mode,
          openMode = props.openMode;

      if (openKeys) {
        initOpenKeys = openKeys;
      } else if (defaultOpenAll && mode === 'inline' && openMode === 'multiple') {
        initOpenKeys = Object.keys(this.k2n).filter(function (key) {
          return _this2.k2n[key].type === 'submenu';
        });
      } else {
        initOpenKeys = defaultOpenKeys;
      }

      return this.normalizeToArray(initOpenKeys);
    }
  }, {
    key: "getIndicatorsItem",
    value: function getIndicatorsItem(items, isPlaceholder) {
      var prefix = this.props.prefix;
      var moreCls = (0, _classnames["default"])(_defineProperty({}, "".concat(prefix, "menu-more"), true));
      var style = {}; // keep placehold to get width

      if (isPlaceholder) {
        style.visibility = 'hidden'; // indicators which not in use, just display: none
      } else if (items && items.length === 0) {
        style.display = 'none';
      }

      return /*#__PURE__*/_react["default"].createElement(_subMenu["default"], {
        label: "\xB7\xB7\xB7",
        noIcon: true,
        className: moreCls,
        style: style
      }, items);
    }
  }, {
    key: "getNewChildren",
    value: function getNewChildren(_ref) {
      var _this3 = this;

      var children = _ref.children,
          hozInLine = _ref.hozInLine;
      this.k2n = {};
      this.p2n = {};
      var arr = [];

      if (hozInLine) {
        arr = this.addIndicators(children);
      } else {
        arr = children;
      }

      var loop = function loop(children, posPrefix) {
        var indexWrapper = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {
          index: 0
        };
        var keyArray = [];
        return _react.Children.map(children, function (child) {
          if (child && (typeof child.type === 'function' || // `React.forwardRef(render)` returns a forwarding
          // object that includes `render` method, and the specific
          // `child.type` will be an object instead of a class or
          // function.
          _typeof(child.type) === 'object') && 'menuChildType' in child.type) {
            var newChild;
            var pos;
            var props = {
              root: _this3
            };

            if (['item', 'submenu', 'group'].indexOf(child.type.menuChildType) > -1) {
              pos = "".concat(posPrefix, "-").concat(indexWrapper.index++);
              var key = typeof child.key === 'string' ? child.key : pos; // filter out duplicate keys

              if (keyArray.indexOf(key) > -1) {
                return;
              }

              keyArray.push(key);
              var level = pos.split('-').length - 1;
              _this3.k2n[key] = _this3.p2n[pos] = {
                key: key,
                pos: pos,
                type: child.type.menuChildType,
                disabled: child.props.disabled,
                label: child.props.label || child.props.children
              };
              props._key = key;
              props.level = level;
              props.groupIndent = child.type.menuChildType === 'group' ? 1 : 0;
            }

            switch (child.type.menuChildType) {
              case 'submenu':
                newChild = /*#__PURE__*/(0, _react.cloneElement)(child, props, loop(child.props.children, pos));
                break;

              case 'group':
                newChild = /*#__PURE__*/(0, _react.cloneElement)(child, props, loop(child.props.children, posPrefix, indexWrapper));
                break;

              case 'item':
              case 'divider':
                newChild = /*#__PURE__*/(0, _react.cloneElement)(child, props);
                break;

              default:
                newChild = child;
                break;
            }

            return newChild;
          }

          return child;
        });
      };

      return loop(arr, '0');
    }
  }, {
    key: "normalizeToArray",
    value: function normalizeToArray(items) {
      if (items) {
        if (Array.isArray(items)) {
          return items;
        }

        return [items];
      }

      return [];
    }
  }, {
    key: "isSibling",
    value: function isSibling(currentPos, targetPos) {
      var currentNums = currentPos.split('-').slice(0, -1);
      var targetNums = targetPos.split('-').slice(0, -1);
      return currentNums.length === targetNums.length && currentNums.every(function (num, index) {
        return num === targetNums[index];
      });
    }
  }, {
    key: "isAncestor",
    value: function isAncestor(currentPos, targetPos) {
      var currentNums = currentPos.split('-');
      var targetNums = targetPos.split('-');
      return currentNums.length > targetNums.length && targetNums.every(function (num, index) {
        return num === currentNums[index];
      });
    }
  }, {
    key: "handleOpen",
    value: function handleOpen(key, open, triggerType, e) {
      var _this4 = this;

      var newOpenKeys;
      var _this$props3 = this.props,
          mode = _this$props3.mode,
          openMode = _this$props3.openMode;
      var openKeys = this.state.openKeys;
      var index = openKeys.indexOf(key);

      if (open && index === -1) {
        if (mode === 'inline') {
          if (openMode === 'single') {
            newOpenKeys = openKeys.filter(function (k) {
              return !_this4.isSibling(_this4.k2n[key].pos, _this4.k2n[k].pos);
            });
            newOpenKeys.push(key);
          } else {
            newOpenKeys = openKeys.concat(key);
          }
        } else {
          newOpenKeys = openKeys.filter(function (k) {
            return _this4.isAncestor(_this4.k2n[key].pos, _this4.k2n[k].pos);
          });
          newOpenKeys.push(key);
        }
      } else if (!open && index > -1) {
        if (mode === 'inline') {
          newOpenKeys = [].concat(_toConsumableArray(openKeys.slice(0, index)), _toConsumableArray(openKeys.slice(index + 1)));
        } else if (triggerType === 'docClick') {
          if (!this.popupNodes.concat(this.menuNode).some(function (node) {
            return node.contains(e.target);
          })) {
            newOpenKeys = [];
          }
        } else {
          newOpenKeys = openKeys.filter(function (k) {
            return k !== key && !_this4.isAncestor(_this4.k2n[k].pos, _this4.k2n[key].pos);
          });
        }
      }

      if (newOpenKeys) {
        if (isNil(this.props.openKeys)) {
          this.setState({
            openKeys: newOpenKeys
          });
        }

        this.props.onOpen(newOpenKeys, {
          key: key,
          open: open
        });
      }
    }
  }, {
    key: "getPath",
    value: function getPath(key) {
      var keyPath = [];
      var labelPath = [];
      var pos = this.k2n[key].pos;
      var nums = pos.split('-');

      for (var i = 1; i < nums.length - 1; i++) {
        var parentNums = nums.slice(0, i + 1);
        var parentPos = parentNums.join('-');
        var parent = this.p2n[parentPos];
        keyPath.push(parent.key);
        labelPath.push(parent.label);
      }

      return {
        keyPath: keyPath,
        labelPath: labelPath
      };
    }
  }, {
    key: "handleSelect",
    value: function handleSelect(key, select, menuItem) {
      var pos = this.k2n[key].pos;
      var level = pos.split('-').length - 1;

      if (this.props.shallowSelect && level > 1) {
        return;
      }

      var newSelectedKeys;
      var selectMode = this.props.selectMode;
      var selectedKeys = this.state.selectedKeys;
      var index = selectedKeys.indexOf(key);

      if (select && index === -1) {
        if (selectMode === 'single') {
          newSelectedKeys = [key];
        } else if (selectMode === 'multiple') {
          newSelectedKeys = selectedKeys.concat(key);
        }
      } else if (!select && index > -1 && selectMode === 'multiple') {
        newSelectedKeys = [].concat(_toConsumableArray(selectedKeys.slice(0, index)), _toConsumableArray(selectedKeys.slice(index + 1)));
      }

      if (newSelectedKeys) {
        if (isNil(this.props.selectedKeys)) {
          this.setState({
            selectedKeys: newSelectedKeys
          });
        }

        this.props.onSelect(newSelectedKeys, menuItem, _objectSpread({
          key: key,
          select: select,
          label: this.k2n[key].label
        }, this.getPath(key)));
      }
    }
  }, {
    key: "handleItemClick",
    value: function handleItemClick(key, item, e) {
      var _this5 = this;

      if (this.props.focusable) {
        if (isNil(this.props.focusedKey)) {
          this.setState({
            focusedKey: key
          });
        }

        this.props.onItemFocus(key, item, e);
      }

      if (item.props.type === 'item') {
        if (item.props.parentMode === 'popup' && this.state.openKeys.length) {
          if (isNil(this.props.openKeys)) {
            this.setState({
              openKeys: []
            });
          }

          this.props.onOpen([], {
            key: this.state.openKeys.sort(function (prevKey, nextKey) {
              return _this5.k2n[nextKey].pos.split('-').length - _this5.k2n[prevKey].pos.split('-').length;
            })[0],
            open: false
          });
        }

        this.props.onItemClick(key, item, e);
      }
    }
  }, {
    key: "isAvailablePos",
    value: function isAvailablePos(refPos, targetPos) {
      var _this$p2n$targetPos = this.p2n[targetPos],
          type = _this$p2n$targetPos.type,
          disabled = _this$p2n$targetPos.disabled;
      return this.isSibling(refPos, targetPos) && (type === 'item' && !disabled || type === 'submenu');
    }
  }, {
    key: "getAvailableKey",
    value: function getAvailableKey(pos, prev) {
      var _this6 = this;

      var ps = Object.keys(this.p2n).filter(function (p) {
        return _this6.isAvailablePos(pos, p);
      });

      if (ps.length > 1) {
        var index = ps.indexOf(pos);
        var targetIndex;

        if (prev) {
          targetIndex = index === 0 ? ps.length - 1 : index - 1;
        } else {
          targetIndex = index === ps.length - 1 ? 0 : index + 1;
        }

        return this.p2n[ps[targetIndex]].key;
      }

      return null;
    }
  }, {
    key: "getFirstAvaliablelChildKey",
    value: function getFirstAvaliablelChildKey(parentPos) {
      var _this7 = this;

      var pos = Object.keys(this.p2n).find(function (p) {
        return _this7.isAvailablePos("".concat(parentPos, "-0"), p);
      });
      return pos ? this.p2n[pos].key : null;
    }
  }, {
    key: "getParentKey",
    value: function getParentKey(pos) {
      return this.p2n[pos.slice(0, pos.length - 2)].key;
    }
  }, {
    key: "handleItemKeyDown",
    value: function handleItemKeyDown(key, type, item, e) {
      if ([_util.KEYCODE.UP, _util.KEYCODE.DOWN, _util.KEYCODE.RIGHT, _util.KEYCODE.LEFT, _util.KEYCODE.ENTER, _util.KEYCODE.ESC, _util.KEYCODE.SPACE].indexOf(e.keyCode) > -1) {
        e.preventDefault();
        e.stopPropagation();
      }

      var focusedKey = this.state.focusedKey;
      var direction = this.props.direction;
      var pos = this.k2n[key].pos;
      var level = pos.split('-').length - 1;

      switch (e.keyCode) {
        case _util.KEYCODE.UP:
          {
            var avaliableKey = this.getAvailableKey(pos, true);

            if (avaliableKey) {
              focusedKey = avaliableKey;
            }

            break;
          }

        case _util.KEYCODE.DOWN:
          {
            var _avaliableKey;

            if (direction === 'hoz' && level === 1 && type === 'submenu') {
              this.handleOpen(key, true);
              _avaliableKey = this.getFirstAvaliablelChildKey(pos);
            } else {
              _avaliableKey = this.getAvailableKey(pos, false);
            }

            if (_avaliableKey) {
              focusedKey = _avaliableKey;
            }

            break;
          }

        case _util.KEYCODE.RIGHT:
          {
            var _avaliableKey2;

            if (direction === 'hoz' && level === 1) {
              _avaliableKey2 = this.getAvailableKey(pos, false);
            } else if (type === 'submenu') {
              this.handleOpen(key, true);
              _avaliableKey2 = this.getFirstAvaliablelChildKey(pos);
            }

            if (_avaliableKey2) {
              focusedKey = _avaliableKey2;
            }

            break;
          }

        case _util.KEYCODE.ENTER:
          {
            if (type === 'submenu') {
              this.handleOpen(key, true);

              var _avaliableKey3 = this.getFirstAvaliablelChildKey(pos);

              if (_avaliableKey3) {
                focusedKey = _avaliableKey3;
              }
            }

            break;
          }

        case _util.KEYCODE.LEFT:
          {
            if (direction === 'hoz' && level === 1) {
              var _avaliableKey4 = this.getAvailableKey(pos, true);

              if (_avaliableKey4) {
                focusedKey = _avaliableKey4;
              }
            } else if (level > 1) {
              var parentKey = this.getParentKey(pos);
              this.handleOpen(parentKey, false);
              focusedKey = parentKey;
            }

            break;
          }

        case _util.KEYCODE.ESC:
          if (level > 1) {
            var _parentKey = this.getParentKey(pos);

            this.handleOpen(_parentKey, false);
            focusedKey = _parentKey;
          }

          break;

        case _util.KEYCODE.TAB:
          focusedKey = null;
          break;

        default:
          break;
      }

      if (focusedKey !== this.state.focusedKey) {
        if (isNil(this.props.focusedKey)) {
          this.setState({
            focusedKey: focusedKey
          });
        }

        this.props.onItemKeyDown(focusedKey, item, e);
        this.props.onItemFocus(focusedKey, e);
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _cx2;

      var _this$props4 = this.props,
          prefix = _this$props4.prefix,
          className = _this$props4.className,
          direction = _this$props4.direction,
          hozAlign = _this$props4.hozAlign,
          header = _this$props4.header,
          footer = _this$props4.footer,
          embeddable = _this$props4.embeddable,
          selectMode = _this$props4.selectMode,
          hozInLine = _this$props4.hozInLine,
          rtl = _this$props4.rtl,
          onScroll = _this$props4.onScroll;
      var others = pickOthers(Object.keys(Menu.propTypes), this.props);
      var newClassName = (0, _classnames["default"])((_cx2 = {}, _defineProperty(_cx2, "".concat(prefix, "menu"), true), _defineProperty(_cx2, "".concat(prefix, "ver"), direction === 'ver'), _defineProperty(_cx2, "".concat(prefix, "hoz"), direction === 'hoz'), _defineProperty(_cx2, "".concat(prefix, "menu-embeddable"), embeddable), _defineProperty(_cx2, "".concat(prefix, "menu-nowrap"), hozInLine), _defineProperty(_cx2, className, !!className), _cx2));
      var role = direction === 'hoz' ? 'menubar' : 'menu';
      var ariaMultiselectable;

      if ('selectMode' in this.props) {
        role = 'listbox';
        ariaMultiselectable = !!(selectMode === 'multiple');
      }

      var headerElement = header ? /*#__PURE__*/_react["default"].createElement("li", {
        className: "".concat(prefix, "menu-header")
      }, header) : null;
      var itemsElement = header || footer ? /*#__PURE__*/_react["default"].createElement("ul", {
        className: "".concat(prefix, "menu-content")
      }, this.newChildren) : this.newChildren;
      var footerElement = footer ? /*#__PURE__*/_react["default"].createElement("li", {
        className: "".concat(prefix, "menu-footer")
      }, footer) : null;
      var shouldWrapItemsAndFooter = hozAlign === 'right' && !!header;

      if (rtl) {
        others.dir = 'rtl';
      }

      return /*#__PURE__*/_react["default"].createElement("ul", _extends({
        role: role,
        onBlur: this.onBlur,
        className: newClassName,
        onKeyDown: this.handleEnter,
        onScroll: onScroll,
        "aria-multiselectable": ariaMultiselectable
      }, others), headerElement, shouldWrapItemsAndFooter ? /*#__PURE__*/_react["default"].createElement("div", {
        className: "".concat(prefix, "menu-hoz-right")
      }, itemsElement, footerElement) : null, !shouldWrapItemsAndFooter ? itemsElement : null, !shouldWrapItemsAndFooter ? footerElement : null);
    }
  }]);

  return Menu;
}(_react.Component);

exports["default"] = Menu;

_defineProperty(Menu, "isNextMenu", true);

_defineProperty(Menu, "propTypes", {
  prefix: _propTypes["default"].string,
  pure: _propTypes["default"].bool,
  rtl: _propTypes["default"].bool,
  className: _propTypes["default"].string,

  /**
   * 菜单项和子菜单
   */
  children: _propTypes["default"].node,

  /**
   * 点击菜单项触发的回调函数
   * @param {String} key 点击的菜单项的 key 值
   * @param {Object} item 点击的菜单项对象
   * @param {Object} event 点击的事件对象
   */
  onItemClick: _propTypes["default"].func,

  /**
   * 当前打开的子菜单的 key 值
   */
  openKeys: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].array]),

  /**
   * 初始打开的子菜单的 key 值
   */
  defaultOpenKeys: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].array]),

  /**
   * 初始展开所有的子菜单，只在 mode 设置为 'inline' 以及 openMode 设置为 'multiple' 下生效，优先级高于 defaultOpenKeys
   */
  defaultOpenAll: _propTypes["default"].bool,

  /**
   * 打开或关闭子菜单触发的回调函数
   * @param {String} key 打开的所有子菜单的 key 值
   * @param {Object} extra 额外参数
   * @param {String} extra.key 当前操作子菜单的 key 值
   * @param {Boolean} extra.open 是否是打开
   */
  onOpen: _propTypes["default"].func,

  /**
   * 子菜单打开的模式
   */
  mode: _propTypes["default"].oneOf(['inline', 'popup']),

  /**
   * 子菜单打开的触发行为
   */
  triggerType: _propTypes["default"].oneOf(['click', 'hover']),

  /**
   * 展开内连子菜单的模式，同时可以展开一个子菜单还是多个子菜单，该属性仅在 mode 为 inline 时生效
   */
  openMode: _propTypes["default"].oneOf(['single', 'multiple']),

  /**
   * 内连子菜单缩进距离
   */
  inlineIndent: _propTypes["default"].number,
  inlineArrowDirection: _propTypes["default"].oneOf(['down', 'right']),

  /**
   * 是否自动让弹层的宽度和菜单项保持一致，如果弹层的宽度比菜单项小则和菜单项保持一致，如果宽度大于菜单项则不做处理
   */
  popupAutoWidth: _propTypes["default"].bool,

  /**
   * 弹层的对齐方式
   */
  popupAlign: _propTypes["default"].oneOf(['follow', 'outside']),

  /**
   * 弹层自定义 props
   */
  popupProps: _propTypes["default"].oneOfType([_propTypes["default"].object, _propTypes["default"].func]),

  /**
   * 弹出子菜单自定义 className
   */
  popupClassName: _propTypes["default"].string,

  /**
   * 弹出子菜单自定义 style
   */
  popupStyle: _propTypes["default"].object,

  /**
   * 当前选中菜单项的 key 值
   */
  selectedKeys: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].array]),

  /**
   * 初始选中菜单项的 key 值
   */
  defaultSelectedKeys: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].array]),

  /**
   * 选中或取消选中菜单项触发的回调函数
   * @param {Array} selectedKeys 选中的所有菜单项的值
   * @param {Object} item 选中或取消选中的菜单项
   * @param {Object} extra 额外参数
   * @param {Boolean} extra.select 是否是选中
   * @param {Array} extra.key 菜单项的 key
   * @param {Object} extra.label 菜单项的文本
   * @param {Array} extra.keyPath 菜单项 key 的路径
   */
  onSelect: _propTypes["default"].func,

  /**
   * 选中模式，单选还是多选，默认无值，不可选
   */
  selectMode: _propTypes["default"].oneOf(['single', 'multiple']),

  /**
   * 是否只能选择第一层菜单项（不能选择子菜单中的菜单项）
   */
  shallowSelect: _propTypes["default"].bool,

  /**
   * 是否显示选中图标，如果设置为 false 需配合配置平台设置选中时的背景色以示区分
   */
  hasSelectedIcon: _propTypes["default"].bool,
  labelToggleChecked: _propTypes["default"].bool,

  /**
   * 是否将选中图标居右，仅当 hasSelectedIcon 为true 时生效。
   * 注意：SubMenu 上的选中图标一直居左，不受此API控制
   */
  isSelectIconRight: _propTypes["default"].bool,

  /**
   * 菜单第一层展示方向
   */
  direction: _propTypes["default"].oneOf(['ver', 'hoz']),

  /**
   * 横向菜单条 item 和 footer 的对齐方向，在 direction 设置为 'hoz' 并且 header 存在时生效
   */
  hozAlign: _propTypes["default"].oneOf(['left', 'right']),

  /**
   * 横向菜单模式下，是否维持在一行，即超出一行折叠成 SubMenu 显示， 仅在 direction='hoz' mode='popup' 时生效
   */
  hozInLine: _propTypes["default"].bool,

  /**
   * 自定义菜单头部
   */
  header: _propTypes["default"].node,

  /**
   * 自定义菜单尾部
   */
  footer: _propTypes["default"].node,

  /**
   * 是否自动获得焦点
   */
  autoFocus: _propTypes["default"].bool,

  /**
   * 当前获得焦点的子菜单或菜单项 key 值
   */
  focusedKey: _propTypes["default"].string,
  focusable: _propTypes["default"].bool,
  onItemFocus: _propTypes["default"].func,
  onBlur: _propTypes["default"].func,

  /**
   * 是否开启嵌入式模式，一般用于Layout的布局中，开启后没有默认背景、外层border、box-shadow，可以配合`<Menu style={{lineHeight: '100px'}}>` 自定义高度
   */
  embeddable: _propTypes["default"].bool,
  onItemKeyDown: _propTypes["default"].func,
  expandAnimation: _propTypes["default"].bool,
  itemClassName: _propTypes["default"].string,

  /**
   * 选择下拉图标，默认 chevron，可以选择 triangle 形式的
   */
  iconArrowType: _propTypes["default"].string,

  /**
   * 监听滚动事件
   */
  onScroll: _propTypes["default"].func
});

_defineProperty(Menu, "defaultProps", {
  prefix: 'next-',
  pure: false,
  defaultOpenKeys: [],
  defaultOpenAll: false,
  onOpen: noop,
  mode: 'popup',
  triggerType: 'click',
  openMode: 'multiple',
  inlineIndent: 20,
  inlineArrowDirection: 'down',
  iconArrowType: 'chevron',
  popupAutoWidth: false,
  popupAlign: 'follow',
  popupProps: {},
  defaultSelectedKeys: [],
  onSelect: noop,
  shallowSelect: false,
  hasSelectedIcon: true,
  isSelectIconRight: false,
  labelToggleChecked: true,
  direction: 'ver',
  hozAlign: 'left',
  hozInLine: false,
  autoFocus: false,
  focusable: true,
  embeddable: false,
  onItemFocus: noop,
  onItemKeyDown: noop,
  onItemClick: noop,
  expandAnimation: true,
  onScroll: function onScroll() {}
});