react-portal
Advanced tools
Comparing version
@@ -94,2 +94,7 @@ 'use strict'; | ||
}, { | ||
key: 'shouldComponentUpdate', | ||
value: function shouldComponentUpdate(nextProps, nextState) { | ||
return (0, _shallowCompare2.default)(this, nextProps, nextState); | ||
} | ||
}, { | ||
key: 'componentWillUnmount', | ||
@@ -109,31 +114,2 @@ value: function componentWillUnmount() { | ||
}, { | ||
key: 'shouldComponentUpdate', | ||
value: function shouldComponentUpdate(nextProps, nextState) { | ||
return (0, _shallowCompare2.default)(this, nextProps, nextState); | ||
} | ||
}, { | ||
key: 'renderPortal', | ||
value: function renderPortal(props) { | ||
if (!this.node) { | ||
this.node = document.createElement('div'); | ||
if (props.className) { | ||
this.node.className = props.className; | ||
} | ||
if (props.style) { | ||
_CSSPropertyOperations2.default.setValueForStyles(this.node, props.style); | ||
} | ||
document.body.appendChild(this.node); | ||
} | ||
this.portal = _reactDom2.default.unstable_renderSubtreeIntoContainer(this, _react2.default.cloneElement(props.children, { closePortal: this.closePortal }), this.node, this.props.onUpdate); | ||
} | ||
}, { | ||
key: 'render', | ||
value: function render() { | ||
if (this.props.openByClickOn) { | ||
return _react2.default.cloneElement(this.props.openByClickOn, { onClick: this.handleWrapperClick }); | ||
} else { | ||
return null; | ||
} | ||
} | ||
}, { | ||
key: 'handleWrapperClick', | ||
@@ -155,3 +131,2 @@ value: function handleWrapperClick(e) { | ||
this.renderPortal(props); | ||
this.props.onOpen(this.node); | ||
@@ -210,2 +185,28 @@ } | ||
} | ||
}, { | ||
key: 'renderPortal', | ||
value: function renderPortal(props) { | ||
if (!this.node) { | ||
this.node = document.createElement('div'); | ||
if (props.className) { | ||
this.node.className = props.className; | ||
} | ||
if (props.style) { | ||
// React 15.1.0+ requires third parameter in debug mode | ||
/* eslint-disable no-underscore-dangle */ | ||
_CSSPropertyOperations2.default.setValueForStyles(this.node, props.style, this._reactInternalInstance); | ||
/* eslint-enable no-underscore-dangle */ | ||
} | ||
document.body.appendChild(this.node); | ||
} | ||
this.portal = _reactDom2.default.unstable_renderSubtreeIntoContainer(this, _react2.default.cloneElement(props.children, { closePortal: this.closePortal }), this.node, this.props.onUpdate); | ||
} | ||
}, { | ||
key: 'render', | ||
value: function render() { | ||
if (this.props.openByClickOn) { | ||
return _react2.default.cloneElement(this.props.openByClickOn, { onClick: this.handleWrapperClick }); | ||
} | ||
return null; | ||
} | ||
}]); | ||
@@ -212,0 +213,0 @@ |
import React from 'react'; | ||
import ReactDOM, {findDOMNode} from 'react-dom'; | ||
import ReactDOM, { findDOMNode } from 'react-dom'; | ||
import CSSPropertyOperations from 'react/lib/CSSPropertyOperations'; | ||
@@ -7,3 +7,3 @@ import shallowCompare from 'react/lib/shallowCompare'; | ||
const KEYCODES = { | ||
ESCAPE: 27 | ||
ESCAPE: 27, | ||
}; | ||
@@ -15,3 +15,3 @@ | ||
super(); | ||
this.state = {active: false}; | ||
this.state = { active: false }; | ||
this.handleWrapperClick = this.handleWrapperClick.bind(this); | ||
@@ -61,2 +61,6 @@ this.closePortal = this.closePortal.bind(this); | ||
shouldComponentUpdate(nextProps, nextState) { | ||
return shallowCompare(this, nextProps, nextState); | ||
} | ||
componentWillUnmount() { | ||
@@ -75,28 +79,2 @@ if (this.props.closeOnEsc) { | ||
shouldComponentUpdate(nextProps, nextState) { | ||
return shallowCompare(this, nextProps, nextState); | ||
} | ||
renderPortal(props) { | ||
if (!this.node) { | ||
this.node = document.createElement('div'); | ||
if (props.className) { | ||
this.node.className = props.className; | ||
} | ||
if (props.style) { | ||
CSSPropertyOperations.setValueForStyles(this.node, props.style); | ||
} | ||
document.body.appendChild(this.node); | ||
} | ||
this.portal = ReactDOM.unstable_renderSubtreeIntoContainer(this, React.cloneElement(props.children, {closePortal: this.closePortal}), this.node, this.props.onUpdate); | ||
} | ||
render() { | ||
if (this.props.openByClickOn) { | ||
return React.cloneElement(this.props.openByClickOn, {onClick: this.handleWrapperClick}); | ||
} else { | ||
return null; | ||
} | ||
} | ||
handleWrapperClick(e) { | ||
@@ -110,5 +88,4 @@ e.preventDefault(); | ||
openPortal(props = this.props) { | ||
this.setState({active: true}); | ||
this.setState({ active: true }); | ||
this.renderPortal(props); | ||
this.props.onOpen(this.node); | ||
@@ -126,3 +103,3 @@ } | ||
if (isUnmounted !== true) { | ||
this.setState({active: false}); | ||
this.setState({ active: false }); | ||
} | ||
@@ -158,2 +135,32 @@ }; | ||
renderPortal(props) { | ||
if (!this.node) { | ||
this.node = document.createElement('div'); | ||
if (props.className) { | ||
this.node.className = props.className; | ||
} | ||
if (props.style) { | ||
// React 15.1.0+ requires third parameter in debug mode | ||
/* eslint-disable no-underscore-dangle */ | ||
CSSPropertyOperations.setValueForStyles(this.node, | ||
props.style, | ||
this._reactInternalInstance); | ||
/* eslint-enable no-underscore-dangle */ | ||
} | ||
document.body.appendChild(this.node); | ||
} | ||
this.portal = ReactDOM.unstable_renderSubtreeIntoContainer( | ||
this, | ||
React.cloneElement(props.children, { closePortal: this.closePortal }), | ||
this.node, | ||
this.props.onUpdate | ||
); | ||
} | ||
render() { | ||
if (this.props.openByClickOn) { | ||
return React.cloneElement(this.props.openByClickOn, { onClick: this.handleWrapperClick }); | ||
} | ||
return null; | ||
} | ||
} | ||
@@ -172,3 +179,3 @@ | ||
beforeClose: React.PropTypes.func, | ||
onUpdate: React.PropTypes.func | ||
onUpdate: React.PropTypes.func, | ||
}; | ||
@@ -179,3 +186,3 @@ | ||
onClose: () => {}, | ||
onUpdate: () => {} | ||
onUpdate: () => {}, | ||
}; |
{ | ||
"name": "react-portal", | ||
"version": "2.1.3", | ||
"version": "2.1.4", | ||
"description": "React component for transportation of modals, lightboxes, loading bars... to document.body", | ||
@@ -19,6 +19,6 @@ "main": "build/portal", | ||
"scripts": { | ||
"start": "node devServer.js", | ||
"start": "node devServerIndex.js", | ||
"build": "mkdir -p build && babel ./lib/portal.js --out-file ./build/portal.js", | ||
"build:examples": "npm run clean && npm run build:examples:webpack", | ||
"build:examples:webpack": "cross-env NODE_ENV=production webpack --config webpack.config.prod.js", | ||
"build:examples:webpack": "cross-env NODE_ENV=production webpack --config webpack.config.prod.babel.js", | ||
"clean": "rimraf build", | ||
@@ -42,29 +42,32 @@ "test": "mocha", | ||
"devDependencies": { | ||
"babel-cli": "^6.4.0", | ||
"babel-core": "^6.4.0", | ||
"babel-eslint": "^4.1.6", | ||
"babel-cli": "^6.8.0", | ||
"babel-core": "^6.8.0", | ||
"babel-eslint": "^6.0.4", | ||
"babel-loader": "^6.2.1", | ||
"babel-plugin-add-module-exports": "^0.1.2", | ||
"babel-plugin-add-module-exports": "^0.2.1", | ||
"babel-preset-es2015": "^6.3.13", | ||
"babel-preset-react": "^6.3.13", | ||
"babel-preset-react-hmre": "^1.0.1", | ||
"babel-register": "^6.3.13", | ||
"babel-register": "^6.8.0", | ||
"cross-env": "^1.0.7", | ||
"enzyme": "^2.2.0", | ||
"eslint": "^1.10.3", | ||
"eslint-plugin-react": "^3.14.0", | ||
"enzyme": "^2.3.0", | ||
"eslint": "^2.9.0", | ||
"eslint-config-airbnb": "^9.0.1", | ||
"eslint-plugin-import": "^1.8.0", | ||
"eslint-plugin-jsx-a11y": "^1.2.0", | ||
"eslint-plugin-react": "^5.1.1", | ||
"express": "^4.13.3", | ||
"jsdom": "^7.2.2", | ||
"jsdom": "^9.0.0", | ||
"mocha": "^2.3.4", | ||
"mocha-eslint": "^1.0.0", | ||
"react": "^15.0.1", | ||
"react-addons-test-utils": "^15.0.1", | ||
"react-dom": "^15.0.1", | ||
"mocha-eslint": "^2.0.2", | ||
"react": "^15.1.0", | ||
"react-addons-test-utils": "^15.1.0", | ||
"react-dom": "^15.1.0", | ||
"rimraf": "^2.5.0", | ||
"sinon": "^1.17.2", | ||
"sinon": "^1.17.4", | ||
"tween.js": "^16.3.1", | ||
"webpack": "^1.12.11", | ||
"webpack-dev-middleware": "^1.4.0", | ||
"webpack": "^1.13.0", | ||
"webpack-dev-middleware": "^1.6.1", | ||
"webpack-hot-middleware": "^2.6.0" | ||
} | ||
} |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
1850292
0.4%983
1.24%29
11.54%