mirror of
https://github.com/elyby/accounts-frontend.git
synced 2024-10-02 16:27:15 +05:30
#120: hide active popup on route transition
This commit is contained in:
parent
04a1022011
commit
eb3d436843
@ -1,6 +1,7 @@
|
|||||||
import React, { Component, PropTypes } from 'react';
|
import React, { Component, PropTypes } from 'react';
|
||||||
|
|
||||||
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
|
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
|
||||||
|
import { browserHistory } from 'react-router';
|
||||||
|
|
||||||
import styles from './popup.scss';
|
import styles from './popup.scss';
|
||||||
|
|
||||||
@ -17,10 +18,12 @@ export class PopupStack extends Component {
|
|||||||
|
|
||||||
componentWillMount() {
|
componentWillMount() {
|
||||||
document.addEventListener('keyup', this.onKeyPress);
|
document.addEventListener('keyup', this.onKeyPress);
|
||||||
|
this.unlistenTransition = browserHistory.listenBefore(this.onRouteLeave);
|
||||||
}
|
}
|
||||||
|
|
||||||
componentWillUnmount() {
|
componentWillUnmount() {
|
||||||
document.removeEventListener('keyup', this.onKeyPress);
|
document.removeEventListener('keyup', this.onKeyPress);
|
||||||
|
this.unlistenTransition();
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
@ -68,14 +71,24 @@ export class PopupStack extends Component {
|
|||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
onKeyPress = (event) => {
|
popStack() {
|
||||||
if (event.which === 27) { // ESC key
|
|
||||||
const popup = this.props.popups.slice(-1)[0];
|
const popup = this.props.popups.slice(-1)[0];
|
||||||
|
|
||||||
if (popup && !popup.disableOverlayClose) {
|
if (popup && !popup.disableOverlayClose) {
|
||||||
this.props.destroy(popup);
|
this.props.destroy(popup);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
onKeyPress = (event) => {
|
||||||
|
if (event.which === 27) { // ESC key
|
||||||
|
this.popStack();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
onRouteLeave = (nextLocation) => {
|
||||||
|
if (nextLocation) {
|
||||||
|
this.popStack();
|
||||||
|
}
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -124,7 +124,7 @@ describe('<PopupStack />', () => {
|
|||||||
sinon.assert.calledOnce(props.destroy);
|
sinon.assert.calledOnce(props.destroy);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should hide first popup in stack', () => {
|
it('should hide first popup in stack if esc pressed', () => {
|
||||||
const props = {
|
const props = {
|
||||||
destroy: sinon.stub(),
|
destroy: sinon.stub(),
|
||||||
popups: [
|
popups: [
|
||||||
|
Loading…
Reference in New Issue
Block a user