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

ant-design · Jan 16, 2017 · 0a68959 · 0a68959
1 parent d0ddf94
commit 0a68959
Show file tree

Hide file tree

Showing 3 changed files with 98 additions and 6 deletions.
diff --git a/components/menu/__tests__/index.test.js b/components/menu/__tests__/index.test.js
@@ -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);
+  });
+});
diff --git a/components/menu/demo/switch-mode.md b/components/menu/demo/switch-mode.md
@@ -69,5 +69,6 @@ const Sider = React.createClass({
     );
   },
 });
+
 ReactDOM.render(<Sider />, mountNode);
 ````
diff --git a/components/menu/index.tsx b/components/menu/index.tsx
@@ -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,15 +94,15 @@ 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);
     }
   }
   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,