From 496bb0b007d6988595c623cdc2f7de210ab56ebc Mon Sep 17 00:00:00 2001 From: RothGo Date: Fri, 16 Oct 2015 16:53:01 +0800 Subject: [PATCH 1/2] upgrade react 0.14 --- lib/components/Modal.js | 10 ++++------ lib/components/ModalPortal.js | 6 +++--- package.json | 5 ++++- 3 files changed, 11 insertions(+), 10 deletions(-) diff --git a/lib/components/Modal.js b/lib/components/Modal.js index 37da231a..34515094 100644 --- a/lib/components/Modal.js +++ b/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 () { diff --git a/lib/components/ModalPortal.js b/lib/components/ModalPortal.js index 06ba9e1b..0e5e4dfb 100644 --- a/lib/components/ModalPortal.js +++ b/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(); }, diff --git a/package.json b/package.json index 4205e16c..74128dbb 100644 --- a/package.json +++ b/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", From 7e12d8a433c95c2f573869d453d5413dfd4593c9 Mon Sep 17 00:00:00 2001 From: RothGo Date: Fri, 16 Oct 2015 17:12:17 +0800 Subject: [PATCH 2/2] Modify spec Readme.md example to use ReactDOM.render to replace React.render --- README.md | 3 ++- examples/basic/app.js | 3 ++- examples/bootstrap/app.js | 3 ++- package.json | 2 +- specs/Modal.spec.js | 52 ++++++++++++++++++++------------------- specs/helper.js | 8 +++--- 6 files changed, 38 insertions(+), 33 deletions(-) diff --git a/README.md b/README.md index 3fad0cfa..4e83731a 100644 --- a/README.md +++ b/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(, appElement); +ReactDOM.render(, appElement); ``` # Demos diff --git a/examples/basic/app.js b/examples/basic/app.js index 9381eafa..58294ae8 100644 --- a/examples/basic/app.js +++ b/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(, appElement); +ReactDOM.render(, appElement); diff --git a/examples/bootstrap/app.js b/examples/bootstrap/app.js index 75dff72b..064dbfc0 100644 --- a/examples/bootstrap/app.js +++ b/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(, appElement); +ReactDOM.render(, appElement); diff --git a/package.json b/package.json index 74128dbb..fc47e28f 100644 --- a/package.json +++ b/package.json @@ -48,7 +48,7 @@ "lodash.assign": "^3.2.0" }, "peerDependencies": { - "react": ">=0.13.3 || ^0.14.0-beta3" + "react": "^0.14.0" }, "tags": [ "react", diff --git a/specs/Modal.spec.js b/specs/Modal.spec.js index eeece65e..c3c4d074 100644 --- a/specs/Modal.spec.js +++ b/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,13 +15,13 @@ 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(); }); @@ -27,21 +29,21 @@ describe('Modal', 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, diff --git a/specs/helper.js b/specs/helper.js index 2d23397c..62e88bc4 100644 --- a/specs/helper.js +++ b/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; };