diff --git a/README.md b/README.md index 51ccf810..ca1d5286 100644 --- a/README.md +++ b/README.md @@ -39,7 +39,7 @@ react menu component. port from https://github.com/kissyteam/menu var Menu = require('rc-menu'); var SubMenu = Menu.SubMenu; var MenuItem = Menu.Item; -React.render( +ReactDOM.render( 1 2-1 @@ -304,4 +304,4 @@ http://localhost:8010/node_modules/rc-server/node_modules/node-jscover/lib/front ## License -rc-menu is released under the MIT license. \ No newline at end of file +rc-menu is released under the MIT license. diff --git a/examples/antd.js b/examples/antd.js index 5ba538cf..2ff52d64 100644 --- a/examples/antd.js +++ b/examples/antd.js @@ -1,6 +1,5 @@ -'use strict'; - import React from 'react'; +import ReactDOM from 'react-dom'; import Menu, {SubMenu, Item as MenuItem, ItemGroup as MenuItemGroup, Divider} from 'rc-menu'; import velocity from 'velocity-animate'; import 'rc-menu/assets/index.less'; @@ -169,7 +168,7 @@ function render(container) { } }); - React.render(
+ ReactDOM.render(

antd menu

diff --git a/examples/menuItemGroup.js b/examples/menuItemGroup.js index 7fc3f2be..924d2ea0 100644 --- a/examples/menuItemGroup.js +++ b/examples/menuItemGroup.js @@ -1,11 +1,10 @@ -'use strict'; - import React from 'react'; +import ReactDOM from 'react-dom'; import Menu, {SubMenu, Item as MenuItem, ItemGroup as MenuItemGroup, Divider} from 'rc-menu'; import 'rc-menu/assets/index.less'; -React.render(
+ReactDOM.render(

menu item group

diff --git a/examples/multiple.js b/examples/multiple.js index f35e65c7..950d8fae 100644 --- a/examples/multiple.js +++ b/examples/multiple.js @@ -1,6 +1,5 @@ -'use strict'; - import React from 'react'; +import ReactDOM from 'react-dom'; import Menu, {SubMenu, Item as MenuItem, ItemGroup as MenuItemGroup, Divider} from 'rc-menu'; import 'rc-menu/assets/index.less'; @@ -32,7 +31,7 @@ render(container); function save(c) { console.log('getRef') - console.log(React.findDOMNode(c)); + console.log(ReactDOM.findDOMNode(c)); } function render(container) { @@ -62,7 +61,7 @@ function render(container) { outer3 ); - React.render(
+ ReactDOM.render(

multiple selectable menu

@@ -72,6 +71,6 @@ function render(container) {

, container); function destroy() { - React.unmountComponentAtNode(container); + ReactDOM.unmountComponentAtNode(container); } } diff --git a/examples/openKeys.js b/examples/openKeys.js index 8c240de5..4bd69116 100644 --- a/examples/openKeys.js +++ b/examples/openKeys.js @@ -1,6 +1,5 @@ -'use strict'; - import React from 'react'; +import ReactDOM from 'react-dom'; import Menu, {SubMenu, Item as MenuItem, ItemGroup as MenuItemGroup, Divider} from 'rc-menu'; import 'rc-menu/assets/index.less'; @@ -59,4 +58,4 @@ var Test = React.createClass({ }); -React.render(, document.getElementById('__react-content')); +ReactDOM.render(, document.getElementById('__react-content')); diff --git a/examples/scrollable.js b/examples/scrollable.js index 3742af78..453d3abe 100644 --- a/examples/scrollable.js +++ b/examples/scrollable.js @@ -1,6 +1,5 @@ -'use strict'; - import React from 'react'; +import ReactDOM from 'react-dom'; import Menu, {SubMenu, Item as MenuItem, ItemGroup as MenuItemGroup, Divider} from 'rc-menu'; import 'rc-menu/assets/index.less'; @@ -10,7 +9,7 @@ var children = []; for (var i = 0; i < 20; i++) { children.push({i}); } -React.render(
+ReactDOM.render(

keyboard scrollable menu

, document.getElementById('__react-content')); +ReactDOM.render(, document.getElementById('__react-content')); diff --git a/examples/single.js b/examples/single.js index 14b291cf..07088eb4 100644 --- a/examples/single.js +++ b/examples/single.js @@ -1,6 +1,5 @@ -'use strict'; - import React from 'react'; +import ReactDOM from 'react-dom'; import Menu, {SubMenu, Item as MenuItem, ItemGroup as MenuItemGroup, Divider} from 'rc-menu'; import 'rc-menu/assets/index.less'; @@ -58,7 +57,7 @@ function render(container) { outer3 ); - React.render(
+ ReactDOM.render(

single selectable menu

@@ -71,6 +70,6 @@ function render(container) { function destroy() { - React.unmountComponentAtNode(container); + ReactDOM.unmountComponentAtNode(container); } } diff --git a/package.json b/package.json index b5417817..df2b964d 100644 --- a/package.json +++ b/package.json @@ -47,13 +47,15 @@ "precommit-hook": "^1.0.7", "rc-server": "3.x", "rc-tools": "4.x", - "react": "~0.13.0", + "react": "~0.14.0", + "react-addons-test-utils": "~0.14.1", + "react-dom": "~0.14.0", "velocity-animate": "~1.2.2" }, "dependencies": { "dom-scroll-into-view": "1.x", "object-assign": "3.x", - "rc-animate": "1.x", + "rc-animate": "~2.0.0", "rc-util": "2.x" }, "precommit": [ diff --git a/src/Menu.jsx b/src/Menu.jsx index 041a99a0..60cc3f69 100644 --- a/src/Menu.jsx +++ b/src/Menu.jsx @@ -21,8 +21,11 @@ const Menu = React.createClass({ level: React.PropTypes.number, eventKey: React.PropTypes.string, selectable: React.PropTypes.bool, + children: React.PropTypes.any, }, + mixins: [MenuMixin], + getDefaultProps() { return { openSubMenuOnMouseEnter: true, @@ -38,8 +41,6 @@ const Menu = React.createClass({ }; }, - mixins: [MenuMixin], - getInitialState() { const props = this.props; let selectedKeys = props.defaultSelectedKeys; @@ -190,6 +191,20 @@ const Menu = React.createClass({ return transitionName; }, + isInlineMode() { + return this.props.mode === 'inline'; + }, + + lastOpenSubMenu() { + let lastOpen = []; + if (this.state.openKeys.length) { + lastOpen = this.instanceArray.filter((c)=> { + return this.state.openKeys.indexOf(c.props.eventKey) !== -1; + }); + } + return lastOpen[0]; + }, + renderMenuItem(c, i) { const key = getKeyFromChildrenIndex(c, this.props.eventKey, i); const state = this.state; @@ -208,20 +223,6 @@ const Menu = React.createClass({ props.className += ` ${props.prefixCls}-root`; return this.renderRoot(props); }, - - isInlineMode() { - return this.props.mode === 'inline'; - }, - - lastOpenSubMenu() { - let lastOpen = []; - if (this.state.openKeys.length) { - lastOpen = this.instanceArray.filter((c)=> { - return this.state.openKeys.indexOf(c.props.eventKey) !== -1; - }); - } - return lastOpen[0]; - }, }); export default Menu; diff --git a/src/MenuMixin.js b/src/MenuMixin.js index bb2bb911..1a37f112 100644 --- a/src/MenuMixin.js +++ b/src/MenuMixin.js @@ -1,4 +1,5 @@ import React from 'react'; +import ReactDOM from 'react-dom'; import {classSet, createChainedFunction, KeyCode} from 'rc-util'; import scrollIntoView from 'dom-scroll-into-view'; import assign from 'object-assign'; @@ -49,6 +50,7 @@ const MenuMixin = { defaultSelectedKeys: React.PropTypes.arrayOf(React.PropTypes.string), defaultOpenKeys: React.PropTypes.arrayOf(React.PropTypes.string), openKeys: React.PropTypes.arrayOf(React.PropTypes.string), + children: React.PropTypes.any, }, getDefaultProps() { @@ -114,7 +116,7 @@ const MenuMixin = { this.setState({ activeKey: activeItem.props.eventKey, }, ()=> { - scrollIntoView(React.findDOMNode(activeItem), React.findDOMNode(this), { + scrollIntoView(ReactDOM.findDOMNode(activeItem), ReactDOM.findDOMNode(this), { onlyScrollIfNeeded: true, }); }); @@ -200,11 +202,14 @@ const MenuMixin = { domProps.onKeyDown = this.onKeyDown; } return ( + // ESLint is not smart enough to konw that the type of `children` was checked. + /*eslint-disable */

    {React.Children.map(props.children, this.renderMenuItem)}
+ /*eslint-enable */ ); }, diff --git a/src/SubMenu.jsx b/src/SubMenu.jsx index 7addb6f8..5d75501a 100644 --- a/src/SubMenu.jsx +++ b/src/SubMenu.jsx @@ -23,13 +23,6 @@ const SubMenu = React.createClass({ mixins: [require('./SubMenuStateMixin')], - getInitialState() { - this.isSubMenu = 1; - return { - defaultActiveFirst: false, - }; - }, - getDefaultProps() { return { onMouseEnter() { @@ -38,6 +31,13 @@ const SubMenu = React.createClass({ }; }, + getInitialState() { + this.isSubMenu = 1; + return { + defaultActiveFirst: false, + }; + }, + componentWillUnmount() { const props = this.props; if (props.onDestroy) { @@ -181,6 +181,26 @@ const SubMenu = React.createClass({ return this.props.rootPrefixCls + '-submenu-open'; }, + saveMenuInstance(c) { + this.menuInstance = c; + }, + + addKeyPath(info) { + return assign({}, info, { + keyPath: info.keyPath.concat(this.props.eventKey), + }); + }, + + triggerOpenChange(open, type) { + const key = this.props.eventKey; + this.onOpenChange({ + key: key, + item: this, + trigger: type, + open: open, + }); + }, + renderChildren(children) { const props = this.props; const baseProps = { @@ -245,7 +265,7 @@ const SubMenu = React.createClass({ style.paddingLeft = props.inlineIndent * props.level; } return ( -
  • +
  • ); }, - - saveMenuInstance(c) { - this.menuInstance = c; - }, - - addKeyPath(info) { - return assign({}, info, { - keyPath: info.keyPath.concat(this.props.eventKey), - }); - }, - - triggerOpenChange(open, type) { - const key = this.props.eventKey; - this.onOpenChange({ - key: key, - item: this, - trigger: type, - open: open, - }); - }, }); export default SubMenu; diff --git a/src/SubMenuStateMixin.jsx b/src/SubMenuStateMixin.jsx index 68520aaf..247f9d38 100644 --- a/src/SubMenuStateMixin.jsx +++ b/src/SubMenuStateMixin.jsx @@ -1,5 +1,5 @@ import rcUtil, {KeyCode} from 'rc-util'; -import React from 'react'; +import ReactDOM from 'react-dom'; export default { componentDidMount() { @@ -29,7 +29,7 @@ export default { handleDocumentClick(e) { // If the click originated from within this component // don't do anything. - if (rcUtil.Dom.contains(React.findDOMNode(this), e.target)) { + if (rcUtil.Dom.contains(ReactDOM.findDOMNode(this), e.target)) { return; } const props = this.props; diff --git a/src/SubPopupMenu.js b/src/SubPopupMenu.js index 0426eaa9..e3d2e7e4 100644 --- a/src/SubPopupMenu.js +++ b/src/SubPopupMenu.js @@ -16,6 +16,7 @@ const SubPopupMenu = React.createClass({ openKeys: React.PropTypes.arrayOf(React.PropTypes.string), closeSubMenuOnMouseLeave: React.PropTypes.bool, visible: React.PropTypes.bool, + children: React.PropTypes.any, }, mixins: [MenuMixin], diff --git a/src/util.js b/src/util.js index 39315a0d..f49d3cde 100644 --- a/src/util.js +++ b/src/util.js @@ -1,5 +1,5 @@ const now = Date.now(); -export default { +export default { noop() { }, diff --git a/tests/Menu.spec.js b/tests/Menu.spec.js index 6ab6a6a9..e845134f 100644 --- a/tests/Menu.spec.js +++ b/tests/Menu.spec.js @@ -1,8 +1,9 @@ 'use strict'; var expect = require('expect.js'); -var React = require('react/addons'); -var TestUtils = React.addons.TestUtils; +var React = require('react'); +var ReactDOM = require('react-dom'); +var TestUtils = require('react-addons-test-utils'); var Simulate = TestUtils.Simulate; var KeyCode = require('rc-util').KeyCode; var Menu = require('../'); @@ -28,7 +29,7 @@ describe('Menu', function () { }); afterEach(function () { - React.unmountComponentAtNode(div); + ReactDOM.unmountComponentAtNode(div); }); it('Should set the correct item active', function () { @@ -60,11 +61,11 @@ describe('Menu', function () {
    • ); - Simulate.click(React.findDOMNode(refs.item2)); + Simulate.click(ReactDOM.findDOMNode(refs.item2)); }); it('Should fire `mouseEnter` event', function (done) { - var instance = React.render( + var instance = ReactDOM.render( item disabled @@ -72,9 +73,9 @@ describe('Menu', function () { ref={saveRef('item2')} >item2 , div); - var itemNode = React.findDOMNode(refs.item2); + var itemNode = ReactDOM.findDOMNode(refs.item2); // see this issue: https://github.com/facebook/react/issues/1297 - // Simulate.mouseEnter(instance.refs.menuItem.getDOMNode(), {type: 'mouseenter'}); + // Simulate.mouseEnter(instance.refs.menuItem, {type: 'mouseenter'}); if(1){ done(); return; @@ -90,7 +91,7 @@ describe('Menu', function () { }); it('Should fire `keyDown` event', function (done) { - var instance = React.render( + var instance = ReactDOM.render( Pill 1 content @@ -101,9 +102,9 @@ describe('Menu', function () { , div ); - Simulate.keyDown(React.findDOMNode(instance), {keyCode: KeyCode.DOWN}); + Simulate.keyDown(ReactDOM.findDOMNode(instance), {keyCode: KeyCode.DOWN}); setTimeout(function () { - expect(React.findDOMNode(refs.item2).className.indexOf('rc-menu-item-active') !== -1).to.be(true); + expect(ReactDOM.findDOMNode(refs.item2).className.indexOf('rc-menu-item-active') !== -1).to.be(true); done(); }, 10); }); diff --git a/tests/MenuItem.spec.js b/tests/MenuItem.spec.js index 619d817b..d7b2a983 100644 --- a/tests/MenuItem.spec.js +++ b/tests/MenuItem.spec.js @@ -1,8 +1,9 @@ 'use strict'; var expect = require('expect.js'); -var React = require('react/addons'); -var TestUtils = React.addons.TestUtils; +var React = require('react'); +var ReactDOM = require('react-dom'); +var TestUtils = require('react-addons-test-utils'); var Simulate = TestUtils.Simulate; var Menu = require('../'); @@ -15,11 +16,11 @@ describe('MenuItem', function () { document.body.appendChild(div); afterEach(function () { - React.unmountComponentAtNode(div); + ReactDOM.unmountComponentAtNode(div); }); it('Should add disabled class', function () { - var instance = React.render( + var instance = ReactDOM.render( Pill 2 content , div diff --git a/tests/MenuItemGroup.spec.js b/tests/MenuItemGroup.spec.js index 14eed8f4..12532f15 100644 --- a/tests/MenuItemGroup.spec.js +++ b/tests/MenuItemGroup.spec.js @@ -1,8 +1,9 @@ 'use strict'; var expect = require('expect.js'); -var React = require('react/addons'); -var TestUtils = React.addons.TestUtils; +var React = require('react'); +var ReactDOM = require('react-dom'); +var TestUtils = require('react-addons-test-utils'); var Simulate = TestUtils.Simulate; var KeyCode = require('rc-util').KeyCode; var Menu = require('../'); @@ -32,7 +33,7 @@ describe('MenuItemGroup', function () { }); afterEach(function () { - React.unmountComponentAtNode(div); + ReactDOM.unmountComponentAtNode(div); }); function expectActive(targetRef) { @@ -47,7 +48,7 @@ describe('MenuItemGroup', function () { } it('works', function () { - var menu = React.render( + var menu = ReactDOM.render( 1 2 @@ -64,7 +65,7 @@ describe('MenuItemGroup', function () { expectActive('none'); - var menuNode = React.findDOMNode(menu); + var menuNode = ReactDOM.findDOMNode(menu); Simulate.keyDown(menuNode, { keyCode: KeyCode.DOWN