mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-15 00:29:12 +08:00
182 lines
5.8 KiB
TypeScript
182 lines
5.8 KiB
TypeScript
import EllipsisOutlined from '@ant-design/icons/EllipsisOutlined';
|
|
import classNames from 'classnames';
|
|
import type { MenuProps as RcMenuProps, MenuRef as RcMenuRef } from 'rc-menu';
|
|
import RcMenu from 'rc-menu';
|
|
import useEvent from 'rc-util/lib/hooks/useEvent';
|
|
import omit from 'rc-util/lib/omit';
|
|
import * as React from 'react';
|
|
import { forwardRef } from 'react';
|
|
import initCollapseMotion from '../_util/motion';
|
|
import { cloneElement } from '../_util/reactNode';
|
|
import warning from '../_util/warning';
|
|
import { ConfigContext } from '../config-provider';
|
|
import type { SiderContextProps } from '../layout/Sider';
|
|
import type { MenuContextProps, MenuTheme } from './MenuContext';
|
|
import MenuContext from './MenuContext';
|
|
import OverrideContext from './OverrideContext';
|
|
import type { ItemType } from './hooks/useItems';
|
|
import useItems from './hooks/useItems';
|
|
import useStyle from './style';
|
|
|
|
export interface MenuProps extends Omit<RcMenuProps, 'items'> {
|
|
theme?: MenuTheme;
|
|
inlineIndent?: number;
|
|
|
|
// >>>>> Private
|
|
/**
|
|
* @private Internal Usage. Not promise crash if used in production. Connect with chenshuai2144
|
|
* for removing.
|
|
*/
|
|
_internalDisableMenuItemTitleTooltip?: boolean;
|
|
|
|
items?: ItemType[];
|
|
}
|
|
|
|
type InternalMenuProps = MenuProps &
|
|
SiderContextProps & {
|
|
collapsedWidth?: string | number;
|
|
};
|
|
|
|
const InternalMenu = forwardRef<RcMenuRef, InternalMenuProps>((props, ref) => {
|
|
const override = React.useContext(OverrideContext);
|
|
const overrideObj = override || {};
|
|
|
|
const { getPrefixCls, getPopupContainer, direction } = React.useContext(ConfigContext);
|
|
|
|
const rootPrefixCls = getPrefixCls();
|
|
|
|
const {
|
|
prefixCls: customizePrefixCls,
|
|
className,
|
|
theme = 'light',
|
|
expandIcon,
|
|
_internalDisableMenuItemTitleTooltip,
|
|
inlineCollapsed,
|
|
siderCollapsed,
|
|
items,
|
|
children,
|
|
rootClassName,
|
|
mode,
|
|
selectable,
|
|
onClick,
|
|
overflowedIndicatorPopupClassName,
|
|
...restProps
|
|
} = props;
|
|
|
|
const passedProps = omit(restProps, ['collapsedWidth']);
|
|
|
|
// ========================= Items ===========================
|
|
const mergedChildren = useItems(items) || children;
|
|
|
|
// ======================== Warning ==========================
|
|
warning(
|
|
!('inlineCollapsed' in props && mode !== 'inline'),
|
|
'Menu',
|
|
'`inlineCollapsed` should only be used when `mode` is inline.',
|
|
);
|
|
|
|
warning(
|
|
!(props.siderCollapsed !== undefined && 'inlineCollapsed' in props),
|
|
'Menu',
|
|
'`inlineCollapsed` not control Menu under Sider. Should set `collapsed` on Sider instead.',
|
|
);
|
|
|
|
warning(
|
|
'items' in props && !children,
|
|
'Menu',
|
|
'`children` will be removed in next major version. Please use `items` instead.',
|
|
);
|
|
|
|
overrideObj.validator?.({ mode });
|
|
|
|
// ========================== Click ==========================
|
|
// Tell dropdown that item clicked
|
|
const onItemClick = useEvent<Required<MenuProps>['onClick']>((...args) => {
|
|
onClick?.(...args);
|
|
overrideObj.onClick?.();
|
|
});
|
|
|
|
// ========================== Mode ===========================
|
|
const mergedMode = overrideObj.mode || mode;
|
|
|
|
// ======================= Selectable ========================
|
|
const mergedSelectable = selectable ?? overrideObj.selectable;
|
|
|
|
// ======================== Collapsed ========================
|
|
// Inline Collapsed
|
|
const mergedInlineCollapsed = React.useMemo(() => {
|
|
if (siderCollapsed !== undefined) {
|
|
return siderCollapsed;
|
|
}
|
|
return inlineCollapsed;
|
|
}, [inlineCollapsed, siderCollapsed]);
|
|
|
|
const defaultMotions = {
|
|
horizontal: { motionName: `${rootPrefixCls}-slide-up` },
|
|
inline: initCollapseMotion(rootPrefixCls),
|
|
other: { motionName: `${rootPrefixCls}-zoom-big` },
|
|
};
|
|
|
|
const prefixCls = getPrefixCls('menu', customizePrefixCls || overrideObj.prefixCls);
|
|
const [wrapSSR, hashId] = useStyle(prefixCls, !override);
|
|
const menuClassName = classNames(`${prefixCls}-${theme}`, className);
|
|
|
|
// ====================== Expand Icon ========================
|
|
let mergedExpandIcon: MenuProps[`expandIcon`];
|
|
if (typeof expandIcon === 'function') {
|
|
mergedExpandIcon = expandIcon;
|
|
} else {
|
|
const beClone: any = expandIcon || overrideObj.expandIcon;
|
|
mergedExpandIcon = cloneElement(beClone, {
|
|
className: classNames(`${prefixCls}-submenu-expand-icon`, beClone?.props?.className),
|
|
});
|
|
}
|
|
|
|
// ======================== Context ==========================
|
|
const contextValue = React.useMemo<MenuContextProps>(
|
|
() => ({
|
|
prefixCls,
|
|
inlineCollapsed: mergedInlineCollapsed || false,
|
|
direction,
|
|
firstLevel: true,
|
|
theme,
|
|
mode: mergedMode,
|
|
disableMenuItemTitleTooltip: _internalDisableMenuItemTitleTooltip,
|
|
}),
|
|
[prefixCls, mergedInlineCollapsed, direction, _internalDisableMenuItemTitleTooltip, theme],
|
|
);
|
|
|
|
// ========================= Render ==========================
|
|
return wrapSSR(
|
|
<OverrideContext.Provider value={null}>
|
|
<MenuContext.Provider value={contextValue}>
|
|
<RcMenu
|
|
getPopupContainer={getPopupContainer}
|
|
overflowedIndicator={<EllipsisOutlined />}
|
|
overflowedIndicatorPopupClassName={classNames(
|
|
prefixCls,
|
|
`${prefixCls}-${theme}`,
|
|
overflowedIndicatorPopupClassName,
|
|
)}
|
|
mode={mergedMode}
|
|
selectable={mergedSelectable}
|
|
onClick={onItemClick}
|
|
{...passedProps}
|
|
inlineCollapsed={mergedInlineCollapsed}
|
|
className={menuClassName}
|
|
prefixCls={prefixCls}
|
|
direction={direction}
|
|
defaultMotions={defaultMotions}
|
|
expandIcon={mergedExpandIcon}
|
|
ref={ref}
|
|
rootClassName={classNames(rootClassName, hashId)}
|
|
>
|
|
{mergedChildren}
|
|
</RcMenu>
|
|
</MenuContext.Provider>
|
|
</OverrideContext.Provider>,
|
|
);
|
|
});
|
|
|
|
export default InternalMenu;
|