diff --git a/package.json b/package.json index c6a5d6ed..8bb4a595 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-overlays", - "version": "0.4.4", + "version": "0.50.0-alpha4", "description": "Utilities for creating robust overlay components", "author": "Jason Quense ", "repository": "react-bootstrap/react-overlays", @@ -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 366d7d4b..1cf3ee7c 100644 --- a/src/Modal.js +++ b/src/Modal.js @@ -287,8 +287,6 @@ const Modal = React.createClass({ modalManager.add(this, container, this.props.containerClassName); - this.iosClickHack(); - this._onDocumentKeyupListener = addEventListener(doc, 'keyup', this.handleDocumentKeyUp); @@ -389,16 +387,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 200f89dd..47545d4a 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; } }, @@ -94,7 +97,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 9f0a53ef..9d9b3343 100644 --- a/src/RootCloseWrapper.js +++ b/src/RootCloseWrapper.js @@ -1,4 +1,6 @@ import React from 'react'; +import ReactDOM from 'react-dom'; + import addEventListener from './utils/addEventListener'; import createChainedFunction from './utils/createChainedFunction'; import ownerDocument from './utils/ownerDocument'; @@ -31,7 +33,8 @@ export default class RootCloseWrapper extends React.Component { let { id, suppressRootClose } = getSuppressRootClose(); this._suppressRootId = id; - this._suppressRootClosehHandler = suppressRootClose; + + this._suppressRootCloseHandler = suppressRootClose; } bindRootCloseHandlers() { @@ -79,14 +82,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}
); @@ -97,7 +100,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; } 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) {