Merge pull request #15409 from zy410419243/issue-15321

fix: bad position of collapsible submenu in sider when collapsed
ant-design · Mar 15, 2019 · 1bb7d6c · 1bb7d6c
2 parents 785820e + f9d01ee
commit 1bb7d6c
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 3 deletions.
diff --git a/components/layout/demo/side.md b/components/layout/demo/side.md
@@ -10,7 +10,7 @@ title:
 
 侧边两列式布局。页面横向空间有限时，侧边导航可收起。
 
-侧边导航在页面布局上采用的是左右的结构，一般主导航放置于页面的左侧固定位置，辅助菜单放置于工作区顶部。内容根据浏览器终端进行自适应，能提高横向空间的使用率，但是整个页面排版不稳定。侧边导航的模式层级扩展性强，一、二、三级导航项目可以更为顺畅且具关联性的被展示，同时侧边导航可以固定，使得用户在操作和浏览中可以快速的定位和切换当前位置，有很高的操作效率。但这类导航横向页面内容的空间会被牺牲一部份。
+侧边导航在页面布局上采用的是左右的结构，一般主导航放置于页面的左侧固定位置，辅助菜单放置于工作区顶部。内容根据浏览器终端进行自适应，能提高横向空间的使用率，但是整个页面排版不稳定。侧边导航的模式层级扩展性强，一、二、三级导航项目可以更为顺畅且具关联性的被展示，同时侧边导航可以固定，使得用户在操作和浏览中可以快速的定位和切换当前位置，有很高的操作效率。但这类导航横向页面内容的空间会被牺牲一部分。
 
 ## en-US
 

diff --git a/components/menu/__tests__/index.test.js b/components/menu/__tests__/index.test.js
@@ -2,6 +2,7 @@ import React from 'react';
 import { mount } from 'enzyme';
 import Menu from '..';
 import Icon from '../../icon';
+import Layout from '../../layout';
 
 jest.mock('mutationobserver-shim', () => {
   global.MutationObserver = function MutationObserver() {
@@ -494,4 +495,46 @@ describe('Menu', () => {
     const text = wrapper.find('.ant-tooltip-inner').text();
     expect(text).toBe('bamboo lucky');
   });
+
+  it('render correctly when using with Layout.Sider', () => {
+    class Demo extends React.Component {
+      state = {
+        collapsed: false,
+      };
+
+      onCollapse = collapsed => this.setState({ collapsed });
+
+      render() {
+        const { collapsed } = this.state;
+        return (
+          <Layout style={{ minHeight: '100vh' }}>
+            <Layout.Sider collapsible collapsed={collapsed} onCollapse={this.onCollapse}>
+              <div className="logo" />
+              <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
+                <SubMenu
+                  key="sub1"
+                  title={
+                    <span>
+                      <Icon type="user" />
+                      <span>User</span>
+                    </span>
+                  }
+                >
+                  <Menu.Item key="3">Tom</Menu.Item>
+                  <Menu.Item key="4">Bill</Menu.Item>
+                  <Menu.Item key="5">Alex</Menu.Item>
+                </SubMenu>
+              </Menu>
+            </Layout.Sider>
+          </Layout>
+        );
+      }
+    }
+    const wrapper = mount(<Demo />);
+    wrapper.find('.ant-menu-submenu-title').simulate('click');
+    wrapper.find('.ant-layout-sider-trigger').simulate('click');
+    jest.runAllTimers();
+    wrapper.update();
+    expect(wrapper.find('.ant-menu-submenu-popup').length).toBe(0);
+  });
 });
diff --git a/components/menu/index.tsx b/components/menu/index.tsx
@@ -89,6 +89,7 @@ class Menu extends React.Component<MenuProps, MenuState> {
   context: any;
   switchingModeFromInline: boolean;
   inlineOpenKeys: string[] = [];
+  contextSiderCollapsed: boolean = true;
 
   constructor(props: MenuProps) {
     super(props);
@@ -129,12 +130,20 @@ class Menu extends React.Component<MenuProps, MenuState> {
     if (prevProps.mode === 'inline' && this.props.mode !== 'inline') {
       this.switchingModeFromInline = true;
     }
-    if (this.props.inlineCollapsed && !prevProps.inlineCollapsed) {
+    if (
+      (this.props.inlineCollapsed && !prevProps.inlineCollapsed) ||
+      (this.getInlineCollapsed() && this.contextSiderCollapsed)
+    ) {
+      this.contextSiderCollapsed = false;
       this.switchingModeFromInline = true;
       this.inlineOpenKeys = this.state.openKeys;
       this.setState({ openKeys: [] });
     }
-    if (!this.props.inlineCollapsed && prevProps.inlineCollapsed) {
+    if (
+      (!this.props.inlineCollapsed && prevProps.inlineCollapsed) ||
+      (!this.getInlineCollapsed() && !this.contextSiderCollapsed)
+    ) {
+      this.contextSiderCollapsed = true;
       this.setState({ openKeys: this.inlineOpenKeys });
       this.inlineOpenKeys = [];
     }