Merge pull request reactjs#81 from roth1002/feature/react-14

Feature/react 14

README.md

@@ -54,6 +54,7 @@ Inside an app:
 
 ```js
 var React = require('react');
+var ReactDOM = require('react-dom');
 var Modal = require('react-modal');
 
 var appElement = document.getElementById('your-app-element');
@@ -120,7 +121,7 @@ var App = React.createClass({
   }
 });
 
-React.render(<App/>, appElement);
+ReactDOM.render(<App/>, appElement);
 ```
 
 # Demos

examples/basic/app.js

@@ -1,4 +1,5 @@
 var React = require('react');
+var ReactDOM = require('react-dom');
 var Modal = require('../../lib/index');
 
 var appElement = document.getElementById('example');
@@ -58,4 +59,4 @@ var App = React.createClass({
   }
 });
 
-React.render(<App/>, appElement);
+ReactDOM.render(<App/>, appElement);

examples/bootstrap/app.js

@@ -1,4 +1,5 @@
 var React = require('react');
+var ReactDOM = require('react-dom');
 var Modal = require('../../lib/index');
 
 var appElement = document.getElementById('example');
@@ -64,4 +65,4 @@ var App = React.createClass({
   }
 });
 
-React.render(<App/>, appElement);
+ReactDOM.render(<App/>, appElement);

lib/components/Modal.js

@@ -1,5 +1,6 @@
 var React = require('react');
-var ExecutionEnvironment = require('react/lib/ExecutionEnvironment');
+var ReactDOM = require('react-dom');
+var ExecutionEnvironment = require('exenv');
 var ModalPortal = React.createFactory(require('./ModalPortal'));
 var ariaAppHider = require('../helpers/ariaAppHider');
 var elementClass = require('element-class');
@@ -50,7 +51,7 @@ var Modal = module.exports = React.createClass({
   },
 
   componentWillUnmount: function() {
-    React.unmountComponentAtNode(this.node);
+    ReactDOM.unmountComponentAtNode(this.node);
     document.body.removeChild(this.node);
   },
 
@@ -65,10 +66,7 @@ var Modal = module.exports = React.createClass({
       ariaAppHider.toggle(props.isOpen, props.appElement);
     }
     sanitizeProps(props);
-    if (this.portal)
-      this.portal.setProps(props);
-    else
-      this.portal = React.render(ModalPortal(props), this.node);
+    this.portal = ReactDOM.render(ModalPortal(props), this.node);
   },
 
   render: function () {

lib/components/ModalPortal.js

@@ -103,7 +103,7 @@ var ModalPortal = module.exports = React.createClass({
   },
 
   open: function() {
-    focusManager.setupScopedFocus(this.getDOMNode());
+    focusManager.setupScopedFocus(this.node);
     focusManager.markForFocusLater();
     this.setState({isOpen: true}, function() {
       this.setState({afterOpen: true});
@@ -120,7 +120,7 @@ var ModalPortal = module.exports = React.createClass({
   },
 
   focusContent: function() {
-    this.refs.content.getDOMNode().focus();
+    this.refs.content.focus();
   },
 
   closeWithTimeout: function() {
@@ -142,7 +142,7 @@ var ModalPortal = module.exports = React.createClass({
   },
 
   handleKeyDown: function(event) {
-    if (event.keyCode == 9 /*tab*/) scopeTab(this.refs.content.getDOMNode(), event);
+    if (event.keyCode == 9 /*tab*/) scopeTab(this.refs.content, event);
     if (event.keyCode == 27 /*esc*/) this.requestClose();
   },
 

package.json

@@ -34,7 +34,10 @@
     "karma-mocha": "0.2.0",
     "karma-safari-launcher": "^0.1.1",
     "mocha": "2.3.3",
-    "react": ">=0.13.3",
+    "exenv": "1.2.0",
+    "react-addons-test-utils": "^0.14.0",
+    "react-dom": "^0.14.0",
+    "react": "^0.14.0",
     "reactify": "^1.1.1",
     "rf-release": "0.4.0",
     "uglify-js": "2.4.24",
@@ -45,7 +48,7 @@
     "lodash.assign": "^3.2.0"
   },
   "peerDependencies": {
-    "react": ">=0.13.3 || ^0.14.0-beta3"
+    "react": "^0.14.0"
   },
   "tags": [
     "react",

specs/Modal.spec.js

@@ -1,9 +1,11 @@
 require('./helper');
-var React = require('react/addons');
+var TestUtils = require('react-addons-test-utils');
+var React = require('react');
+var ReactDOM = require('react-dom');
 var Modal = require('../lib/components/Modal');
-var Simulate = React.addons.TestUtils.Simulate;
+var Simulate = TestUtils.Simulate;
 var ariaAppHider = require('../lib/helpers/ariaAppHider');
-var button = React.DOM.button;
+var button = ReactDOM.button;
 
 describe('Modal', function () {
 
@@ -13,35 +15,35 @@ describe('Modal', function () {
 
   it('can be open initially', function() {
     var component = renderModal({isOpen: true}, 'hello');
-    equal(component.portal.refs.content.getDOMNode().innerHTML.trim(), 'hello');
+    equal(component.portal.refs.content.innerHTML.trim(), 'hello');
     unmountModal();
   });
 
   it('can be closed initially', function() {
     var component = renderModal({}, 'hello');
-    equal(component.portal.getDOMNode().innerHTML.trim(), '');
+    equal(ReactDOM.findDOMNode(component.portal).innerHTML.trim(), '');
     unmountModal();
   });
 
   it('uses the global appElement', function() {
     var app = document.createElement('div');
     var node = document.createElement('div');
     Modal.setAppElement(app);
-    React.render(React.createElement(Modal, {isOpen: true}), node);
+    ReactDOM.render(React.createElement(Modal, {isOpen: true}), node);
     equal(app.getAttribute('aria-hidden'), 'true');
     ariaAppHider.resetForTesting();
-    React.unmountComponentAtNode(node);
+    ReactDOM.unmountComponentAtNode(node);
   });
 
   it('accepts appElement as a prop', function() {
     var el = document.createElement('div');
     var node = document.createElement('div');
-    React.render(React.createElement(Modal, {
+    ReactDOM.render(React.createElement(Modal, {
       isOpen: true,
       appElement: el
     }), node);
     equal(el.getAttribute('aria-hidden'), 'true');
-    React.unmountComponentAtNode(node);
+    ReactDOM.unmountComponentAtNode(node);
   });
 
   it('renders into the body, not in context', function() {
@@ -51,82 +53,82 @@ describe('Modal', function () {
         return React.DOM.div({}, React.createElement(Modal, {isOpen: true, ariaHideApp: false}, 'hello'));
       }
     });
-    React.render(React.createElement(App), node);
+    ReactDOM.render(React.createElement(App), node);
     var modalParent = document.body.querySelector('.ReactModalPortal').parentNode;
     equal(modalParent, document.body);
-    React.unmountComponentAtNode(node);
+    ReactDOM.unmountComponentAtNode(node);
   });
 
   it('renders children', function() {
     var child = 'I am a child of Modal, and he has sent me here...';
     var component = renderModal({isOpen: true}, child);
-    equal(component.portal.refs.content.getDOMNode().innerHTML, child);
+    equal(component.portal.refs.content.innerHTML, child);
     unmountModal();
   });
 
   it('has default props', function() {
     var node = document.createElement('div');
     Modal.setAppElement(document.createElement('div'));
-    var component = React.render(React.createElement(Modal), node);
+    var component = ReactDOM.render(React.createElement(Modal), node);
     var props = component.props;
     equal(props.isOpen, false);
     equal(props.ariaHideApp, true);
     equal(props.closeTimeoutMS, 0);
-    React.unmountComponentAtNode(node);
+    ReactDOM.unmountComponentAtNode(node);
     ariaAppHider.resetForTesting();
   });
 
   it('removes the portal node', function() {
     var component = renderModal({isOpen: true}, 'hello');
-    equal(component.portal.refs.content.getDOMNode().innerHTML.trim(), 'hello');
+    equal(component.portal.refs.content.innerHTML.trim(), 'hello');
     unmountModal();
     ok(!document.querySelector('.ReactModalPortal'));
   });
 
   it('focuses the modal content', function() {
     renderModal({isOpen: true}, null, function () {
-      strictEqual(document.activeElement, this.portal.refs.content.getDOMNode());
+      strictEqual(document.activeElement, this.portal.refs.content);
       unmountModal();
     });
   });
 
   it('supports custom className', function() {
     var modal = renderModal({isOpen: true, className: 'myClass'});
-    equal(modal.portal.refs.content.getDOMNode().className.indexOf('myClass') !== -1, true);
+    equal(modal.portal.refs.content.className.contains('myClass'), true);
     unmountModal();
   });
 
   it('supports overlayClassName', function () {
     var modal = renderModal({isOpen: true, overlayClassName: 'myOverlayClass'});
-    equal(modal.portal.refs.overlay.getDOMNode().className.indexOf('myOverlayClass') !== -1, true);
+    equal(modal.portal.refs.overlay.className.contains('myOverlayClass'), true);
     unmountModal();
   });
 
   it('supports adding style to the modal contents', function () {
     var modal = renderModal({isOpen: true, style: {content: {width: '20px'}}});
-    equal(modal.portal.refs.content.getDOMNode().style.width, '20px');
+    equal(modal.portal.refs.content.style.width, '20px');
   });
 
   it('supports overridding style on the modal contents', function() {
     var modal = renderModal({isOpen: true, style: {content: {position: 'static'}}});
-    equal(modal.portal.refs.content.getDOMNode().style.position, 'static');
+    equal(modal.portal.refs.content.style.position, 'static');
   });
 
   it('supports adding style on the modal overlay', function() {
     var modal = renderModal({isOpen: true, style: {overlay: {width: '75px'}}});
-    equal(modal.portal.refs.overlay.getDOMNode().style.width, '75px');
+    equal(modal.portal.refs.overlay.style.width, '75px');
   });
 
   it('supports overridding style on the modal overlay', function() {
     var modal = renderModal({isOpen: true, style: {overlay: {position: 'static'}}});
-    equal(modal.portal.refs.overlay.getDOMNode().style.position, 'static');
+    equal(modal.portal.refs.overlay.style.position, 'static');
   });
 
   it('adds class to body when open', function() {
     var modal = renderModal({isOpen: false});
     equal(document.body.className.indexOf('ReactModal__Body--open') !== -1, false);
 
-    modal.setProps({ isOpen: true});
+    modal = renderModal({isOpen: true});
     equal(document.body.className.indexOf('ReactModal__Body--open')  !== -1, true);
 
     modal = renderModal({isOpen: false});
@@ -146,13 +148,13 @@ describe('Modal', function () {
   //it('adds --before-close for animations', function() {
     //var node = document.createElement('div');
 
-    //var component = React.render(React.createElement(Modal, {
+    //var component = ReactDOM.render(React.createElement(Modal, {
       //isOpen: true,
       //ariaHideApp: false,
       //closeTimeoutMS: 50,
     //}), node);
 
-    //component = React.render(React.createElement(Modal, {
+    //component = ReactDOM.render(React.createElement(Modal, {
       //isOpen: false,
       //ariaHideApp: false,
       //closeTimeoutMS: 50,

specs/helper.js

@@ -1,8 +1,8 @@
 assert = require('assert');
-React = require('react/addons');
+var React = require('react');
+var ReactDOM = require('react-dom');
 var Modal = React.createFactory(require('../lib/components/Modal'));
 
-ReactTestUtils = React.addons.TestUtils;
 ok = assert.ok;
 equal = assert.equal;
 strictEqual = assert.strictEqual;
@@ -14,11 +14,11 @@ renderModal = function(props, children, callback) {
   props.ariaHideApp = false;
   _currentDiv = document.createElement('div');
   document.body.appendChild(_currentDiv);
-  return React.render(Modal(props, children), _currentDiv, callback);
+  return ReactDOM.render(Modal(props, children), _currentDiv, callback);
 };
 
 unmountModal = function() {
-  React.unmountComponentAtNode(_currentDiv);
+  ReactDOM.unmountComponentAtNode(_currentDiv);
   document.body.removeChild(_currentDiv);
   _currentDiv = null;
 };