mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-25 11:40:04 +08:00
Code Issues Actions 35 Packages Projects Releases Wiki Activity

Fix openKeys and defaultOpenKeys of Menu, close #3783 (#4609)

Browse Source
This commit is contained in:
偏右 2017-01-16 21:13:59 +08:00 committed by Wei Zhu
parent d0ddf94d78
commit 0a68959207
3 changed files with 98 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
components/menu/__tests__/index.test.js Normal file
View File

@ -0,0 +1,85 @@
import React from 'react';
import { mount } from 'enzyme';
import Menu from '..';
const SubMenu = Menu.SubMenu;
describe('Menu', () => {
it('should accept defaultOpenKeys in mode horizontal', () => {
const wrapper = mount(
<Menu defaultOpenKeys={['1']} mode="horizontal">
<SubMenu key="1" title="submenu1">
<Menu.Item key="submenu1">Option 1</Menu.Item>
<Menu.Item key="submenu2">Option 2</Menu.Item>
</SubMenu>
<Menu.Item key="2">menu2</Menu.Item>
</Menu>
);
expect(wrapper.find('.ant-menu-sub').at(0).hasClass('ant-menu-hidden')).not.toBe(true);
});
it('should accept defaultOpenKeys in mode inline', () => {
const wrapper = mount(
<Menu defaultOpenKeys={['1']} mode="inline">
<SubMenu key="1" title="submenu1">
<Menu.Item key="submenu1">Option 1</Menu.Item>
<Menu.Item key="submenu2">Option 2</Menu.Item>
</SubMenu>
<Menu.Item key="2">menu2</Menu.Item>
</Menu>
);
expect(wrapper.find('.ant-menu-sub').at(0).hasClass('ant-menu-hidden')).not.toBe(true);
});
it('should accept defaultOpenKeys in mode vertical', () => {
const wrapper = mount(
<Menu defaultOpenKeys={['1']} mode="vertical">
<SubMenu key="1" title="submenu1">
<Menu.Item key="submenu1">Option 1</Menu.Item>
<Menu.Item key="submenu2">Option 2</Menu.Item>
</SubMenu>
<Menu.Item key="2">menu2</Menu.Item>
</Menu>
);
expect(wrapper.find('.ant-menu-sub').at(0).hasClass('ant-menu-hidden')).not.toBe(true);
});
it('should accept openKeys in mode horizontal', () => {
const wrapper = mount(
<Menu openKeys={['1']} mode="horizontal">
<SubMenu key="1" title="submenu1">
<Menu.Item key="submenu1">Option 1</Menu.Item>
<Menu.Item key="submenu2">Option 2</Menu.Item>
</SubMenu>
<Menu.Item key="2">menu2</Menu.Item>
</Menu>
);
expect(wrapper.find('.ant-menu-sub').at(0).hasClass('ant-menu-hidden')).not.toBe(true);
});
it('should accept openKeys in mode inline', () => {
const wrapper = mount(
<Menu openKeys={['1']} mode="inline">
<SubMenu key="1" title="submenu1">
<Menu.Item key="submenu1">Option 1</Menu.Item>
<Menu.Item key="submenu2">Option 2</Menu.Item>
</SubMenu>
<Menu.Item key="2">menu2</Menu.Item>
</Menu>
);
expect(wrapper.find('.ant-menu-sub').at(0).hasClass('ant-menu-hidden')).not.toBe(true);
});
it('should accept openKeys in mode vertical', () => {
const wrapper = mount(
<Menu openKeys={['1']} mode="vertical">
<SubMenu key="1" title="submenu1">
<Menu.Item key="submenu1">Option 1</Menu.Item>
<Menu.Item key="submenu2">Option 2</Menu.Item>
</SubMenu>
<Menu.Item key="2">menu2</Menu.Item>
</Menu>
);
expect(wrapper.find('.ant-menu-sub').at(0).hasClass('ant-menu-hidden')).not.toBe(true);
});
});

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

@ -69,5 +69,6 @@ const Sider = React.createClass({
);
},
});
ReactDOM.render(<Sider />, mountNode);
````

18
components/menu/index.tsx
View File

@ -71,8 +71,15 @@ export default class Menu extends React.Component<MenuProps, any> {
'see: http://u.ant.design/menu-on-open-change.'
);
let openKeys;
if ('defaultOpenKeys' in props) {
openKeys = props.defaultOpenKeys;
} else if ('openKeys' in props) {
openKeys = props.openKeys;
}
this.state = {
openKeys: [],
openKeys,
};
}
componentWillReceiveProps(nextProps) {
@ -87,7 +94,7 @@ export default class Menu extends React.Component<MenuProps, any> {
handleClick = (e) => {
this.setOpenKeys([]);
const onClick = this.props.onClick;
const { onClick } = this.props;
if (onClick) {
onClick(e);
}
@ -95,7 +102,7 @@ export default class Menu extends React.Component<MenuProps, any> {
handleOpenChange = (openKeys: string[]) => {
this.setOpenKeys(openKeys);
const onOpenChange = this.props.onOpenChange;
const { onOpenChange } = this.props;
if (onOpenChange) {
onOpenChange(openKeys);
}
@ -132,9 +139,8 @@ export default class Menu extends React.Component<MenuProps, any> {
let props = {};
const className = `${this.props.className} ${this.props.prefixCls}-${this.props.theme}`;
if (this.props.mode !== 'inline') {
// 这组属性的目的是
// 弹出型的菜单需要点击后立即关闭
// 另外，弹出型的菜单的受控模式没有使用场景
// There is this.state.openKeys for
// closing vertical popup submenu after click it
props = {
openKeys: this.state.openKeys,
onClick: this.handleClick,