antd
Version:
An enterprise-class UI design language and React components implementation
75 lines (74 loc) • 2.63 kB
JavaScript
"use client";
import * as React from 'react';
import { SubMenu as RcSubMenu, useFullPath } from '@rc-component/menu';
import { omit } from '@rc-component/util';
import { clsx } from 'clsx';
import { useZIndex } from '../_util/hooks';
import { cloneElement } from '../_util/reactNode';
import MenuContext from './MenuContext';
const SubMenu = props => {
const {
popupClassName,
icon,
title,
theme: customTheme
} = props;
const context = React.useContext(MenuContext);
const {
prefixCls,
inlineCollapsed,
theme: contextTheme,
classNames,
styles
} = context;
const parentPath = useFullPath();
let titleNode;
if (!icon) {
titleNode = inlineCollapsed && !parentPath.length && title && typeof title === 'string' ? (/*#__PURE__*/React.createElement("div", {
className: `${prefixCls}-inline-collapsed-noicon`
}, title.charAt(0))) : (/*#__PURE__*/React.createElement("span", {
className: `${prefixCls}-title-content`
}, title));
} else {
// inline-collapsed.md demo 依赖 span 来隐藏文字,有 icon 属性，则内部包裹一个 span
// ref: https://github.com/ant-design/ant-design/pull/23456
const titleIsSpan = /*#__PURE__*/React.isValidElement(title) && title.type === 'span';
titleNode = /*#__PURE__*/React.createElement(React.Fragment, null, cloneElement(icon, oriProps => ({
className: clsx(oriProps.className, `${prefixCls}-item-icon`, classNames.itemIcon),
style: {
...oriProps.style,
...styles.itemIcon
}
})), titleIsSpan ? title : /*#__PURE__*/React.createElement("span", {
className: `${prefixCls}-title-content`
}, title));
}
const contextValue = React.useMemo(() => ({
...context,
firstLevel: false
}), [context]);
// ============================ zIndex ============================
const [zIndex] = useZIndex('Menu');
return /*#__PURE__*/React.createElement(MenuContext.Provider, {
value: contextValue
}, /*#__PURE__*/React.createElement(RcSubMenu, {
...omit(props, ['icon']),
title: titleNode,
classNames: {
list: classNames.subMenu.list,
listTitle: classNames.subMenu.itemTitle
},
styles: {
list: styles.subMenu.list,
listTitle: styles.subMenu.itemTitle
},
popupClassName: clsx(prefixCls, popupClassName, classNames.popup.root, `${prefixCls}-${customTheme || contextTheme}`),
popupStyle: {
zIndex,
// fix: https://github.com/ant-design/ant-design/issues/47826#issuecomment-2360737237
...props.popupStyle,
...styles.popup.root
}
}));
};
export default SubMenu;