use webpack

.gitignore

@@ -25,4 +25,5 @@ spm_modules
 .cache
 dist
 assets/**/*.css
-examples/**/*.css
+examples/**/*.css
+build

.npmignore

@@ -25,4 +25,5 @@ _site
 sea-modules
 spm_modules
 .cache
-dist
+dist
+build

README.md

@@ -201,7 +201,7 @@ npm start
 
 http://localhost:8001/examples/index.md
 
-online example: http://spmjs.io/docs/rc-menu/examples/
+online example: http://react-component.github.io/menu/build/examples/
 
 
 ## Test Case

examples/multiple.html

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

examples/multiple.js

@@ -0,0 +1,57 @@
+/** @jsx React.DOM */
+var React = require('react');
+var Menu = require('rc-menu');
+var SubMenu = Menu.SubMenu;
+var MenuItem = Menu.Item;
+
+require('rc-menu/assets/index.css');
+require('font-awesome/css/font-awesome.css');
+
+function handleSelect(selectedKey) {
+  console.log('selected ' + selectedKey);
+}
+
+function handleDeselect(selectedKey) {
+  console.log('deselect ' + selectedKey);
+}
+
+var titleRight = <span>sub menu <i className="fa fa-caret-right pull-right"></i></span>;
+var titleRight1 = <span>sub menu 1 <i className="fa fa-caret-right pull-right"></i></span>;
+var titleRight2 = <span>sub menu 2 <i className="fa fa-caret-right pull-right"></i></span>;
+var titleRight3 = <span>sub menu 3 <i className="fa fa-caret-right pull-right"></i></span>;
+var container = document.getElementById('__react-content');
+
+render(container);
+
+function render(container){
+  var leftMenu = (
+    <Menu  multiple={true} onSelect={handleSelect} onDeselect={handleDeselect}>
+      <SubMenu title={titleRight}>
+        <MenuItem>0-1</MenuItem>
+        <MenuItem>0-2</MenuItem>
+      </SubMenu>
+      <MenuItem key="10">1</MenuItem>
+      <MenuItem key="31">outer</MenuItem>
+      <SubMenu title={titleRight1}>
+        <MenuItem key="31">inner inner</MenuItem>
+        <MenuItem disabled className="rc-menu-item-divider" />
+        <SubMenu
+          openOnHover={false}
+          key="110"
+          title={titleRight2}
+        >
+          <MenuItem key="231">inn</MenuItem>
+          <SubMenu title={titleRight3}>
+            <Menu>
+              <MenuItem key="231">inner inner</MenuItem>
+              <MenuItem key="242">inner inner2</MenuItem>
+            </Menu>
+          </SubMenu>
+        </SubMenu>
+      </SubMenu>
+      <MenuItem disabled>disabled</MenuItem>
+      <MenuItem key="2311">outer3</MenuItem>
+    </Menu>
+  );
+  React.render(<div><h1>multiple selectable menu</h1><div style={{width:400}}>{leftMenu}</div></div>, container);
+}

examples/scrollable.html

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

examples/scrollable.js

@@ -0,0 +1,23 @@
+/** @jsx React.DOM */
+var React = require('react');
+var Menu = require('rc-menu');
+var SubMenu = Menu.SubMenu;
+var MenuItem = Menu.Item;
+
+require('rc-menu/assets/index.css');
+require('font-awesome/css/font-awesome.css');
+
+var children = [];
+for (var i = 0; i < 20; i++) {
+  children.push(<MenuItem>{i}</MenuItem>);
+}
+var style = '.rc-menu {\
+height: 200px;\
+width:200px;\
+overflow:auto;\
+}';
+React.render(<div>
+  <h1>keyboard scrollable menu</h1>
+  <style>{style}</style>
+  <Menu>{children}</Menu>
+</div>, document.getElementById('__react-content'));

examples/single.html

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

examples/single.js

@@ -0,0 +1,57 @@
+/** @jsx React.DOM */
+var React = require('react');
+var Menu = require('rc-menu');
+var SubMenu = Menu.SubMenu;
+var MenuItem = Menu.Item;
+
+require('rc-menu/assets/index.css');
+require('font-awesome/css/font-awesome.css');
+
+function handleSelect(selectedKey) {
+  console.log('selected ' + selectedKey);
+}
+
+function handleDeselect(selectedKey) {
+  console.log('deselect ' + selectedKey);
+}
+
+var titleRight = <span>sub menu <i className="fa fa-caret-right pull-right"></i></span>;
+var titleRight1 = <span>sub menu 1 <i className="fa fa-caret-right pull-right"></i></span>;
+var titleRight2 = <span>sub menu 2 <i className="fa fa-caret-right pull-right"></i></span>;
+var titleRight3 = <span>sub menu 3 <i className="fa fa-caret-right pull-right"></i></span>;
+var container = document.getElementById('__react-content');
+
+render(container);
+
+function render(container){
+  var leftMenu = (
+    <Menu onSelect={handleSelect} onDeselect={handleDeselect}>
+      <SubMenu title={titleRight}>
+        <MenuItem>0-1</MenuItem>
+        <MenuItem>0-2</MenuItem>
+      </SubMenu>
+      <MenuItem key="10">1</MenuItem>
+      <MenuItem key="31">outer</MenuItem>
+      <SubMenu title={titleRight1}>
+        <MenuItem key="31">inner inner</MenuItem>
+        <MenuItem disabled className="rc-menu-item-divider" />
+        <SubMenu
+          openOnHover={false}
+          key="110"
+          title={titleRight2}
+        >
+          <MenuItem key="231">inn</MenuItem>
+          <SubMenu title={titleRight3}>
+            <Menu>
+              <MenuItem key="231">inner inner</MenuItem>
+              <MenuItem key="242">inner inner2</MenuItem>
+            </Menu>
+          </SubMenu>
+        </SubMenu>
+      </SubMenu>
+      <MenuItem disabled>disabled</MenuItem>
+      <MenuItem key="2311">outer3</MenuItem>
+    </Menu>
+  );
+  React.render(<div><h1>single selectable menu</h1><div style={{width:400}}>{leftMenu}</div></div>, container);
+}

gh-pages.sh

@@ -0,0 +1,9 @@
+npm run less
+npm run example
+cd ../menu-gh-pages
+rm -rf build/
+mkdir build
+cp -r ../menu/build/ build
+git add --all
+git commit -am "update examples"
+git push origin gh-pages:gh-pages

lib/SubMenu.js

@@ -54,7 +54,6 @@ var SubMenu = React.createClass({
   handleKeyDown: function (e) {
     var keyCode = e.keyCode;
     var menu = this.refs[this.nameRef];
-    var self = this;
 
     if (keyCode === KeyCode.ENTER) {
       this.handleClick(e);
@@ -186,7 +185,7 @@ var SubMenu = React.createClass({
     if (this._cacheMenu) {
       baseProps.selectedKeys = this.refs[this.nameRef].state.selectedKeys;
     }
-    if (childrenCount == 1 && children.type === Menu.type) {
+    if (childrenCount === 1 && children.type === Menu.type) {
       var menu = children;
       this.nameRef = menu.ref || this.nameRef;
       baseProps.nameRef = this.nameRef;