diff --git a/components/menu/MenuContext.tsx b/components/menu/MenuContext.tsx index b5b22e28ba..2f237a796c 100644 --- a/components/menu/MenuContext.tsx +++ b/components/menu/MenuContext.tsx @@ -9,6 +9,8 @@ export interface MenuContextProps { antdMenuTheme?: MenuTheme; direction?: DirectionType; firstLevel: boolean; + /** @private Internal Usage. Safe to remove */ + disableMenuItemTitleTooltip?: boolean; } const MenuContext = createContext({ diff --git a/components/menu/MenuItem.tsx b/components/menu/MenuItem.tsx index 5cd080f8a7..35781e2386 100644 --- a/components/menu/MenuItem.tsx +++ b/components/menu/MenuItem.tsx @@ -34,7 +34,8 @@ export default class MenuItem extends React.Component { } renderItem = ({ siderCollapsed }: SiderContextProps) => { - const { prefixCls, firstLevel, inlineCollapsed, direction } = this.context; + const { prefixCls, firstLevel, inlineCollapsed, direction, disableMenuItemTitleTooltip } = + this.context; const { className, children } = this.props; const { title, icon, danger, ...rest } = this.props; @@ -55,33 +56,42 @@ export default class MenuItem extends React.Component { tooltipProps.visible = false; } const childrenLength = toArray(children).length; - return ( - - - {cloneElement(icon, { - className: classNames( - isValidElement(icon) ? icon.props?.className : '', - `${prefixCls}-item-icon`, - ), - })} - {this.renderItemChildren(inlineCollapsed)} - - + {cloneElement(icon, { + className: classNames( + isValidElement(icon) ? icon.props?.className : '', + `${prefixCls}-item-icon`, + ), + })} + {this.renderItemChildren(inlineCollapsed)} + ); + + if (!disableMenuItemTitleTooltip) { + returnNode = ( + + {returnNode} + + ); + } + + return returnNode; }; render() { diff --git a/components/menu/__tests__/__snapshots__/demo.test.js.snap b/components/menu/__tests__/__snapshots__/demo.test.js.snap index ab2b8f6ba2..87d95ac777 100644 --- a/components/menu/__tests__/__snapshots__/demo.test.js.snap +++ b/components/menu/__tests__/__snapshots__/demo.test.js.snap @@ -879,15 +879,15 @@ Array [
,
, , diff --git a/components/menu/demo/style-debug.md b/components/menu/demo/style-debug.md index 3e94dd6188..0002211814 100644 --- a/components/menu/demo/style-debug.md +++ b/components/menu/demo/style-debug.md @@ -14,25 +14,31 @@ buggy! buggy! -```jsx -import { Menu, Switch } from 'antd'; +```tsx +import * as React from 'react'; +import { Menu, MenuProps, Switch } from 'antd'; import { MailOutlined, AppstoreOutlined } from '@ant-design/icons'; const { SubMenu } = Menu; -class Sider extends React.Component { - state = { +interface DemoState { + theme: 'light' | 'dark'; + current: string; +} + +class Demo extends React.Component<{}, DemoState> { + state: DemoState = { theme: 'dark', current: '1', }; - changeTheme = value => { + changeTheme = (value: boolean) => { this.setState({ theme: value ? 'dark' : 'light', }); }; - handleClick = e => { + handleClick: MenuProps['onClick'] = e => { console.log('click ', e); this.setState({ current: e.key, @@ -54,7 +60,28 @@ class Sider extends React.Component { theme={this.state.theme} onClick={this.handleClick} selectedKeys={[this.state.current]} - mode="horizontal" + mode="inline" + inlineCollapsed + // Test only. Remove in future. + _internalRenderMenuItem={node => + React.cloneElement(node, { + style: { + ...node.props.style, + textDecoration: 'underline', + }, + }) + } + // Test only. Remove in future. + _internalRenderSubMenuItem={node => + React.cloneElement(node, { + style: { + ...node.props.style, + background: 'rgba(255,255,255,0.3)', + }, + }) + } + // Test only. Remove in future. + _internalDisableMenuItemTitleTooltip > } title="Navigation One Long Long Long Long"> Option 1 @@ -78,5 +105,5 @@ class Sider extends React.Component { } } -ReactDOM.render(, mountNode); +ReactDOM.render(, mountNode); ``` diff --git a/components/menu/index.tsx b/components/menu/index.tsx index 28fac6e9cb..3e124d758e 100644 --- a/components/menu/index.tsx +++ b/components/menu/index.tsx @@ -23,6 +23,13 @@ export type MenuMode = 'vertical' | 'vertical-left' | 'vertical-right' | 'horizo export interface MenuProps extends RcMenuProps { theme?: MenuTheme; inlineIndent?: number; + + // >>>>> Private + /** + * @private Internal Usage. Not promise crash if used in production. Connect with chenshuai2144 + * for removing. + */ + _internalDisableMenuItemTitleTooltip?: boolean; } type InternalMenuProps = MenuProps & @@ -67,6 +74,7 @@ class InternalMenu extends React.Component { className, theme, expandIcon, + _internalDisableMenuItemTitleTooltip, ...restProps } = this.props; @@ -83,13 +91,14 @@ class InternalMenu extends React.Component { const menuClassName = classNames(`${prefixCls}-${theme}`, className); // TODO: refactor menu with function component - const contextValue = memoize((cls, collapsed, the, dir) => ({ + const contextValue = memoize((cls, collapsed, the, dir, disableMenuItemTitleTooltip) => ({ prefixCls: cls, inlineCollapsed: collapsed || false, antdMenuTheme: the, direction: dir, firstLevel: true, - }))(prefixCls, inlineCollapsed, theme, direction); + disableMenuItemTitleTooltip, + }))(prefixCls, inlineCollapsed, theme, direction, _internalDisableMenuItemTitleTooltip); return ( diff --git a/package.json b/package.json index 1ce2015d69..af9444c6b0 100644 --- a/package.json +++ b/package.json @@ -131,7 +131,7 @@ "rc-image": "~5.2.5", "rc-input-number": "~7.3.0", "rc-mentions": "~1.6.1", - "rc-menu": "~9.0.12", + "rc-menu": "~9.1.1", "rc-motion": "^2.4.4", "rc-notification": "~4.5.7", "rc-pagination": "~3.1.9",