4.0.0

HISTORY.md

@@ -1,6 +1,12 @@
 # History
 ----
 
+## 4.0.0 / 2015-08-10
+
+- add props: mode (horizontal, vertical, inline) for Menu
+- add defaultSelectedKeys, make selectedKeys controllable
+- change param of onSelect onDeselect
+
 ## 3.5.0 / 2015-08-06
 
 add props: vertical/horizontal for Menu, align for SubMenu

README.md

@@ -72,28 +72,22 @@ React.render(<Menu>
           <td>additional css class of root dom node</td>
         </tr>
         <tr>
+          <td>mode</td>
+          <td>String</td>
           <td>vertical</td>
-          <td>boolean</td>
-          <td></td>
-          <td>whether add vertical className</td>
-        </tr>
-        <tr>
-          <td>horizontal</td>
-          <td>boolean</td>
-          <td></td>
-          <td>whether add horizontal className</td>
+          <td>one of ["vertical","horizontal","inline"]</td>
         </tr>
         <tr>
             <td>activeKey</td>
             <td>Object</td>
-            <th>first active item's key</th>
-            <td>same with active tabPanel's key</td>
+            <th></th>
+            <td>initial and current active menu item's key.</td>
         </tr>
         <tr>
-            <td>activeFirst</td>
+            <td>defaultActiveFirst</td>
             <td>Boolean</td>
             <th>false</th>
-            <td>whether active first menu item when show if activeKey is not set</td>
+            <td>whether active first menu item when show if activeKey is not set or invalid</td>
         </tr>
         <tr>
             <td>multiple</td>
@@ -107,23 +101,23 @@ React.render(<Menu>
             <th>[]</th>
             <td>selected keys of items</td>
         </tr>
+        <tr>
+            <td>defaultSelectedKeys</td>
+            <td>String[]</td>
+            <th>[]</th>
+            <td>initial selected keys of items</td>
+        </tr>
         <tr>
             <td>onSelect</td>
-            <td>function(key:String,child:ReactComponent)</td>
+            <td>function({key:String, item:ReactComponent, domEvent:Event, selectedKeys:String[]})</td>
             <th></th>
             <td>called when select a menu item</td>
         </tr>
         <tr>
             <td>onDeselect</td>
-            <td>function(key:String,child:ReactComponent)</td>
-            <th></th>
-            <td>called when deselect a menu item</td>
-        </tr>
-        <tr>
-            <td>onSelect</td>
-            <td>Function(key:String)</td>
+            <td>function({key:String, item:ReactComponent, domEvent:Event, selectedKeys:String[]})</td>
             <th></th>
-            <td>function called with selected menu item's key as param</td>
+            <td>called when deselect a menu item. only called when allow multiple</td>
         </tr>
     </tbody>
 </table>
@@ -180,12 +174,6 @@ React.render(<Menu>
           <td></td>
           <td>additional css class of root dom node</td>
         </tr>
-        <tr>
-          <td>align</td>
-          <td>object</td>
-          <td>{points:['lt', 'rt'] }</td>
-          <td>submenu align config. Defaults to align left/top of popup menu with right/top of sub menu item.</td>
-        </tr>
         <tr>
           <td>title</td>
           <td>String/ReactElement</td>

assets/index.less

@@ -23,7 +23,16 @@
     border-bottom: 1px solid #dedede;
   }
 
-  &-item-active, &-submenu-active {
+  &-inline > &-item-active,
+  &-submenu-inline&-submenu-active,
+  &-submenu-inline&-submenu-active > &-submenu-title:hover {
+    background-color: #fff;
+  }
+
+  &-inline > &-item-active:hover,
+  &-item-active,
+  &-submenu-active,
+  &-submenu-inline&-submenu-active > &-submenu-title:hover {
     background-color: #eaf8fe;
   }
 
@@ -35,19 +44,23 @@
     padding: 0;
   }
 
-  &-submenu-lt-lb > .@{menuPrefixCls} {
+  &-submenu-horizontal > .@{menuPrefixCls} {
     top: 100%;
     left: 0;
+    position: absolute;
+    min-width: 160px;
     margin-top: 4px;
   }
 
-  &-submenu-lt-rt > .@{menuPrefixCls} {
+  &-submenu-vertical > .@{menuPrefixCls} {
     top: 0;
     left: 100%;
+    position: absolute;
+    min-width: 160px;
     margin-left: 4px;
   }
 
-  &-item,&-submenu-title {
+  &-item, &-submenu-title {
     margin: 0;
     position: relative;
     display: block;
@@ -73,8 +86,6 @@
 
     > .@{menuPrefixCls} {
       display: none;
-      position: absolute;
-      min-width: 160px;
       background-color: #fff;
     }
 
@@ -101,7 +112,7 @@
     border-bottom: 1px solid #d9d9d9;
     box-shadow: none;
 
-    & > .@{menuPrefixCls}-item , & > .@{menuPrefixCls}-submenu > .@{menuPrefixCls}-submenu-title {
+    & > .@{menuPrefixCls}-item, & > .@{menuPrefixCls}-submenu > .@{menuPrefixCls}-submenu-title {
       padding: 15px 20px;
     }
 
@@ -124,11 +135,28 @@
     }
   }
 
-  &-vertical {
+  &-vertical, &-inline {
     padding: 12px 0;
-    & > .@{menuPrefixCls}-item , & > .@{menuPrefixCls}-submenu > .@{menuPrefixCls}-submenu-title {
+    & > .@{menuPrefixCls}-item, & > .@{menuPrefixCls}-submenu > .@{menuPrefixCls}-submenu-title {
       padding: 12px 8px 12px 24px;
     }
   }
+
+  &-vertical&-sub {
+    padding: 0;
+  }
+
+  &-sub&-inline {
+    padding: 0;
+    border: none;
+    border-radius: 0;
+    box-shadow: none;
+
+    & > .@{menuPrefixCls}-item, & > .@{menuPrefixCls}-submenu > .@{menuPrefixCls}-submenu-title {
+      padding-top:8px;
+      padding-bottom: 8px;
+      padding-right: 0;
+    }
+  }
 }
 

examples/antd.js

@@ -5,12 +5,9 @@ import Menu, {SubMenu, Item as MenuItem, ItemGroup as MenuItemGroup, Divider} fr
 
 import 'rc-menu/assets/index.less';
 
-function handleSelect(selectedKey) {
-  console.log('selected ' + selectedKey);
-}
-
-function handleDeselect(selectedKey) {
-  console.log('deselect ' + selectedKey);
+function handleSelect(info) {
+  console.log(info);
+  console.log('selected ' + info.key);
 }
 
 var titleRight = <span>sub menu</span>;
@@ -22,23 +19,46 @@ var container = document.getElementById('__react-content');
 render(container);
 
 function render(container) {
-  var topAlign = {
-    points: ['lt', 'lb']
-  };
-  var leftMenu = (
-    <Menu onSelect={handleSelect} onDeselect={handleDeselect} horizontal>
-      <SubMenu title={titleRight} key="1" align={topAlign}>
+  var horizontalMenu = (
+    <Menu onSelect={handleSelect} mode="horizontal">
+      <SubMenu title={titleRight} key="1">
+        <MenuItem key="1-1">0-1</MenuItem>
+        <MenuItem key="1-2">0-2</MenuItem>
+      </SubMenu>
+      <MenuItem key="2">1</MenuItem>
+      <MenuItem key="3">outer</MenuItem>
+      <SubMenu title={titleRight1} key="4">
+        <MenuItem key="4-1">inner inner</MenuItem>
+        <Menu.Divider/>
+        <SubMenu key="4-2"
+          title={titleRight2}
+          >
+          <MenuItem key="4-2-1">inn</MenuItem>
+          <SubMenu title={titleRight3} key="4-2-2">
+            <Menu>
+              <MenuItem key="4-2-2-1">inner inner</MenuItem>
+              <MenuItem key="4-2-2-2">inner inner2</MenuItem>
+            </Menu>
+          </SubMenu>
+        </SubMenu>
+      </SubMenu>
+      <MenuItem disabled>disabled</MenuItem>
+      <MenuItem key="4-3">outer3</MenuItem>
+    </Menu>
+  );
+
+  var verticalMenu = (
+    <Menu onSelect={handleSelect} mode="vertical">
+      <SubMenu title={titleRight} key="1">
         <MenuItem key="1-1">0-1</MenuItem>
         <MenuItem key="1-2">0-2</MenuItem>
       </SubMenu>
       <MenuItem key="2">1</MenuItem>
       <MenuItem key="3">outer</MenuItem>
-      <SubMenu title={titleRight1} key="4" align={topAlign}>
+      <SubMenu title={titleRight1} key="4">
         <MenuItem key="4-1">inner inner</MenuItem>
         <Menu.Divider/>
-        <SubMenu
-          openOnHover={false}
-          key="4-2"
+        <SubMenu  key="4-2"
           title={titleRight2}
           >
           <MenuItem key="4-2-1">inn</MenuItem>
@@ -54,8 +74,43 @@ function render(container) {
       <MenuItem key="4-3">outer3</MenuItem>
     </Menu>
   );
-  React.render(<div>
-    <h2>single selectable menu</h2>
-    <div style={{width: 800, margin:20}}>{leftMenu}</div>
+
+  var inlineMenu = (
+    <Menu onSelect={handleSelect} mode="inline">
+      <SubMenu title={titleRight} key="1">
+        <MenuItem key="1-1">0-1</MenuItem>
+        <MenuItem key="1-2">0-2</MenuItem>
+      </SubMenu>
+      <MenuItem key="2">1</MenuItem>
+      <MenuItem key="3">outer</MenuItem>
+      <SubMenu title={titleRight1} key="4">
+        <MenuItem key="4-1">inner inner</MenuItem>
+        <SubMenu key="4-2" title={titleRight2}>
+          <MenuItem key="4-2-1">inn</MenuItem>
+          <SubMenu title={titleRight3} key="4-2-2">
+            <Menu>
+              <MenuItem key="4-2-2-1">inner inner</MenuItem>
+              <MenuItem key="4-2-2-2">inner inner2</MenuItem>
+            </Menu>
+          </SubMenu>
+        </SubMenu>
+      </SubMenu>
+      <MenuItem disabled>disabled</MenuItem>
+      <MenuItem key="4-3">outer3</MenuItem>
+    </Menu>
+  );
+
+
+  React.render(<div style={{margin:20}}>
+    <h2>antd menu</h2>
+
+    <div>
+      <h3>horizontal</h3>
+      <div style={{margin:20,width: 800,}}>{horizontalMenu}</div>
+      <h3>vertical</h3>
+      <div style={{margin:20,width: 200,}}>{verticalMenu}</div>
+      <h3>inline</h3>
+      <div style={{margin:20,width: 400,}}>{inlineMenu}</div>
+    </div>
   </div>, container);
 }

examples/multiple.js

@@ -6,12 +6,12 @@ import Menu, {SubMenu, Item as MenuItem, ItemGroup as MenuItemGroup, Divider} fr
 import 'rc-menu/assets/index.less';
 import 'font-awesome/css/font-awesome.css';
 
-function handleSelect(selectedKey, item, e) {
-  console.log('selected ' + selectedKey, item, e);
+function handleSelect(info) {
+  console.log('selected ', info);
 }
 
-function handleDeselect(selectedKey, item, e) {
-  console.log('deselect ' + selectedKey, item, e);
+function handleDeselect(info) {
+  console.log('deselect ', info);
 }
 
 var titleRight = <span>sub menu
@@ -37,7 +37,9 @@ function save(c) {
 
 function render(container) {
   var leftMenu = (
-    <Menu  multiple={true} onSelect={handleSelect} onDeselect={handleDeselect} selectedKeys={['2','4-3']}>
+    <Menu multiple={true} onSelect={handleSelect}
+          onDeselect={handleDeselect}
+          defaultSelectedKeys={['2','1-1']}>
       <SubMenu title={titleRight} key="1">
         <MenuItem key="1-1">0-1</MenuItem>
         <MenuItem key="1-2">0-2</MenuItem>
@@ -47,11 +49,8 @@ function render(container) {
       <SubMenu title={titleRight1} key="4">
         <MenuItem key="4-1">inner inner</MenuItem>
         <Menu.Divider />
-        <SubMenu
-          openOnHover={false}
-          key="4-2"
-          title={titleRight2}
-        >
+        <SubMenu  key="4-2"
+          title={titleRight2}>
           <MenuItem key="4-2-1">inn</MenuItem>
           <SubMenu title={titleRight3} key="4-2-2">
             <Menu>
@@ -67,6 +66,7 @@ function render(container) {
   );
   React.render(<div>
     <h2>multiple selectable menu</h2>
+
     <p>
       <button onClick={destroy}>destroy</button>
     </p>

examples/scrollable.js

@@ -10,13 +10,11 @@ var children = [];
 for (var i = 0; i < 20; i++) {
   children.push(<MenuItem key={i + ""}>{i}</MenuItem>);
 }
-var style = '.rc-menu {\
-height: 200px;\
-width:200px;\
-overflow:auto;\
-}';
 React.render(<div>
   <h2>keyboard scrollable menu</h2>
-  <style>{style}</style>
-  <Menu>{children}</Menu>
+  <Menu style={{
+  width:200,
+  height:200,
+  overflow:'auto'
+  }}>{children}</Menu>
 </div>, document.getElementById('__react-content'));

examples/selectedKeys.html

@@ -0,0 +1 @@
+placeholder