mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-25 19:50:05 +08:00
Merge pull request #6686 from ant-design/feat-collapsed-menu
Better collapsed Sider and Menu
This commit is contained in:
偏右
GitHub
commit
87932504b4
@ -17,6 +17,7 @@ if (typeof window !== 'undefined') {
|
||||
import React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import omit from 'omit.js';
|
||||
import PropTypes from 'prop-types';
|
||||
import Icon from '../icon';
|
||||
|
||||
const dimensionMap = {
|
||||
@ -55,6 +56,10 @@ export default class Sider extends React.Component<SiderProps, any> {
|
||||
style: {},
|
||||
};
|
||||
|
||||
static childContextTypes = {
|
||||
siderCollapsed: PropTypes.bool,
|
||||
};
|
||||
|
||||
private mql: any;
|
||||
|
||||
constructor(props) {
|
||||
@ -78,6 +83,12 @@ export default class Sider extends React.Component<SiderProps, any> {
|
||||
};
|
||||
}
|
||||
|
||||
getChildContext() {
|
||||
return {
|
||||
siderCollapsed: this.props.collapsed,
|
||||
};
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
if ('collapsed' in nextProps) {
|
||||
this.setState({
|
||||
|
||||
@ -139,7 +139,7 @@ exports[`renders ./components/layout/demo/custom-trigger.md correctly 1`] = `
|
||||
/>
|
||||
<ul
|
||||
aria-activedescendant=""
|
||||
class="ant-menu ant-menu-inline ant-menu-dark ant-menu-root"
|
||||
class="ant-menu ant-menu-inline ant-menu-dark ant-menu-root"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
>
|
||||
@ -152,9 +152,7 @@ exports[`renders ./components/layout/demo/custom-trigger.md correctly 1`] = `
|
||||
<i
|
||||
class="anticon anticon-user"
|
||||
/>
|
||||
<span
|
||||
class="nav-text"
|
||||
>
|
||||
<span>
|
||||
nav 1
|
||||
</span>
|
||||
</li>
|
||||
@ -167,9 +165,7 @@ exports[`renders ./components/layout/demo/custom-trigger.md correctly 1`] = `
|
||||
<i
|
||||
class="anticon anticon-video-camera"
|
||||
/>
|
||||
<span
|
||||
class="nav-text"
|
||||
>
|
||||
<span>
|
||||
nav 2
|
||||
</span>
|
||||
</li>
|
||||
@ -182,9 +178,7 @@ exports[`renders ./components/layout/demo/custom-trigger.md correctly 1`] = `
|
||||
<i
|
||||
class="anticon anticon-upload"
|
||||
/>
|
||||
<span
|
||||
class="nav-text"
|
||||
>
|
||||
<span>
|
||||
nav 3
|
||||
</span>
|
||||
</li>
|
||||
@ -225,7 +219,7 @@ exports[`renders ./components/layout/demo/fixed.md correctly 1`] = `
|
||||
/>
|
||||
<ul
|
||||
aria-activedescendant=""
|
||||
class="ant-menu ant-menu-horizontal ant-menu-dark ant-menu-root"
|
||||
class="ant-menu ant-menu-horizontal ant-menu-dark ant-menu-root"
|
||||
role="menu"
|
||||
style="line-height:64px;"
|
||||
tabindex="0"
|
||||
@ -330,7 +324,7 @@ exports[`renders ./components/layout/demo/fixed-sider.md correctly 1`] = `
|
||||
/>
|
||||
<ul
|
||||
aria-activedescendant=""
|
||||
class="ant-menu ant-menu-inline ant-menu-dark ant-menu-root"
|
||||
class="ant-menu ant-menu-inline ant-menu-dark ant-menu-root"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
>
|
||||
@ -594,7 +588,7 @@ exports[`renders ./components/layout/demo/responsive.md correctly 1`] = `
|
||||
/>
|
||||
<ul
|
||||
aria-activedescendant=""
|
||||
class="ant-menu ant-menu-inline ant-menu-dark ant-menu-root"
|
||||
class="ant-menu ant-menu-inline ant-menu-dark ant-menu-root"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
>
|
||||
@ -704,10 +698,36 @@ exports[`renders ./components/layout/demo/side.md correctly 1`] = `
|
||||
/>
|
||||
<ul
|
||||
aria-activedescendant=""
|
||||
class="ant-menu ant-menu-inline ant-menu-dark ant-menu-root"
|
||||
class="ant-menu ant-menu-inline ant-menu-dark ant-menu-root"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
>
|
||||
<li
|
||||
aria-selected="true"
|
||||
class="ant-menu-item-selected ant-menu-item"
|
||||
role="menuitem"
|
||||
style="padding-left:24px;"
|
||||
>
|
||||
<i
|
||||
class="anticon anticon-pie-chart"
|
||||
/>
|
||||
<span>
|
||||
Option 1
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
aria-selected="false"
|
||||
class="ant-menu-item"
|
||||
role="menuitem"
|
||||
style="padding-left:24px;"
|
||||
>
|
||||
<i
|
||||
class="anticon anticon-desktop"
|
||||
/>
|
||||
<span>
|
||||
Option 2
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
class="ant-menu-submenu-inline ant-menu-submenu"
|
||||
>
|
||||
@ -722,9 +742,7 @@ exports[`renders ./components/layout/demo/side.md correctly 1`] = `
|
||||
<i
|
||||
class="anticon anticon-user"
|
||||
/>
|
||||
<span
|
||||
class="nav-text"
|
||||
>
|
||||
<span>
|
||||
User
|
||||
</span>
|
||||
</span>
|
||||
@ -744,29 +762,23 @@ exports[`renders ./components/layout/demo/side.md correctly 1`] = `
|
||||
<i
|
||||
class="anticon anticon-team"
|
||||
/>
|
||||
<span
|
||||
class="nav-text"
|
||||
>
|
||||
<span>
|
||||
Team
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
aria-selected="true"
|
||||
class="ant-menu-item-selected ant-menu-item"
|
||||
aria-selected="false"
|
||||
class="ant-menu-item"
|
||||
role="menuitem"
|
||||
style="padding-left:24px;"
|
||||
>
|
||||
<i
|
||||
class="anticon anticon-file"
|
||||
/>
|
||||
<span>
|
||||
<i
|
||||
class="anticon anticon-file"
|
||||
/>
|
||||
<span
|
||||
class="nav-text"
|
||||
>
|
||||
File
|
||||
</span>
|
||||
File
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
@ -847,7 +859,7 @@ exports[`renders ./components/layout/demo/top.md correctly 1`] = `
|
||||
/>
|
||||
<ul
|
||||
aria-activedescendant=""
|
||||
class="ant-menu ant-menu-horizontal ant-menu-dark ant-menu-root"
|
||||
class="ant-menu ant-menu-horizontal ant-menu-dark ant-menu-root"
|
||||
role="menu"
|
||||
style="line-height:64px;"
|
||||
tabindex="0"
|
||||
@ -947,7 +959,7 @@ exports[`renders ./components/layout/demo/top-side.md correctly 1`] = `
|
||||
/>
|
||||
<ul
|
||||
aria-activedescendant=""
|
||||
class="ant-menu ant-menu-horizontal ant-menu-dark ant-menu-root"
|
||||
class="ant-menu ant-menu-horizontal ant-menu-dark ant-menu-root"
|
||||
role="menu"
|
||||
style="line-height:64px;"
|
||||
tabindex="0"
|
||||
@ -1033,13 +1045,13 @@ exports[`renders ./components/layout/demo/top-side.md correctly 1`] = `
|
||||
>
|
||||
<ul
|
||||
aria-activedescendant=""
|
||||
class="ant-menu ant-menu-inline ant-menu-light ant-menu-root"
|
||||
class="ant-menu ant-menu-inline ant-menu-light ant-menu-root"
|
||||
role="menu"
|
||||
style="height:100%;"
|
||||
tabindex="0"
|
||||
>
|
||||
<li
|
||||
class="ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu-selected ant-menu-submenu"
|
||||
class="ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu"
|
||||
>
|
||||
<div
|
||||
aria-expanded="true"
|
||||
@ -1163,7 +1175,7 @@ exports[`renders ./components/layout/demo/top-side-2.md correctly 1`] = `
|
||||
/>
|
||||
<ul
|
||||
aria-activedescendant=""
|
||||
class="ant-menu ant-menu-horizontal ant-menu-dark ant-menu-root"
|
||||
class="ant-menu ant-menu-horizontal ant-menu-dark ant-menu-root"
|
||||
role="menu"
|
||||
style="line-height:64px;"
|
||||
tabindex="0"
|
||||
@ -1203,13 +1215,13 @@ exports[`renders ./components/layout/demo/top-side-2.md correctly 1`] = `
|
||||
>
|
||||
<ul
|
||||
aria-activedescendant=""
|
||||
class="ant-menu ant-menu-inline ant-menu-light ant-menu-root"
|
||||
class="ant-menu ant-menu-inline ant-menu-light ant-menu-root"
|
||||
role="menu"
|
||||
style="height:100%;border-right:0;"
|
||||
tabindex="0"
|
||||
>
|
||||
<li
|
||||
class="ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu-selected ant-menu-submenu"
|
||||
class="ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu"
|
||||
>
|
||||
<div
|
||||
aria-expanded="true"
|
||||
|
||||
@ -38,15 +38,15 @@ class SiderDemo extends React.Component {
|
||||
<Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
|
||||
<Menu.Item key="1">
|
||||
<Icon type="user" />
|
||||
<span className="nav-text">nav 1</span>
|
||||
<span>nav 1</span>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="2">
|
||||
<Icon type="video-camera" />
|
||||
<span className="nav-text">nav 2</span>
|
||||
<span>nav 2</span>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="3">
|
||||
<Icon type="upload" />
|
||||
<span className="nav-text">nav 3</span>
|
||||
<span>nav 3</span>
|
||||
</Menu.Item>
|
||||
</Menu>
|
||||
</Sider>
|
||||
@ -89,12 +89,4 @@ ReactDOM.render(<SiderDemo />, mountNode);
|
||||
border-radius: 6px;
|
||||
margin: 16px;
|
||||
}
|
||||
|
||||
#components-layout-demo-custom-trigger .ant-layout-sider-collapsed .anticon {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
#components-layout-demo-custom-trigger .ant-layout-sider-collapsed .nav-text {
|
||||
display: none;
|
||||
}
|
||||
````
|
||||
|
||||
@ -27,14 +27,10 @@ const SubMenu = Menu.SubMenu;
|
||||
class SiderDemo extends React.Component {
|
||||
state = {
|
||||
collapsed: false,
|
||||
mode: 'inline',
|
||||
};
|
||||
onCollapse = (collapsed) => {
|
||||
console.log(collapsed);
|
||||
this.setState({
|
||||
collapsed,
|
||||
mode: collapsed ? 'vertical' : 'inline',
|
||||
});
|
||||
this.setState({ collapsed });
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
@ -45,27 +41,33 @@ class SiderDemo extends React.Component {
|
||||
onCollapse={this.onCollapse}
|
||||
>
|
||||
<div className="logo" />
|
||||
<Menu theme="dark" mode={this.state.mode} defaultSelectedKeys={['6']}>
|
||||
<Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
|
||||
<Menu.Item key="1">
|
||||
<Icon type="pie-chart" />
|
||||
<span>Option 1</span>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="2">
|
||||
<Icon type="desktop" />
|
||||
<span>Option 2</span>
|
||||
</Menu.Item>
|
||||
<SubMenu
|
||||
key="sub1"
|
||||
title={<span><Icon type="user" /><span className="nav-text">User</span></span>}
|
||||
title={<span><Icon type="user" /><span>User</span></span>}
|
||||
>
|
||||
<Menu.Item key="1">Tom</Menu.Item>
|
||||
<Menu.Item key="2">Bill</Menu.Item>
|
||||
<Menu.Item key="3">Alex</Menu.Item>
|
||||
<Menu.Item key="3">Tom</Menu.Item>
|
||||
<Menu.Item key="4">Bill</Menu.Item>
|
||||
<Menu.Item key="5">Alex</Menu.Item>
|
||||
</SubMenu>
|
||||
<SubMenu
|
||||
key="sub2"
|
||||
title={<span><Icon type="team" /><span className="nav-text">Team</span></span>}
|
||||
title={<span><Icon type="team" /><span>Team</span></span>}
|
||||
>
|
||||
<Menu.Item key="4">Team 1</Menu.Item>
|
||||
<Menu.Item key="5">Team 2</Menu.Item>
|
||||
<Menu.Item key="6">Team 1</Menu.Item>
|
||||
<Menu.Item key="8">Team 2</Menu.Item>
|
||||
</SubMenu>
|
||||
<Menu.Item key="6">
|
||||
<span>
|
||||
<Icon type="file" />
|
||||
<span className="nav-text">File</span>
|
||||
</span>
|
||||
<Menu.Item key="8">
|
||||
<Icon type="file" />
|
||||
<span>File</span>
|
||||
</Menu.Item>
|
||||
</Menu>
|
||||
</Sider>
|
||||
@ -99,17 +101,4 @@ ReactDOM.render(<SiderDemo />, mountNode);
|
||||
border-radius: 6px;
|
||||
margin: 16px;
|
||||
}
|
||||
|
||||
#components-layout-demo-side .ant-layout-sider-collapsed .anticon {
|
||||
font-size: 16px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
#components-layout-demo-side .ant-layout-sider-collapsed .nav-text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#components-layout-demo-side .ant-layout-sider-collapsed .ant-menu-submenu-vertical > .ant-menu-submenu-title:after {
|
||||
display: none;
|
||||
}
|
||||
````
|
||||
|
||||
22
components/menu/MenuItem.tsx
Normal file
22
components/menu/MenuItem.tsx
Normal file
@ -0,0 +1,22 @@
|
||||
import React from 'react';
|
||||
import { Item } from 'rc-menu';
|
||||
import PropTypes from 'prop-types';
|
||||
import Tooltip from '../tooltip';
|
||||
|
||||
const MenuItem: any = (props, { inlineCollapsed }) => {
|
||||
return (
|
||||
<Tooltip
|
||||
title={inlineCollapsed && props.level === 1 ? props.children : ''}
|
||||
placement="right"
|
||||
overlayClassName={`${props.rootPrefixCls}-inline-collapsed-tooltip`}
|
||||
>
|
||||
<Item {...props} />
|
||||
</Tooltip>
|
||||
);
|
||||
};
|
||||
|
||||
MenuItem.contextTypes = {
|
||||
inlineCollapsed: PropTypes.bool,
|
||||
};
|
||||
|
||||
export default MenuItem;
|
||||
@ -3,7 +3,7 @@
|
||||
exports[`renders ./components/menu/demo/horizontal.md correctly 1`] = `
|
||||
<ul
|
||||
aria-activedescendant=""
|
||||
class="ant-menu ant-menu-horizontal ant-menu-light ant-menu-root"
|
||||
class="ant-menu ant-menu-horizontal ant-menu-light ant-menu-root"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
>
|
||||
@ -61,16 +61,16 @@ exports[`renders ./components/menu/demo/horizontal.md correctly 1`] = `
|
||||
</ul>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/menu/demo/sider.md correctly 1`] = `
|
||||
exports[`renders ./components/menu/demo/inline.md correctly 1`] = `
|
||||
<ul
|
||||
aria-activedescendant=""
|
||||
class="ant-menu ant-menu-inline ant-menu-light ant-menu-root"
|
||||
class="ant-menu ant-menu-inline ant-menu-light ant-menu-root"
|
||||
role="menu"
|
||||
style="width:240px;"
|
||||
tabindex="0"
|
||||
>
|
||||
<li
|
||||
class="ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu-selected ant-menu-submenu"
|
||||
class="ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu"
|
||||
>
|
||||
<div
|
||||
aria-expanded="true"
|
||||
@ -197,16 +197,157 @@ exports[`renders ./components/menu/demo/sider.md correctly 1`] = `
|
||||
</ul>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/menu/demo/inline-collapsed.md correctly 1`] = `
|
||||
<div
|
||||
style="width:240px;"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary"
|
||||
style="margin-bottom:16px;"
|
||||
type="button"
|
||||
>
|
||||
<i
|
||||
class="anticon anticon-menu-fold"
|
||||
/>
|
||||
</button>
|
||||
<ul
|
||||
aria-activedescendant=""
|
||||
class="ant-menu ant-menu-inline ant-menu-dark ant-menu-root"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
>
|
||||
<li
|
||||
aria-selected="true"
|
||||
class="ant-menu-item-selected ant-menu-item"
|
||||
role="menuitem"
|
||||
style="padding-left:24px;"
|
||||
>
|
||||
<i
|
||||
class="anticon anticon-pie-chart"
|
||||
/>
|
||||
<span>
|
||||
Option 1
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
aria-selected="false"
|
||||
class="ant-menu-item"
|
||||
role="menuitem"
|
||||
style="padding-left:24px;"
|
||||
>
|
||||
<i
|
||||
class="anticon anticon-desktop"
|
||||
/>
|
||||
<span>
|
||||
Option 2
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
aria-selected="false"
|
||||
class="ant-menu-item"
|
||||
role="menuitem"
|
||||
style="padding-left:24px;"
|
||||
>
|
||||
<i
|
||||
class="anticon anticon-inbox"
|
||||
/>
|
||||
<span>
|
||||
Option 3
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
class="ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu"
|
||||
>
|
||||
<div
|
||||
aria-expanded="true"
|
||||
aria-haspopup="true"
|
||||
aria-owns="sub1$Menu"
|
||||
class="ant-menu-submenu-title"
|
||||
style="padding-left:24px;"
|
||||
>
|
||||
<span>
|
||||
<i
|
||||
class="anticon anticon-mail"
|
||||
/>
|
||||
<span>
|
||||
Navigation One
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<ul
|
||||
aria-activedescendant=""
|
||||
class="ant-menu ant-menu-inline ant-menu-sub"
|
||||
id="sub1$Menu"
|
||||
role="menu"
|
||||
>
|
||||
<li
|
||||
aria-selected="false"
|
||||
class="ant-menu-item"
|
||||
role="menuitem"
|
||||
style="padding-left:48px;"
|
||||
>
|
||||
Option 5
|
||||
</li>
|
||||
<li
|
||||
aria-selected="false"
|
||||
class="ant-menu-item"
|
||||
role="menuitem"
|
||||
style="padding-left:48px;"
|
||||
>
|
||||
Option 6
|
||||
</li>
|
||||
<li
|
||||
aria-selected="false"
|
||||
class="ant-menu-item"
|
||||
role="menuitem"
|
||||
style="padding-left:48px;"
|
||||
>
|
||||
Option 7
|
||||
</li>
|
||||
<li
|
||||
aria-selected="false"
|
||||
class="ant-menu-item"
|
||||
role="menuitem"
|
||||
style="padding-left:48px;"
|
||||
>
|
||||
Option 8
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li
|
||||
class="ant-menu-submenu-inline ant-menu-submenu"
|
||||
>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
aria-owns="sub2$Menu"
|
||||
class="ant-menu-submenu-title"
|
||||
style="padding-left:24px;"
|
||||
>
|
||||
<span>
|
||||
<i
|
||||
class="anticon anticon-appstore"
|
||||
/>
|
||||
<span>
|
||||
Navigation Two
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/menu/demo/sider-current.md correctly 1`] = `
|
||||
<ul
|
||||
aria-activedescendant=""
|
||||
class="ant-menu ant-menu-inline ant-menu-light ant-menu-root"
|
||||
class="ant-menu ant-menu-inline ant-menu-light ant-menu-root"
|
||||
role="menu"
|
||||
style="width:240px;"
|
||||
tabindex="0"
|
||||
>
|
||||
<li
|
||||
class="ant-menu-submenu-inline ant-menu-submenu-selected ant-menu-submenu"
|
||||
class="ant-menu-submenu-inline ant-menu-submenu"
|
||||
>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
@ -296,7 +437,7 @@ exports[`renders ./components/menu/demo/switch-mode.md correctly 1`] = `
|
||||
<br />
|
||||
<ul
|
||||
aria-activedescendant=""
|
||||
class="ant-menu ant-menu-inline ant-menu-light ant-menu-root"
|
||||
class="ant-menu ant-menu-inline ant-menu-light ant-menu-root"
|
||||
role="menu"
|
||||
style="width:240px;"
|
||||
tabindex="0"
|
||||
@ -420,13 +561,13 @@ exports[`renders ./components/menu/demo/theme.md correctly 1`] = `
|
||||
<br />
|
||||
<ul
|
||||
aria-activedescendant=""
|
||||
class="ant-menu ant-menu-inline ant-menu-dark ant-menu-root"
|
||||
class="ant-menu ant-menu-inline ant-menu-dark ant-menu-root"
|
||||
role="menu"
|
||||
style="width:240px;"
|
||||
tabindex="0"
|
||||
>
|
||||
<li
|
||||
class="ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu-selected ant-menu-submenu"
|
||||
class="ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu"
|
||||
>
|
||||
<div
|
||||
aria-expanded="true"
|
||||
@ -531,7 +672,7 @@ exports[`renders ./components/menu/demo/theme.md correctly 1`] = `
|
||||
exports[`renders ./components/menu/demo/vertical.md correctly 1`] = `
|
||||
<ul
|
||||
aria-activedescendant=""
|
||||
class="ant-menu ant-menu-vertical ant-menu-light ant-menu-root"
|
||||
class="ant-menu ant-menu-vertical ant-menu-light ant-menu-root"
|
||||
role="menu"
|
||||
style="width:240px;"
|
||||
tabindex="0"
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import React from 'react';
|
||||
import { mount } from 'enzyme';
|
||||
import Menu from '..';
|
||||
import Icon from '../../icon';
|
||||
|
||||
const SubMenu = Menu.SubMenu;
|
||||
|
||||
@ -127,4 +128,31 @@ describe('Menu', () => {
|
||||
wrapper.setProps({ mode: 'inline' });
|
||||
expect(wrapper.find('.ant-menu-sub').at(0).hasClass('ant-menu-hidden')).not.toBe(true);
|
||||
});
|
||||
|
||||
it('should always follow openKeys when mode is switched', () => {
|
||||
const wrapper = mount(
|
||||
<Menu defaultOpenKeys={['1']} mode="inline">
|
||||
<Menu.Item key="menu1">
|
||||
<Icon type="inbox" />
|
||||
<span>Option</span>
|
||||
</Menu.Item>
|
||||
<SubMenu key="1" title="submenu1">
|
||||
<Menu.Item key="submenu1">
|
||||
Option
|
||||
</Menu.Item>
|
||||
<Menu.Item key="submenu2">
|
||||
Option
|
||||
</Menu.Item>
|
||||
</SubMenu>
|
||||
</Menu>
|
||||
);
|
||||
expect(wrapper.find('.ant-menu-sub').at(0).hasClass('ant-menu-inline')).toBe(true);
|
||||
expect(wrapper.find('.ant-menu-sub').at(0).hasClass('ant-menu-hidden')).toBe(false);
|
||||
wrapper.setProps({ inlineCollapsed: true });
|
||||
expect(wrapper.find('.ant-menu-sub').at(0).hasClass('ant-menu-vertical')).toBe(true);
|
||||
expect(wrapper.find('.ant-menu-sub').at(0).hasClass('ant-menu-hidden')).toBe(true);
|
||||
wrapper.setProps({ inlineCollapsed: false });
|
||||
expect(wrapper.find('.ant-menu-sub').at(0).hasClass('ant-menu-inline')).toBe(true);
|
||||
expect(wrapper.find('.ant-menu-sub').at(0).hasClass('ant-menu-hidden')).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
75
components/menu/demo/inline-collapsed.md
Normal file
75
components/menu/demo/inline-collapsed.md
Normal file
@ -0,0 +1,75 @@
|
||||
---
|
||||
order: 2
|
||||
title:
|
||||
zh-CN: 缩起内嵌菜单
|
||||
en-US: Collapsed inline menu
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
内嵌菜单可以被缩起/展开。
|
||||
|
||||
## en-US
|
||||
|
||||
Inline menu could be collapsed.
|
||||
|
||||
````jsx
|
||||
import { Menu, Icon, Button } from 'antd';
|
||||
const SubMenu = Menu.SubMenu;
|
||||
|
||||
class App extends React.Component {
|
||||
state = {
|
||||
collapsed: false,
|
||||
}
|
||||
toggleCollapsed = () => {
|
||||
this.setState({
|
||||
collapsed: !this.state.collapsed,
|
||||
});
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<div style={{ width: 240 }}>
|
||||
<Button type="primary" onClick={this.toggleCollapsed} style={{ marginBottom: 16 }}>
|
||||
<Icon type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'} />
|
||||
</Button>
|
||||
<Menu
|
||||
defaultSelectedKeys={['1']}
|
||||
defaultOpenKeys={['sub1']}
|
||||
mode="inline"
|
||||
theme="dark"
|
||||
inlineCollapsed={this.state.collapsed}
|
||||
>
|
||||
<Menu.Item key="1">
|
||||
<Icon type="pie-chart" />
|
||||
<span>Option 1</span>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="2">
|
||||
<Icon type="desktop" />
|
||||
<span>Option 2</span>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="3">
|
||||
<Icon type="inbox" />
|
||||
<span>Option 3</span>
|
||||
</Menu.Item>
|
||||
<SubMenu key="sub1" title={<span><Icon type="mail" /><span>Navigation One</span></span>}>
|
||||
<Menu.Item key="5">Option 5</Menu.Item>
|
||||
<Menu.Item key="6">Option 6</Menu.Item>
|
||||
<Menu.Item key="7">Option 7</Menu.Item>
|
||||
<Menu.Item key="8">Option 8</Menu.Item>
|
||||
</SubMenu>
|
||||
<SubMenu key="sub2" title={<span><Icon type="appstore" /><span>Navigation Two</span></span>}>
|
||||
<Menu.Item key="9">Option 9</Menu.Item>
|
||||
<Menu.Item key="10">Option 10</Menu.Item>
|
||||
<SubMenu key="sub3" title="Submenu">
|
||||
<Menu.Item key="11">Option 11</Menu.Item>
|
||||
<Menu.Item key="12">Option 12</Menu.Item>
|
||||
</SubMenu>
|
||||
</SubMenu>
|
||||
</Menu>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render(<App />, mountNode);
|
||||
````
|
||||
@ -2,7 +2,7 @@
|
||||
order: 1
|
||||
title:
|
||||
zh-CN: 内嵌菜单
|
||||
en-US: Vertical menu with inline children
|
||||
en-US: Inline menu
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
@ -42,6 +42,7 @@ More layout and samples: [layout](/docs/spec/layout).
|
||||
| style | style of the root node | object | |
|
||||
| inlineIndent | indent px of inline menu item on each level | number | 24 |
|
||||
| multiple | Allow select multiple item | boolean | false |
|
||||
| inlineCollapsed | specified the collapsed status when menu is inline mode | boolean | - |
|
||||
|
||||
> More options in [rc-menu](https://github.com/react-component/menu#api)
|
||||
|
||||
|
||||
@ -1,7 +1,10 @@
|
||||
import React from 'react';
|
||||
import RcMenu, { Item, Divider, SubMenu, ItemGroup } from 'rc-menu';
|
||||
import RcMenu, { Divider, SubMenu, ItemGroup } from 'rc-menu';
|
||||
import PropTypes from 'prop-types';
|
||||
import classNames from 'classnames';
|
||||
import animation from '../_util/openAnimation';
|
||||
import warning from '../_util/warning';
|
||||
import Item from './MenuItem';
|
||||
|
||||
export interface SelectParam {
|
||||
key: string;
|
||||
@ -39,6 +42,7 @@ export interface MenuProps {
|
||||
prefixCls?: string;
|
||||
multiple?: boolean;
|
||||
inlineIndent?: number;
|
||||
inlineCollapsed?: boolean;
|
||||
}
|
||||
|
||||
export default class Menu extends React.Component<MenuProps, any> {
|
||||
@ -51,7 +55,14 @@ export default class Menu extends React.Component<MenuProps, any> {
|
||||
className: '',
|
||||
theme: 'light', // or dark
|
||||
};
|
||||
static childContextTypes = {
|
||||
inlineCollapsed: PropTypes.bool,
|
||||
};
|
||||
static contextTypes = {
|
||||
siderCollapsed: PropTypes.bool,
|
||||
};
|
||||
switchModeFromInline: boolean;
|
||||
inlineOpenKeys = [];
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
@ -61,6 +72,11 @@ export default class Menu extends React.Component<MenuProps, any> {
|
||||
'see: http://u.ant.design/menu-on-open-change.',
|
||||
);
|
||||
|
||||
warning(
|
||||
!('inlineCollapsed' in props && props.mode !== 'inline'),
|
||||
'`inlineCollapsed` should only be used when Menu\'s `mode` is inline.',
|
||||
);
|
||||
|
||||
let openKeys;
|
||||
if ('defaultOpenKeys' in props) {
|
||||
openKeys = props.defaultOpenKeys;
|
||||
@ -72,11 +88,27 @@ export default class Menu extends React.Component<MenuProps, any> {
|
||||
openKeys: openKeys || [],
|
||||
};
|
||||
}
|
||||
componentWillReceiveProps(nextProps) {
|
||||
getChildContext() {
|
||||
return {
|
||||
inlineCollapsed: this.getInlineCollapsed(),
|
||||
};
|
||||
}
|
||||
componentWillReceiveProps(nextProps, nextContext) {
|
||||
if (this.props.mode === 'inline' &&
|
||||
nextProps.mode !== 'inline') {
|
||||
this.switchModeFromInline = true;
|
||||
}
|
||||
if ((nextProps.inlineCollapsed && !this.props.inlineCollapsed) ||
|
||||
(nextContext.siderCollapsed && !this.context.siderCollapsed)) {
|
||||
this.switchModeFromInline = true;
|
||||
this.inlineOpenKeys = this.state.openKeys;
|
||||
this.setOpenKeys([]);
|
||||
}
|
||||
if ((!nextProps.inlineCollapsed && this.props.inlineCollapsed) ||
|
||||
(!nextContext.siderCollapsed && this.context.siderCollapsed)) {
|
||||
this.setOpenKeys(this.inlineOpenKeys);
|
||||
this.inlineOpenKeys = [];
|
||||
}
|
||||
if ('openKeys' in nextProps) {
|
||||
this.setState({ openKeys: nextProps.openKeys });
|
||||
}
|
||||
@ -102,48 +134,68 @@ export default class Menu extends React.Component<MenuProps, any> {
|
||||
this.setState({ openKeys });
|
||||
}
|
||||
}
|
||||
render() {
|
||||
let openAnimation = this.props.openAnimation || this.props.openTransitionName;
|
||||
if (this.props.openAnimation === undefined && this.props.openTransitionName === undefined) {
|
||||
switch (this.props.mode) {
|
||||
getRealMenuMode() {
|
||||
const { mode } = this.props;
|
||||
return this.getInlineCollapsed() ? 'vertical' : mode;
|
||||
}
|
||||
getInlineCollapsed() {
|
||||
const { inlineCollapsed } = this.props;
|
||||
if (this.context.siderCollapsed !== undefined) {
|
||||
return this.context.siderCollapsed;
|
||||
}
|
||||
return inlineCollapsed;
|
||||
}
|
||||
getMenuOpenAnimation() {
|
||||
const { openAnimation, openTransitionName } = this.props;
|
||||
const menuMode = this.getRealMenuMode();
|
||||
let menuOpenAnimation = openAnimation || openTransitionName;
|
||||
if (openAnimation === undefined && openTransitionName === undefined) {
|
||||
switch (menuMode) {
|
||||
case 'horizontal':
|
||||
openAnimation = 'slide-up';
|
||||
menuOpenAnimation = 'slide-up';
|
||||
break;
|
||||
case 'vertical':
|
||||
// When mode switch from inline
|
||||
// submenu should hide without animation
|
||||
if (this.switchModeFromInline) {
|
||||
openAnimation = '';
|
||||
menuOpenAnimation = '';
|
||||
this.switchModeFromInline = false;
|
||||
} else {
|
||||
openAnimation = 'zoom-big';
|
||||
menuOpenAnimation = 'zoom-big';
|
||||
}
|
||||
break;
|
||||
case 'inline':
|
||||
openAnimation = animation;
|
||||
menuOpenAnimation = animation;
|
||||
break;
|
||||
default:
|
||||
}
|
||||
}
|
||||
return menuOpenAnimation;
|
||||
}
|
||||
render() {
|
||||
const { prefixCls, className, theme } = this.props;
|
||||
const menuMode = this.getRealMenuMode();
|
||||
const menuOpenAnimation = this.getMenuOpenAnimation();
|
||||
|
||||
let props = {};
|
||||
const className = `${this.props.className} ${this.props.prefixCls}-${this.props.theme}`;
|
||||
if (this.props.mode !== 'inline') {
|
||||
// There is this.state.openKeys for
|
||||
const menuClassName = classNames(className, `${prefixCls}-${theme}`, {
|
||||
[`${prefixCls}-inline-collapsed`]: this.getInlineCollapsed(),
|
||||
});
|
||||
|
||||
const menuProps: MenuProps = {
|
||||
openKeys: this.state.openKeys,
|
||||
onOpenChange: this.handleOpenChange,
|
||||
className: menuClassName,
|
||||
mode: menuMode,
|
||||
};
|
||||
|
||||
if (menuMode !== 'inline') {
|
||||
// closing vertical popup submenu after click it
|
||||
props = {
|
||||
openKeys: this.state.openKeys,
|
||||
onClick: this.handleClick,
|
||||
onOpenChange: this.handleOpenChange,
|
||||
openTransitionName: openAnimation,
|
||||
className,
|
||||
};
|
||||
menuProps.onClick = this.handleClick;
|
||||
menuProps.openTransitionName = menuOpenAnimation;
|
||||
} else {
|
||||
props = {
|
||||
openAnimation,
|
||||
className,
|
||||
};
|
||||
menuProps.openAnimation = menuOpenAnimation;
|
||||
}
|
||||
return <RcMenu {...this.props} {...props} />;
|
||||
|
||||
return <RcMenu {...this.props} {...menuProps} />;
|
||||
}
|
||||
}
|
||||
|
||||
@ -42,6 +42,7 @@ subtitle: 导航菜单
|
||||
| style | 根节点样式 | object | |
|
||||
| inlineIndent | inline 模式的菜单缩进宽度 | number | 24 |
|
||||
| multiple | 是否允许多选 | boolean | false |
|
||||
| inlineCollapsed | inline 时菜单是否收起状态 | boolean | - |
|
||||
|
||||
> More options in [rc-menu](https://github.com/react-component/menu#api)
|
||||
|
||||
|
||||
@ -158,6 +158,8 @@
|
||||
}
|
||||
|
||||
&-inline {
|
||||
width: 100%;
|
||||
transition: width .24s;
|
||||
.@{menu-prefix-cls}-selected,
|
||||
.@{menu-prefix-cls}-item-selected {
|
||||
&:after {
|
||||
@ -166,6 +168,37 @@
|
||||
}
|
||||
}
|
||||
|
||||
&-inline-collapsed {
|
||||
width: 64px;
|
||||
transition: all .3s;
|
||||
> .@{menu-prefix-cls}-item,
|
||||
> .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title {
|
||||
text-align: center;
|
||||
left: 0;
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.@{menu-prefix-cls}-item,
|
||||
.@{menu-prefix-cls}-submenu-title {
|
||||
padding: 0;
|
||||
.@{iconfont-css-prefix} {
|
||||
font-size: 16px;
|
||||
line-height: 42px;
|
||||
margin: 0;
|
||||
+ span {
|
||||
max-width: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-tooltip {
|
||||
.@{iconfont-css-prefix} {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-submenu-horizontal > & {
|
||||
top: 100%;
|
||||
left: 0;
|
||||
@ -199,6 +232,15 @@
|
||||
.@{iconfont-css-prefix} {
|
||||
min-width: 14px;
|
||||
margin-right: 8px;
|
||||
transition: all .3s;
|
||||
vertical-align: middle;
|
||||
+ span {
|
||||
max-width: 100%;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
transition: all .3s;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,2 +1,5 @@
|
||||
import '../../style/index.less';
|
||||
import './index.less';
|
||||
|
||||
// style dependencies
|
||||
import '../../tooltip/style';
|
||||
|
||||
Loading…
Reference in New Issue
Block a user