diff --git a/package.json b/package.json
index 6fcd9b71..bdcf2008 100644
--- a/package.json
+++ b/package.json
@@ -52,9 +52,8 @@
"karma-webpack": "^1.8.1",
"mocha": "3.2.0",
"npm-run-all": "^3.1.2",
- "react": "^15.0.0",
- "react-addons-test-utils": "^15.0.0",
- "react-dom": "^15.0.0",
+ "react": "^15.6.1",
+ "react-dom": "^15.6.1",
"rf-release": "0.4.0",
"sinon": "next",
"uglify-js": "2.4.24",
@@ -64,7 +63,7 @@
"dependencies": {
"element-class": "^0.2.0",
"exenv": "1.2.0",
- "prop-types": "^15.5.7",
+ "prop-types": "^15.5.10",
"react-dom-factories": "^1.0.0"
},
"peerDependencies": {
diff --git a/specs/Modal.events.spec.js b/specs/Modal.events.spec.js
index f1fb9e95..8cead5b8 100644
--- a/specs/Modal.events.spec.js
+++ b/specs/Modal.events.spec.js
@@ -3,12 +3,17 @@ import sinon from 'sinon';
import expect from 'expect';
import React from 'react';
import ReactDOM from 'react-dom';
-import TestUtils from 'react-addons-test-utils';
import Modal from '../src/components/Modal';
import {
- moverlay, mcontent,
- clickAt, mouseDownAt, mouseUpAt, escKeyDown, tabKeyDown,
- renderModal, emptyDOM
+ moverlay,
+ mcontent,
+ clickAt,
+ mouseDownAt,
+ mouseUpAt,
+ escKeyDown,
+ tabKeyDown,
+ renderModal,
+ emptyDOM
} from './helper';
describe('Events', () => {
@@ -26,7 +31,9 @@ describe('Events', () => {
const content = mcontent(modal);
expect(document.activeElement).toEqual(content);
tabKeyDown(content, {
- preventDefault() { tabPrevented = true; }
+ preventDefault() {
+ tabPrevented = true;
+ }
});
expect(tabPrevented).toEqual(true);
});
diff --git a/specs/Modal.spec.js b/specs/Modal.spec.js
index f4c160dc..8d126660 100644
--- a/specs/Modal.spec.js
+++ b/specs/Modal.spec.js
@@ -2,15 +2,17 @@
import expect from 'expect';
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
-import TestUtils from 'react-addons-test-utils';
import Modal from '../src/components/Modal';
import * as ariaAppHider from '../src/helpers/ariaAppHider';
import {
isBodyWithReactModalOpenClass,
contentAttribute,
- mcontent, moverlay,
+ mcontent,
+ moverlay,
escKeyDown,
- renderModal, unmountModal, emptyDOM
+ renderModal,
+ unmountModal,
+ emptyDOM
} from './helper';
describe('State', () => {
@@ -41,15 +43,13 @@ describe('State', () => {
expect(props.shouldCloseOnOverlayClick).toBe(true);
ReactDOM.unmountComponentAtNode(node);
ariaAppHider.resetForTesting();
- Modal.setAppElement(document.body); // restore default
+ Modal.setAppElement(document.body); // restore default
});
it('accepts appElement as a prop', () => {
const el = document.createElement('div');
const node = document.createElement('div');
- ReactDOM.render((
-
- ), node);
+ ReactDOM.render(, node);
expect(el.getAttribute('aria-hidden')).toEqual('true');
ReactDOM.unmountComponentAtNode(node);
});
@@ -69,11 +69,7 @@ describe('State', () => {
}
Modal.setAppElement(node);
ReactDOM.render(, node);
- expect(
- document.body.querySelector('.ReactModalPortal').parentNode
- ).toEqual(
- document.body
- );
+ expect(document.body.querySelector('.ReactModalPortal').parentNode).toEqual(document.body);
ReactDOM.unmountComponentAtNode(node);
});
@@ -85,13 +81,14 @@ describe('State', () => {
it('set aria-label based on the contentLabel prop', () => {
const child = 'I am a child of Modal, and he has sent me here...';
- const modal = renderModal({
- isOpen: true,
- contentLabel: 'Special Modal'
- }, child);
- expect(
- contentAttribute(modal, 'aria-label')
- ).toEqual('Special Modal');
+ const modal = renderModal(
+ {
+ isOpen: true,
+ contentLabel: 'Special Modal'
+ },
+ child
+ );
+ expect(contentAttribute(modal, 'aria-label')).toEqual('Special Modal');
});
it('removes the portal node', () => {
@@ -106,29 +103,35 @@ describe('State', () => {
});
it('give back focus to previous element or modal.', done => {
- function cleanup () {
+ function cleanup() {
unmountModal();
done();
}
- const modalA = renderModal({
- isOpen: true,
- className: 'modal-a',
- onRequestClose: cleanup
- }, null);
+ const modalA = renderModal(
+ {
+ isOpen: true,
+ className: 'modal-a',
+ onRequestClose: cleanup
+ },
+ null
+ );
const modalContent = mcontent(modalA);
expect(document.activeElement).toEqual(modalContent);
- const modalB = renderModal({
- isOpen: true,
- className: 'modal-b',
- onRequestClose() {
- const modalContent = mcontent(modalB);
- expect(document.activeElement).toEqual(mcontent(modalA));
- escKeyDown(modalContent);
- expect(document.activeElement).toEqual(modalContent);
- }
- }, null);
+ const modalB = renderModal(
+ {
+ isOpen: true,
+ className: 'modal-b',
+ onRequestClose() {
+ const modalContent = mcontent(modalB);
+ expect(document.activeElement).toEqual(mcontent(modalA));
+ escKeyDown(modalContent);
+ expect(document.activeElement).toEqual(modalContent);
+ }
+ },
+ null
+ );
escKeyDown(modalContent);
});
@@ -136,7 +139,12 @@ describe('State', () => {
it('does not steel focus when a descendent is already focused', () => {
let content;
const input = (
- { el && el.focus(); content = el; }} />
+ {
+ el && el.focus();
+ content = el;
+ }}
+ />
);
renderModal({ isOpen: true }, input, () => {
expect(document.activeElement).toEqual(content);
@@ -153,9 +161,7 @@ describe('State', () => {
it('supports custom className', () => {
const modal = renderModal({ isOpen: true, className: 'myClass' });
- expect(
- mcontent(modal).className.includes('myClass')
- ).toBeTruthy();
+ expect(mcontent(modal).className.includes('myClass')).toBeTruthy();
});
it('supports overlayClassName', () => {
@@ -163,9 +169,7 @@ describe('State', () => {
isOpen: true,
overlayClassName: 'myOverlayClass'
});
- expect(
- moverlay(modal).className.includes('myOverlayClass')
- ).toBeTruthy();
+ expect(moverlay(modal).className.includes('myOverlayClass')).toBeTruthy();
});
it('overrides content classes with custom object className', () => {
@@ -177,11 +181,7 @@ describe('State', () => {
beforeClose: 'myClass_before-close'
}
});
- expect(
- mcontent(modal).className
- ).toEqual(
- 'myClass myClass_after-open'
- );
+ expect(mcontent(modal).className).toEqual('myClass myClass_after-open');
unmountModal();
});
@@ -194,11 +194,7 @@ describe('State', () => {
beforeClose: 'myOverlayClass_before-close'
}
});
- expect(
- moverlay(modal).className
- ).toEqual(
- 'myOverlayClass myOverlayClass_after-open'
- );
+ expect(moverlay(modal).className).toEqual('myOverlayClass myOverlayClass_after-open');
unmountModal();
});
@@ -207,12 +203,10 @@ describe('State', () => {
isOpen: true,
bodyOpenClassName: 'custom-modal-open'
});
- expect(
- document.body.className.indexOf('custom-modal-open') > -1
- ).toBeTruthy();
+ expect(document.body.className.indexOf('custom-modal-open') > -1).toBeTruthy();
});
- it('don\'t append class to document.body if modal is not open', () => {
+ it("don't append class to document.body if modal is not open", () => {
renderModal({ isOpen: false });
expect(!isBodyWithReactModalOpenClass()).toBeTruthy();
unmountModal();
@@ -243,9 +237,7 @@ describe('State', () => {
it('removes aria-hidden from appElement when unmounted w/o closing', () => {
const el = document.createElement('div');
const node = document.createElement('div');
- ReactDOM.render((
-
- ), node);
+ ReactDOM.render(, node);
expect(el.getAttribute('aria-hidden')).toEqual('true');
ReactDOM.unmountComponentAtNode(node);
expect(el.getAttribute('aria-hidden')).toEqual(null);
@@ -312,30 +304,35 @@ describe('State', () => {
// content is still mounted after modal is gone
checkDOM(1);
- setTimeout(() => {
- // content is unmounted after specified timeout
- checkDOM(0);
- done();
- }, closeTimeoutMS);
+ setTimeout(
+ () => {
+ // content is unmounted after specified timeout
+ checkDOM(0);
+ done();
+ },
+ closeTimeoutMS
+ );
});
- it('shouldn\'t throw if forcibly unmounted during mounting', () => {
+ it("shouldn't throw if forcibly unmounted during mounting", () => {
/* eslint-disable camelcase, react/prop-types */
class Wrapper extends Component {
- constructor (props) {
+ constructor(props) {
super(props);
this.state = { error: false };
}
- unstable_handleError () {
+ unstable_handleError() {
this.setState({ error: true });
}
- render () {
- return this.state.error ? null : { this.props.children }
;
+ render() {
+ return this.state.error ? null : {this.props.children}
;
}
}
/* eslint-enable camelcase, react/prop-types */
- const Throw = () => { throw new Error('reason'); };
+ const Throw = () => {
+ throw new Error('reason');
+ };
const TestCase = () => (
@@ -375,15 +372,19 @@ describe('State', () => {
}
render() {
- const portalClassName = this.state.testHasChanged === true ?
- 'myPortalClass-modifier' : 'myPortalClass';
+ const portalClassName = this.state.testHasChanged === true
+ ? 'myPortalClass-modifier'
+ : 'myPortalClass';
return (
{ modal = modalComponent; }}
+ ref={modalComponent => {
+ modal = modalComponent;
+ }}
isOpen
- portalClassName={portalClassName}>
+ portalClassName={portalClassName}
+ >
Test
diff --git a/specs/Modal.style.spec.js b/specs/Modal.style.spec.js
index 142a7857..06a1e503 100644
--- a/specs/Modal.style.spec.js
+++ b/specs/Modal.style.spec.js
@@ -2,13 +2,9 @@
import expect from 'expect';
import React from 'react';
import ReactDOM from 'react-dom';
-import TestUtils from 'react-addons-test-utils';
import Modal from '../src/components/Modal';
import * as ariaAppHider from '../src/helpers/ariaAppHider';
-import {
- mcontent, moverlay,
- renderModal, emptyDOM
-} from './helper';
+import { mcontent, moverlay, renderModal, emptyDOM } from './helper';
describe('Style', () => {
afterEach('Unmount modal', emptyDOM);
@@ -18,15 +14,13 @@ describe('Style', () => {
expect(mcontent(modal).style.top).toEqual('');
});
- it('overrides the default styles when a custom overlayClassName is used',
- () => {
- const modal = renderModal({
- isOpen: true,
- overlayClassName: 'myOverlayClass'
- });
- expect(moverlay(modal).style.backgroundColor).toEqual('');
- }
- );
+ it('overrides the default styles when a custom overlayClassName is used', () => {
+ const modal = renderModal({
+ isOpen: true,
+ overlayClassName: 'myOverlayClass'
+ });
+ expect(moverlay(modal).style.backgroundColor).toEqual('');
+ });
it('supports adding style to the modal contents', () => {
const style = { content: { width: '20px' } };
diff --git a/specs/helper.js b/specs/helper.js
index 0d2cffc0..0c608e4e 100644
--- a/specs/helper.js
+++ b/specs/helper.js
@@ -1,16 +1,16 @@
import React from 'react';
import ReactDOM from 'react-dom';
+import TestUtils from 'react-dom/test-utils';
import Modal from '../src/components/Modal';
-import TestUtils from 'react-addons-test-utils';
const divStack = [];
/**
* Polyfill for String.includes on some node versions.
*/
-if (!(String.prototype.hasOwnProperty('includes'))) {
+if (!String.prototype.hasOwnProperty('includes')) {
String.prototype.includes = function(item) {
- return this.length > 0 && this.split(" ").indexOf(item) !== -1;
+ return this.length > 0 && this.split(' ').indexOf(item) !== -1;
};
}
@@ -35,16 +35,15 @@ export const findDOMWithClass = TestUtils.findRenderedDOMComponentWithClass;
* @param {React} component A react instance.
* @return {String}
*/
-const getModalAttribute = component => (instance, attr) =>
- modalComponent(component)(instance).getAttribute(attr);
+const getModalAttribute = component =>
+ (instance, attr) => modalComponent(component)(instance).getAttribute(attr);
/**
* Return an element from a react component.
* @param {React} A react instance.
* @return {DOMElement}
*/
-const modalComponent = component => instance =>
- instance.portal[component];
+const modalComponent = component => instance => instance.portal[component];
/**
* Returns the modal content.
@@ -76,21 +75,32 @@ export const overlayAttribute = getModalAttribute('overlay');
const Simulate = TestUtils.Simulate;
-const dispatchMockEvent = eventCtor => (key, code) => (element, opts) =>
- eventCtor(element, Object.assign({}, {
- key: key, keyCode: code, which: code
- }, opts));
+const dispatchMockEvent = eventCtor =>
+ (key, code) =>
+ (element, opts) =>
+ eventCtor(
+ element,
+ Object.assign(
+ {},
+ {
+ key: key,
+ keyCode: code,
+ which: code
+ },
+ opts
+ )
+ );
const dispatchMockKeyDownEvent = dispatchMockEvent(Simulate.keyDown);
/**
* Dispatch an 'esc' key down event from an element.
*/
-export const escKeyDown = dispatchMockKeyDownEvent("ESC", 27);
+export const escKeyDown = dispatchMockKeyDownEvent('ESC', 27);
/**
* Dispatch a 'tab' key down event from an element.
*/
-export const tabKeyDown = dispatchMockKeyDownEvent("TAB", 9);
+export const tabKeyDown = dispatchMockKeyDownEvent('TAB', 9);
/**
* Dispatch a 'click' event at a node.
*/
@@ -109,9 +119,7 @@ export const renderModal = function(props, children, callback) {
const currentDiv = document.createElement('div');
divStack.push(currentDiv);
document.body.appendChild(currentDiv);
- return ReactDOM.render(
- {children}
- , currentDiv, callback);
+ return ReactDOM.render({children}, currentDiv, callback);
};
export const unmountModal = function() {