react-portal
Advanced tools
react-portal - npm Package Compare versions
Comparing version 1.5.5 to 1.6.0
@@ -46,3 +46,3 @@ 'use strict'; | ||
| _this.state = { active: false }; | ||
| _this.openPortal = _this.openPortal.bind(_this); | ||
| _this.handleWrapperClick = _this.handleWrapperClick.bind(_this); | ||
| _this.closePortal = _this.closePortal.bind(_this); | ||
@@ -69,3 +69,3 @@ _this.handleOutsideMouseClick = _this.handleOutsideMouseClick.bind(_this); | ||
| if (this.props.isOpened) { | ||
| this.openPortal(this.props); | ||
| this.openPortal(); | ||
| } | ||
@@ -107,3 +107,5 @@ } | ||
| this.closePortal(); | ||
| if (this.state.active) { | ||
| this.closePortal(); | ||
| } | ||
| } | ||
@@ -136,3 +138,3 @@ }, { | ||
| 'div', | ||
| { className: 'openByClickOn', onClick: this.openPortal.bind(this, this.props) }, | ||
| { className: 'openByClickOn', onClick: this.handleWrapperClick }, | ||
| this.props.openByClickOn | ||
@@ -145,8 +147,13 @@ ); | ||
| }, { | ||
| key: 'handleWrapperClick', | ||
| value: function handleWrapperClick(e) { | ||
| e.preventDefault(); | ||
| e.stopPropagation(); | ||
| this.openPortal(); | ||
| } | ||
| }, { | ||
| key: 'openPortal', | ||
| value: function openPortal(props, e) { | ||
| if (e) { | ||
| e.preventDefault(); | ||
| e.stopPropagation(); | ||
| } | ||
| value: function openPortal() { | ||
| var props = arguments.length <= 0 || arguments[0] === undefined ? this.props : arguments[0]; | ||
| this.setState({ active: true }); | ||
@@ -153,0 +160,0 @@ this.renderPortal(props); |
@@ -15,3 +15,3 @@ import React from 'react'; | ||
| this.state = {active: false}; | ||
| this.openPortal = this.openPortal.bind(this); | ||
| this.handleWrapperClick = this.handleWrapperClick.bind(this); | ||
| this.closePortal = this.closePortal.bind(this); | ||
@@ -35,3 +35,3 @@ this.handleOutsideMouseClick = this.handleOutsideMouseClick.bind(this); | ||
| if (this.props.isOpened) { | ||
| this.openPortal(this.props); | ||
| this.openPortal(); | ||
| } | ||
@@ -71,3 +71,5 @@ } | ||
| this.closePortal(); | ||
| if (this.state.active) { | ||
| this.closePortal(); | ||
| } | ||
| } | ||
@@ -95,3 +97,3 @@ | ||
| if (this.props.openByClickOn) { | ||
| return <div className="openByClickOn" onClick={this.openPortal.bind(this, this.props)}>{this.props.openByClickOn}</div>; | ||
| return <div className="openByClickOn" onClick={this.handleWrapperClick}>{this.props.openByClickOn}</div>; | ||
| } else { | ||
@@ -102,7 +104,9 @@ return null; | ||
| openPortal(props, e) { | ||
| if (e) { | ||
| e.preventDefault(); | ||
| e.stopPropagation(); | ||
| } | ||
| handleWrapperClick(e) { | ||
| e.preventDefault(); | ||
| e.stopPropagation(); | ||
| this.openPortal(); | ||
| } | ||
| openPortal(props = this.props) { | ||
| this.setState({active: true}); | ||
@@ -109,0 +113,0 @@ this.renderPortal(props); |
| { | ||
| "name": "react-portal", | ||
| "version": "1.5.5", | ||
| "version": "1.6.0", | ||
| "description": "React component for transportation of modals, lightboxes, loading bars... to document.body", | ||
@@ -5,0 +5,0 @@ "main": "build/portal", |
@@ -42,3 +42,3 @@ React-portal | ||
| ## Usage | ||
| ```javascript | ||
| ```jsx | ||
| import React from 'react'; | ||
@@ -121,3 +121,3 @@ import ReactDOM from 'react-dom'; | ||
| ```js | ||
| ```jsx | ||
| <Portal> | ||
@@ -132,3 +132,3 @@ <LevelOne> | ||
| ```js | ||
| ```jsx | ||
| {React.cloneElement( | ||
@@ -140,11 +140,10 @@ this.props.children, | ||
| #### Don't read this | ||
| Please, skip this section if you dislike dirty tricks. | ||
| #### Open modal programmatically | ||
| **States make everything harder, right?** We don't want to deal with them, right? But sometime you need to open a portal (e.g. modal) automatically. There is no button to click on. No problem, because the portal has the `isOpen` prop, so you can just set it `true` or `false`. | ||
| Sometimes you need to open your portal (e.g. modal) automatically. There is no button to click on. No problem, because the portal has the `isOpen` prop, so you can just set it to `true` or `false`. However, then it's completely up to you to take care about the portal closing (ESC, outside click, no `this.props.closePortal` callback...). | ||
| However, then it's completely up to you to take care about the open state. You have to write all the closing logic! And that sucks. But there is a dirty trick: | ||
| However, there is a nice trick how to make this happen even without `isOpen`: | ||
| ```javascript | ||
| <Portal openByClickOn={<span ref="myLittleSecret" />}> | ||
| ```jsx | ||
| <Portal ref="myPortal"> | ||
| <Modal title="My modal"> | ||
@@ -156,9 +155,7 @@ Modal content | ||
| ```javascript | ||
| ReactDOM.findDOMNode(this.refs.myLittleSecret).click(); | ||
| ```jsx | ||
| this.refs.myPortal.openPortal() | ||
| // opens the portal, yay! | ||
| ``` | ||
| I'll end up in hell. I know. | ||
| ## Contribution | ||
@@ -165,0 +162,0 @@ |
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.02%
1658603
- Lines of code
- increased by2.74%
337
- Number of medium supply chain risk alerts
- decreased by-100%
0
Worsened metrics
- Number of lines in readme file
- decreased by-1.63%
181