2017-11-17 14:38:54 +08:00
|
|
|
import * as React from 'react';
|
2022-05-07 14:31:54 +08:00
|
|
|
import type { MenuProps as RcMenuProps, MenuRef } from 'rc-menu';
|
|
|
|
import RcMenu, { ItemGroup } from 'rc-menu';
|
2017-06-30 18:08:30 +08:00
|
|
|
import classNames from 'classnames';
|
2021-05-24 16:24:00 +08:00
|
|
|
import omit from 'rc-util/lib/omit';
|
2021-06-16 20:21:15 +08:00
|
|
|
import EllipsisOutlined from '@ant-design/icons/EllipsisOutlined';
|
2022-03-28 14:43:10 +08:00
|
|
|
import { forwardRef } from 'react';
|
2021-01-24 23:24:06 +08:00
|
|
|
import SubMenu, { SubMenuProps } from './SubMenu';
|
|
|
|
import Item, { MenuItemProps } from './MenuItem';
|
2022-03-11 15:26:29 +08:00
|
|
|
import { ConfigContext } from '../config-provider';
|
2022-05-10 15:43:29 +08:00
|
|
|
import warning from '../_util/warning';
|
2022-05-07 14:31:54 +08:00
|
|
|
import type { SiderContextProps } from '../layout/Sider';
|
|
|
|
import { SiderContext } from '../layout/Sider';
|
2019-10-14 15:01:16 +08:00
|
|
|
import collapseMotion from '../_util/motion';
|
2020-11-06 15:25:43 +08:00
|
|
|
import { cloneElement } from '../_util/reactNode';
|
2022-03-11 15:26:29 +08:00
|
|
|
import MenuContext, { MenuTheme } from './MenuContext';
|
2021-07-19 15:42:07 +08:00
|
|
|
import MenuDivider from './MenuDivider';
|
2022-03-18 15:20:35 +08:00
|
|
|
import type { ItemType } from './hooks/useItems';
|
|
|
|
import useItems from './hooks/useItems';
|
2022-04-20 15:31:04 +08:00
|
|
|
import useStyle from './style';
|
2021-07-19 15:42:07 +08:00
|
|
|
|
|
|
|
export { MenuDividerProps } from './MenuDivider';
|
2015-08-06 16:49:54 +08:00
|
|
|
|
2020-07-06 11:40:52 +08:00
|
|
|
export { MenuItemGroupProps } from 'rc-menu';
|
2016-08-15 12:00:05 +08:00
|
|
|
|
2017-11-21 17:38:51 +08:00
|
|
|
export type MenuMode = 'vertical' | 'vertical-left' | 'vertical-right' | 'horizontal' | 'inline';
|
|
|
|
|
2022-03-18 15:20:35 +08:00
|
|
|
export interface MenuProps extends Omit<RcMenuProps, 'items'> {
|
2018-04-10 10:50:59 +08:00
|
|
|
theme?: MenuTheme;
|
2017-04-26 10:11:03 +08:00
|
|
|
inlineIndent?: number;
|
2021-12-24 10:57:35 +08:00
|
|
|
|
|
|
|
// >>>>> Private
|
|
|
|
/**
|
|
|
|
* @private Internal Usage. Not promise crash if used in production. Connect with chenshuai2144
|
|
|
|
* for removing.
|
|
|
|
*/
|
|
|
|
_internalDisableMenuItemTitleTooltip?: boolean;
|
2022-03-18 15:20:35 +08:00
|
|
|
|
|
|
|
items?: ItemType[];
|
2016-08-15 12:00:05 +08:00
|
|
|
}
|
|
|
|
|
2021-05-24 16:24:00 +08:00
|
|
|
type InternalMenuProps = MenuProps &
|
|
|
|
SiderContextProps & {
|
|
|
|
collapsedWidth?: string | number;
|
|
|
|
};
|
2019-04-05 16:15:01 +08:00
|
|
|
|
2022-03-28 14:43:10 +08:00
|
|
|
const InternalMenu = forwardRef<MenuRef, InternalMenuProps>((props, ref) => {
|
2022-03-11 15:26:29 +08:00
|
|
|
const { getPrefixCls, getPopupContainer, direction } = React.useContext(ConfigContext);
|
|
|
|
|
|
|
|
const rootPrefixCls = getPrefixCls();
|
|
|
|
|
|
|
|
const {
|
|
|
|
prefixCls: customizePrefixCls,
|
|
|
|
className,
|
|
|
|
theme = 'light',
|
|
|
|
expandIcon,
|
|
|
|
_internalDisableMenuItemTitleTooltip,
|
|
|
|
inlineCollapsed,
|
|
|
|
siderCollapsed,
|
2022-03-18 15:20:35 +08:00
|
|
|
items,
|
|
|
|
children,
|
2022-04-20 15:31:04 +08:00
|
|
|
rootClassName,
|
2022-03-11 15:26:29 +08:00
|
|
|
...restProps
|
|
|
|
} = props;
|
|
|
|
|
|
|
|
const passedProps = omit(restProps, ['collapsedWidth']);
|
2022-04-25 10:54:00 +08:00
|
|
|
const injectFromDropdown = (props as any)['data-dropdown-inject'];
|
2022-03-11 15:26:29 +08:00
|
|
|
|
2022-03-18 15:20:35 +08:00
|
|
|
// ========================= Items ===========================
|
|
|
|
const mergedChildren = useItems(items) || children;
|
|
|
|
|
2022-03-11 15:26:29 +08:00
|
|
|
// ======================== Warning ==========================
|
2022-05-10 15:43:29 +08:00
|
|
|
warning(
|
2022-03-11 15:26:29 +08:00
|
|
|
!('inlineCollapsed' in props && props.mode !== 'inline'),
|
|
|
|
'Menu',
|
|
|
|
'`inlineCollapsed` should only be used when `mode` is inline.',
|
|
|
|
);
|
2017-06-30 20:27:39 +08:00
|
|
|
|
2022-05-10 15:43:29 +08:00
|
|
|
warning(
|
2022-03-11 15:26:29 +08:00
|
|
|
!(props.siderCollapsed !== undefined && 'inlineCollapsed' in props),
|
|
|
|
'Menu',
|
|
|
|
'`inlineCollapsed` not control Menu under Sider. Should set `collapsed` on Sider instead.',
|
|
|
|
);
|
2019-08-05 18:38:10 +08:00
|
|
|
|
2022-05-10 15:43:29 +08:00
|
|
|
warning(
|
2022-03-18 15:20:35 +08:00
|
|
|
!!items && !children,
|
|
|
|
'Menu',
|
|
|
|
'`children` will be removed in next major version. Please use `items` instead.',
|
|
|
|
);
|
|
|
|
|
2022-03-11 15:26:29 +08:00
|
|
|
// ======================== Collapsed ========================
|
|
|
|
// Inline Collapsed
|
|
|
|
const mergedInlineCollapsed = React.useMemo(() => {
|
2020-04-30 21:29:16 +08:00
|
|
|
if (siderCollapsed !== undefined) {
|
|
|
|
return siderCollapsed;
|
2019-08-05 18:38:10 +08:00
|
|
|
}
|
|
|
|
return inlineCollapsed;
|
2022-03-11 15:26:29 +08:00
|
|
|
}, [inlineCollapsed, siderCollapsed]);
|
2021-02-08 17:09:13 +08:00
|
|
|
|
2022-03-11 15:26:29 +08:00
|
|
|
const defaultMotions = {
|
|
|
|
horizontal: { motionName: `${rootPrefixCls}-slide-up` },
|
|
|
|
inline: collapseMotion,
|
|
|
|
other: { motionName: `${rootPrefixCls}-zoom-big` },
|
|
|
|
};
|
2017-06-30 18:08:30 +08:00
|
|
|
|
2022-03-11 15:26:29 +08:00
|
|
|
const prefixCls = getPrefixCls('menu', customizePrefixCls);
|
2022-04-25 10:54:00 +08:00
|
|
|
const [wrapSSR, hashId] = useStyle(prefixCls, !injectFromDropdown);
|
2022-03-11 15:26:29 +08:00
|
|
|
const menuClassName = classNames(`${prefixCls}-${theme}`, className);
|
2015-11-12 14:57:54 +08:00
|
|
|
|
2022-03-11 15:26:29 +08:00
|
|
|
// ======================== Context ==========================
|
|
|
|
const contextValue = React.useMemo(
|
|
|
|
() => ({
|
2022-02-18 18:34:21 +08:00
|
|
|
prefixCls,
|
2022-03-11 15:26:29 +08:00
|
|
|
inlineCollapsed: mergedInlineCollapsed || false,
|
|
|
|
antdMenuTheme: theme,
|
2022-02-18 18:34:21 +08:00
|
|
|
direction,
|
2022-03-11 15:26:29 +08:00
|
|
|
firstLevel: true,
|
|
|
|
disableMenuItemTitleTooltip: _internalDisableMenuItemTitleTooltip,
|
|
|
|
}),
|
|
|
|
[prefixCls, mergedInlineCollapsed, theme, direction, _internalDisableMenuItemTitleTooltip],
|
|
|
|
);
|
2020-01-02 19:10:16 +08:00
|
|
|
|
2022-03-11 15:26:29 +08:00
|
|
|
// ========================= Render ==========================
|
2022-04-20 15:31:04 +08:00
|
|
|
return wrapSSR(
|
2022-03-11 15:26:29 +08:00
|
|
|
<MenuContext.Provider value={contextValue}>
|
|
|
|
<RcMenu
|
|
|
|
getPopupContainer={getPopupContainer}
|
|
|
|
overflowedIndicator={<EllipsisOutlined />}
|
|
|
|
overflowedIndicatorPopupClassName={`${prefixCls}-${theme}`}
|
|
|
|
{...passedProps}
|
|
|
|
inlineCollapsed={mergedInlineCollapsed}
|
|
|
|
className={menuClassName}
|
|
|
|
prefixCls={prefixCls}
|
|
|
|
direction={direction}
|
|
|
|
defaultMotions={defaultMotions}
|
2022-04-08 22:55:42 +08:00
|
|
|
expandIcon={
|
|
|
|
typeof expandIcon === 'function'
|
|
|
|
? expandIcon
|
|
|
|
: cloneElement(expandIcon, {
|
|
|
|
className: `${prefixCls}-submenu-expand-icon`,
|
|
|
|
})
|
|
|
|
}
|
2022-03-28 14:43:10 +08:00
|
|
|
ref={ref}
|
2022-04-20 15:31:04 +08:00
|
|
|
rootClassName={classNames(rootClassName, hashId)}
|
2022-03-18 15:20:35 +08:00
|
|
|
>
|
|
|
|
{mergedChildren}
|
|
|
|
</RcMenu>
|
2022-04-20 15:31:04 +08:00
|
|
|
</MenuContext.Provider>,
|
2022-03-11 15:26:29 +08:00
|
|
|
);
|
2022-03-28 14:43:10 +08:00
|
|
|
});
|
2019-03-07 16:58:53 +08:00
|
|
|
|
2019-04-05 16:15:01 +08:00
|
|
|
// We should keep this as ref-able
|
2021-01-24 23:24:06 +08:00
|
|
|
class Menu extends React.Component<MenuProps, {}> {
|
2021-07-19 15:42:07 +08:00
|
|
|
static Divider = MenuDivider;
|
2019-08-05 18:38:10 +08:00
|
|
|
|
2019-04-05 16:15:01 +08:00
|
|
|
static Item = Item;
|
2019-08-05 18:38:10 +08:00
|
|
|
|
2019-04-05 16:15:01 +08:00
|
|
|
static SubMenu = SubMenu;
|
2019-08-05 18:38:10 +08:00
|
|
|
|
2019-04-05 16:15:01 +08:00
|
|
|
static ItemGroup = ItemGroup;
|
2019-03-07 16:58:53 +08:00
|
|
|
|
2022-03-28 14:43:10 +08:00
|
|
|
menu: MenuRef | null;
|
|
|
|
|
|
|
|
focus = (options?: FocusOptions) => {
|
|
|
|
this.menu?.focus(options);
|
|
|
|
};
|
|
|
|
|
2019-04-05 16:15:01 +08:00
|
|
|
render() {
|
|
|
|
return (
|
|
|
|
<SiderContext.Consumer>
|
2022-03-28 14:43:10 +08:00
|
|
|
{(context: SiderContextProps) => (
|
|
|
|
<InternalMenu
|
|
|
|
ref={node => {
|
|
|
|
this.menu = node;
|
|
|
|
}}
|
|
|
|
{...this.props}
|
|
|
|
{...context}
|
|
|
|
/>
|
|
|
|
)}
|
2019-04-05 16:15:01 +08:00
|
|
|
</SiderContext.Consumer>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
2021-01-24 23:24:06 +08:00
|
|
|
|
|
|
|
export { MenuTheme, SubMenuProps, MenuItemProps };
|
|
|
|
|
|
|
|
export default Menu;
|