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