2023-10-24 22:25:32 +08:00
|
|
|
import * as React from 'react';
|
2017-11-11 00:07:03 +08:00
|
|
|
import classNames from 'classnames';
|
2022-06-22 14:57:09 +08:00
|
|
|
import { SubMenu as RcSubMenu, useFullPath } from 'rc-menu';
|
2021-01-13 21:00:30 +08:00
|
|
|
import omit from 'rc-util/lib/omit';
|
2023-10-24 22:25:32 +08:00
|
|
|
|
|
|
|
import { useZIndex } from '../_util/hooks/useZIndex';
|
2022-06-22 14:57:09 +08:00
|
|
|
import { cloneElement, isValidElement } from '../_util/reactNode';
|
2022-11-21 09:52:33 +08:00
|
|
|
import type { MenuContextProps, MenuTheme } from './MenuContext';
|
2022-05-07 14:31:54 +08:00
|
|
|
import MenuContext from './MenuContext';
|
2019-04-05 16:15:01 +08:00
|
|
|
|
2019-02-06 08:35:47 +08:00
|
|
|
interface TitleEventEntity {
|
2019-01-28 13:29:20 +08:00
|
|
|
key: string;
|
2021-05-24 16:24:00 +08:00
|
|
|
domEvent: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>;
|
2019-01-28 13:29:20 +08:00
|
|
|
}
|
|
|
|
|
2019-01-23 10:32:35 +08:00
|
|
|
export interface SubMenuProps {
|
|
|
|
className?: string;
|
|
|
|
disabled?: boolean;
|
2020-05-27 22:19:07 +08:00
|
|
|
level?: number;
|
2019-01-23 10:32:35 +08:00
|
|
|
title?: React.ReactNode;
|
2020-04-26 23:16:15 +08:00
|
|
|
icon?: React.ReactNode;
|
2019-01-30 16:26:32 +08:00
|
|
|
style?: React.CSSProperties;
|
2019-02-06 08:35:47 +08:00
|
|
|
onTitleClick?: (e: TitleEventEntity) => void;
|
|
|
|
onTitleMouseEnter?: (e: TitleEventEntity) => void;
|
|
|
|
onTitleMouseLeave?: (e: TitleEventEntity) => void;
|
2019-06-22 14:53:51 +08:00
|
|
|
popupOffset?: [number, number];
|
2019-08-17 22:38:11 +08:00
|
|
|
popupClassName?: string;
|
2021-05-24 17:36:18 +08:00
|
|
|
children?: React.ReactNode;
|
2022-02-14 15:21:33 +08:00
|
|
|
theme?: MenuTheme;
|
2019-01-23 10:32:35 +08:00
|
|
|
}
|
|
|
|
|
2022-11-21 09:52:33 +08:00
|
|
|
const SubMenu: React.FC<SubMenuProps> = (props) => {
|
2022-09-19 22:17:26 +08:00
|
|
|
const { popupClassName, icon, title, theme: customTheme } = props;
|
2021-05-24 17:36:18 +08:00
|
|
|
const context = React.useContext(MenuContext);
|
2023-05-26 17:15:03 +08:00
|
|
|
const { prefixCls, inlineCollapsed, theme: contextTheme } = context;
|
2019-08-05 18:38:10 +08:00
|
|
|
|
2021-05-24 17:36:18 +08:00
|
|
|
const parentPath = useFullPath();
|
2019-08-05 18:38:10 +08:00
|
|
|
|
2021-05-24 17:36:18 +08:00
|
|
|
let titleNode: React.ReactNode;
|
2021-05-24 16:24:00 +08:00
|
|
|
|
2021-05-24 17:36:18 +08:00
|
|
|
if (!icon) {
|
|
|
|
titleNode =
|
|
|
|
inlineCollapsed && !parentPath.length && title && typeof title === 'string' ? (
|
2021-05-24 16:24:00 +08:00
|
|
|
<div className={`${prefixCls}-inline-collapsed-noicon`}>{title.charAt(0)}</div>
|
2020-05-27 22:19:07 +08:00
|
|
|
) : (
|
2021-05-25 20:52:52 +08:00
|
|
|
<span className={`${prefixCls}-title-content`}>{title}</span>
|
2020-05-27 22:19:07 +08:00
|
|
|
);
|
2021-05-24 17:36:18 +08:00
|
|
|
} else {
|
2020-04-26 23:16:15 +08:00
|
|
|
// inline-collapsed.md demo 依赖 span 来隐藏文字,有 icon 属性,则内部包裹一个 span
|
|
|
|
// ref: https://github.com/ant-design/ant-design/pull/23456
|
2020-05-14 20:54:49 +08:00
|
|
|
const titleIsSpan = isValidElement(title) && title.type === 'span';
|
2021-05-24 17:36:18 +08:00
|
|
|
titleNode = (
|
2020-04-26 23:16:15 +08:00
|
|
|
<>
|
2021-05-24 19:13:23 +08:00
|
|
|
{cloneElement(icon, {
|
|
|
|
className: classNames(
|
|
|
|
isValidElement(icon) ? icon.props?.className : '',
|
|
|
|
`${prefixCls}-item-icon`,
|
|
|
|
),
|
|
|
|
})}
|
2021-05-24 16:24:00 +08:00
|
|
|
{titleIsSpan ? title : <span className={`${prefixCls}-title-content`}>{title}</span>}
|
2020-04-26 23:16:15 +08:00
|
|
|
</>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2022-11-21 09:52:33 +08:00
|
|
|
const contextValue = React.useMemo<MenuContextProps>(
|
|
|
|
() => ({ ...context, firstLevel: false }),
|
2021-11-26 12:18:21 +08:00
|
|
|
[context],
|
|
|
|
);
|
|
|
|
|
2023-10-24 22:25:32 +08:00
|
|
|
// ============================ zIndex ============================
|
|
|
|
const [zIndex] = useZIndex('Menu');
|
|
|
|
|
2021-05-24 17:36:18 +08:00
|
|
|
return (
|
2021-11-26 12:18:21 +08:00
|
|
|
<MenuContext.Provider value={contextValue}>
|
2021-05-24 17:36:18 +08:00
|
|
|
<RcSubMenu
|
|
|
|
{...omit(props, ['icon'])}
|
|
|
|
title={titleNode}
|
2022-09-19 22:17:26 +08:00
|
|
|
popupClassName={classNames(
|
|
|
|
prefixCls,
|
|
|
|
popupClassName,
|
|
|
|
`${prefixCls}-${customTheme || contextTheme}`,
|
|
|
|
)}
|
2023-10-24 22:25:32 +08:00
|
|
|
popupStyle={{
|
|
|
|
zIndex,
|
|
|
|
}}
|
2021-05-24 17:36:18 +08:00
|
|
|
/>
|
|
|
|
</MenuContext.Provider>
|
|
|
|
);
|
2022-11-21 09:52:33 +08:00
|
|
|
};
|
2017-11-11 00:07:03 +08:00
|
|
|
|
|
|
|
export default SubMenu;
|