473 lines
23 KiB
JavaScript
473 lines
23 KiB
JavaScript
"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.BaseMenu = void 0;
|
|
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
|
|
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
var _icons = require("@ant-design/icons");
|
|
var _proProvider = require("@ant-design/pro-provider");
|
|
var _proUtils = require("@ant-design/pro-utils");
|
|
var _antd = require("antd");
|
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
var _react = _interopRequireWildcard(require("react"));
|
|
var _defaultSettings = require("../../defaultSettings");
|
|
var _utils = require("../../utils/utils");
|
|
var _menu = require("./style/menu");
|
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
// todo
|
|
|
|
var MenuItemTooltip = function MenuItemTooltip(props) {
|
|
var _useState = (0, _react.useState)(props.collapsed),
|
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
collapsed = _useState2[0],
|
|
setCollapsed = _useState2[1];
|
|
var _useState3 = (0, _react.useState)(false),
|
|
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
|
|
open = _useState4[0],
|
|
setOpen = _useState4[1];
|
|
(0, _react.useEffect)(function () {
|
|
setOpen(false);
|
|
setTimeout(function () {
|
|
setCollapsed(props.collapsed);
|
|
}, 400);
|
|
}, [props.collapsed]);
|
|
if (props.disable) {
|
|
return props.children;
|
|
}
|
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Tooltip, {
|
|
title: props.title,
|
|
open: collapsed && props.collapsed ? open : false,
|
|
placement: "right",
|
|
onOpenChange: setOpen,
|
|
children: props.children
|
|
});
|
|
};
|
|
var IconFont = (0, _icons.createFromIconfontCN)({
|
|
scriptUrl: _defaultSettings.defaultSettings.iconfontUrl
|
|
});
|
|
|
|
// Allow menu.js config icon as string or ReactNode
|
|
// icon: 'setting',
|
|
// icon: 'icon-geren' #For Iconfont ,
|
|
// icon: 'http://demo.com/icon.png',
|
|
// icon: '/favicon.png',
|
|
// icon: <Icon type="setting" />,
|
|
var getIcon = function getIcon(icon) {
|
|
var iconPrefixes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'icon-';
|
|
var className = arguments.length > 2 ? arguments[2] : undefined;
|
|
if (typeof icon === 'string' && icon !== '') {
|
|
if ((0, _proUtils.isUrl)(icon) || (0, _proUtils.isImg)(icon)) {
|
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
|
|
width: 16,
|
|
src: icon,
|
|
alt: "icon",
|
|
className: className
|
|
}, icon);
|
|
}
|
|
if (icon.startsWith(iconPrefixes)) {
|
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(IconFont, {
|
|
type: icon
|
|
});
|
|
}
|
|
}
|
|
return icon;
|
|
};
|
|
var getMenuTitleSymbol = function getMenuTitleSymbol(title) {
|
|
if (title && typeof title === 'string') {
|
|
var symbol = title.substring(0, 1).toUpperCase();
|
|
return symbol;
|
|
}
|
|
return null;
|
|
};
|
|
var MenuUtil = /*#__PURE__*/(0, _createClass2.default)(function MenuUtil(props) {
|
|
var _this = this;
|
|
(0, _classCallCheck2.default)(this, MenuUtil);
|
|
(0, _defineProperty2.default)(this, "props", void 0);
|
|
(0, _defineProperty2.default)(this, "getNavMenuItems", function () {
|
|
var menusData = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
|
|
var level = arguments.length > 1 ? arguments[1] : undefined;
|
|
var noGroupLevel = arguments.length > 2 ? arguments[2] : undefined;
|
|
return menusData.map(function (item) {
|
|
return _this.getSubMenuOrItem(item, level, noGroupLevel);
|
|
}).filter(function (item) {
|
|
return item;
|
|
}).flat(1);
|
|
});
|
|
/** Get SubMenu or Item */
|
|
(0, _defineProperty2.default)(this, "getSubMenuOrItem", function (item, level, noGroupLevel) {
|
|
var _this$props = _this.props,
|
|
subMenuItemRender = _this$props.subMenuItemRender,
|
|
baseClassName = _this$props.baseClassName,
|
|
prefixCls = _this$props.prefixCls,
|
|
collapsed = _this$props.collapsed,
|
|
menu = _this$props.menu,
|
|
iconPrefixes = _this$props.iconPrefixes,
|
|
layout = _this$props.layout;
|
|
var isGroup = (menu === null || menu === void 0 ? void 0 : menu.type) === 'group' && layout !== 'top';
|
|
var designToken = _this.props.token;
|
|
var name = _this.getIntlName(item);
|
|
var children = (item === null || item === void 0 ? void 0 : item.children) || (item === null || item === void 0 ? void 0 : item.routes);
|
|
var menuType = isGroup && level === 0 ? 'group' : undefined;
|
|
if (Array.isArray(children) && children.length > 0) {
|
|
var _this$props2, _this$props3, _this$props4, _this$props5, _designToken$layout;
|
|
/** Menu 第一级可以有icon，或者 isGroup 时第二级别也要有 */
|
|
var shouldHasIcon = level === 0 || isGroup && level === 1;
|
|
|
|
// get defaultTitle by menuItemRender
|
|
var iconDom = getIcon(item.icon, iconPrefixes, "".concat(baseClassName, "-icon ").concat((_this$props2 = _this.props) === null || _this$props2 === void 0 ? void 0 : _this$props2.hashId));
|
|
/**
|
|
* 如果没有icon在收起的时候用首字母代替
|
|
*/
|
|
var defaultIcon = collapsed && shouldHasIcon ? getMenuTitleSymbol(name) : null;
|
|
var defaultTitle = /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
className: (0, _classnames.default)("".concat(baseClassName, "-item-title"), (_this$props3 = _this.props) === null || _this$props3 === void 0 ? void 0 : _this$props3.hashId, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(baseClassName, "-item-title-collapsed"), collapsed), "".concat(baseClassName, "-item-title-collapsed-level-").concat(noGroupLevel), collapsed), "".concat(baseClassName, "-group-item-title"), menuType === 'group'), "".concat(baseClassName, "-item-collapsed-show-title"), (menu === null || menu === void 0 ? void 0 : menu.collapsedShowTitle) && collapsed)),
|
|
children: [menuType === 'group' && collapsed ? null : shouldHasIcon && iconDom ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
className: "".concat(baseClassName, "-item-icon ").concat((_this$props4 = _this.props) === null || _this$props4 === void 0 ? void 0 : _this$props4.hashId).trim(),
|
|
children: iconDom
|
|
}) : defaultIcon, /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
className: (0, _classnames.default)("".concat(baseClassName, "-item-text"), (_this$props5 = _this.props) === null || _this$props5 === void 0 ? void 0 : _this$props5.hashId, (0, _defineProperty2.default)({}, "".concat(baseClassName, "-item-text-has-icon"), menuType !== 'group' && shouldHasIcon && (iconDom || defaultIcon))),
|
|
children: name
|
|
})]
|
|
});
|
|
|
|
// subMenu only title render
|
|
var title = subMenuItemRender ? subMenuItemRender((0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), {}, {
|
|
isUrl: false
|
|
}), defaultTitle, _this.props) : defaultTitle;
|
|
|
|
// 如果收起来，没有子菜单了，就不需要展示 group，所以 level 不增加
|
|
if (isGroup && level === 0 && _this.props.collapsed && !menu.collapsedShowGroupTitle) {
|
|
return _this.getNavMenuItems(children, level + 1, level);
|
|
}
|
|
var childrenList = _this.getNavMenuItems(children, level + 1, isGroup && level === 0 && _this.props.collapsed ? level : level + 1);
|
|
return [{
|
|
type: menuType,
|
|
key: item.key || item.path,
|
|
label: title,
|
|
onClick: isGroup ? undefined : item.onTitleClick,
|
|
children: childrenList,
|
|
className: (0, _classnames.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(baseClassName, "-group"), menuType === 'group'), "".concat(baseClassName, "-submenu"), menuType !== 'group'), "".concat(baseClassName, "-submenu-has-icon"), menuType !== 'group' && shouldHasIcon && iconDom))
|
|
}, isGroup && level === 0 ? {
|
|
type: 'divider',
|
|
prefixCls: prefixCls,
|
|
className: "".concat(baseClassName, "-divider"),
|
|
key: (item.key || item.path) + '-group-divider',
|
|
style: {
|
|
padding: 0,
|
|
borderBlockEnd: 0,
|
|
margin: _this.props.collapsed ? '4px' : '6px 16px',
|
|
marginBlockStart: _this.props.collapsed ? 4 : 8,
|
|
borderColor: designToken === null || designToken === void 0 || (_designToken$layout = designToken.layout) === null || _designToken$layout === void 0 || (_designToken$layout = _designToken$layout.sider) === null || _designToken$layout === void 0 ? void 0 : _designToken$layout.colorMenuItemDivider
|
|
}
|
|
} : undefined].filter(Boolean);
|
|
}
|
|
return {
|
|
className: "".concat(baseClassName, "-menu-item"),
|
|
disabled: item.disabled,
|
|
key: item.key || item.path,
|
|
onClick: item.onTitleClick,
|
|
// eslint-disable-next-line react/no-is-mounted
|
|
label: _this.getMenuItemPath(item, level, noGroupLevel)
|
|
};
|
|
});
|
|
(0, _defineProperty2.default)(this, "getIntlName", function (item) {
|
|
var name = item.name,
|
|
locale = item.locale;
|
|
var _this$props6 = _this.props,
|
|
menu = _this$props6.menu,
|
|
formatMessage = _this$props6.formatMessage;
|
|
var finalName = name;
|
|
if (locale && (menu === null || menu === void 0 ? void 0 : menu.locale) !== false) {
|
|
finalName = formatMessage === null || formatMessage === void 0 ? void 0 : formatMessage({
|
|
id: locale,
|
|
defaultMessage: name
|
|
});
|
|
}
|
|
if (_this.props.menuTextRender) {
|
|
return _this.props.menuTextRender(item, finalName, _this.props);
|
|
}
|
|
return finalName;
|
|
});
|
|
/**
|
|
* 判断是否是http链接.返回 Link 或 a Judge whether it is http link.return a or Link
|
|
*
|
|
* @memberof SiderMenu
|
|
*/
|
|
(0, _defineProperty2.default)(this, "getMenuItemPath", function (item, level, noGroupLevel) {
|
|
var _this$props9, _this$props10, _this$props11, _this$props12;
|
|
var itemPath = _this.conversionPath(item.path || '/');
|
|
var _this$props7 = _this.props,
|
|
_this$props7$location = _this$props7.location,
|
|
location = _this$props7$location === void 0 ? {
|
|
pathname: '/'
|
|
} : _this$props7$location,
|
|
isMobile = _this$props7.isMobile,
|
|
onCollapse = _this$props7.onCollapse,
|
|
menuItemRender = _this$props7.menuItemRender,
|
|
iconPrefixes = _this$props7.iconPrefixes;
|
|
|
|
// if local is true formatMessage all name。
|
|
var menuItemTitle = _this.getIntlName(item);
|
|
var _this$props8 = _this.props,
|
|
baseClassName = _this$props8.baseClassName,
|
|
menu = _this$props8.menu,
|
|
collapsed = _this$props8.collapsed;
|
|
var isGroup = (menu === null || menu === void 0 ? void 0 : menu.type) === 'group';
|
|
/** Menu 第一级可以有icon，或者 isGroup 时第二级别也要有 */
|
|
var hasIcon = level === 0 || isGroup && level === 1;
|
|
var icon = !hasIcon ? null : getIcon(item.icon, iconPrefixes, "".concat(baseClassName, "-icon ").concat((_this$props9 = _this.props) === null || _this$props9 === void 0 ? void 0 : _this$props9.hashId));
|
|
|
|
// 如果没有 icon 在收起的时候用首字母代替
|
|
var defaultIcon = collapsed && hasIcon ? getMenuTitleSymbol(menuItemTitle) : null;
|
|
var defaultItem = /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
className: (0, _classnames.default)("".concat(baseClassName, "-item-title"), (_this$props10 = _this.props) === null || _this$props10 === void 0 ? void 0 : _this$props10.hashId, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(baseClassName, "-item-title-collapsed"), collapsed), "".concat(baseClassName, "-item-title-collapsed-level-").concat(noGroupLevel), collapsed), "".concat(baseClassName, "-item-collapsed-show-title"), (menu === null || menu === void 0 ? void 0 : menu.collapsedShowTitle) && collapsed)),
|
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
className: "".concat(baseClassName, "-item-icon ").concat((_this$props11 = _this.props) === null || _this$props11 === void 0 ? void 0 : _this$props11.hashId).trim(),
|
|
style: {
|
|
display: defaultIcon === null && !icon ? 'none' : ''
|
|
},
|
|
children: icon || /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
className: "anticon",
|
|
children: defaultIcon
|
|
})
|
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
className: (0, _classnames.default)("".concat(baseClassName, "-item-text"), (_this$props12 = _this.props) === null || _this$props12 === void 0 ? void 0 : _this$props12.hashId, (0, _defineProperty2.default)({}, "".concat(baseClassName, "-item-text-has-icon"), hasIcon && (icon || defaultIcon))),
|
|
children: menuItemTitle
|
|
})]
|
|
}, itemPath);
|
|
var isHttpUrl = (0, _proUtils.isUrl)(itemPath);
|
|
|
|
// Is it a http link
|
|
if (isHttpUrl) {
|
|
var _this$props13, _this$props14, _this$props15;
|
|
defaultItem = /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
|
|
onClick: function onClick() {
|
|
var _window, _window$open;
|
|
(_window = window) === null || _window === void 0 || (_window$open = _window.open) === null || _window$open === void 0 || _window$open.call(_window, itemPath, '_blank');
|
|
},
|
|
className: (0, _classnames.default)("".concat(baseClassName, "-item-title"), (_this$props13 = _this.props) === null || _this$props13 === void 0 ? void 0 : _this$props13.hashId, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(baseClassName, "-item-title-collapsed"), collapsed), "".concat(baseClassName, "-item-title-collapsed-level-").concat(noGroupLevel), collapsed), "".concat(baseClassName, "-item-link"), true), "".concat(baseClassName, "-item-collapsed-show-title"), (menu === null || menu === void 0 ? void 0 : menu.collapsedShowTitle) && collapsed)),
|
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
className: "".concat(baseClassName, "-item-icon ").concat((_this$props14 = _this.props) === null || _this$props14 === void 0 ? void 0 : _this$props14.hashId).trim(),
|
|
style: {
|
|
display: defaultIcon === null && !icon ? 'none' : ''
|
|
},
|
|
children: icon || /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
className: "anticon",
|
|
children: defaultIcon
|
|
})
|
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
className: (0, _classnames.default)("".concat(baseClassName, "-item-text"), (_this$props15 = _this.props) === null || _this$props15 === void 0 ? void 0 : _this$props15.hashId, (0, _defineProperty2.default)({}, "".concat(baseClassName, "-item-text-has-icon"), hasIcon && (icon || defaultIcon))),
|
|
children: menuItemTitle
|
|
})]
|
|
}, itemPath);
|
|
}
|
|
if (menuItemRender) {
|
|
var renderItemProps = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), {}, {
|
|
isUrl: isHttpUrl,
|
|
itemPath: itemPath,
|
|
isMobile: isMobile,
|
|
replace: itemPath === location.pathname,
|
|
onClick: function onClick() {
|
|
return onCollapse && onCollapse(true);
|
|
},
|
|
children: undefined
|
|
});
|
|
return level === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(MenuItemTooltip, {
|
|
collapsed: collapsed,
|
|
title: menuItemTitle,
|
|
disable: item.disabledTooltip,
|
|
children: menuItemRender(renderItemProps, defaultItem, _this.props)
|
|
}) : menuItemRender(renderItemProps, defaultItem, _this.props);
|
|
}
|
|
return level === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(MenuItemTooltip, {
|
|
collapsed: collapsed,
|
|
title: menuItemTitle,
|
|
disable: item.disabledTooltip,
|
|
children: defaultItem
|
|
}) : defaultItem;
|
|
});
|
|
(0, _defineProperty2.default)(this, "conversionPath", function (path) {
|
|
if (path && path.indexOf('http') === 0) {
|
|
return path;
|
|
}
|
|
return "/".concat(path || '').replace(/\/+/g, '/');
|
|
});
|
|
this.props = props;
|
|
});
|
|
/**
|
|
* 生成openKeys 的对象，因为设置了openKeys 就会变成受控，所以需要一个空对象
|
|
*
|
|
* @param BaseMenuProps
|
|
*/
|
|
var getOpenKeysProps = function getOpenKeysProps(openKeys, _ref) {
|
|
var layout = _ref.layout,
|
|
collapsed = _ref.collapsed;
|
|
var openKeysProps = {};
|
|
if (openKeys && !collapsed && ['side', 'mix'].includes(layout || 'mix')) {
|
|
openKeysProps = {
|
|
openKeys: openKeys
|
|
};
|
|
}
|
|
return openKeysProps;
|
|
};
|
|
var BaseMenu = exports.BaseMenu = function BaseMenu(props) {
|
|
var mode = props.mode,
|
|
className = props.className,
|
|
handleOpenChange = props.handleOpenChange,
|
|
style = props.style,
|
|
menuData = props.menuData,
|
|
prefixCls = props.prefixCls,
|
|
menu = props.menu,
|
|
matchMenuKeys = props.matchMenuKeys,
|
|
iconfontUrl = props.iconfontUrl,
|
|
propsSelectedKeys = props.selectedKeys,
|
|
onSelect = props.onSelect,
|
|
menuRenderType = props.menuRenderType,
|
|
propsOpenKeys = props.openKeys;
|
|
var _useContext = (0, _react.useContext)(_proProvider.ProProvider),
|
|
dark = _useContext.dark,
|
|
designToken = _useContext.token;
|
|
var baseClassName = "".concat(prefixCls, "-base-menu-").concat(mode);
|
|
// 用于减少 defaultOpenKeys 计算的组件
|
|
var defaultOpenKeysRef = (0, _react.useRef)([]);
|
|
var _useMountMergeState = (0, _proUtils.useMountMergeState)(menu === null || menu === void 0 ? void 0 : menu.defaultOpenAll),
|
|
_useMountMergeState2 = (0, _slicedToArray2.default)(_useMountMergeState, 2),
|
|
defaultOpenAll = _useMountMergeState2[0],
|
|
setDefaultOpenAll = _useMountMergeState2[1];
|
|
var _useMountMergeState3 = (0, _proUtils.useMountMergeState)(function () {
|
|
if (menu !== null && menu !== void 0 && menu.defaultOpenAll) {
|
|
return (0, _utils.getOpenKeysFromMenuData)(menuData) || [];
|
|
}
|
|
if (propsOpenKeys === false) {
|
|
return false;
|
|
}
|
|
return [];
|
|
}, {
|
|
value: propsOpenKeys === false ? undefined : propsOpenKeys,
|
|
onChange: handleOpenChange
|
|
}),
|
|
_useMountMergeState4 = (0, _slicedToArray2.default)(_useMountMergeState3, 2),
|
|
openKeys = _useMountMergeState4[0],
|
|
setOpenKeys = _useMountMergeState4[1];
|
|
var _useMountMergeState5 = (0, _proUtils.useMountMergeState)([], {
|
|
value: propsSelectedKeys,
|
|
onChange: onSelect ? function (keys) {
|
|
if (onSelect && keys) {
|
|
onSelect(keys);
|
|
}
|
|
} : undefined
|
|
}),
|
|
_useMountMergeState6 = (0, _slicedToArray2.default)(_useMountMergeState5, 2),
|
|
selectedKeys = _useMountMergeState6[0],
|
|
setSelectedKeys = _useMountMergeState6[1];
|
|
(0, _react.useEffect)(function () {
|
|
if (menu !== null && menu !== void 0 && menu.defaultOpenAll || propsOpenKeys === false) {
|
|
return;
|
|
}
|
|
if (matchMenuKeys) {
|
|
setOpenKeys(matchMenuKeys);
|
|
setSelectedKeys(matchMenuKeys);
|
|
}
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [matchMenuKeys.join('-')]);
|
|
(0, _react.useEffect)(function () {
|
|
// reset IconFont
|
|
if (iconfontUrl) {
|
|
IconFont = (0, _icons.createFromIconfontCN)({
|
|
scriptUrl: iconfontUrl
|
|
});
|
|
}
|
|
}, [iconfontUrl]);
|
|
(0, _react.useEffect)(function () {
|
|
// if pathname can't match, use the nearest parent's key
|
|
if (matchMenuKeys.join('-') !== (selectedKeys || []).join('-')) {
|
|
setSelectedKeys(matchMenuKeys);
|
|
}
|
|
if (!defaultOpenAll && propsOpenKeys !== false && matchMenuKeys.join('-') !== (openKeys || []).join('-')) {
|
|
var newKeys = matchMenuKeys;
|
|
// 如果不自动关闭，我需要把 openKeys 放进去
|
|
if ((menu === null || menu === void 0 ? void 0 : menu.autoClose) === false) {
|
|
newKeys = Array.from(new Set([].concat((0, _toConsumableArray2.default)(matchMenuKeys), (0, _toConsumableArray2.default)(openKeys || []))));
|
|
}
|
|
setOpenKeys(newKeys);
|
|
} else if (menu !== null && menu !== void 0 && menu.ignoreFlatMenu && defaultOpenAll) {
|
|
// 忽略用户手动折叠过的菜单状态，折叠按钮切换之后也可实现默认展开所有菜单
|
|
setOpenKeys((0, _utils.getOpenKeysFromMenuData)(menuData));
|
|
} else {
|
|
setDefaultOpenAll(false);
|
|
}
|
|
},
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
[matchMenuKeys.join('-')]);
|
|
var openKeysProps = (0, _react.useMemo)(function () {
|
|
return getOpenKeysProps(openKeys, props);
|
|
},
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
[openKeys && openKeys.join(','), props.layout, props.collapsed]);
|
|
var _useStyle = (0, _menu.useStyle)(baseClassName, mode),
|
|
wrapSSR = _useStyle.wrapSSR,
|
|
hashId = _useStyle.hashId;
|
|
var menuUtils = (0, _react.useMemo)(function () {
|
|
return new MenuUtil((0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
|
|
token: designToken,
|
|
menuRenderType: menuRenderType,
|
|
baseClassName: baseClassName,
|
|
hashId: hashId
|
|
}));
|
|
}, [props, designToken, menuRenderType, baseClassName, hashId]);
|
|
if (menu !== null && menu !== void 0 && menu.loading) {
|
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
style: mode !== null && mode !== void 0 && mode.includes('inline') ? {
|
|
padding: 24
|
|
} : {
|
|
marginBlockStart: 16
|
|
},
|
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Skeleton, {
|
|
active: true,
|
|
title: false,
|
|
paragraph: {
|
|
rows: mode !== null && mode !== void 0 && mode.includes('inline') ? 6 : 1
|
|
}
|
|
})
|
|
});
|
|
}
|
|
|
|
// 这次 openKeys === false 的时候的情况，这种情况下帮用户选中一次
|
|
// 第二此不会使用，所以用了 defaultOpenKeys
|
|
// 这里返回 null，是为了让 defaultOpenKeys 生效
|
|
if (props.openKeys === false && !props.handleOpenChange) {
|
|
defaultOpenKeysRef.current = matchMenuKeys;
|
|
}
|
|
var finallyData = props.postMenuData ? props.postMenuData(menuData) : menuData;
|
|
if (finallyData && (finallyData === null || finallyData === void 0 ? void 0 : finallyData.length) < 1) {
|
|
return null;
|
|
}
|
|
return wrapSSR( /*#__PURE__*/(0, _react.createElement)(_antd.Menu, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, openKeysProps), {}, {
|
|
_internalDisableMenuItemTitleTooltip: true,
|
|
key: "Menu",
|
|
mode: mode,
|
|
inlineIndent: 16,
|
|
defaultOpenKeys: defaultOpenKeysRef.current,
|
|
theme: dark ? 'dark' : 'light',
|
|
selectedKeys: selectedKeys,
|
|
style: (0, _objectSpread2.default)({
|
|
backgroundColor: 'transparent',
|
|
border: 'none'
|
|
}, style),
|
|
className: (0, _classnames.default)(className, hashId, baseClassName, (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(baseClassName, "-horizontal"), mode === 'horizontal'), "".concat(baseClassName, "-collapsed"), props.collapsed)),
|
|
items: menuUtils.getNavMenuItems(finallyData, 0, 0),
|
|
onOpenChange: function onOpenChange(_openKeys) {
|
|
if (!props.collapsed) {
|
|
setOpenKeys(_openKeys);
|
|
}
|
|
}
|
|
}, props.menuProps)));
|
|
}; |