vitalif
/
react-toolbox
1
0
Fork 0
Code Issues Pull Requests Releases 12 Wiki Activity

Fixing issue where closing an overlay on top of another overlay re-enables document body scrolling unnecessarily.

old
Parmesh Krishen 2016-09-07 16:24:02 -05:00
parent 68e4b53081
commit 1c259ff435
2 changed files with 7 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/overlay/Overlay.js
View File

@ -33,7 +33,7 @@ class Overlay extends Component {
componentWillUpdate (nextProps) {
if (nextProps.active && !this.props.active) document.body.style.overflow = 'hidden';
if (!nextProps.active && this.props.active) document.body.style.overflow = '';
if (!nextProps.active && this.props.active && !document.querySelectorAll('[data-react-toolbox="overlay"]')[1]) document.body.style.overflow = '';
}
componentDidUpdate () {
@ -43,7 +43,7 @@ class Overlay extends Component {
}
componentWillUnmount () {
document.body.style.overflow = '';
if (!document.querySelectorAll('[data-react-toolbox="overlay"]')[1]) document.body.style.overflow = '';
if (this.escKeyListener) {
document.body.removeEventListener('keydown', this.handleEscKey);
this.escKeyListener = null;
@ -65,7 +65,7 @@ class Overlay extends Component {
return (
<Portal>
<div className={_className}>
<div className={_className} data-react-toolbox="overlay">
<div className={theme.backdrop} onClick={onClick} />
{children}
</div>

8
lib/overlay/Overlay.js
View File

@ -39,7 +39,7 @@ var Overlay = function (_Component) {
function Overlay() {
_classCallCheck(this, Overlay);
return _possibleConstructorReturn(this, Object.getPrototypeOf(Overlay).apply(this, arguments));
return _possibleConstructorReturn(this, (Overlay.__proto__ || Object.getPrototypeOf(Overlay)).apply(this, arguments));
}
_createClass(Overlay, [{
@ -54,7 +54,7 @@ var Overlay = function (_Component) {
key: 'componentWillUpdate',
value: function componentWillUpdate(nextProps) {
if (nextProps.active && !this.props.active) document.body.style.overflow = 'hidden';
if (!nextProps.active && this.props.active) document.body.style.overflow = null;
if (!nextProps.active && this.props.active && !document.querySelectorAll('[data-react-toolbox="overlay"]')[1]) document.body.style.overflow = '';
}
}, {
key: 'componentDidUpdate',
@ -66,7 +66,7 @@ var Overlay = function (_Component) {
}, {
key: 'componentWillUnmount',
value: function componentWillUnmount() {
document.body.style.overflow = null;
if (!document.querySelectorAll('[data-react-toolbox="overlay"]')[1]) document.body.style.overflow = '';
if (this.escKeyListener) {
document.body.removeEventListener('keydown', this.handleEscKey);
this.escKeyListener = null;
@ -99,7 +99,7 @@ var Overlay = function (_Component) {
null,
_react2.default.createElement(
'div',
{ className: _className },
{ className: _className, 'data-react-toolbox': 'overlay' },
_react2.default.createElement('div', { className: theme.backdrop, onClick: onClick }),
children
)