mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-07 17:44:35 +08:00
Code Issues Actions 18 Packages Projects Releases Wiki Activity

chore: refactor internal menu with hooks (#34433)

Browse Source 
* chore: refactor menu with hooks

* chore: clean up
This commit is contained in:
二货机器人 2022-03-11 15:26:29 +08:00 committed by GitHub
parent f987bd0479
commit c50bbe64bb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 72 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

166
components/menu/index.tsx
View File

@ -3,15 +3,14 @@ import RcMenu, { ItemGroup, MenuProps as RcMenuProps } from 'rc-menu';
import classNames from 'classnames'; import classNames from 'classnames';
import omit from 'rc-util/lib/omit'; import omit from 'rc-util/lib/omit';
import EllipsisOutlined from '@ant-design/icons/EllipsisOutlined'; import EllipsisOutlined from '@ant-design/icons/EllipsisOutlined';
import memoize from 'memoize-one';
import SubMenu, { SubMenuProps } from './SubMenu'; import SubMenu, { SubMenuProps } from './SubMenu';
import Item, { MenuItemProps } from './MenuItem'; import Item, { MenuItemProps } from './MenuItem';
import { ConfigConsumer, ConfigConsumerProps, DirectionType } from '../config-provider'; import { ConfigContext } from '../config-provider';
import devWarning from '../_util/devWarning'; import devWarning from '../_util/devWarning';
import { SiderContext, SiderContextProps } from '../layout/Sider'; import { SiderContext, SiderContextProps } from '../layout/Sider';
import collapseMotion from '../_util/motion'; import collapseMotion from '../_util/motion';
import { cloneElement } from '../_util/reactNode'; import { cloneElement } from '../_util/reactNode';
import MenuContext, { MenuTheme, MenuContextProps } from './MenuContext'; import MenuContext, { MenuTheme } from './MenuContext';
import MenuDivider from './MenuDivider'; import MenuDivider from './MenuDivider';
export { MenuDividerProps } from './MenuDivider'; export { MenuDividerProps } from './MenuDivider';
@ -37,108 +36,87 @@ type InternalMenuProps = MenuProps &
collapsedWidth?: string | number; collapsedWidth?: string | number;
}; };
class InternalMenu extends React.Component<InternalMenuProps> { function InternalMenu(props: InternalMenuProps) {
static defaultProps: Partial<MenuProps> = { const { getPrefixCls, getPopupContainer, direction } = React.useContext(ConfigContext);
theme: 'light', // or dark
};
constructor(props: InternalMenuProps) { const rootPrefixCls = getPrefixCls();
super(props);
devWarning( const {
!('inlineCollapsed' in props && props.mode !== 'inline'), prefixCls: customizePrefixCls,
'Menu', className,
'`inlineCollapsed` should only be used when `mode` is inline.', theme = 'light',
); expandIcon,
_internalDisableMenuItemTitleTooltip,
inlineCollapsed,
siderCollapsed,
...restProps
} = props;
devWarning( const passedProps = omit(restProps, ['collapsedWidth']);
!(props.siderCollapsed !== undefined && 'inlineCollapsed' in props),
'Menu',
'`inlineCollapsed` not control Menu under Sider. Should set `collapsed` on Sider instead.',
);
}
getInlineCollapsed() { // ======================== Warning ==========================
const { inlineCollapsed, siderCollapsed } = this.props; devWarning(
!('inlineCollapsed' in props && props.mode !== 'inline'),
'Menu',
'`inlineCollapsed` should only be used when `mode` is inline.',
);
devWarning(
!(props.siderCollapsed !== undefined && 'inlineCollapsed' in props),
'Menu',
'`inlineCollapsed` not control Menu under Sider. Should set `collapsed` on Sider instead.',
);
// ======================== Collapsed ========================
// Inline Collapsed
const mergedInlineCollapsed = React.useMemo(() => {
if (siderCollapsed !== undefined) { if (siderCollapsed !== undefined) {
return siderCollapsed; return siderCollapsed;
} }
return inlineCollapsed; return inlineCollapsed;
} }, [inlineCollapsed, siderCollapsed]);
getMemoizedContextValue = memoize( const defaultMotions = {
( horizontal: { motionName: `${rootPrefixCls}-slide-up` },
cls: string, inline: collapseMotion,
collapsed: boolean | undefined, other: { motionName: `${rootPrefixCls}-zoom-big` },
the: MenuTheme | undefined,
dir: DirectionType,
disableMenuItemTitleTooltip: boolean | undefined,
): MenuContextProps => ({
prefixCls: cls,
inlineCollapsed: collapsed || false,
antdMenuTheme: the,
direction: dir,
firstLevel: true,
disableMenuItemTitleTooltip,
}),
);
renderMenu = ({ getPopupContainer, getPrefixCls, direction }: ConfigConsumerProps) => {
const rootPrefixCls = getPrefixCls();
const {
prefixCls: customizePrefixCls,
className,
theme,
expandIcon,
_internalDisableMenuItemTitleTooltip,
...restProps
} = this.props;
const passedProps = omit(restProps, ['siderCollapsed', 'collapsedWidth']);
const inlineCollapsed = this.getInlineCollapsed();
const defaultMotions = {
horizontal: { motionName: `${rootPrefixCls}-slide-up` },
inline: collapseMotion,
other: { motionName: `${rootPrefixCls}-zoom-big` },
};
const prefixCls = getPrefixCls('menu', customizePrefixCls);
const menuClassName = classNames(`${prefixCls}-${theme}`, className);
// TODO: refactor menu with function component
const contextValue = this.getMemoizedContextValue(
prefixCls,
inlineCollapsed,
theme,
direction,
_internalDisableMenuItemTitleTooltip,
);
return (
<MenuContext.Provider value={contextValue}>
<RcMenu
getPopupContainer={getPopupContainer}
overflowedIndicator={<EllipsisOutlined />}
overflowedIndicatorPopupClassName={`${prefixCls}-${theme}`}
{...passedProps}
inlineCollapsed={inlineCollapsed}
className={menuClassName}
prefixCls={prefixCls}
direction={direction}
defaultMotions={defaultMotions}
expandIcon={cloneElement(expandIcon, {
className: `${prefixCls}-submenu-expand-icon`,
})}
/>
</MenuContext.Provider>
);
}; };
render() { const prefixCls = getPrefixCls('menu', customizePrefixCls);
return <ConfigConsumer>{this.renderMenu}</ConfigConsumer>; const menuClassName = classNames(`${prefixCls}-${theme}`, className);
}
// ======================== Context ==========================
const contextValue = React.useMemo(
() => ({
prefixCls,
inlineCollapsed: mergedInlineCollapsed || false,
antdMenuTheme: theme,
direction,
firstLevel: true,
disableMenuItemTitleTooltip: _internalDisableMenuItemTitleTooltip,
}),
[prefixCls, mergedInlineCollapsed, theme, direction, _internalDisableMenuItemTitleTooltip],
);
// ========================= Render ==========================
return (
<MenuContext.Provider value={contextValue}>
<RcMenu
getPopupContainer={getPopupContainer}
overflowedIndicator={<EllipsisOutlined />}
overflowedIndicatorPopupClassName={`${prefixCls}-${theme}`}
{...passedProps}
inlineCollapsed={mergedInlineCollapsed}
className={menuClassName}
prefixCls={prefixCls}
direction={direction}
defaultMotions={defaultMotions}
expandIcon={cloneElement(expandIcon, {
className: `${prefixCls}-submenu-expand-icon`,
})}
/>
</MenuContext.Provider>
);
} }
// We should keep this as ref-able // We should keep this as ref-able