Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add className prop for root div inserted into body #135

Closed
wants to merge 9 commits into from
Closed

Add className prop for root div inserted into body #135

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
3677af5
Add className prop for root div inserted into body
dburdick Feb 15, 2017
bad7bda
Just let webpack do its thing
eqyiel Feb 23, 2017
cde7665
Also allow style prop
eqyiel Feb 24, 2017
44a2f51
Merge branch 'master' into esnext
eqyiel Feb 24, 2017
c143114
👁‍🗨
eqyiel Feb 24, 2017
3350e98
Looks like CSSPropertyOperations is needed for this
eqyiel Feb 24, 2017
021c744
Import from react-dom instead?
eqyiel Feb 24, 2017
47fef3c
style prop should be of type object
eqyiel Feb 27, 2017
d467b22
Add ability to set app element like react-modal
eqyiel Feb 28, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 28 additions & 3 deletions lib/portal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,15 @@
import React from 'react';
import CSSPropertyOperations from 'react-dom/lib/CSSPropertyOperations';
import ReactDOM, { findDOMNode } from 'react-dom';
import ExecutionEnvironment from 'exenv';

const KEYCODES = {
ESCAPE: 27,
};

const SafeHTMLElement = ExecutionEnvironment.canUseDOM
? window.HTMLElement : {};

export default class Portal extends React.Component {

constructor() {
Expand Down Expand Up @@ -83,7 +88,7 @@ export default class Portal extends React.Component {
const resetPortalState = () => {
if (this.node) {
ReactDOM.unmountComponentAtNode(this.node);
document.body.removeChild(this.node);
this.props.appElement.removeChild(this.node);
}
this.portal = null;
this.node = null;
Expand Down Expand Up @@ -119,10 +124,26 @@ export default class Portal extends React.Component {
}
}

applyClassNameAndStyle(props) {
if (props.className) {
this.node.className = props.className;
}

if (props.style) {
/* eslint-disable no-underscore-dangle */
CSSPropertyOperations.setValueForStyles(
this.node, props.style, this._reactInternalInstance);
/* eslint-enable no-underscore-dangle */
}
}

renderPortal(props, isOpening) {
if (!this.node) {
this.node = document.createElement('div');
document.body.appendChild(this.node);
this.applyClassNameAndStyle(props);
this.props.appElement.appendChild(this.node);
} else {
this.applyClassNameAndStyle(props);
}

if (isOpening) {
Expand Down Expand Up @@ -152,6 +173,7 @@ export default class Portal extends React.Component {
}

Portal.propTypes = {
appElement: React.PropTypes.instanceOf(SafeHTMLElement),
children: React.PropTypes.element.isRequired,
openByClickOn: React.PropTypes.element,
closeOnEsc: React.PropTypes.bool,
Expand All @@ -170,10 +192,13 @@ Portal.propTypes = {
onClose: React.PropTypes.func,
beforeClose: React.PropTypes.func,
onUpdate: React.PropTypes.func,
className: React.PropTypes.string,
style: React.PropTypes.object,
};

Portal.defaultProps = {
onOpen: () => {},
appElement: document.body,
onClose: () => {},
onOpen: () => {},
onUpdate: () => {},
};
6 changes: 4 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"name": "react-portal",
"version": "3.0.0",
"description": "React component for transportation of modals, lightboxes, loading bars... to document.body",
"main": "build/portal",
"main": "lib/portal",
"files": [
"*.md",
"LICENSE",
Expand Down Expand Up @@ -54,8 +54,10 @@
"eslint-plugin-import": "^1.8.0",
"eslint-plugin-jsx-a11y": "^1.2.0",
"eslint-plugin-react": "^5.1.1",
"exenv": "^1.2.1",
"express": "^4.13.3",
"jsdom": "^9.0.0",
"jsdom": "^9.11.0",
"jsdom-global": "^2.1.1",
"mocha": "^2.3.4",
"mocha-eslint": "^2.0.2",
"react": "^15.2.0",
Expand Down
3 changes: 2 additions & 1 deletion test/mocha.opts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
--compilers js:babel-register
--require ./test/mocha.js
--require jsdom-global/register
--require ./test/mocha.js
138 changes: 99 additions & 39 deletions test/portal_spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,9 @@ describe('react-portal', () => {
global.document = jsdom.jsdom('<!doctype html><html><body></body></html>');
global.window = document.defaultView;
global.navigator = { userAgent: 'node.js' };
const appElement = document.createElement('div');
appElement.setAttribute('id', 'app');
global.document.body.appendChild(appElement);
// Enzyme library uses React
/*eslint-disable */
React = require('react');
Expand All @@ -29,35 +32,51 @@ describe('react-portal', () => {
/*eslint-enable */
});

it('should append portal with children to the document.body', () => {
const wrapper = mount(<Portal isOpen><p>Hi</p></Portal>);
it('should append portal with children to the appElement prop', () => {
const appElement = document.getElementById('app');
const wrapper = mount(
<Portal isOpen appElement={appElement}>
<p>Hi</p>
</Portal>
);
assert.equal(wrapper.instance().node.firstElementChild.tagName, 'P');
assert.equal(document.body.lastElementChild, wrapper.instance().node);
assert.equal(document.body.childElementCount, 1);
assert.equal(appElement.lastElementChild, wrapper.instance().node);
assert.equal(appElement.childElementCount, 1);
});

it('should open when this.openPortal() is called (used to programmatically open portal)', () => {
const wrapper = mount(<Portal><p>Hi</p></Portal>);
assert.equal(document.body.childElementCount, 0);
const appElement = document.getElementById('app');
const wrapper = mount(<Portal appElement={appElement}><p>Hi</p></Portal>);
assert.equal(appElement.childElementCount, 0);
wrapper.instance().openPortal();
assert.equal(wrapper.instance().node.firstElementChild.tagName, 'P');
});

it('when props.isOpen is false and then set to true should open portal', () => {
const wrapper = mount(<Portal isOpen={false}><p>Hi</p></Portal>);
assert.equal(document.body.childElementCount, 0);
const appElement = document.getElementById('app');
const wrapper = mount(
<Portal isOpen={false} appElement={appElement}>
<p>Hi</p>
</Portal>
);
assert.equal(appElement.childElementCount, 0);
// Enzyme docs say it merges previous props but without children, react complains
wrapper.setProps({ isOpen: true, children: <p>Hi</p> });
assert.equal(document.body.lastElementChild, wrapper.instance().node);
assert.equal(document.body.childElementCount, 1);
wrapper.setProps({ isOpen: true, children: <p>Hi</p>, appElement });
assert.equal(appElement.lastElementChild, wrapper.instance().node);
assert.equal(wrapper.instance().node.firstElementChild.tagName, 'P');
});

it('when props.isOpen is true and then set to false should close portal', () => {
const wrapper = mount(<Portal isOpen><p>Hi</p></Portal>);
assert.equal(document.body.lastElementChild, wrapper.instance().node);
assert.equal(document.body.childElementCount, 1);
wrapper.setProps({ isOpen: false, children: <p>Hi</p> });
assert.equal(document.body.childElementCount, 0);
const appElement = document.getElementById('app');
const wrapper = mount(
<Portal isOpen appElement={appElement}>
<p>Hi</p>
</Portal>
);
assert.equal(appElement.lastElementChild, wrapper.instance().node);
assert.equal(appElement.childElementCount, 1);
wrapper.setProps({ isOpen: false, children: <p>Hi</p>, appElement });
assert.equal(appElement.childElementCount, 0);
});

it('should pass Portal.closePortal to child component', () => {
Expand All @@ -72,27 +91,48 @@ describe('react-portal', () => {
assert.equal(closePortal, wrapper.instance().closePortal);
});

// style & className were removed in 3.0
it('should not add className to the portal\'s wrapper', () => {
mount(<Portal className="some-class" isOpen><p>Hi</p></Portal>);
assert.notEqual(document.body.lastElementChild.className, 'some-class');
it('should add className to the portal\'s wrapper', () => {
const appElement = global.document.body;
mount(
<Portal isOpen appElement={appElement} className="some-class">
<p>Hi</p>
</Portal>
);
assert.equal(appElement.lastElementChild.className, 'some-class');
});

it('should not add inline style to the portal\'s wrapper', () => {
mount(<Portal isOpen style={{ color: 'blue' }}><p>Hi</p></Portal>);
assert.notEqual(document.body.lastElementChild.style.color, 'blue');
it('should add inline style to the portal\'s wrapper', () => {
const appElement = document.getElementById('app');
mount(
<Portal isOpen style={{ color: 'blue' }} appElement={appElement}>
<p>Hi</p>
</Portal>
);
assert.equal(appElement.lastElementChild.style.color, 'blue');
});

it('should not update className on the portal\'s wrapper when props.className changes', () => {
const wrapper = mount(<Portal className="some-class" isOpen><p>Hi</p></Portal>);
it('should update className on the portal\'s wrapper when props.className changes', () => {
const appElement = document.getElementById('app');
const wrapper = mount(
<Portal className="some-class" isOpen appElement={appElement}>
<p>Hi</p>
</Portal>
);
assert.equal(appElement.lastElementChild.className, 'some-class');
wrapper.setProps({ className: 'some-other-class', children: <p>Hi</p> });
assert.notEqual(document.body.lastElementChild.className, 'some-other-class');
assert.equal(appElement.lastElementChild.className, 'some-other-class');
});

it('should not update inline style on the portal\'s wrapper when props.style changes', () => {
const wrapper = mount(<Portal isOpen style={{ color: 'blue' }}><p>Hi</p></Portal>);
it('should update inline style on the portal\'s wrapper when props.style changes', () => {
const appElement = document.getElementById('app');
const wrapper = mount(
<Portal isOpen style={{ color: 'blue' }} appElement={appElement}>
<p>Hi</p>
</Portal>
);
assert.equal(appElement.lastElementChild.style.color, 'blue');
wrapper.setProps({ style: { color: 'red' }, children: <p>Hi</p> });
assert.notEqual(document.body.lastElementChild.style.color, 'red');
assert.equal(appElement.lastElementChild.style.color, 'red');
});

describe('callbacks', () => {
Expand Down Expand Up @@ -199,43 +239,63 @@ describe('react-portal', () => {
});

it('should open portal when clicking openByClickOn element', () => {
const appElement = document.getElementById('app');
const openByClickOn = <button>button</button>;
const wrapper = mount(<Portal openByClickOn={openByClickOn}><p>Hi</p></Portal>);
const wrapper = mount(
<Portal appElement={appElement} openByClickOn={openByClickOn}>
<p>Hi</p>
</Portal>
);
wrapper.find('button').simulate('click');
assert.equal(document.body.lastElementChild, wrapper.instance().node);
assert.equal(appElement.lastElementChild, wrapper.instance().node);
});
});

describe('close actions', () => {
it('Portal.closePortal()', () => {
const wrapper = mount(<Portal isOpen><p>Hi</p></Portal>);
const appElement = document.getElementById('app');
const wrapper = mount(
<Portal isOpen appElement={appElement}>
<p>Hi</p>
</Portal>
);
wrapper.instance().closePortal();
assert.equal(document.body.childElementCount, 0);
assert.equal(appElement.childElementCount, 0);
});

it('closeOnEsc', () => {
mount(<Portal closeOnEsc isOpen><p>Hi</p></Portal>);
const appElement = document.getElementById('app');
mount(
<Portal closeOnEsc isOpen appElement={appElement}>
<p>Hi</p>
</Portal>
);
assert.equal(document.body.childElementCount, 1);
// Had to use actual event since simulating wasn't working due to subtree
// rendering and actual component returns null
const kbEvent = new window.KeyboardEvent('keydown', { keyCode: 27 });
document.dispatchEvent(kbEvent);
assert.equal(document.body.childElementCount, 0);
assert.equal(appElement.childElementCount, 0);
});

it('closeOnOutsideClick', () => {
mount(<Portal closeOnOutsideClick isOpen><p>Hi</p></Portal>);
assert.equal(document.body.childElementCount, 1);
const appElement = document.getElementById('app');
mount(
<Portal closeOnOutsideClick isOpen appElement={appElement}>
<p>Hi</p>
</Portal>
);
assert.equal(appElement.childElementCount, 1);

// Should not close when outside click isn't a main click
const rightClickMouseEvent = new window.MouseEvent('mouseup', { view: window, button: 2 });
document.dispatchEvent(rightClickMouseEvent);
assert.equal(document.body.childElementCount, 1);
assert.equal(appElement.childElementCount, 1);

// Should close when outside click is a main click (typically left button click)
const leftClickMouseEvent = new window.MouseEvent('mouseup', { view: window, button: 0 });
document.dispatchEvent(leftClickMouseEvent);
assert.equal(document.body.childElementCount, 0);
assert.equal(appElement.childElementCount, 0);
});
});
});
Loading