From 8df9f6902742a41ff320dbc9d9fe85272644a2dc Mon Sep 17 00:00:00 2001 From: Cesar Andreu Date: Tue, 4 Aug 2015 15:50:36 -0700 Subject: [PATCH 1/6] Support react v0.14.0 --- package.json | 8 ++++---- src/Modal.js | 11 +---------- src/Portal.js | 9 ++++++--- src/Position.js | 3 ++- src/RootCloseWrapper.js | 3 ++- src/Transition.js | 5 +++-- src/utils/getContainer.js | 4 ++-- src/utils/ownerDocument.js | 4 ++-- src/utils/ownerWindow.js | 4 ++-- test/ModalSpec.js | 24 ++++++++++++------------ test/PortalSpec.js | 5 +++-- test/PositionSpec.js | 9 +++++---- test/TransitionSpec.js | 9 +++++---- test/helpers.js | 4 ++-- 14 files changed, 51 insertions(+), 51 deletions(-) diff --git a/package.json b/package.json index d4906739..bc5b160c 100644 --- a/package.json +++ b/package.json @@ -39,7 +39,7 @@ "major": "release major" }, "peerDependencies": { - "react": ">=0.13.0" + "react": "^0.14.0-alpha" }, "devDependencies": { "babel": "5.6.14", @@ -48,7 +48,6 @@ "babel-loader": "^5.3.0", "babel-plugin-object-assign": "^1.2.1", "chai": "^3.2.0", - "component-playground": "jquense/component-playground", "css-loader": "^0.15.6", "es5-shim": "^4.1.7", "eslint": "^0.24.0", @@ -75,9 +74,10 @@ "mt-changelog": "^0.6.1", "node-libs-browser": "^0.5.2", "raw-loader": "^0.5.1", - "react": "^0.13.3", - "react-bootstrap": "^0.24.2", + "react": "^0.14.0-beta3", + "react-bootstrap": "^0.24.5-react-pre.0", "react-component-metadata": "^1.2.2", + "react-dom": "^0.14.0-beta3", "react-hot-loader": "^1.2.7", "release-script": "^0.2.1", "rimraf": "^2.4.2", diff --git a/src/Modal.js b/src/Modal.js index 5fb0efcf..477a355a 100644 --- a/src/Modal.js +++ b/src/Modal.js @@ -270,8 +270,6 @@ const Modal = React.createClass({ modalManager.add(this, container, this.props.containerClassName); - this.iosClickHack(); - this._onDocumentKeyupListener = addEventListener(doc, 'keyup', this.handleDocumentKeyUp); @@ -372,16 +370,9 @@ const Modal = React.createClass({ } }, - iosClickHack() { - // Support: <= React 0.13: https://github.com/facebook/react/issues/1169 - if (this.refs.backdrop) { - React.findDOMNode(this.refs.backdrop).onclick = function () {}; - } - }, - //instead of a ref, which might conflict with one the parent applied. getDialogElement() { - let node = React.findDOMNode(this.refs.modal); + let node = this.refs.modal; return node && node.lastChild; }, diff --git a/src/Portal.js b/src/Portal.js index 17d0bc87..bf4c921a 100644 --- a/src/Portal.js +++ b/src/Portal.js @@ -1,4 +1,5 @@ import React from 'react'; +import ReactDOM from 'react-dom'; import mountable from 'react-prop-types/lib/mountable'; import ownerDocument from './utils/ownerDocument'; import getContainer from './utils/getContainer'; @@ -62,7 +63,9 @@ let Portal = React.createClass({ // Save reference for future access. if (overlay !== null) { this._mountOverlayTarget(); - this._overlayInstance = React.render(overlay, this._overlayTarget); + this._overlayInstance = ReactDOM.unstable_renderSubtreeIntoContainer( + this, overlay, this._overlayTarget + ); } else { // Unrender if the component is null for transitions to null this._unrenderOverlay(); @@ -72,7 +75,7 @@ let Portal = React.createClass({ _unrenderOverlay() { if (this._overlayTarget) { - React.unmountComponentAtNode(this._overlayTarget); + ReactDOM.unmountComponentAtNode(this._overlayTarget); this._overlayInstance = null; } }, @@ -90,7 +93,7 @@ let Portal = React.createClass({ if (this._overlayInstance.getWrappedDOMNode) { return this._overlayInstance.getWrappedDOMNode(); } else { - return React.findDOMNode(this._overlayInstance); + return ReactDOM.findDOMNode(this._overlayInstance); } } diff --git a/src/Position.js b/src/Position.js index c0e4c0d8..a1b0b530 100644 --- a/src/Position.js +++ b/src/Position.js @@ -1,4 +1,5 @@ import React, { cloneElement } from 'react'; +import ReactDOM from 'react-dom'; import classNames from 'classnames'; import ownerDocument from './utils/ownerDocument'; import getContainer from './utils/getContainer'; @@ -108,7 +109,7 @@ class Position extends React.Component { return; } - const overlay = React.findDOMNode(this); + const overlay = ReactDOM.findDOMNode(this); const container = getContainer(this.props.container, ownerDocument(this).body); this.setState(calcOverlayPosition( diff --git a/src/RootCloseWrapper.js b/src/RootCloseWrapper.js index d69c6ba3..20bbf25d 100644 --- a/src/RootCloseWrapper.js +++ b/src/RootCloseWrapper.js @@ -1,4 +1,5 @@ import React from 'react'; +import ReactDOM from 'react-dom'; import ownerDocument from './utils/ownerDocument'; import addEventListener from './utils/addEventListener'; @@ -77,7 +78,7 @@ export default class RootCloseWrapper extends React.Component { // stealing the ref from the owner, but we know exactly the DOM structure // that will be rendered, so we can just do this to get the child's DOM // node for doing size calculations in OverlayMixin. - return React.findDOMNode(this).firstChild; + return ReactDOM.findDOMNode(this).firstChild; } componentWillUnmount() { diff --git a/src/Transition.js b/src/Transition.js index bf2cfd89..6a62ff91 100644 --- a/src/Transition.js +++ b/src/Transition.js @@ -1,4 +1,5 @@ import React from 'react'; +import ReactDOM from 'react-dom'; import transitionInfo from 'dom-helpers/transition/properties'; import addEventListener from 'dom-helpers/events/on'; import classnames from 'classnames'; @@ -84,7 +85,7 @@ class Transition extends React.Component { performEnter(props) { this.cancelNextCallback(); - const node = React.findDOMNode(this); + const node = ReactDOM.findDOMNode(this); // Not this.props, because we might be about to receive new props. props.onEnter(node); @@ -102,7 +103,7 @@ class Transition extends React.Component { performExit(props) { this.cancelNextCallback(); - const node = React.findDOMNode(this); + const node = ReactDOM.findDOMNode(this); // Not this.props, because we might be about to receive new props. props.onExit(node); diff --git a/src/utils/getContainer.js b/src/utils/getContainer.js index 297d15e7..dedac1c0 100644 --- a/src/utils/getContainer.js +++ b/src/utils/getContainer.js @@ -1,6 +1,6 @@ -import React from 'react'; +import ReactDOM from 'react-dom'; export default function getContainer(container, defaultContainer){ container = typeof container === 'function' ? container() : container; - return React.findDOMNode(container) || defaultContainer; + return ReactDOM.findDOMNode(container) || defaultContainer; } diff --git a/src/utils/ownerDocument.js b/src/utils/ownerDocument.js index be56b8bd..3789dce2 100644 --- a/src/utils/ownerDocument.js +++ b/src/utils/ownerDocument.js @@ -1,6 +1,6 @@ -import React from 'react'; +import ReactDOM from 'react-dom'; import ownerDocument from 'dom-helpers/ownerDocument'; export default function (componentOrElement) { - return ownerDocument(React.findDOMNode(componentOrElement)); + return ownerDocument(ReactDOM.findDOMNode(componentOrElement)); } diff --git a/src/utils/ownerWindow.js b/src/utils/ownerWindow.js index 0be326fc..0708c357 100644 --- a/src/utils/ownerWindow.js +++ b/src/utils/ownerWindow.js @@ -1,6 +1,6 @@ -import React from 'react'; +import ReactDOM from 'react-dom'; import ownerWindow from 'dom-helpers/ownerWindow'; export default function (componentOrElement) { - return ownerWindow(React.findDOMNode(componentOrElement)); + return ownerWindow(ReactDOM.findDOMNode(componentOrElement)); } diff --git a/test/ModalSpec.js b/test/ModalSpec.js index 9bf51fef..00fc9531 100644 --- a/test/ModalSpec.js +++ b/test/ModalSpec.js @@ -1,4 +1,5 @@ import React from 'react'; +import ReactDOM from 'react-dom'; import ReactTestUtils from 'react/lib/ReactTestUtils'; import Modal from '../src/Modal'; import { render } from './helpers'; @@ -6,7 +7,7 @@ import jquery from 'jquery'; import simulant from 'simulant'; import Transition from '../src/Transition'; -let $ = componentOrNode => jquery(React.findDOMNode(componentOrNode)); +let $ = componentOrNode => jquery(ReactDOM.findDOMNode(componentOrNode)); describe('Modal', function () { let mountPoint; @@ -17,7 +18,7 @@ describe('Modal', function () { }); afterEach(function () { - React.unmountComponentAtNode(mountPoint); + ReactDOM.unmountComponentAtNode(mountPoint); document.body.removeChild(mountPoint); }); @@ -28,8 +29,7 @@ describe('Modal', function () { , mountPoint); - assert.ok( - ReactTestUtils.findRenderedDOMComponentWithTag(instance.refs.modal, 'strong')); + assert.equal(instance.refs.modal.querySelectorAll('strong').length, 1); }); it('Should disable scrolling on the modal container while open', function() { @@ -57,7 +57,7 @@ describe('Modal', function () { let instance = render(, mountPoint); let modal = ReactTestUtils.findRenderedComponentWithType(instance, Modal); - let backdrop = React.findDOMNode(modal.refs.backdrop); + let backdrop = modal.refs.backdrop; expect($(instance).css('overflow')).to.equal('hidden'); @@ -92,7 +92,7 @@ describe('Modal', function () { let instance = render(, mountPoint); let modal = ReactTestUtils.findRenderedComponentWithType(instance, Modal); - let backdrop = React.findDOMNode(modal.refs.backdrop); + let backdrop = modal.refs.backdrop; expect($(instance).hasClass('test test2')).to.be.true; @@ -109,7 +109,7 @@ describe('Modal', function () { , mountPoint); - let backdrop = React.findDOMNode(instance.refs.backdrop); + let backdrop = instance.refs.backdrop; ReactTestUtils.Simulate.click(backdrop); @@ -124,7 +124,7 @@ describe('Modal', function () { , mountPoint); - let backdrop = React.findDOMNode(instance.refs.backdrop); + let backdrop = instance.refs.backdrop; ReactTestUtils.Simulate.click(backdrop); }); @@ -137,7 +137,7 @@ describe('Modal', function () { , mountPoint); - let backdrop = React.findDOMNode(instance.refs.backdrop); + let backdrop = instance.refs.backdrop; ReactTestUtils.Simulate.click(backdrop); @@ -152,7 +152,7 @@ describe('Modal', function () { , mountPoint); - let backdrop = React.findDOMNode(instance.refs.backdrop); + let backdrop = instance.refs.backdrop; simulant.fire(backdrop, 'keyup', { keyCode: 27 }); }); @@ -166,7 +166,7 @@ describe('Modal', function () { , mountPoint); - let backdrop = React.findDOMNode(instance.refs.backdrop); + let backdrop = instance.refs.backdrop; expect( backdrop.style.borderWidth).to.equal('3px'); @@ -273,7 +273,7 @@ describe('Modal', function () { }); afterEach(function () { - React.unmountComponentAtNode(focusableContainer); + ReactDOM.unmountComponentAtNode(focusableContainer); document.body.removeChild(focusableContainer); }); diff --git a/test/PortalSpec.js b/test/PortalSpec.js index 66a1b49f..c42dbe7e 100644 --- a/test/PortalSpec.js +++ b/test/PortalSpec.js @@ -1,4 +1,5 @@ import React from 'react'; +import ReactDOM from 'react-dom'; import ReactTestUtils from 'react/lib/ReactTestUtils'; import Portal from '../src/Portal'; @@ -20,7 +21,7 @@ describe('Portal', function () { afterEach(function() { if (instance && ReactTestUtils.isCompositeComponent(instance) && instance.isMounted()) { - React.unmountComponentAtNode(React.findDOMNode(instance)); + ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(instance)); } }); @@ -45,7 +46,7 @@ describe('Portal', function () { ); - assert.equal(React.findDOMNode(instance).querySelectorAll('#test1').length, 1); + assert.equal(ReactDOM.findDOMNode(instance).querySelectorAll('#test1').length, 1); }); it('Should not render a null overlay', function() { diff --git a/test/PositionSpec.js b/test/PositionSpec.js index ec0169bd..a4e98237 100644 --- a/test/PositionSpec.js +++ b/test/PositionSpec.js @@ -1,5 +1,6 @@ import pick from 'lodash/object/pick'; import React from 'react'; +import ReactDOM from 'react-dom'; import ReactTestUtils from 'react/lib/ReactTestUtils'; import Position from '../src/Position'; @@ -14,7 +15,7 @@ describe('Position', function () { Text ); - assert.equal(React.findDOMNode(instance).nodeName, 'SPAN'); + assert.equal(ReactDOM.findDOMNode(instance).nodeName, 'SPAN'); }); it('Should warn about several children', function () { @@ -57,7 +58,7 @@ describe('Position', function () {
React.findDOMNode(this.refs[this.state.target])} + target={() => this.refs[this.state.target]} fakeProp={this.state.fakeProp} >
@@ -102,7 +103,7 @@ describe('Position', function () { }); afterEach(function () { - React.unmountComponentAtNode(mountPoint); + ReactDOM.unmountComponentAtNode(mountPoint); document.body.removeChild(mountPoint); }); @@ -135,7 +136,7 @@ describe('Position', function () { }}/> React.findDOMNode(this.refs.target)} + target={() => this.refs.target} container={this} containerPadding={50} placement={placement} diff --git a/test/TransitionSpec.js b/test/TransitionSpec.js index 496909df..6317aaa1 100644 --- a/test/TransitionSpec.js +++ b/test/TransitionSpec.js @@ -1,4 +1,5 @@ import React from 'react'; +import ReactDOM from 'react-dom'; import ReactTestUtils from 'react/lib/ReactTestUtils'; import { render } from './helpers'; import Transition, {UNMOUNTED, EXITED, ENTERING, ENTERED, EXITING} from @@ -243,7 +244,7 @@ describe('Transition', function () { initialIn={false} onEnter={() => { expect(instance.getStatus()).to.equal(EXITED); - expect(React.findDOMNode(instance)).to.exist; + expect(ReactDOM.findDOMNode(instance)).to.exist; done(); }} @@ -251,7 +252,7 @@ describe('Transition', function () { ); expect(instance.getStatus()).to.equal(UNMOUNTED); - expect(React.findDOMNode(instance)).to.not.exist; + expect(ReactDOM.findDOMNode(instance)).to.not.exist; instance.setState({in: true}); }); @@ -262,7 +263,7 @@ describe('Transition', function () { initialIn onExited={() => { expect(instance.getStatus()).to.equal(UNMOUNTED); - expect(React.findDOMNode(instance)).to.not.exist; + expect(ReactDOM.findDOMNode(instance)).to.not.exist; done(); }} @@ -270,7 +271,7 @@ describe('Transition', function () { ); expect(instance.getStatus()).to.equal(ENTERED); - expect(React.findDOMNode(instance)).to.exist; + expect(ReactDOM.findDOMNode(instance)).to.exist; instance.setState({in: false}); }); diff --git a/test/helpers.js b/test/helpers.js index 94b21d5b..4ae81330 100644 --- a/test/helpers.js +++ b/test/helpers.js @@ -1,4 +1,4 @@ -import React from 'react'; +import ReactDOM from 'react-dom'; import { cloneElement } from 'react'; export function shouldWarn(about) { @@ -16,7 +16,7 @@ export function shouldWarn(about) { */ export function render(element, mountPoint){ let mount = mountPoint || document.createElement('div'); - let instance = React.render(element, mount); + let instance = ReactDOM.render(element, mount); if (!instance.renderWithProps) { instance.renderWithProps = function(newProps) { From d0adcb91cb6cb4543975b8ab374e52f462a74406 Mon Sep 17 00:00:00 2001 From: Cesar Andreu Date: Tue, 4 Aug 2015 15:50:36 -0700 Subject: [PATCH 2/6] Support react v0.14.0 --- package.json | 8 ++++---- src/Modal.js | 11 +---------- src/Portal.js | 9 ++++++--- src/Position.js | 3 ++- src/RootCloseWrapper.js | 3 +++ src/Transition.js | 5 +++-- src/utils/getContainer.js | 4 ++-- src/utils/ownerDocument.js | 4 ++-- src/utils/ownerWindow.js | 4 ++-- test/ModalSpec.js | 24 ++++++++++++------------ test/PortalSpec.js | 5 +++-- test/PositionSpec.js | 9 +++++---- test/TransitionSpec.js | 9 +++++---- test/helpers.js | 4 ++-- 14 files changed, 52 insertions(+), 50 deletions(-) diff --git a/package.json b/package.json index c6a5d6ed..7bbdfe3d 100644 --- a/package.json +++ b/package.json @@ -39,7 +39,7 @@ "major": "release major" }, "peerDependencies": { - "react": ">=0.13.0" + "react": "^0.14.0-alpha" }, "devDependencies": { "babel": "5.6.14", @@ -48,7 +48,6 @@ "babel-loader": "^5.3.0", "babel-plugin-object-assign": "^1.2.1", "chai": "^3.2.0", - "component-playground": "jquense/component-playground", "css-loader": "^0.15.6", "es5-shim": "^4.1.7", "eslint": "^0.24.0", @@ -75,9 +74,10 @@ "mt-changelog": "^0.6.1", "node-libs-browser": "^0.5.2", "raw-loader": "^0.5.1", - "react": "^0.13.3", - "react-bootstrap": "^0.24.2", + "react": "^0.14.0-beta3", + "react-bootstrap": "^0.24.5-react-pre.0", "react-component-metadata": "^1.2.2", + "react-dom": "^0.14.0-beta3", "react-hot-loader": "^1.2.7", "release-script": "^0.2.1", "rimraf": "^2.4.2", diff --git a/src/Modal.js b/src/Modal.js index 5fb0efcf..477a355a 100644 --- a/src/Modal.js +++ b/src/Modal.js @@ -270,8 +270,6 @@ const Modal = React.createClass({ modalManager.add(this, container, this.props.containerClassName); - this.iosClickHack(); - this._onDocumentKeyupListener = addEventListener(doc, 'keyup', this.handleDocumentKeyUp); @@ -372,16 +370,9 @@ const Modal = React.createClass({ } }, - iosClickHack() { - // Support: <= React 0.13: https://github.com/facebook/react/issues/1169 - if (this.refs.backdrop) { - React.findDOMNode(this.refs.backdrop).onclick = function () {}; - } - }, - //instead of a ref, which might conflict with one the parent applied. getDialogElement() { - let node = React.findDOMNode(this.refs.modal); + let node = this.refs.modal; return node && node.lastChild; }, diff --git a/src/Portal.js b/src/Portal.js index 17d0bc87..bf4c921a 100644 --- a/src/Portal.js +++ b/src/Portal.js @@ -1,4 +1,5 @@ import React from 'react'; +import ReactDOM from 'react-dom'; import mountable from 'react-prop-types/lib/mountable'; import ownerDocument from './utils/ownerDocument'; import getContainer from './utils/getContainer'; @@ -62,7 +63,9 @@ let Portal = React.createClass({ // Save reference for future access. if (overlay !== null) { this._mountOverlayTarget(); - this._overlayInstance = React.render(overlay, this._overlayTarget); + this._overlayInstance = ReactDOM.unstable_renderSubtreeIntoContainer( + this, overlay, this._overlayTarget + ); } else { // Unrender if the component is null for transitions to null this._unrenderOverlay(); @@ -72,7 +75,7 @@ let Portal = React.createClass({ _unrenderOverlay() { if (this._overlayTarget) { - React.unmountComponentAtNode(this._overlayTarget); + ReactDOM.unmountComponentAtNode(this._overlayTarget); this._overlayInstance = null; } }, @@ -90,7 +93,7 @@ let Portal = React.createClass({ if (this._overlayInstance.getWrappedDOMNode) { return this._overlayInstance.getWrappedDOMNode(); } else { - return React.findDOMNode(this._overlayInstance); + return ReactDOM.findDOMNode(this._overlayInstance); } } diff --git a/src/Position.js b/src/Position.js index c0e4c0d8..a1b0b530 100644 --- a/src/Position.js +++ b/src/Position.js @@ -1,4 +1,5 @@ import React, { cloneElement } from 'react'; +import ReactDOM from 'react-dom'; import classNames from 'classnames'; import ownerDocument from './utils/ownerDocument'; import getContainer from './utils/getContainer'; @@ -108,7 +109,7 @@ class Position extends React.Component { return; } - const overlay = React.findDOMNode(this); + const overlay = ReactDOM.findDOMNode(this); const container = getContainer(this.props.container, ownerDocument(this).body); this.setState(calcOverlayPosition( diff --git a/src/RootCloseWrapper.js b/src/RootCloseWrapper.js index ee718f12..a4c87bda 100644 --- a/src/RootCloseWrapper.js +++ b/src/RootCloseWrapper.js @@ -1,4 +1,7 @@ import React from 'react'; +import ReactDOM from 'react-dom'; +import ownerDocument from './utils/ownerDocument'; + import addEventListener from './utils/addEventListener'; import createChainedFunction from './utils/createChainedFunction'; import ownerDocument from './utils/ownerDocument'; diff --git a/src/Transition.js b/src/Transition.js index bf2cfd89..6a62ff91 100644 --- a/src/Transition.js +++ b/src/Transition.js @@ -1,4 +1,5 @@ import React from 'react'; +import ReactDOM from 'react-dom'; import transitionInfo from 'dom-helpers/transition/properties'; import addEventListener from 'dom-helpers/events/on'; import classnames from 'classnames'; @@ -84,7 +85,7 @@ class Transition extends React.Component { performEnter(props) { this.cancelNextCallback(); - const node = React.findDOMNode(this); + const node = ReactDOM.findDOMNode(this); // Not this.props, because we might be about to receive new props. props.onEnter(node); @@ -102,7 +103,7 @@ class Transition extends React.Component { performExit(props) { this.cancelNextCallback(); - const node = React.findDOMNode(this); + const node = ReactDOM.findDOMNode(this); // Not this.props, because we might be about to receive new props. props.onExit(node); diff --git a/src/utils/getContainer.js b/src/utils/getContainer.js index 297d15e7..dedac1c0 100644 --- a/src/utils/getContainer.js +++ b/src/utils/getContainer.js @@ -1,6 +1,6 @@ -import React from 'react'; +import ReactDOM from 'react-dom'; export default function getContainer(container, defaultContainer){ container = typeof container === 'function' ? container() : container; - return React.findDOMNode(container) || defaultContainer; + return ReactDOM.findDOMNode(container) || defaultContainer; } diff --git a/src/utils/ownerDocument.js b/src/utils/ownerDocument.js index be56b8bd..3789dce2 100644 --- a/src/utils/ownerDocument.js +++ b/src/utils/ownerDocument.js @@ -1,6 +1,6 @@ -import React from 'react'; +import ReactDOM from 'react-dom'; import ownerDocument from 'dom-helpers/ownerDocument'; export default function (componentOrElement) { - return ownerDocument(React.findDOMNode(componentOrElement)); + return ownerDocument(ReactDOM.findDOMNode(componentOrElement)); } diff --git a/src/utils/ownerWindow.js b/src/utils/ownerWindow.js index 0be326fc..0708c357 100644 --- a/src/utils/ownerWindow.js +++ b/src/utils/ownerWindow.js @@ -1,6 +1,6 @@ -import React from 'react'; +import ReactDOM from 'react-dom'; import ownerWindow from 'dom-helpers/ownerWindow'; export default function (componentOrElement) { - return ownerWindow(React.findDOMNode(componentOrElement)); + return ownerWindow(ReactDOM.findDOMNode(componentOrElement)); } diff --git a/test/ModalSpec.js b/test/ModalSpec.js index 9bf51fef..00fc9531 100644 --- a/test/ModalSpec.js +++ b/test/ModalSpec.js @@ -1,4 +1,5 @@ import React from 'react'; +import ReactDOM from 'react-dom'; import ReactTestUtils from 'react/lib/ReactTestUtils'; import Modal from '../src/Modal'; import { render } from './helpers'; @@ -6,7 +7,7 @@ import jquery from 'jquery'; import simulant from 'simulant'; import Transition from '../src/Transition'; -let $ = componentOrNode => jquery(React.findDOMNode(componentOrNode)); +let $ = componentOrNode => jquery(ReactDOM.findDOMNode(componentOrNode)); describe('Modal', function () { let mountPoint; @@ -17,7 +18,7 @@ describe('Modal', function () { }); afterEach(function () { - React.unmountComponentAtNode(mountPoint); + ReactDOM.unmountComponentAtNode(mountPoint); document.body.removeChild(mountPoint); }); @@ -28,8 +29,7 @@ describe('Modal', function () { , mountPoint); - assert.ok( - ReactTestUtils.findRenderedDOMComponentWithTag(instance.refs.modal, 'strong')); + assert.equal(instance.refs.modal.querySelectorAll('strong').length, 1); }); it('Should disable scrolling on the modal container while open', function() { @@ -57,7 +57,7 @@ describe('Modal', function () { let instance = render(, mountPoint); let modal = ReactTestUtils.findRenderedComponentWithType(instance, Modal); - let backdrop = React.findDOMNode(modal.refs.backdrop); + let backdrop = modal.refs.backdrop; expect($(instance).css('overflow')).to.equal('hidden'); @@ -92,7 +92,7 @@ describe('Modal', function () { let instance = render(, mountPoint); let modal = ReactTestUtils.findRenderedComponentWithType(instance, Modal); - let backdrop = React.findDOMNode(modal.refs.backdrop); + let backdrop = modal.refs.backdrop; expect($(instance).hasClass('test test2')).to.be.true; @@ -109,7 +109,7 @@ describe('Modal', function () { , mountPoint); - let backdrop = React.findDOMNode(instance.refs.backdrop); + let backdrop = instance.refs.backdrop; ReactTestUtils.Simulate.click(backdrop); @@ -124,7 +124,7 @@ describe('Modal', function () { , mountPoint); - let backdrop = React.findDOMNode(instance.refs.backdrop); + let backdrop = instance.refs.backdrop; ReactTestUtils.Simulate.click(backdrop); }); @@ -137,7 +137,7 @@ describe('Modal', function () { , mountPoint); - let backdrop = React.findDOMNode(instance.refs.backdrop); + let backdrop = instance.refs.backdrop; ReactTestUtils.Simulate.click(backdrop); @@ -152,7 +152,7 @@ describe('Modal', function () { , mountPoint); - let backdrop = React.findDOMNode(instance.refs.backdrop); + let backdrop = instance.refs.backdrop; simulant.fire(backdrop, 'keyup', { keyCode: 27 }); }); @@ -166,7 +166,7 @@ describe('Modal', function () { , mountPoint); - let backdrop = React.findDOMNode(instance.refs.backdrop); + let backdrop = instance.refs.backdrop; expect( backdrop.style.borderWidth).to.equal('3px'); @@ -273,7 +273,7 @@ describe('Modal', function () { }); afterEach(function () { - React.unmountComponentAtNode(focusableContainer); + ReactDOM.unmountComponentAtNode(focusableContainer); document.body.removeChild(focusableContainer); }); diff --git a/test/PortalSpec.js b/test/PortalSpec.js index 66a1b49f..c42dbe7e 100644 --- a/test/PortalSpec.js +++ b/test/PortalSpec.js @@ -1,4 +1,5 @@ import React from 'react'; +import ReactDOM from 'react-dom'; import ReactTestUtils from 'react/lib/ReactTestUtils'; import Portal from '../src/Portal'; @@ -20,7 +21,7 @@ describe('Portal', function () { afterEach(function() { if (instance && ReactTestUtils.isCompositeComponent(instance) && instance.isMounted()) { - React.unmountComponentAtNode(React.findDOMNode(instance)); + ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(instance)); } }); @@ -45,7 +46,7 @@ describe('Portal', function () { ); - assert.equal(React.findDOMNode(instance).querySelectorAll('#test1').length, 1); + assert.equal(ReactDOM.findDOMNode(instance).querySelectorAll('#test1').length, 1); }); it('Should not render a null overlay', function() { diff --git a/test/PositionSpec.js b/test/PositionSpec.js index ec0169bd..a4e98237 100644 --- a/test/PositionSpec.js +++ b/test/PositionSpec.js @@ -1,5 +1,6 @@ import pick from 'lodash/object/pick'; import React from 'react'; +import ReactDOM from 'react-dom'; import ReactTestUtils from 'react/lib/ReactTestUtils'; import Position from '../src/Position'; @@ -14,7 +15,7 @@ describe('Position', function () { Text ); - assert.equal(React.findDOMNode(instance).nodeName, 'SPAN'); + assert.equal(ReactDOM.findDOMNode(instance).nodeName, 'SPAN'); }); it('Should warn about several children', function () { @@ -57,7 +58,7 @@ describe('Position', function () {
React.findDOMNode(this.refs[this.state.target])} + target={() => this.refs[this.state.target]} fakeProp={this.state.fakeProp} >
@@ -102,7 +103,7 @@ describe('Position', function () { }); afterEach(function () { - React.unmountComponentAtNode(mountPoint); + ReactDOM.unmountComponentAtNode(mountPoint); document.body.removeChild(mountPoint); }); @@ -135,7 +136,7 @@ describe('Position', function () { }}/> React.findDOMNode(this.refs.target)} + target={() => this.refs.target} container={this} containerPadding={50} placement={placement} diff --git a/test/TransitionSpec.js b/test/TransitionSpec.js index 496909df..6317aaa1 100644 --- a/test/TransitionSpec.js +++ b/test/TransitionSpec.js @@ -1,4 +1,5 @@ import React from 'react'; +import ReactDOM from 'react-dom'; import ReactTestUtils from 'react/lib/ReactTestUtils'; import { render } from './helpers'; import Transition, {UNMOUNTED, EXITED, ENTERING, ENTERED, EXITING} from @@ -243,7 +244,7 @@ describe('Transition', function () { initialIn={false} onEnter={() => { expect(instance.getStatus()).to.equal(EXITED); - expect(React.findDOMNode(instance)).to.exist; + expect(ReactDOM.findDOMNode(instance)).to.exist; done(); }} @@ -251,7 +252,7 @@ describe('Transition', function () { ); expect(instance.getStatus()).to.equal(UNMOUNTED); - expect(React.findDOMNode(instance)).to.not.exist; + expect(ReactDOM.findDOMNode(instance)).to.not.exist; instance.setState({in: true}); }); @@ -262,7 +263,7 @@ describe('Transition', function () { initialIn onExited={() => { expect(instance.getStatus()).to.equal(UNMOUNTED); - expect(React.findDOMNode(instance)).to.not.exist; + expect(ReactDOM.findDOMNode(instance)).to.not.exist; done(); }} @@ -270,7 +271,7 @@ describe('Transition', function () { ); expect(instance.getStatus()).to.equal(ENTERED); - expect(React.findDOMNode(instance)).to.exist; + expect(ReactDOM.findDOMNode(instance)).to.exist; instance.setState({in: false}); }); diff --git a/test/helpers.js b/test/helpers.js index 94b21d5b..4ae81330 100644 --- a/test/helpers.js +++ b/test/helpers.js @@ -1,4 +1,4 @@ -import React from 'react'; +import ReactDOM from 'react-dom'; import { cloneElement } from 'react'; export function shouldWarn(about) { @@ -16,7 +16,7 @@ export function shouldWarn(about) { */ export function render(element, mountPoint){ let mount = mountPoint || document.createElement('div'); - let instance = React.render(element, mount); + let instance = ReactDOM.render(element, mount); if (!instance.renderWithProps) { instance.renderWithProps = function(newProps) { From bfedd6c97fe6783b2900ee57323eb6b2130428a9 Mon Sep 17 00:00:00 2001 From: jquense Date: Mon, 24 Aug 2015 14:31:47 -0400 Subject: [PATCH 3/6] alpha2 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 7bbdfe3d..dc9e2b1b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-overlays", - "version": "0.4.4", + "version": "0.50.0-alpha2", "description": "Utilities for creating robust overlay components", "author": "Jason Quense ", "repository": "react-bootstrap/react-overlays", From d2216d2ca6dedf453448ed910892f25ea3c070c8 Mon Sep 17 00:00:00 2001 From: jquense Date: Wed, 26 Aug 2015 12:13:57 -0400 Subject: [PATCH 4/6] alpha 3 --- package.json | 2 +- src/RootCloseWrapper.js | 3 +-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index dc9e2b1b..74d47c87 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-overlays", - "version": "0.50.0-alpha2", + "version": "0.50.0-alpha3", "description": "Utilities for creating robust overlay components", "author": "Jason Quense ", "repository": "react-bootstrap/react-overlays", diff --git a/src/RootCloseWrapper.js b/src/RootCloseWrapper.js index a4c87bda..095721c1 100644 --- a/src/RootCloseWrapper.js +++ b/src/RootCloseWrapper.js @@ -1,6 +1,5 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import ownerDocument from './utils/ownerDocument'; import addEventListener from './utils/addEventListener'; import createChainedFunction from './utils/createChainedFunction'; @@ -87,7 +86,7 @@ export default class RootCloseWrapper extends React.Component { // stealing the ref from the owner, but we know exactly the DOM structure // that will be rendered, so we can just do this to get the child's DOM // node for doing size calculations in OverlayMixin. - const node = React.findDOMNode(this); + const node = ReactDOM.findDOMNode(this); return this.props.noWrap ? node : node.firstChild; } From d3853edf115eca3d37981d857b91ce63ed2e6216 Mon Sep 17 00:00:00 2001 From: jquense Date: Fri, 28 Aug 2015 08:58:05 -0400 Subject: [PATCH 5/6] Allows nesting root close wrappers --- src/RootCloseWrapper.js | 29 +++++++++++++++------ test/RootCloseSpec.js | 58 +++++++++++++++++++++++++++++++++++++++++ 2 files changed, 79 insertions(+), 8 deletions(-) create mode 100644 test/RootCloseSpec.js diff --git a/src/RootCloseWrapper.js b/src/RootCloseWrapper.js index 095721c1..5d2a22db 100644 --- a/src/RootCloseWrapper.js +++ b/src/RootCloseWrapper.js @@ -8,11 +8,19 @@ import ownerDocument from './utils/ownerDocument'; // TODO: Consider using an ES6 symbol here, once we use babel-runtime. const CLICK_WAS_INSIDE = '__click_was_inside'; -function suppressRootClose(event) { - // Tag the native event to prevent the root close logic on document click. - // This seems safer than using event.nativeEvent.stopImmediatePropagation(), - // which is only supported in IE >= 9. - event.nativeEvent[CLICK_WAS_INSIDE] = true; +let counter = 0; + +function getSuppressRootClose() { + let id = CLICK_WAS_INSIDE + '_' + counter++; + return { + id, + suppressRootClose(event) { + // Tag the native event to prevent the root close logic on document click. + // This seems safer than using event.nativeEvent.stopImmediatePropagation(), + // which is only supported in IE >= 9. + event.nativeEvent[id] = true; + } + }; } export default class RootCloseWrapper extends React.Component { @@ -21,6 +29,11 @@ export default class RootCloseWrapper extends React.Component { this.handleDocumentClick = this.handleDocumentClick.bind(this); this.handleDocumentKeyUp = this.handleDocumentKeyUp.bind(this); + + let { id, suppressRootClose } = getSuppressRootClose(); + + this._suppressRootId = id; + this._suppressRootClosehHandler = suppressRootClose; } bindRootCloseHandlers() { @@ -35,7 +48,7 @@ export default class RootCloseWrapper extends React.Component { handleDocumentClick(e) { // This is now the native event. - if (e[CLICK_WAS_INSIDE]) { + if (e[this._suppressRootId]) { return; } @@ -68,14 +81,14 @@ export default class RootCloseWrapper extends React.Component { if (noWrap) { return React.cloneElement(child, { - onClick: createChainedFunction(suppressRootClose, child.props.onClick) + onClick: createChainedFunction(this._suppressRootClosehHandler, child.props.onClick) }); } // Wrap the child in a new element, so the child won't have to handle // potentially combining multiple onClick listeners. return ( -
+
{child}
); diff --git a/test/RootCloseSpec.js b/test/RootCloseSpec.js new file mode 100644 index 00000000..f1a00ab9 --- /dev/null +++ b/test/RootCloseSpec.js @@ -0,0 +1,58 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import RootCloseWrapper from '../src/RootCloseWrapper'; +import { render } from './helpers'; +import simulant from 'simulant'; + +describe('RootCloseWrapper', function () { + let mountPoint; + + beforeEach(()=>{ + mountPoint = document.createElement('div'); + document.body.appendChild(mountPoint); + }); + + afterEach(function () { + ReactDOM.unmountComponentAtNode(mountPoint); + document.body.removeChild(mountPoint); + }); + + it('should close when clicked outside', () => { + let spy = sinon.spy(); + render( + +
hello there
+ + , mountPoint); + + simulant.fire(document.getElementById('my-div'), 'click'); + + expect(spy).to.not.have.been.called; + + simulant.fire(document.body, 'click'); + + expect(spy).to.have.been.calledOnce; + }); + + it('should close when inside another RootCloseWrapper', () => { + let outerSpy = sinon.spy(); + let innerSpy = sinon.spy(); + + render( + +
+
hello there
+ +
hello there
+ +
+ + , mountPoint); + + simulant.fire(document.getElementById('my-div'), 'click'); + + expect(outerSpy).to.have.not.been.called; + expect(innerSpy).to.have.been.calledOnce; + }); + +}); From 678108f62b2830599cf3b0c3cf8c9030de366058 Mon Sep 17 00:00:00 2001 From: jquense Date: Fri, 28 Aug 2015 10:36:51 -0400 Subject: [PATCH 6/6] alpha4 --- package.json | 4 ++-- src/RootCloseWrapper.js | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 74d47c87..8bb4a595 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-overlays", - "version": "0.50.0-alpha3", + "version": "0.50.0-alpha4", "description": "Utilities for creating robust overlay components", "author": "Jason Quense ", "repository": "react-bootstrap/react-overlays", @@ -75,7 +75,7 @@ "node-libs-browser": "^0.5.2", "raw-loader": "^0.5.1", "react": "^0.14.0-beta3", - "react-bootstrap": "^0.24.5-react-pre.0", + "react-bootstrap": "0.24.5-react-pre.0", "react-component-metadata": "^1.2.2", "react-dom": "^0.14.0-beta3", "react-hot-loader": "^1.2.7", diff --git a/src/RootCloseWrapper.js b/src/RootCloseWrapper.js index 5d2a22db..f95dc8a8 100644 --- a/src/RootCloseWrapper.js +++ b/src/RootCloseWrapper.js @@ -33,7 +33,7 @@ export default class RootCloseWrapper extends React.Component { let { id, suppressRootClose } = getSuppressRootClose(); this._suppressRootId = id; - this._suppressRootClosehHandler = suppressRootClose; + this._suppressRootCloseHandler = suppressRootClose; } bindRootCloseHandlers() { @@ -81,14 +81,14 @@ export default class RootCloseWrapper extends React.Component { if (noWrap) { return React.cloneElement(child, { - onClick: createChainedFunction(this._suppressRootClosehHandler, child.props.onClick) + onClick: createChainedFunction(this._suppressRootCloseHandler, child.props.onClick) }); } // Wrap the child in a new element, so the child won't have to handle // potentially combining multiple onClick listeners. return ( -
+
{child}
);