Add Menu[inlineCollapsed] prop

components/menu/demo/inline-collapsed.md

@@ -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);
+````

components/menu/demo/inline.md

@@ -2,7 +2,7 @@
 order: 1
 title:
   zh-CN: 内嵌菜单
-  en-US: Vertical menu with inline children
+  en-US: Inline menu
 ---
 
 ## zh-CN

components/menu/index.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import RcMenu, { Item, Divider, SubMenu, ItemGroup } from 'rc-menu';
+import classNames from 'classnames';
 import animation from '../_util/openAnimation';
 import warning from '../_util/warning';
 
@@ -39,6 +40,7 @@ export interface MenuProps {
   prefixCls?: string;
   multiple?: boolean;
   inlineIndent?: number;
+  inlineCollapsed?: boolean;
 }
 
 export default class Menu extends React.Component<MenuProps, any> {
@@ -52,6 +54,7 @@ export default class Menu extends React.Component<MenuProps, any> {
     theme: 'light',  // or dark
   };
   switchModeFromInline: boolean;
+  inlineOpenKeys = [];
   constructor(props) {
     super(props);
 
@@ -77,6 +80,15 @@ export default class Menu extends React.Component<MenuProps, any> {
         nextProps.mode !== 'inline') {
       this.switchModeFromInline = true;
     }
+    if (nextProps.inlineCollapsed && !this.props.inlineCollapsed) {
+      this.switchModeFromInline = true;
+      this.inlineOpenKeys = this.state.openKeys;
+      this.setState({ openKeys: [] });
+    }
+    if (!nextProps.inlineCollapsed && this.props.inlineCollapsed) {
+      this.setState({ openKeys: this.inlineOpenKeys });
+      this.inlineOpenKeys = [];
+    }
     if ('openKeys' in nextProps) {
       this.setState({ openKeys: nextProps.openKeys });
     }
@@ -102,48 +114,62 @@ 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, inlineCollapsed } = this.props;
+    return inlineCollapsed ? 'vertical' : mode;
+  }
+  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 { inlineCollapsed, 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`]: inlineCollapsed,
+    });
+
+    const menuProps: MenuProps = {
+      openKeys: this.state.openKeys,
+      onClick: this.handleClick,
+      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} />;
   }
 }

components/menu/style/index.less

@@ -158,6 +158,11 @@
   }
 
   &-inline {
+    width: 100%;
+    &,
+    .@{iconfont-css-prefix} {
+      transition: all .1s;
+    }
     .@{menu-prefix-cls}-selected,
     .@{menu-prefix-cls}-item-selected {
       &:after {
@@ -166,6 +171,31 @@
     }
   }
 
+  &-inline-collapsed {
+    width: 64px;
+    > .@{menu-prefix-cls}-item,
+    > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title {
+      text-align: center;
+      margin-left: 0;
+      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 {
+          display: none;
+        }
+      }
+    }
+  }
+
   &-submenu-horizontal > & {
     top: 100%;
     left: 0;