From 3a2f6bea1896cba4173a3a94d608ba09c392f884 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Mon, 19 Jun 2017 16:02:01 +0800
Subject: [PATCH] update menu demo

---
 .../__tests__/__snapshots__/demo.test.js.snap | 131 ++++++++----------
 components/menu/demo/switch-mode.md           |  51 ++++---
 2 files changed, 88 insertions(+), 94 deletions(-)

diff --git a/components/menu/__tests__/__snapshots__/demo.test.js.snap b/components/menu/__tests__/__snapshots__/demo.test.js.snap
index f29466ffeb..191f34d012 100644
--- a/components/menu/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/menu/__tests__/__snapshots__/demo.test.js.snap
@@ -278,6 +278,20 @@ exports[`renders ./components/menu/demo/switch-mode.md correctly 1`] = `
       class="ant-switch-inner"
     />
   </span>
+   Change Mode
+  <span
+    class="ant-divider"
+    style="margin:0 1em;"
+  />
+  <span
+    class="ant-switch"
+    tabindex="0"
+  >
+    <span
+      class="ant-switch-inner"
+    />
+  </span>
+   Change Theme
   <br />
   <br />
   <ul
@@ -287,6 +301,28 @@ exports[`renders ./components/menu/demo/switch-mode.md correctly 1`] = `
     style="width:240px;"
     tabindex="0"
   >
+    <li
+      aria-selected="true"
+      class="ant-menu-item-selected ant-menu-item"
+      role="menuitem"
+      style="padding-left:24px;"
+    >
+      <i
+        class="anticon anticon-mail"
+      />
+      Navigation One
+    </li>
+    <li
+      aria-selected="false"
+      class="ant-menu-item"
+      role="menuitem"
+      style="padding-left:24px;"
+    >
+      <i
+        class="anticon anticon-calendar"
+      />
+      Navigation Two
+    </li>
     <li
       class="ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu"
     >
@@ -299,10 +335,10 @@ exports[`renders ./components/menu/demo/switch-mode.md correctly 1`] = `
       >
         <span>
           <i
-            class="anticon anticon-mail"
+            class="anticon anticon-appstore"
           />
           <span>
-            Navigation One
+            Navigation Three
           </span>
         </span>
       </div>
@@ -313,62 +349,33 @@ exports[`renders ./components/menu/demo/switch-mode.md correctly 1`] = `
         role="menu"
       >
         <li
-          class=" ant-menu-item-group"
+          aria-selected="false"
+          class="ant-menu-item"
+          role="menuitem"
+          style="padding-left:48px;"
         >
-          <div
-            class="ant-menu-item-group-title"
-          >
-            Item 1
-          </div>
-          <ul
-            class="ant-menu-item-group-list"
-          >
-            <li
-              aria-selected="false"
-              class="ant-menu-item"
-              role="menuitem"
-              style="padding-left:48px;"
-            >
-              Option 1
-            </li>
-            <li
-              aria-selected="false"
-              class="ant-menu-item"
-              role="menuitem"
-              style="padding-left:48px;"
-            >
-              Option 2
-            </li>
-          </ul>
+          Option 3
         </li>
         <li
-          class=" ant-menu-item-group"
+          aria-selected="false"
+          class="ant-menu-item"
+          role="menuitem"
+          style="padding-left:48px;"
+        >
+          Option 4
+        </li>
+        <li
+          class="ant-menu-submenu-inline ant-menu-submenu"
         >
           <div
-            class="ant-menu-item-group-title"
+            aria-expanded="false"
+            aria-haspopup="true"
+            aria-owns="sub2$Menu"
+            class="ant-menu-submenu-title"
+            style="padding-left:48px;"
           >
-            Item 2
+            Submenu
           </div>
-          <ul
-            class="ant-menu-item-group-list"
-          >
-            <li
-              aria-selected="false"
-              class="ant-menu-item"
-              role="menuitem"
-              style="padding-left:48px;"
-            >
-              Option 3
-            </li>
-            <li
-              aria-selected="false"
-              class="ant-menu-item"
-              role="menuitem"
-              style="padding-left:48px;"
-            >
-              Option 4
-            </li>
-          </ul>
         </li>
       </ul>
     </li>
@@ -381,33 +388,13 @@ exports[`renders ./components/menu/demo/switch-mode.md correctly 1`] = `
         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>
-    <li
-      class="ant-menu-submenu-inline ant-menu-submenu"
-    >
-      <div
-        aria-expanded="false"
-        aria-haspopup="true"
-        aria-owns="sub4$Menu"
-        class="ant-menu-submenu-title"
-        style="padding-left:24px;"
       >
         <span>
           <i
             class="anticon anticon-setting"
           />
           <span>
-            Navigation Three
+            Navigation Four
           </span>
         </span>
       </div>
diff --git a/components/menu/demo/switch-mode.md b/components/menu/demo/switch-mode.md
index fd46756de8..24ea7de1b3 100755
--- a/components/menu/demo/switch-mode.md
+++ b/components/menu/demo/switch-mode.md
@@ -15,52 +15,59 @@ Show the dynamic switching mode (between 'inline' and 'vertical').
 
 ````jsx
 import { Menu, Icon, Switch } from 'antd';
-const SubMenu = Menu.SubMenu;
-const MenuItemGroup = Menu.ItemGroup;
+const { SubMenu } = Menu;
 
 class Sider extends React.Component {
   state = {
     mode: 'inline',
+    theme: 'light',
   }
   changeMode = (value) => {
     this.setState({
       mode: value ? 'vertical' : 'inline',
     });
   }
+  changeTheme = (value) => {
+    this.setState({
+      theme: value ? 'dark' : 'light',
+    });
+  }
   render() {
     return (
       <div>
-        <Switch onChange={this.changeMode} />
+        <Switch onChange={this.changeMode} /> Change Mode
+        <span className="ant-divider" style={{ margin: '0 1em' }} />
+        <Switch onChange={this.changeTheme} /> Change Theme
         <br />
         <br />
         <Menu
           style={{ width: 240 }}
+          defaultSelectedKeys={['1']}
           defaultOpenKeys={['sub1']}
           mode={this.state.mode}
+          theme={this.state.theme}
         >
-          <SubMenu key="sub1" title={<span><Icon type="mail" /><span>Navigation One</span></span>}>
-            <MenuItemGroup title="Item 1">
-              <Menu.Item key="1">Option 1</Menu.Item>
-              <Menu.Item key="2">Option 2</Menu.Item>
-            </MenuItemGroup>
-            <MenuItemGroup title="Item 2">
-              <Menu.Item key="3">Option 3</Menu.Item>
-              <Menu.Item key="4">Option 4</Menu.Item>
-            </MenuItemGroup>
-          </SubMenu>
-          <SubMenu key="sub2" title={<span><Icon type="appstore" /><span>Navigation Two</span></span>}>
-            <Menu.Item key="5">Option 5</Menu.Item>
-            <Menu.Item key="6">Option 6</Menu.Item>
-            <SubMenu key="sub3" title="Submenu">
-              <Menu.Item key="7">Option 7</Menu.Item>
-              <Menu.Item key="8">Option 8</Menu.Item>
+          <Menu.Item key="1">
+            <Icon type="mail" />
+            Navigation One
+          </Menu.Item>
+          <Menu.Item key="2">
+            <Icon type="calendar" />
+            Navigation Two
+          </Menu.Item>
+          <SubMenu key="sub1" title={<span><Icon type="appstore" /><span>Navigation Three</span></span>}>
+            <Menu.Item key="3">Option 3</Menu.Item>
+            <Menu.Item key="4">Option 4</Menu.Item>
+            <SubMenu key="sub2" title="Submenu">
+              <Menu.Item key="5">Option 5</Menu.Item>
+              <Menu.Item key="6">Option 6</Menu.Item>
             </SubMenu>
           </SubMenu>
-          <SubMenu key="sub4" title={<span><Icon type="setting" /><span>Navigation Three</span></span>}>
+          <SubMenu key="sub2" title={<span><Icon type="setting" /><span>Navigation Four</span></span>}>
+            <Menu.Item key="7">Option 7</Menu.Item>
+            <Menu.Item key="8">Option 8</Menu.Item>
             <Menu.Item key="9">Option 9</Menu.Item>
             <Menu.Item key="10">Option 10</Menu.Item>
-            <Menu.Item key="11">Option 11</Menu.Item>
-            <Menu.Item key="12">Option 12</Menu.Item>
           </SubMenu>
         </Menu>
       </div>