@txdfe/at
Version:
一个设计体系组件库
870 lines (867 loc) • 35.7 kB
JavaScript
"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(e) { return e && e.__esModule ? e : { "default": e }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _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(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
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 = exports["default"] = /*#__PURE__*/function (_Component) {
function Menu(props) {
var _this;
_classCallCheck(this, Menu);
_this = _callSuper(this, Menu, [props]);
_defineProperty(_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(_this, ['handleOpen', 'handleSelect', 'handleItemClick', 'handleItemKeyDown', 'onBlur', 'adjustChildrenWidth']);
_this.popupNodes = [];
return _this;
}
_inherits(Menu, _Component);
return _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 _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"])(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefix, "menu"), true), "".concat(prefix, "ver"), direction === 'ver'), "".concat(prefix, "hoz"), direction === 'hoz'), "".concat(prefix, "menu-embeddable"), embeddable), "".concat(prefix, "menu-nowrap"), hozInLine), className, !!className));
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);
}
}]);
}(_react.Component);
_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() {}
});