react-modal
Advanced tools
Comparing version 1.5.2 to 1.6.0
@@ -0,1 +1,8 @@ | ||
v1.6.0 - Tue, 06 Dec 2016 15:09:25 GMT | ||
-------------------------------------- | ||
- [de14816](../../commit/de14816) [added] Ability for modal to be appended to arbitrary elements (#183) | ||
- [3d8e5a0](../../commit/3d8e5a0) [added] Add contentLabel prop to put aria-label on modal content | ||
v1.5.2 - Sat, 08 Oct 2016 14:29:09 GMT | ||
@@ -2,0 +9,0 @@ -------------------------------------- |
@@ -13,2 +13,6 @@ var React = require('react'); | ||
function getParentElement(parentSelector) { | ||
return parentSelector(); | ||
} | ||
var Modal = React.createClass({ | ||
@@ -41,3 +45,5 @@ | ||
shouldCloseOnOverlayClick: React.PropTypes.bool, | ||
role: React.PropTypes.string | ||
parentSelector: React.PropTypes.func, | ||
role: React.PropTypes.string, | ||
contentLabel: React.PropTypes.string.isRequired | ||
}, | ||
@@ -51,3 +57,4 @@ | ||
closeTimeoutMS: 0, | ||
shouldCloseOnOverlayClick: true | ||
shouldCloseOnOverlayClick: true, | ||
parentSelector: () => document.body | ||
}; | ||
@@ -59,3 +66,5 @@ }, | ||
this.node.className = this.props.portalClassName; | ||
document.body.appendChild(this.node); | ||
var parent = getParentElement(this.props.parentSelector); | ||
parent.appendChild(this.node); | ||
this.renderPortal(this.props); | ||
@@ -65,2 +74,10 @@ }, | ||
componentWillReceiveProps: function(newProps) { | ||
var currentParent = getParentElement(this.props.parentSelector); | ||
var newParent = getParentElement(newProps.parentSelector); | ||
if(newParent !== currentParent) { | ||
currentParent.removeChild(this.node); | ||
newParent.appendChild(this.node); | ||
} | ||
this.renderPortal(newProps); | ||
@@ -70,4 +87,9 @@ }, | ||
componentWillUnmount: function() { | ||
if (this.props.ariaHideApp) { | ||
ariaAppHider.show(this.props.appElement); | ||
} | ||
ReactDOM.unmountComponentAtNode(this.node); | ||
document.body.removeChild(this.node); | ||
var parent = getParentElement(this.props.parentSelector); | ||
parent.removeChild(this.node); | ||
elementClass(document.body).remove('ReactModal__Body--open'); | ||
@@ -74,0 +96,0 @@ }, |
@@ -205,3 +205,4 @@ var React = require('react'); | ||
onMouseUp: this.handleContentMouseUp, | ||
role: this.props.role | ||
role: this.props.role, | ||
"aria-label": this.props.contentLabel | ||
}, | ||
@@ -208,0 +209,0 @@ this.props.children |
{ | ||
"name": "react-modal", | ||
"version": "1.5.2", | ||
"version": "1.6.0", | ||
"description": "Accessible modal dialog component for React.JS", | ||
@@ -5,0 +5,0 @@ "main": "./lib/index", |
@@ -22,2 +22,3 @@ # react-modal | ||
style={customStyle} | ||
contentLabel="Modal" | ||
> | ||
@@ -76,2 +77,33 @@ <h1>Modal Content</h1> | ||
### Appended to custom node | ||
You can choose an element for the modal to be appended to, rather than using | ||
body tag. To do this, provide a function to `parentSelector` prop that return | ||
the element to be used. | ||
```jsx | ||
function getParent() { | ||
return document.querySelector('#root'); | ||
} | ||
<Modal | ||
... | ||
parentSelector={getParent} | ||
... | ||
> | ||
<p>Modal Content.</p> | ||
</Modal> | ||
``` | ||
### Body class | ||
When the modal is opened a `ReactModal__Body--open` class is added to the `body` tag. | ||
You can use this to remove scrolling on the the body while the modal is open. | ||
```CSS | ||
/* Remove scroll on the body when react-modal is open */ | ||
.ReactModal__Body--open { | ||
overflow: hidden; | ||
} | ||
``` | ||
## Examples | ||
@@ -141,3 +173,5 @@ Inside an app: | ||
onRequestClose={this.closeModal} | ||
style={customStyles} > | ||
style={customStyles} | ||
contentLabel="Example Modal" | ||
> | ||
@@ -177,3 +211,5 @@ <h2 ref="subtitle">Hello</h2> | ||
shouldCloseOnOverlayClick={false} | ||
style={customStyle}> | ||
style={customStyle} | ||
contentLabel="No Overlay Click Modal" | ||
> | ||
@@ -180,0 +216,0 @@ <h1>Force Modal</h1> |
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
Deprecated
MaintenanceThe maintainer of the package marked it as deprecated. This could indicate that a single version should not be used, or that the package is no longer maintained and any new vulnerabilities will not be fixed.
Found 1 instance in 1 package
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
2364
221
106359
28
1