test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-04 04:58:55 +08:00
Code Issues Actions 100 Packages Projects Releases Wiki Activity

feat: Menu.Item support icon (#23629)

Browse Source 
* feat: Menu.Item support icon

* docs: update menu item usage

* docs: remove span wrap,when use icon

* fix: Collapsed depends on the span

* ✅ fix demo snapshot

* do not wrap children when it is span

* Menu.SubMenu support icon prop

* fix sub menu title

* fix eslint

* update dropdown demo

* fix extra icon attribute on li

Co-authored-by: MengZhaoFly <1424254461@qq.com>
This commit is contained in:
偏右 2020-04-26 23:16:15 +08:00 committed by GitHub
parent c53329a27d
commit 8934bbfffa
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 724 additions and 807 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
components/dropdown/demo/dropdown-button.md
View File

@ -29,16 +29,13 @@ function handleMenuClick(e) {
const menu = ( const menu = (
<Menu onClick={handleMenuClick}> <Menu onClick={handleMenuClick}>
<Menu.Item key="1"> <Menu.Item key="1" icon={<UserOutlined />}>
<UserOutlined />
1st menu item 1st menu item
</Menu.Item> </Menu.Item>
<Menu.Item key="2"> <Menu.Item key="2" icon={<UserOutlined />}>
<UserOutlined />
2nd menu item 2nd menu item
</Menu.Item> </Menu.Item>
<Menu.Item key="3"> <Menu.Item key="3" icon={<UserOutlined />}>
<UserOutlined />
3rd item 3rd item
</Menu.Item> </Menu.Item>
</Menu> </Menu>

30
components/dropdown/demo/menu-full.md
View File

@ -30,15 +30,7 @@ const menu = (
<Menu.Item key="01">Option 0</Menu.Item> <Menu.Item key="01">Option 0</Menu.Item>
<Menu.Item key="02">Option 0</Menu.Item> <Menu.Item key="02">Option 0</Menu.Item>
</Menu.ItemGroup> </Menu.ItemGroup>
<SubMenu <SubMenu key="sub1" icon={<MailOutlined />} title="Navigation One">
key="sub1"
title={
<span>
<MailOutlined />
<span>Navigation One</span>
</span>
}
>
<Menu.ItemGroup key="g1" title="Item 1"> <Menu.ItemGroup key="g1" title="Item 1">
<Menu.Item key="1">Option 1</Menu.Item> <Menu.Item key="1">Option 1</Menu.Item>
<Menu.Item key="2">Option 2</Menu.Item> <Menu.Item key="2">Option 2</Menu.Item>
@ -48,15 +40,7 @@ const menu = (
<Menu.Item key="4">Option 4</Menu.Item> <Menu.Item key="4">Option 4</Menu.Item>
</Menu.ItemGroup> </Menu.ItemGroup>
</SubMenu> </SubMenu>
<SubMenu <SubMenu key="sub2" icon={<AppstoreOutlined />} title="Navigation Two">
key="sub2"
title={
<span>
<AppstoreOutlined />
<span>Navigation Two</span>
</span>
}
>
<Menu.Item key="5">Option 5</Menu.Item> <Menu.Item key="5">Option 5</Menu.Item>
<Menu.Item key="6">Option 6</Menu.Item> <Menu.Item key="6">Option 6</Menu.Item>
<SubMenu key="sub3" title="Submenu"> <SubMenu key="sub3" title="Submenu">
@ -64,15 +48,7 @@ const menu = (
<Menu.Item key="8">Option 8</Menu.Item> <Menu.Item key="8">Option 8</Menu.Item>
</SubMenu> </SubMenu>
</SubMenu> </SubMenu>
<SubMenu <SubMenu key="sub4" icon={<SettingOutlined />} title="Navigation Three">
key="sub4"
title={
<span>
<SettingOutlined />
<span>Navigation Three</span>
</span>
}
>
<Menu.Item key="9">Option 9</Menu.Item> <Menu.Item key="9">Option 9</Menu.Item>
<Menu.Item key="10">Option 10</Menu.Item> <Menu.Item key="10">Option 10</Menu.Item>
<Menu.Item key="11">Option 11</Menu.Item> <Menu.Item key="11">Option 11</Menu.Item>

34
components/layout/demo/custom-trigger-debug.md
View File

@ -42,42 +42,22 @@ class SiderDemo extends React.Component {
<Sider trigger={null} collapsible collapsed={this.state.collapsed}> <Sider trigger={null} collapsible collapsed={this.state.collapsed}>
<div className="logo" /> <div className="logo" />
<Menu theme="dark" mode="inline" defaultSelectedKeys={['3']} defaultOpenKeys={['sub1']}> <Menu theme="dark" mode="inline" defaultSelectedKeys={['3']} defaultOpenKeys={['sub1']}>
<Menu.Item key="1"> <Menu.Item key="1" icon={<PieChartOutlined />}>
<PieChartOutlined /> Option 1
<span>Option 1</span>
</Menu.Item> </Menu.Item>
<Menu.Item key="2"> <Menu.Item key="2" icon={<DesktopOutlined />}>
<DesktopOutlined /> Option 2
<span>Option 2</span>
</Menu.Item> </Menu.Item>
<SubMenu <SubMenu key="sub1" icon={<UserOutlined />} title="User">
key="sub1"
title={
<span>
<UserOutlined />
<span>User</span>
</span>
}
>
<Menu.Item key="3">Tom</Menu.Item> <Menu.Item key="3">Tom</Menu.Item>
<Menu.Item key="4">Bill</Menu.Item> <Menu.Item key="4">Bill</Menu.Item>
<Menu.Item key="5">Alex</Menu.Item> <Menu.Item key="5">Alex</Menu.Item>
</SubMenu> </SubMenu>
<SubMenu <SubMenu key="sub2" icon={<TeamOutlined />} title="Team">
key="sub2"
title={
<span>
<TeamOutlined />
<span>Team</span>
</span>
}
>
<Menu.Item key="6">Team 1</Menu.Item> <Menu.Item key="6">Team 1</Menu.Item>
<Menu.Item key="8">Team 2</Menu.Item> <Menu.Item key="8">Team 2</Menu.Item>
</SubMenu> </SubMenu>
<Menu.Item key="9"> <Menu.Item key="9" icon={<FileOutlined />} />
<FileOutlined />
</Menu.Item>
</Menu> </Menu>
</Sider> </Sider>
<Layout> <Layout>

22
components/menu/MenuItem.tsx
View File

@ -15,6 +15,7 @@ export interface MenuItemProps
rootPrefixCls?: string; rootPrefixCls?: string;
disabled?: boolean; disabled?: boolean;
level?: number; level?: number;
icon?: React.ReactNode;
title?: React.ReactNode; title?: React.ReactNode;
children?: React.ReactNode; children?: React.ReactNode;
className?: string; className?: string;
@ -37,9 +38,19 @@ export default class MenuItem extends React.Component<MenuItemProps> {
this.menuItem = menuItem; this.menuItem = menuItem;
}; };
renderItemChildren() {
const { icon, children } = this.props;
// inline-collapsed.md demo 依赖 span 来隐藏文字,有 icon 属性，则内部包裹一个 span
// ref: https://github.com/ant-design/ant-design/pull/23456
if (!icon || (React.isValidElement(children) && children.type === 'span')) {
return children;
}
return <span>{children}</span>;
}
renderItem = ({ siderCollapsed }: SiderContextProps) => { renderItem = ({ siderCollapsed }: SiderContextProps) => {
const { level, className, children, rootPrefixCls } = this.props; const { level, className, children, rootPrefixCls } = this.props;
const { title, ...rest } = this.props; const { title, icon, ...rest } = this.props;
return ( return (
<MenuContext.Consumer> <MenuContext.Consumer>
@ -60,6 +71,7 @@ export default class MenuItem extends React.Component<MenuItemProps> {
// ref: https://github.com/ant-design/ant-design/issues/16742 // ref: https://github.com/ant-design/ant-design/issues/16742
tooltipProps.visible = false; tooltipProps.visible = false;
} }
const childrenLength = toArray(children).length;
return ( return (
<Tooltip <Tooltip
{...tooltipProps} {...tooltipProps}
@ -69,11 +81,15 @@ export default class MenuItem extends React.Component<MenuItemProps> {
<Item <Item
{...rest} {...rest}
className={classNames(className, { className={classNames(className, {
[`${rootPrefixCls}-item-only-child`]: toArray(children).length === 1, [`${rootPrefixCls}-item-only-child`]:
(icon ? childrenLength + 1 : childrenLength) === 1,
})} })}
title={title} title={title}
ref={this.saveMenuItem} ref={this.saveMenuItem}
/> >
{icon}
{this.renderItemChildren()}
</Item>
</Tooltip> </Tooltip>
); );
}} }}

22
components/menu/SubMenu.tsx
View File

@ -2,7 +2,7 @@ import * as React from 'react';
import * as PropTypes from 'prop-types'; import * as PropTypes from 'prop-types';
import { SubMenu as RcSubMenu } from 'rc-menu'; import { SubMenu as RcSubMenu } from 'rc-menu';
import classNames from 'classnames'; import classNames from 'classnames';
import omit from 'omit.js';
import MenuContext, { MenuContextProps } from './MenuContext'; import MenuContext, { MenuContextProps } from './MenuContext';
interface TitleEventEntity { interface TitleEventEntity {
@ -15,6 +15,7 @@ export interface SubMenuProps {
className?: string; className?: string;
disabled?: boolean; disabled?: boolean;
title?: React.ReactNode; title?: React.ReactNode;
icon?: React.ReactNode;
style?: React.CSSProperties; style?: React.CSSProperties;
onTitleClick?: (e: TitleEventEntity) => void; onTitleClick?: (e: TitleEventEntity) => void;
onTitleMouseEnter?: (e: TitleEventEntity) => void; onTitleMouseEnter?: (e: TitleEventEntity) => void;
@ -41,13 +42,30 @@ class SubMenu extends React.Component<SubMenuProps, any> {
this.subMenu = subMenu; this.subMenu = subMenu;
}; };
renderTitle() {
const { icon, title } = this.props;
if (!icon) {
return title;
}
// inline-collapsed.md demo 依赖 span 来隐藏文字,有 icon 属性，则内部包裹一个 span
// ref: https://github.com/ant-design/ant-design/pull/23456
const titleIsSpan = React.isValidElement(title) && title.type === 'span';
return (
<>
{icon}
{titleIsSpan ? title : <span>{title}</span>}
</>
);
}
render() { render() {
const { rootPrefixCls, popupClassName } = this.props; const { rootPrefixCls, popupClassName } = this.props;
return ( return (
<MenuContext.Consumer> <MenuContext.Consumer>
{({ antdMenuTheme }: MenuContextProps) => ( {({ antdMenuTheme }: MenuContextProps) => (
<RcSubMenu <RcSubMenu
{...this.props} {...omit(this.props, ['icon'])}
title={this.renderTitle()}
ref={this.saveSubMenu} ref={this.saveSubMenu}
popupClassName={classNames( popupClassName={classNames(
rootPrefixCls, rootPrefixCls,

76
components/menu/__tests__/__snapshots__/demo.test.js.snap
View File

@ -48,7 +48,9 @@ exports[`renders ./components/menu/demo/horizontal.md correctly 1`] = `
/> />
</svg> </svg>
</span> </span>
<span>
Navigation One Navigation One
</span>
</li> </li>
<li <li
class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu"
@ -94,7 +96,9 @@ exports[`renders ./components/menu/demo/horizontal.md correctly 1`] = `
/> />
</svg> </svg>
</span> </span>
<span>
Navigation Two Navigation Two
</span>
</li> </li>
<li <li
class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu"
@ -145,7 +149,9 @@ exports[`renders ./components/menu/demo/horizontal.md correctly 1`] = `
/> />
</svg> </svg>
</span> </span>
<span>
Navigation Three - Submenu Navigation Three - Submenu
</span>
<i <i
class="ant-menu-submenu-arrow" class="ant-menu-submenu-arrow"
/> />
@ -325,7 +331,6 @@ exports[`renders ./components/menu/demo/inline.md correctly 1`] = `
role="button" role="button"
style="padding-left:24px" style="padding-left:24px"
> >
<span>
<span <span
aria-label="appstore" aria-label="appstore"
class="anticon anticon-appstore" class="anticon anticon-appstore"
@ -349,7 +354,6 @@ exports[`renders ./components/menu/demo/inline.md correctly 1`] = `
<span> <span>
Navigation Two Navigation Two
</span> </span>
</span>
<i <i
class="ant-menu-submenu-arrow" class="ant-menu-submenu-arrow"
/> />
@ -534,7 +538,6 @@ exports[`renders ./components/menu/demo/inline-collapsed.md correctly 1`] = `
role="button" role="button"
style="padding-left:24px" style="padding-left:24px"
> >
<span>
<span <span
aria-label="mail" aria-label="mail"
class="anticon anticon-mail" class="anticon anticon-mail"
@ -558,7 +561,6 @@ exports[`renders ./components/menu/demo/inline-collapsed.md correctly 1`] = `
<span> <span>
Navigation One Navigation One
</span> </span>
</span>
<i <i
class="ant-menu-submenu-arrow" class="ant-menu-submenu-arrow"
/> />
@ -609,7 +611,6 @@ exports[`renders ./components/menu/demo/inline-collapsed.md correctly 1`] = `
role="button" role="button"
style="padding-left:24px" style="padding-left:24px"
> >
<span>
<span <span
aria-label="appstore" aria-label="appstore"
class="anticon anticon-appstore" class="anticon anticon-appstore"
@ -633,7 +634,6 @@ exports[`renders ./components/menu/demo/inline-collapsed.md correctly 1`] = `
<span> <span>
Navigation Two Navigation Two
</span> </span>
</span>
<i <i
class="ant-menu-submenu-arrow" class="ant-menu-submenu-arrow"
/> />
@ -737,7 +737,6 @@ exports[`renders ./components/menu/demo/sider-current.md correctly 1`] = `
role="button" role="button"
style="padding-left:24px" style="padding-left:24px"
> >
<span>
<span <span
aria-label="appstore" aria-label="appstore"
class="anticon anticon-appstore" class="anticon anticon-appstore"
@ -761,7 +760,6 @@ exports[`renders ./components/menu/demo/sider-current.md correctly 1`] = `
<span> <span>
Navigation Two Navigation Two
</span> </span>
</span>
<i <i
class="ant-menu-submenu-arrow" class="ant-menu-submenu-arrow"
/> />
@ -779,7 +777,6 @@ exports[`renders ./components/menu/demo/sider-current.md correctly 1`] = `
role="button" role="button"
style="padding-left:24px" style="padding-left:24px"
> >
<span>
<span <span
aria-label="setting" aria-label="setting"
class="anticon anticon-setting" class="anticon anticon-setting"
@ -803,7 +800,6 @@ exports[`renders ./components/menu/demo/sider-current.md correctly 1`] = `
<span> <span>
Navigation Three Navigation Three
</span> </span>
</span>
<i <i
class="ant-menu-submenu-arrow" class="ant-menu-submenu-arrow"
/> />
@ -814,7 +810,7 @@ exports[`renders ./components/menu/demo/sider-current.md correctly 1`] = `
`; `;
exports[`renders ./components/menu/demo/switch-mode.md correctly 1`] = ` exports[`renders ./components/menu/demo/switch-mode.md correctly 1`] = `
<div> Array [
<button <button
aria-checked="false" aria-checked="false"
class="ant-switch" class="ant-switch"
@ -824,12 +820,12 @@ exports[`renders ./components/menu/demo/switch-mode.md correctly 1`] = `
<span <span
class="ant-switch-inner" class="ant-switch-inner"
/> />
</button> </button>,
Change Mode " Change Mode",
<span <div
class="ant-divider" class="ant-divider ant-divider-vertical"
style="margin:0 1em" role="separator"
/> />,
<button <button
aria-checked="false" aria-checked="false"
class="ant-switch" class="ant-switch"
@ -839,10 +835,10 @@ exports[`renders ./components/menu/demo/switch-mode.md correctly 1`] = `
<span <span
class="ant-switch-inner" class="ant-switch-inner"
/> />
</button> </button>,
Change Style " Change Style",
<br /> <br />,
<br /> <br />,
<ul <ul
class="ant-menu ant-menu-light ant-menu-root ant-menu-inline" class="ant-menu ant-menu-light ant-menu-root ant-menu-inline"
role="menu" role="menu"
@ -873,7 +869,9 @@ exports[`renders ./components/menu/demo/switch-mode.md correctly 1`] = `
/> />
</svg> </svg>
</span> </span>
<span>
Navigation One Navigation One
</span>
</li> </li>
<li <li
class="ant-menu-item" class="ant-menu-item"
@ -900,7 +898,9 @@ exports[`renders ./components/menu/demo/switch-mode.md correctly 1`] = `
/> />
</svg> </svg>
</span> </span>
<span>
Navigation Two Navigation Two
</span>
</li> </li>
<li <li
class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open" class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open"
@ -914,7 +914,6 @@ exports[`renders ./components/menu/demo/switch-mode.md correctly 1`] = `
role="button" role="button"
style="padding-left:24px" style="padding-left:24px"
> >
<span>
<span <span
aria-label="appstore" aria-label="appstore"
class="anticon anticon-appstore" class="anticon anticon-appstore"
@ -936,8 +935,7 @@ exports[`renders ./components/menu/demo/switch-mode.md correctly 1`] = `
</svg> </svg>
</span> </span>
<span> <span>
Navigation Three Navigation Two
</span>
</span> </span>
<i <i
class="ant-menu-submenu-arrow" class="ant-menu-submenu-arrow"
@ -994,7 +992,6 @@ exports[`renders ./components/menu/demo/switch-mode.md correctly 1`] = `
role="button" role="button"
style="padding-left:24px" style="padding-left:24px"
> >
<span>
<span <span
aria-label="setting" aria-label="setting"
class="anticon anticon-setting" class="anticon anticon-setting"
@ -1016,8 +1013,7 @@ exports[`renders ./components/menu/demo/switch-mode.md correctly 1`] = `
</svg> </svg>
</span> </span>
<span> <span>
Navigation Four Navigation Three
</span>
</span> </span>
<i <i
class="ant-menu-submenu-arrow" class="ant-menu-submenu-arrow"
@ -1025,12 +1021,12 @@ exports[`renders ./components/menu/demo/switch-mode.md correctly 1`] = `
</div> </div>
<div /> <div />
</li> </li>
</ul> </ul>,
</div> ]
`; `;
exports[`renders ./components/menu/demo/theme.md correctly 1`] = ` exports[`renders ./components/menu/demo/theme.md correctly 1`] = `
<div> Array [
<button <button
aria-checked="true" aria-checked="true"
checked="" checked=""
@ -1043,9 +1039,9 @@ exports[`renders ./components/menu/demo/theme.md correctly 1`] = `
> >
Dark Dark
</span> </span>
</button> </button>,
<br /> <br />,
<br /> <br />,
<ul <ul
class="ant-menu ant-menu-dark ant-menu-root ant-menu-inline" class="ant-menu ant-menu-dark ant-menu-root ant-menu-inline"
role="menu" role="menu"
@ -1063,7 +1059,6 @@ exports[`renders ./components/menu/demo/theme.md correctly 1`] = `
role="button" role="button"
style="padding-left:24px" style="padding-left:24px"
> >
<span>
<span <span
aria-label="mail" aria-label="mail"
class="anticon anticon-mail" class="anticon anticon-mail"
@ -1087,7 +1082,6 @@ exports[`renders ./components/menu/demo/theme.md correctly 1`] = `
<span> <span>
Navigation One Navigation One
</span> </span>
</span>
<i <i
class="ant-menu-submenu-arrow" class="ant-menu-submenu-arrow"
/> />
@ -1138,7 +1132,6 @@ exports[`renders ./components/menu/demo/theme.md correctly 1`] = `
role="button" role="button"
style="padding-left:24px" style="padding-left:24px"
> >
<span>
<span <span
aria-label="appstore" aria-label="appstore"
class="anticon anticon-appstore" class="anticon anticon-appstore"
@ -1162,7 +1155,6 @@ exports[`renders ./components/menu/demo/theme.md correctly 1`] = `
<span> <span>
Navigation Two Navigation Two
</span> </span>
</span>
<i <i
class="ant-menu-submenu-arrow" class="ant-menu-submenu-arrow"
/> />
@ -1180,7 +1172,6 @@ exports[`renders ./components/menu/demo/theme.md correctly 1`] = `
role="button" role="button"
style="padding-left:24px" style="padding-left:24px"
> >
<span>
<span <span
aria-label="setting" aria-label="setting"
class="anticon anticon-setting" class="anticon anticon-setting"
@ -1204,15 +1195,14 @@ exports[`renders ./components/menu/demo/theme.md correctly 1`] = `
<span> <span>
Navigation Three Navigation Three
</span> </span>
</span>
<i <i
class="ant-menu-submenu-arrow" class="ant-menu-submenu-arrow"
/> />
</div> </div>
<div /> <div />
</li> </li>
</ul> </ul>,
</div> ]
`; `;
exports[`renders ./components/menu/demo/vertical.md correctly 1`] = ` exports[`renders ./components/menu/demo/vertical.md correctly 1`] = `
@ -1231,7 +1221,6 @@ exports[`renders ./components/menu/demo/vertical.md correctly 1`] = `
class="ant-menu-submenu-title" class="ant-menu-submenu-title"
role="button" role="button"
> >
<span>
<span <span
aria-label="mail" aria-label="mail"
class="anticon anticon-mail" class="anticon anticon-mail"
@ -1255,7 +1244,6 @@ exports[`renders ./components/menu/demo/vertical.md correctly 1`] = `
<span> <span>
Navigation One Navigation One
</span> </span>
</span>
<i <i
class="ant-menu-submenu-arrow" class="ant-menu-submenu-arrow"
/> />
@ -1311,7 +1299,6 @@ exports[`renders ./components/menu/demo/vertical.md correctly 1`] = `
class="ant-menu-submenu-title" class="ant-menu-submenu-title"
role="button" role="button"
> >
<span>
<span <span
aria-label="setting" aria-label="setting"
class="anticon anticon-setting" class="anticon anticon-setting"
@ -1335,7 +1322,6 @@ exports[`renders ./components/menu/demo/vertical.md correctly 1`] = `
<span> <span>
Navigation Three Navigation Three
</span> </span>
</span>
<i <i
class="ant-menu-submenu-arrow" class="ant-menu-submenu-arrow"
/> />

180
components/menu/__tests__/__snapshots__/index.test.js.snap
View File

@ -1,5 +1,145 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Menu Menu.Item with icon children auto wrap span 1`] = `
<ul
class="ant-menu ant-menu-light ant-menu-root ant-menu-vertical"
role="menu"
>
<li
class="ant-menu-item"
role="menuitem"
>
<span
aria-label="mail"
class="anticon anticon-mail"
role="img"
>
<svg
aria-hidden="true"
class=""
data-icon="mail"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0068.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"
/>
</svg>
</span>
<span>
Navigation One
</span>
</li>
<li
class="ant-menu-item"
role="menuitem"
>
<span
aria-label="mail"
class="anticon anticon-mail"
role="img"
>
<svg
aria-hidden="true"
class=""
data-icon="mail"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0068.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"
/>
</svg>
</span>
<span>
Navigation One
</span>
</li>
<li
class="ant-menu-submenu ant-menu-submenu-vertical"
role="menuitem"
>
<div
aria-expanded="false"
aria-haspopup="true"
class="ant-menu-submenu-title"
role="button"
>
<span
aria-label="mail"
class="anticon anticon-mail"
role="img"
>
<svg
aria-hidden="true"
class=""
data-icon="mail"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0068.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"
/>
</svg>
</span>
<span>
Navigation One
</span>
<i
class="ant-menu-submenu-arrow"
/>
</div>
</li>
<li
class="ant-menu-submenu ant-menu-submenu-vertical"
role="menuitem"
>
<div
aria-expanded="false"
aria-haspopup="true"
class="ant-menu-submenu-title"
role="button"
>
<span
aria-label="mail"
class="anticon anticon-mail"
role="img"
>
<svg
aria-hidden="true"
class=""
data-icon="mail"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0068.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"
/>
</svg>
</span>
<span>
Navigation One
</span>
<i
class="ant-menu-submenu-arrow"
/>
</div>
</li>
</ul>
`;
exports[`Menu rtl render component should be rendered correctly in RTL direction 1`] = ` exports[`Menu rtl render component should be rendered correctly in RTL direction 1`] = `
<ul <ul
class="ant-menu ant-menu-light ant-menu-root ant-menu-rtl ant-menu-vertical" class="ant-menu ant-menu-light ant-menu-root ant-menu-rtl ant-menu-vertical"
@ -49,6 +189,26 @@ exports[`Menu should controlled collapse work 1`] = `
role="menuitem" role="menuitem"
style="padding-left: 24px;" style="padding-left: 24px;"
> >
<span
aria-label="pie-chart"
class="anticon anticon-pie-chart"
role="img"
>
<svg
aria-hidden="true"
class=""
data-icon="pie-chart"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M864 518H506V160c0-4.4-3.6-8-8-8h-26a398.46 398.46 0 00-282.8 117.1 398.19 398.19 0 00-85.7 127.1A397.61 397.61 0 0072 552a398.46 398.46 0 00117.1 282.8c36.7 36.7 79.5 65.6 127.1 85.7A397.61 397.61 0 00472 952a398.46 398.46 0 00282.8-117.1c36.7-36.7 65.6-79.5 85.7-127.1A397.61 397.61 0 00872 552v-26c0-4.4-3.6-8-8-8zM705.7 787.8A331.59 331.59 0 01470.4 884c-88.1-.4-170.9-34.9-233.2-97.2C174.5 724.1 140 640.7 140 552c0-88.7 34.5-172.1 97.2-234.8 54.6-54.6 124.9-87.9 200.8-95.5V586h364.3c-7.7 76.3-41.3 147-96.6 201.8zM952 462.4l-2.6-28.2c-8.5-92.1-49.4-179-115.2-244.6A399.4 399.4 0 00589 74.6L560.7 72c-4.7-.4-8.7 3.2-8.7 7.9V464c0 4.4 3.6 8 8 8l384-1c4.7 0 8.4-4 8-8.6zm-332.2-58.2V147.6a332.24 332.24 0 01166.4 89.8c45.7 45.6 77 103.6 90 166.1l-256.4.7z"
/>
</svg>
</span>
<span> <span>
Option 1 Option 1
</span> </span>
@ -66,6 +226,26 @@ exports[`Menu should controlled collapse work 2`] = `
role="menuitem" role="menuitem"
style="padding-left: 24px;" style="padding-left: 24px;"
> >
<span
aria-label="pie-chart"
class="anticon anticon-pie-chart"
role="img"
>
<svg
aria-hidden="true"
class=""
data-icon="pie-chart"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M864 518H506V160c0-4.4-3.6-8-8-8h-26a398.46 398.46 0 00-282.8 117.1 398.19 398.19 0 00-85.7 127.1A397.61 397.61 0 0072 552a398.46 398.46 0 00117.1 282.8c36.7 36.7 79.5 65.6 127.1 85.7A397.61 397.61 0 00472 952a398.46 398.46 0 00282.8-117.1c36.7-36.7 65.6-79.5 85.7-127.1A397.61 397.61 0 00872 552v-26c0-4.4-3.6-8-8-8zM705.7 787.8A331.59 331.59 0 01470.4 884c-88.1-.4-170.9-34.9-233.2-97.2C174.5 724.1 140 640.7 140 552c0-88.7 34.5-172.1 97.2-234.8 54.6-54.6 124.9-87.9 200.8-95.5V586h364.3c-7.7 76.3-41.3 147-96.6 201.8zM952 462.4l-2.6-28.2c-8.5-92.1-49.4-179-115.2-244.6A399.4 399.4 0 00589 74.6L560.7 72c-4.7-.4-8.7 3.2-8.7 7.9V464c0 4.4 3.6 8 8 8l384-1c4.7 0 8.4-4 8-8.6zm-332.2-58.2V147.6a332.24 332.24 0 01166.4 89.8c45.7 45.6 77 103.6 90 166.1l-256.4.7z"
/>
</svg>
</span>
<span> <span>
Option 1 Option 1
</span> </span>

400
components/menu/__tests__/index.test.js
View File

@ -1,7 +1,13 @@
import React from 'react'; import React from 'react';
import { mount } from 'enzyme'; import { mount } from 'enzyme';
import {
MailOutlined,
InboxOutlined,
AppstoreOutlined,
PieChartOutlined,
UserOutlined,
} from '@ant-design/icons';
import Menu from '..'; import Menu from '..';
import Icon from '../../icon';
import Layout from '../../layout'; import Layout from '../../layout';
import Tooltip from '../../tooltip'; import Tooltip from '../../tooltip';
import mountTest from '../../../tests/shared/mountTest'; import mountTest from '../../../tests/shared/mountTest';
@ -62,12 +68,7 @@ describe('Menu', () => {
<Menu.Item key="2">menu2</Menu.Item> <Menu.Item key="2">menu2</Menu.Item>
</Menu>, </Menu>,
); );
expect( expect(wrapper.find('.ant-menu-sub').at(0).hasClass('ant-menu-hidden')).not.toBe(true);
wrapper
.find('.ant-menu-sub')
.at(0)
.hasClass('ant-menu-hidden'),
).not.toBe(true);
}); });
it('should accept defaultOpenKeys in mode inline', () => { it('should accept defaultOpenKeys in mode inline', () => {
@ -80,12 +81,7 @@ describe('Menu', () => {
<Menu.Item key="2">menu2</Menu.Item> <Menu.Item key="2">menu2</Menu.Item>
</Menu>, </Menu>,
); );
expect( expect(wrapper.find('.ant-menu-sub').at(0).hasClass('ant-menu-hidden')).not.toBe(true);
wrapper
.find('.ant-menu-sub')
.at(0)
.hasClass('ant-menu-hidden'),
).not.toBe(true);
}); });
it('should accept defaultOpenKeys in mode vertical', () => { it('should accept defaultOpenKeys in mode vertical', () => {
@ -98,12 +94,7 @@ describe('Menu', () => {
<Menu.Item key="2">menu2</Menu.Item> <Menu.Item key="2">menu2</Menu.Item>
</Menu>, </Menu>,
); );
expect( expect(wrapper.find('.ant-menu-sub').at(0).hasClass('ant-menu-hidden')).not.toBe(true);
wrapper
.find('.ant-menu-sub')
.at(0)
.hasClass('ant-menu-hidden'),
).not.toBe(true);
}); });
it('horizontal', () => { it('horizontal', () => {
@ -116,31 +107,17 @@ describe('Menu', () => {
<Menu.Item key="2">menu2</Menu.Item> <Menu.Item key="2">menu2</Menu.Item>
</Menu>, </Menu>,
); );
expect( expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).not.toBe(
wrapper true,
.find('.ant-menu-sub') );
.hostNodes()
.at(0)
.hasClass('ant-menu-hidden'),
).not.toBe(true);
wrapper.setProps({ openKeys: [] }); wrapper.setProps({ openKeys: [] });
wrapper.update(); wrapper.update();
expect( expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).toBe(true);
wrapper
.find('.ant-menu-sub')
.hostNodes()
.at(0)
.hasClass('ant-menu-hidden'),
).toBe(true);
wrapper.setProps({ openKeys: ['1'] }); wrapper.setProps({ openKeys: ['1'] });
wrapper.update(); wrapper.update();
expect( expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).not.toBe(
wrapper true,
.find('.ant-menu-sub') );
.hostNodes()
.at(0)
.hasClass('ant-menu-hidden'),
).not.toBe(true);
}); });
it('inline', () => { it('inline', () => {
@ -153,31 +130,17 @@ describe('Menu', () => {
<Menu.Item key="2">menu2</Menu.Item> <Menu.Item key="2">menu2</Menu.Item>
</Menu>, </Menu>,
); );
expect( expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).not.toBe(
wrapper true,
.find('.ant-menu-sub') );
.hostNodes()
.at(0)
.hasClass('ant-menu-hidden'),
).not.toBe(true);
wrapper.setProps({ openKeys: [] }); wrapper.setProps({ openKeys: [] });
wrapper.update(); wrapper.update();
expect( expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).toBe(true);
wrapper
.find('.ant-menu-sub')
.hostNodes()
.at(0)
.hasClass('ant-menu-hidden'),
).toBe(true);
wrapper.setProps({ openKeys: ['1'] }); wrapper.setProps({ openKeys: ['1'] });
wrapper.update(); wrapper.update();
expect( expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).not.toBe(
wrapper true,
.find('.ant-menu-sub') );
.hostNodes()
.at(0)
.hasClass('ant-menu-hidden'),
).not.toBe(true);
}); });
it('vertical', () => { it('vertical', () => {
@ -190,31 +153,17 @@ describe('Menu', () => {
<Menu.Item key="2">menu2</Menu.Item> <Menu.Item key="2">menu2</Menu.Item>
</Menu>, </Menu>,
); );
expect( expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).not.toBe(
wrapper true,
.find('.ant-menu-sub') );
.hostNodes()
.at(0)
.hasClass('ant-menu-hidden'),
).not.toBe(true);
wrapper.setProps({ openKeys: [] }); wrapper.setProps({ openKeys: [] });
wrapper.update(); wrapper.update();
expect( expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).toBe(true);
wrapper
.find('.ant-menu-sub')
.hostNodes()
.at(0)
.hasClass('ant-menu-hidden'),
).toBe(true);
wrapper.setProps({ openKeys: ['1'] }); wrapper.setProps({ openKeys: ['1'] });
wrapper.update(); wrapper.update();
expect( expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).not.toBe(
wrapper true,
.find('.ant-menu-sub') );
.hostNodes()
.at(0)
.hasClass('ant-menu-hidden'),
).not.toBe(true);
}); });
// https://github.com/ant-design/ant-design/pulls/4677 // https://github.com/ant-design/ant-design/pulls/4677
@ -243,33 +192,18 @@ describe('Menu', () => {
<Menu.Item key="2">menu2</Menu.Item> <Menu.Item key="2">menu2</Menu.Item>
</Menu>, </Menu>,
); );
expect( expect(wrapper.find('ul.ant-menu-sub').at(0).hasClass('ant-menu-hidden')).toBe(false);
wrapper
.find('ul.ant-menu-sub')
.at(0)
.hasClass('ant-menu-hidden'),
).toBe(false);
wrapper.setProps({ mode: 'vertical' }); wrapper.setProps({ mode: 'vertical' });
expect( expect(wrapper.find('ul.ant-menu-sub').at(0).hasClass('ant-menu-hidden')).toBe(false);
wrapper
.find('ul.ant-menu-sub')
.at(0)
.hasClass('ant-menu-hidden'),
).toBe(false);
wrapper.setProps({ mode: 'inline' }); wrapper.setProps({ mode: 'inline' });
expect( expect(wrapper.find('ul.ant-menu-sub').at(0).hasClass('ant-menu-hidden')).toBe(false);
wrapper
.find('ul.ant-menu-sub')
.at(0)
.hasClass('ant-menu-hidden'),
).toBe(false);
}); });
it('should always follow openKeys when inlineCollapsed is switched', () => { it('should always follow openKeys when inlineCollapsed is switched', () => {
const wrapper = mount( const wrapper = mount(
<Menu defaultOpenKeys={['1']} mode="inline"> <Menu defaultOpenKeys={['1']} mode="inline">
<Menu.Item key="menu1"> <Menu.Item key="menu1">
<Icon type="inbox" /> <InboxOutlined />
<span>Option</span> <span>Option</span>
</Menu.Item> </Menu.Item>
<SubMenu key="1" title="submenu1"> <SubMenu key="1" title="submenu1">
@ -278,18 +212,8 @@ describe('Menu', () => {
</SubMenu> </SubMenu>
</Menu>, </Menu>,
); );
expect( expect(wrapper.find('ul.ant-menu-sub').at(0).hasClass('ant-menu-inline')).toBe(true);
wrapper expect(wrapper.find('ul.ant-menu-sub').at(0).hasClass('ant-menu-hidden')).toBe(false);
.find('ul.ant-menu-sub')
.at(0)
.hasClass('ant-menu-inline'),
).toBe(true);
expect(
wrapper
.find('ul.ant-menu-sub')
.at(0)
.hasClass('ant-menu-hidden'),
).toBe(false);
wrapper.setProps({ inlineCollapsed: true }); wrapper.setProps({ inlineCollapsed: true });
// 动画结束后套样式; // 动画结束后套样式;
@ -297,37 +221,22 @@ describe('Menu', () => {
wrapper.update(); wrapper.update();
wrapper.simulate('transitionEnd', { propertyName: 'width' }); wrapper.simulate('transitionEnd', { propertyName: 'width' });
expect( expect(wrapper.find('ul.ant-menu-root').at(0).hasClass('ant-menu-vertical')).toBe(true);
wrapper
.find('ul.ant-menu-root')
.at(0)
.hasClass('ant-menu-vertical'),
).toBe(true);
expect(wrapper.find('ul.ant-menu-sub').length).toBe(0); expect(wrapper.find('ul.ant-menu-sub').length).toBe(0);
wrapper.setProps({ inlineCollapsed: false }); wrapper.setProps({ inlineCollapsed: false });
jest.runAllTimers(); jest.runAllTimers();
wrapper.update(); wrapper.update();
expect( expect(wrapper.find('ul.ant-menu-sub').at(0).hasClass('ant-menu-inline')).toBe(true);
wrapper expect(wrapper.find('ul.ant-menu-sub').at(0).hasClass('ant-menu-hidden')).toBe(false);
.find('ul.ant-menu-sub')
.at(0)
.hasClass('ant-menu-inline'),
).toBe(true);
expect(
wrapper
.find('ul.ant-menu-sub')
.at(0)
.hasClass('ant-menu-hidden'),
).toBe(false);
}); });
it('inlineCollapsed should works well when specify a not existed default openKeys', () => { it('inlineCollapsed should works well when specify a not existed default openKeys', () => {
const wrapper = mount( const wrapper = mount(
<Menu defaultOpenKeys={['not-existed']} mode="inline"> <Menu defaultOpenKeys={['not-existed']} mode="inline">
<Menu.Item key="menu1"> <Menu.Item key="menu1">
<Icon type="inbox" /> <InboxOutlined />
<span>Option</span> <span>Option</span>
</Menu.Item> </Menu.Item>
<SubMenu key="1" title="submenu1"> <SubMenu key="1" title="submenu1">
@ -341,36 +250,15 @@ describe('Menu', () => {
jest.runAllTimers(); jest.runAllTimers();
wrapper.update(); wrapper.update();
wrapper.simulate('transitionEnd', { propertyName: 'width' }); wrapper.simulate('transitionEnd', { propertyName: 'width' });
wrapper wrapper.find('.ant-menu-submenu-title').at(0).simulate('mouseEnter');
.find('.ant-menu-submenu-title')
.at(0)
.simulate('mouseEnter');
jest.runAllTimers(); jest.runAllTimers();
wrapper.update(); wrapper.update();
expect( expect(wrapper.find('.ant-menu-submenu').at(0).hasClass('ant-menu-submenu-vertical')).toBe(
wrapper true,
.find('.ant-menu-submenu') );
.at(0) expect(wrapper.find('.ant-menu-submenu').at(0).hasClass('ant-menu-submenu-open')).toBe(true);
.hasClass('ant-menu-submenu-vertical'), expect(wrapper.find('ul.ant-menu-sub').at(0).hasClass('ant-menu-vertical')).toBe(true);
).toBe(true); expect(wrapper.find('ul.ant-menu-sub').at(0).hasClass('ant-menu-hidden')).toBe(false);
expect(
wrapper
.find('.ant-menu-submenu')
.at(0)
.hasClass('ant-menu-submenu-open'),
).toBe(true);
expect(
wrapper
.find('ul.ant-menu-sub')
.at(0)
.hasClass('ant-menu-vertical'),
).toBe(true);
expect(
wrapper
.find('ul.ant-menu-sub')
.at(0)
.hasClass('ant-menu-hidden'),
).toBe(false);
}); });
it('inlineCollapsed Menu.Item Tooltip can be removed', () => { it('inlineCollapsed Menu.Item Tooltip can be removed', () => {
@ -399,48 +287,12 @@ describe('Menu', () => {
</Menu.Item> </Menu.Item>
</Menu>, </Menu>,
); );
expect( expect(wrapper.find(Menu.Item).at(0).find(Tooltip).props().title).toBe('item');
wrapper expect(wrapper.find(Menu.Item).at(1).find(Tooltip).props().title).toBe('title');
.find(Menu.Item) expect(wrapper.find(Menu.Item).at(2).find(Tooltip).props().title).toBe('item');
.at(0) expect(wrapper.find(Menu.Item).at(3).find(Tooltip).props().title).toBe(null);
.find(Tooltip) expect(wrapper.find(Menu.Item).at(4).find(Tooltip).props().title).toBe('');
.props().title, expect(wrapper.find(Menu.Item).at(4).find(Tooltip).props().title).toBe('');
).toBe('item');
expect(
wrapper
.find(Menu.Item)
.at(1)
.find(Tooltip)
.props().title,
).toBe('title');
expect(
wrapper
.find(Menu.Item)
.at(2)
.find(Tooltip)
.props().title,
).toBe('item');
expect(
wrapper
.find(Menu.Item)
.at(3)
.find(Tooltip)
.props().title,
).toBe(null);
expect(
wrapper
.find(Menu.Item)
.at(4)
.find(Tooltip)
.props().title,
).toBe('');
expect(
wrapper
.find(Menu.Item)
.at(4)
.find(Tooltip)
.props().title,
).toBe('');
}); });
describe('open submenu when click submenu title', () => { describe('open submenu when click submenu title', () => {
@ -453,10 +305,7 @@ describe('Menu', () => {
}); });
const toggleMenu = (wrapper, index, event) => { const toggleMenu = (wrapper, index, event) => {
wrapper wrapper.find('.ant-menu-submenu-title').at(index).simulate(event);
.find('.ant-menu-submenu-title')
.at(index)
.simulate(event);
jest.runAllTimers(); jest.runAllTimers();
wrapper.update(); wrapper.update();
}; };
@ -474,21 +323,13 @@ describe('Menu', () => {
expect(wrapper.find('.ant-menu-sub').length).toBe(0); expect(wrapper.find('.ant-menu-sub').length).toBe(0);
toggleMenu(wrapper, 0, 'click'); toggleMenu(wrapper, 0, 'click');
expect(wrapper.find('.ant-menu-sub').hostNodes().length).toBe(1); expect(wrapper.find('.ant-menu-sub').hostNodes().length).toBe(1);
expect( expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).not.toBe(
wrapper true,
.find('.ant-menu-sub') );
.hostNodes()
.at(0)
.hasClass('ant-menu-hidden'),
).not.toBe(true);
toggleMenu(wrapper, 0, 'click'); toggleMenu(wrapper, 0, 'click');
expect( expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).toBe(
wrapper true,
.find('.ant-menu-sub') );
.hostNodes()
.at(0)
.hasClass('ant-menu-hidden'),
).toBe(true);
}); });
it('vertical', () => { it('vertical', () => {
@ -504,21 +345,13 @@ describe('Menu', () => {
expect(wrapper.find('.ant-menu-sub').length).toBe(0); expect(wrapper.find('.ant-menu-sub').length).toBe(0);
toggleMenu(wrapper, 0, 'mouseenter'); toggleMenu(wrapper, 0, 'mouseenter');
expect(wrapper.find('.ant-menu-sub').hostNodes().length).toBe(1); expect(wrapper.find('.ant-menu-sub').hostNodes().length).toBe(1);
expect( expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).not.toBe(
wrapper true,
.find('.ant-menu-sub') );
.hostNodes()
.at(0)
.hasClass('ant-menu-hidden'),
).not.toBe(true);
toggleMenu(wrapper, 0, 'mouseleave'); toggleMenu(wrapper, 0, 'mouseleave');
expect( expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).toBe(
wrapper true,
.find('.ant-menu-sub') );
.hostNodes()
.at(0)
.hasClass('ant-menu-hidden'),
).toBe(true);
}); });
it('horizontal', () => { it('horizontal', () => {
@ -535,21 +368,13 @@ describe('Menu', () => {
expect(wrapper.find('.ant-menu-sub').length).toBe(0); expect(wrapper.find('.ant-menu-sub').length).toBe(0);
toggleMenu(wrapper, 0, 'mouseenter'); toggleMenu(wrapper, 0, 'mouseenter');
expect(wrapper.find('.ant-menu-sub').hostNodes().length).toBe(1); expect(wrapper.find('.ant-menu-sub').hostNodes().length).toBe(1);
expect( expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).not.toBe(
wrapper true,
.find('.ant-menu-sub') );
.hostNodes()
.at(0)
.hasClass('ant-menu-hidden'),
).not.toBe(true);
toggleMenu(wrapper, 0, 'mouseleave'); toggleMenu(wrapper, 0, 'mouseleave');
expect( expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).toBe(
wrapper true,
.find('.ant-menu-sub') );
.hostNodes()
.at(0)
.hasClass('ant-menu-hidden'),
).toBe(true);
}); });
}); });
@ -558,7 +383,7 @@ describe('Menu', () => {
const wrapper = mount( const wrapper = mount(
<Menu mode="inline" inlineCollapsed> <Menu mode="inline" inlineCollapsed>
<Menu.Item key="1" title="bamboo lucky"> <Menu.Item key="1" title="bamboo lucky">
<Icon type="pie-chart" /> <PieChartOutlined />
<span> <span>
Option 1 Option 1
<img <img
@ -600,7 +425,7 @@ describe('Menu', () => {
key="sub1" key="sub1"
title={ title={
<span> <span>
<Icon type="user" /> <UserOutlined />
<span>User</span> <span>User</span>
</span> </span>
} }
@ -631,10 +456,7 @@ describe('Menu', () => {
<Menu.Item key="test2">Navigation Two</Menu.Item> <Menu.Item key="test2">Navigation Two</Menu.Item>
</Menu>, </Menu>,
); );
wrapper wrapper.find('Menu').at(1).simulate('mouseenter');
.find('Menu')
.at(1)
.simulate('mouseenter');
expect(onMouseEnter).toHaveBeenCalled(); expect(onMouseEnter).toHaveBeenCalled();
}); });
@ -642,12 +464,9 @@ describe('Menu', () => {
it('get correct animation type when switched from inline', () => { it('get correct animation type when switched from inline', () => {
const wrapper = mount(<Menu mode="inline" />); const wrapper = mount(<Menu mode="inline" />);
wrapper.setProps({ mode: 'horizontal' }); wrapper.setProps({ mode: 'horizontal' });
expect( expect(wrapper.find('InternalMenu').instance().getOpenMotionProps('')).toEqual({
wrapper motion: { motionName: '' },
.find('InternalMenu') });
.instance()
.getOpenMotionProps(''),
).toEqual({ motion: { motionName: '' } });
}); });
it('warning if use `openAnimation` as object', () => { it('warning if use `openAnimation` as object', () => {
@ -664,22 +483,14 @@ describe('Menu', () => {
it('motion object', () => { it('motion object', () => {
const motion = { test: true }; const motion = { test: true };
const wrapper = mount(<Menu motion={motion} />); const wrapper = mount(<Menu motion={motion} />);
expect( expect(wrapper.find('InternalMenu').instance().getOpenMotionProps('')).toEqual({ motion });
wrapper
.find('InternalMenu')
.instance()
.getOpenMotionProps(''),
).toEqual({ motion });
}); });
it('legacy openTransitionName', () => { it('legacy openTransitionName', () => {
const wrapper = mount(<Menu openTransitionName="legacy" />); const wrapper = mount(<Menu openTransitionName="legacy" />);
expect( expect(wrapper.find('InternalMenu').instance().getOpenMotionProps('')).toEqual({
wrapper openTransitionName: 'legacy',
.find('InternalMenu') });
.instance()
.getOpenMotionProps(''),
).toEqual({ openTransitionName: 'legacy' });
}); });
}); });
@ -687,11 +498,11 @@ describe('Menu', () => {
const wrapper = mount( const wrapper = mount(
<Menu defaultSelectedKeys={['mail']} defaultOpenKeys={['mail']} mode="horizontal"> <Menu defaultSelectedKeys={['mail']} defaultOpenKeys={['mail']} mode="horizontal">
<Menu.Item key="mail"> <Menu.Item key="mail">
<Icon type="mail" /> <MailOutlined />
Navigation One Navigation One
</Menu.Item> </Menu.Item>
<Menu.Item key="app"> <Menu.Item key="app">
<Icon type="appstore" /> <AppstoreOutlined />
Navigation Two Navigation Two
</Menu.Item> </Menu.Item>
<Menu.Item key="alipay"> <Menu.Item key="alipay">
@ -701,20 +512,28 @@ describe('Menu', () => {
</Menu.Item> </Menu.Item>
</Menu>, </Menu>,
); );
wrapper wrapper.find('MenuItem').first().simulate('mouseenter');
.find('MenuItem')
.first()
.simulate('mouseenter');
jest.runAllTimers(); jest.runAllTimers();
wrapper.update(); wrapper.update();
expect(wrapper.find('.ant-tooltip-inner').length).toBe(0); expect(wrapper.find('.ant-tooltip-inner').length).toBe(0);
}); });
it('MenuItem should render icon and icon should be the first child when icon exists', () => {
const wrapper = mount(
<Menu>
<Menu.Item key="mail" icon={<MailOutlined />}>
Navigation One
</Menu.Item>
</Menu>,
);
expect(wrapper.find('.ant-menu-item .anticon').hasClass('anticon-mail')).toBe(true);
});
it('should controlled collapse work', () => { it('should controlled collapse work', () => {
const wrapper = mount( const wrapper = mount(
<Menu mode="inline" inlineCollapsed={false}> <Menu mode="inline" inlineCollapsed={false}>
<Menu.Item key="1"> <Menu.Item key="1">
<Icon type="pie-chart" /> <PieChartOutlined />
<span>Option 1</span> <span>Option 1</span>
</Menu.Item> </Menu.Item>
</Menu>, </Menu>,
@ -732,7 +551,7 @@ describe('Menu', () => {
const wrapper = mount( const wrapper = mount(
<Menu mode="inline" inlineCollapsed={false}> <Menu mode="inline" inlineCollapsed={false}>
<Menu.Item key="1"> <Menu.Item key="1">
<Icon type="pie-chart" /> <PieChartOutlined />
<span>Option 1</span> <span>Option 1</span>
</Menu.Item> </Menu.Item>
</Menu>, </Menu>,
@ -790,10 +609,7 @@ describe('Menu', () => {
</Menu>, </Menu>,
); );
expect(wrapper.find('.ant-menu-item-selected').getDOMNode().textContent).toBe('Option 1'); expect(wrapper.find('.ant-menu-item-selected').getDOMNode().textContent).toBe('Option 1');
wrapper wrapper.find('.ant-menu-item').at(1).simulate('click');
.find('.ant-menu-item')
.at(1)
.simulate('click');
expect(wrapper.find('.ant-menu-item-selected').getDOMNode().textContent).toBe('Option 2'); expect(wrapper.find('.ant-menu-item-selected').getDOMNode().textContent).toBe('Option 2');
wrapper.setProps({ inlineCollapsed: true }); wrapper.setProps({ inlineCollapsed: true });
jest.runAllTimers(); jest.runAllTimers();
@ -808,4 +624,20 @@ describe('Menu', () => {
expect(wrapper.find('.ant-menu-item-selected').getDOMNode().textContent).toBe('Option 2'); expect(wrapper.find('.ant-menu-item-selected').getDOMNode().textContent).toBe('Option 2');
jest.useRealTimers(); jest.useRealTimers();
}); });
it('Menu.Item with icon children auto wrap span', () => {
const wrapper = mount(
<Menu>
<Menu.Item key="1" icon={<MailOutlined />}>
Navigation One
</Menu.Item>
<Menu.Item key="2" icon={<MailOutlined />}>
<span>Navigation One</span>
</Menu.Item>
<Menu.SubMenu key="3" icon={<MailOutlined />} title="Navigation One" />
<Menu.SubMenu key="4" icon={<MailOutlined />} title={<span>Navigation One</span>} />
</Menu>,
);
expect(wrapper.render()).toMatchSnapshot();
});
}); });

15
components/menu/demo/horizontal.md
View File

@ -34,22 +34,13 @@ class App extends React.Component {
render() { render() {
return ( return (
<Menu onClick={this.handleClick} selectedKeys={[this.state.current]} mode="horizontal"> <Menu onClick={this.handleClick} selectedKeys={[this.state.current]} mode="horizontal">
<Menu.Item key="mail"> <Menu.Item key="mail" icon={<MailOutlined />}>
<MailOutlined />
Navigation One Navigation One
</Menu.Item> </Menu.Item>
<Menu.Item key="app" disabled> <Menu.Item key="app" disabled icon={<AppstoreOutlined />}>
<AppstoreOutlined />
Navigation Two Navigation Two
</Menu.Item> </Menu.Item>
<SubMenu <SubMenu icon={<SettingOutlined />} title="Navigation Three - Submenu">
title={
<>
<SettingOutlined />
Navigation Three - Submenu
</>
}
>
<Menu.ItemGroup title="Item 1"> <Menu.ItemGroup title="Item 1">
<Menu.Item key="setting:1">Option 1</Menu.Item> <Menu.Item key="setting:1">Option 1</Menu.Item>
<Menu.Item key="setting:2">Option 2</Menu.Item> <Menu.Item key="setting:2">Option 2</Menu.Item>

35
components/menu/demo/inline-collapsed.md
View File

@ -55,41 +55,22 @@ class App extends React.Component {
theme="dark" theme="dark"
inlineCollapsed={this.state.collapsed} inlineCollapsed={this.state.collapsed}
> >
<Menu.Item key="1"> <Menu.Item key="1" icon={<PieChartOutlined />}>
<PieChartOutlined /> Option 1
<span>Option 1</span>
</Menu.Item> </Menu.Item>
<Menu.Item key="2"> <Menu.Item key="2" icon={<DesktopOutlined />}>
<DesktopOutlined /> Option 2
<span>Option 2</span>
</Menu.Item> </Menu.Item>
<Menu.Item key="3"> <Menu.Item key="3" icon={<ContainerOutlined />}>
<ContainerOutlined /> Option 3
<span>Option 3</span>
</Menu.Item> </Menu.Item>
<SubMenu <SubMenu key="sub1" icon={<MailOutlined />} title="Navigation One">
key="sub1"
title={
<span>
<MailOutlined />
<span>Navigation One</span>
</span>
}
>
<Menu.Item key="5">Option 5</Menu.Item> <Menu.Item key="5">Option 5</Menu.Item>
<Menu.Item key="6">Option 6</Menu.Item> <Menu.Item key="6">Option 6</Menu.Item>
<Menu.Item key="7">Option 7</Menu.Item> <Menu.Item key="7">Option 7</Menu.Item>
<Menu.Item key="8">Option 8</Menu.Item> <Menu.Item key="8">Option 8</Menu.Item>
</SubMenu> </SubMenu>
<SubMenu <SubMenu key="sub2" icon={<AppstoreOutlined />} title="Navigation Two">
key="sub2"
title={
<span>
<AppstoreOutlined />
<span>Navigation Two</span>
</span>
}
>
<Menu.Item key="9">Option 9</Menu.Item> <Menu.Item key="9">Option 9</Menu.Item>
<Menu.Item key="10">Option 10</Menu.Item> <Menu.Item key="10">Option 10</Menu.Item>
<SubMenu key="sub3" title="Submenu"> <SubMenu key="sub3" title="Submenu">

10
components/menu/demo/inline.md
View File

@ -51,15 +51,7 @@ class Sider extends React.Component {
<Menu.Item key="4">Option 4</Menu.Item> <Menu.Item key="4">Option 4</Menu.Item>
</Menu.ItemGroup> </Menu.ItemGroup>
</SubMenu> </SubMenu>
<SubMenu <SubMenu key="sub2" icon={<AppstoreOutlined />} title="Navigation Two">
key="sub2"
title={
<span>
<AppstoreOutlined />
<span>Navigation Two</span>
</span>
}
>
<Menu.Item key="5">Option 5</Menu.Item> <Menu.Item key="5">Option 5</Menu.Item>
<Menu.Item key="6">Option 6</Menu.Item> <Menu.Item key="6">Option 6</Menu.Item>
<SubMenu key="sub3" title="Submenu"> <SubMenu key="sub3" title="Submenu">

20
components/menu/demo/sider-current.md
View File

@ -60,15 +60,7 @@ class Sider extends React.Component {
<Menu.Item key="3">Option 3</Menu.Item> <Menu.Item key="3">Option 3</Menu.Item>
<Menu.Item key="4">Option 4</Menu.Item> <Menu.Item key="4">Option 4</Menu.Item>
</SubMenu> </SubMenu>
<SubMenu <SubMenu key="sub2" icon={<AppstoreOutlined />} title="Navigation Two">
key="sub2"
title={
<span>
<AppstoreOutlined />
<span>Navigation Two</span>
</span>
}
>
<Menu.Item key="5">Option 5</Menu.Item> <Menu.Item key="5">Option 5</Menu.Item>
<Menu.Item key="6">Option 6</Menu.Item> <Menu.Item key="6">Option 6</Menu.Item>
<SubMenu key="sub3" title="Submenu"> <SubMenu key="sub3" title="Submenu">
@ -76,15 +68,7 @@ class Sider extends React.Component {
<Menu.Item key="8">Option 8</Menu.Item> <Menu.Item key="8">Option 8</Menu.Item>
</SubMenu> </SubMenu>
</SubMenu> </SubMenu>
<SubMenu <SubMenu key="sub4" icon={<SettingOutlined />} title="Navigation Three">
key="sub4"
title={
<span>
<SettingOutlined />
<span>Navigation Three</span>
</span>
}
>
<Menu.Item key="9">Option 9</Menu.Item> <Menu.Item key="9">Option 9</Menu.Item>
<Menu.Item key="10">Option 10</Menu.Item> <Menu.Item key="10">Option 10</Menu.Item>
<Menu.Item key="11">Option 11</Menu.Item> <Menu.Item key="11">Option 11</Menu.Item>

34
components/menu/demo/switch-mode.md
View File

@ -14,7 +14,7 @@ title:
Show the dynamic switching mode (between 'inline' and 'vertical'). Show the dynamic switching mode (between 'inline' and 'vertical').
```jsx ```jsx
import { Menu, Switch } from 'antd'; import { Menu, Switch, Divider } from 'antd';
import { import {
MailOutlined, MailOutlined,
CalendarOutlined, CalendarOutlined,
@ -44,9 +44,9 @@ class Sider extends React.Component {
render() { render() {
return ( return (
<div> <>
<Switch onChange={this.changeMode} /> Change Mode <Switch onChange={this.changeMode} /> Change Mode
<span className="ant-divider" style={{ margin: '0 1em' }} /> <Divider type="vertical" />
<Switch onChange={this.changeTheme} /> Change Style <Switch onChange={this.changeTheme} /> Change Style
<br /> <br />
<br /> <br />
@ -57,23 +57,13 @@ class Sider extends React.Component {
mode={this.state.mode} mode={this.state.mode}
theme={this.state.theme} theme={this.state.theme}
> >
<Menu.Item key="1"> <Menu.Item key="1" icon={<MailOutlined />}>
<MailOutlined />
Navigation One Navigation One
</Menu.Item> </Menu.Item>
<Menu.Item key="2"> <Menu.Item key="2" icon={<CalendarOutlined />}>
<CalendarOutlined />
Navigation Two Navigation Two
</Menu.Item> </Menu.Item>
<SubMenu <SubMenu key="sub1" icon={<AppstoreOutlined />} title="Navigation Two">
key="sub1"
title={
<span>
<AppstoreOutlined />
<span>Navigation Three</span>
</span>
}
>
<Menu.Item key="3">Option 3</Menu.Item> <Menu.Item key="3">Option 3</Menu.Item>
<Menu.Item key="4">Option 4</Menu.Item> <Menu.Item key="4">Option 4</Menu.Item>
<SubMenu key="sub1-2" title="Submenu"> <SubMenu key="sub1-2" title="Submenu">
@ -81,22 +71,14 @@ class Sider extends React.Component {
<Menu.Item key="6">Option 6</Menu.Item> <Menu.Item key="6">Option 6</Menu.Item>
</SubMenu> </SubMenu>
</SubMenu> </SubMenu>
<SubMenu <SubMenu key="sub2" icon={<SettingOutlined />} title="Navigation Three">
key="sub2"
title={
<span>
<SettingOutlined />
<span>Navigation Four</span>
</span>
}
>
<Menu.Item key="7">Option 7</Menu.Item> <Menu.Item key="7">Option 7</Menu.Item>
<Menu.Item key="8">Option 8</Menu.Item> <Menu.Item key="8">Option 8</Menu.Item>
<Menu.Item key="9">Option 9</Menu.Item> <Menu.Item key="9">Option 9</Menu.Item>
<Menu.Item key="10">Option 10</Menu.Item> <Menu.Item key="10">Option 10</Menu.Item>
</SubMenu> </SubMenu>
</Menu> </Menu>
</div> </>
); );
} }
} }

34
components/menu/demo/theme.md
View File

@ -40,7 +40,7 @@ class Sider extends React.Component {
render() { render() {
return ( return (
<div> <>
<Switch <Switch
checked={this.state.theme === 'dark'} checked={this.state.theme === 'dark'}
onChange={this.changeTheme} onChange={this.changeTheme}
@ -57,29 +57,13 @@ class Sider extends React.Component {
selectedKeys={[this.state.current]} selectedKeys={[this.state.current]}
mode="inline" mode="inline"
> >
<SubMenu <SubMenu key="sub1" icon={<MailOutlined />} title="Navigation One">
key="sub1"
title={
<span>
<MailOutlined />
<span>Navigation One</span>
</span>
}
>
<Menu.Item key="1">Option 1</Menu.Item> <Menu.Item key="1">Option 1</Menu.Item>
<Menu.Item key="2">Option 2</Menu.Item> <Menu.Item key="2">Option 2</Menu.Item>
<Menu.Item key="3">Option 3</Menu.Item> <Menu.Item key="3">Option 3</Menu.Item>
<Menu.Item key="4">Option 4</Menu.Item> <Menu.Item key="4">Option 4</Menu.Item>
</SubMenu> </SubMenu>
<SubMenu <SubMenu key="sub2" icon={<AppstoreOutlined />} title="Navigation Two">
key="sub2"
title={
<span>
<AppstoreOutlined />
<span>Navigation Two</span>
</span>
}
>
<Menu.Item key="5">Option 5</Menu.Item> <Menu.Item key="5">Option 5</Menu.Item>
<Menu.Item key="6">Option 6</Menu.Item> <Menu.Item key="6">Option 6</Menu.Item>
<SubMenu key="sub3" title="Submenu"> <SubMenu key="sub3" title="Submenu">
@ -87,22 +71,14 @@ class Sider extends React.Component {
<Menu.Item key="8">Option 8</Menu.Item> <Menu.Item key="8">Option 8</Menu.Item>
</SubMenu> </SubMenu>
</SubMenu> </SubMenu>
<SubMenu <SubMenu key="sub4" icon={<SettingOutlined />} title="Navigation Three">
key="sub4"
title={
<span>
<SettingOutlined />
<span>Navigation Three</span>
</span>
}
>
<Menu.Item key="9">Option 9</Menu.Item> <Menu.Item key="9">Option 9</Menu.Item>
<Menu.Item key="10">Option 10</Menu.Item> <Menu.Item key="10">Option 10</Menu.Item>
<Menu.Item key="11">Option 11</Menu.Item> <Menu.Item key="11">Option 11</Menu.Item>
<Menu.Item key="12">Option 12</Menu.Item> <Menu.Item key="12">Option 12</Menu.Item>
</SubMenu> </SubMenu>
</Menu> </Menu>
</div> </>
); );
} }
} }

20
components/menu/demo/vertical.md
View File

@ -25,15 +25,7 @@ function handleClick(e) {
ReactDOM.render( ReactDOM.render(
<Menu onClick={handleClick} style={{ width: 256 }} mode="vertical"> <Menu onClick={handleClick} style={{ width: 256 }} mode="vertical">
<SubMenu <SubMenu key="sub1" icon={<MailOutlined />} title="Navigation One">
key="sub1"
title={
<span>
<MailOutlined />
<span>Navigation One</span>
</span>
}
>
<Menu.ItemGroup title="Item 1"> <Menu.ItemGroup title="Item 1">
<Menu.Item key="1">Option 1</Menu.Item> <Menu.Item key="1">Option 1</Menu.Item>
<Menu.Item key="2">Option 2</Menu.Item> <Menu.Item key="2">Option 2</Menu.Item>
@ -59,15 +51,7 @@ ReactDOM.render(
<Menu.Item key="8">Option 8</Menu.Item> <Menu.Item key="8">Option 8</Menu.Item>
</SubMenu> </SubMenu>
</SubMenu> </SubMenu>
<SubMenu <SubMenu key="sub4" icon={<SettingOutlined />} title="Navigation Three">
key="sub4"
title={
<span>
<SettingOutlined />
<span>Navigation Three</span>
</span>
}
>
<Menu.Item key="9">Option 9</Menu.Item> <Menu.Item key="9">Option 9</Menu.Item>
<Menu.Item key="10">Option 10</Menu.Item> <Menu.Item key="10">Option 10</Menu.Item>
<Menu.Item key="11">Option 11</Menu.Item> <Menu.Item key="11">Option 11</Menu.Item>

25
components/menu/index.en-US.md
View File

@ -53,10 +53,30 @@ More layouts with navigation: [Layout](/components/layout).
### Menu.Item ### Menu.Item
| Param | Description | Type | Default value | Version | | Param | Description | Type | Default value | Version |
| -------- | ------------------------------------ | ------- | ------------- | ------- | | -------- | ------------------------------------ | --------- | ------------- | ------- |
| disabled | Whether menu item is disabled | boolean | false | | | disabled | Whether menu item is disabled | boolean | false | |
| key | Unique ID of the menu item | string | | | | key | Unique ID of the menu item | string | | |
| title | Set display title for collapsed item | string | | | | title | Set display title for collapsed item | string | | |
| icon | icon of the menu item | ReactNode | | 4.2.0 |
> Note: `icon` is a newly added prop in`4.2.0`. For previous versions, please use the following method to define the icon.
>
> ```jsx
> <Menu.Item>
> <PieChartOutlined />
> <span>Option 1</span>
> </Menu.Item>
> <Menu.SubMenu
> title={
> <>
> <PieChartOutlined />
> <span>Option 2</span>
> </>
> }
> >
> ...
> </Menu.SubMenu>
> ```
### Menu.SubMenu ### Menu.SubMenu
@ -66,7 +86,8 @@ More layouts with navigation: [Layout](/components/layout).
| children | Sub-menus or sub-menu items | Array&lt;MenuItem\|SubMenu> | | | | children | Sub-menus or sub-menu items | Array&lt;MenuItem\|SubMenu> | | |
| disabled | Whether sub-menu is disabled | boolean | false | | | disabled | Whether sub-menu is disabled | boolean | false | |
| key | Unique ID of the sub-menu | string | | | | key | Unique ID of the sub-menu | string | | |
| title | Title of the sub-menu | string\|ReactNode | | | | title | Title of sub menu | string\|ReactNode | | |
| icon | Icon of sub menu | ReactNode | | 4.2.0 |
| onTitleClick | Callback executed when the sub-menu title is clicked | function({ key, domEvent }) | | | | onTitleClick | Callback executed when the sub-menu title is clicked | function({ key, domEvent }) | | |
### Menu.ItemGroup ### Menu.ItemGroup

25
components/menu/index.zh-CN.md
View File

@ -54,20 +54,41 @@ subtitle: 导航菜单
### Menu.Item ### Menu.Item
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |
| -------- | ------------------------ | ------- | ------ | ---- | | -------- | ------------------------ | --------- | ------ | ----- |
| disabled | 是否禁用 | boolean | false | | | disabled | 是否禁用 | boolean | false | |
| key | item 的唯一标志 | string | | | | key | item 的唯一标志 | string | | |
| title | 设置收缩时展示的悬浮标题 | string | | | | title | 设置收缩时展示的悬浮标题 | string | | |
| icon | 菜单图标 | ReactNode | | 4.2.0 |
> 注意：`icon` 是 `4.2.0` 新增的属性，之前的版本请使用下面的方式定义图标。
>
> ```jsx
> <Menu.Item>
> <PieChartOutlined />
> <span>Option 1</span>
> </Menu.Item>
> <Menu.SubMenu
> title={
> <>
> <PieChartOutlined />
> <span>Option 2</span>
> </>
> }
> >
> ...
> </Menu.SubMenu>
> ```
### Menu.SubMenu ### Menu.SubMenu
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |
| -------------- | -------------- | --------------------------- | ------ | ---- | | -------------- | -------------- | --------------------------- | ------ | ----- |
| popupClassName | 子菜单样式 | string | | | | popupClassName | 子菜单样式 | string | | |
| children | 子菜单的菜单项 | Array&lt;MenuItem\|SubMenu> | | | | children | 子菜单的菜单项 | Array&lt;MenuItem\|SubMenu> | | |
| disabled | 是否禁用 | boolean | false | | | disabled | 是否禁用 | boolean | false | |
| key | 唯一标志 | string | | | | key | 唯一标志 | string | | |
| title | 子菜单项值 | string\|ReactNode | | | | title | 子菜单项值 | string\|ReactNode | | |
| icon | 菜单图标 | ReactNode | | 4.2.0 |
| onTitleClick | 点击子菜单标题 | function({ key, domEvent }) | | | | onTitleClick | 点击子菜单标题 | function({ key, domEvent }) | | |
### Menu.ItemGroup ### Menu.ItemGroup