ElyBy-Mirror/accounts-frontend
1
0
Fork 0
mirror of https://github.com/elyby/accounts-frontend.git synced 2024-07-03 05:25:41 +05:30
Code Issues Packages Projects Releases Wiki Activity

#120: hide active popup on route transition

Browse Source
This commit is contained in:
SleepWalker 2016-07-26 22:28:58 +03:00
parent 04a1022011
commit eb3d436843
2 changed files with 18 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/ui/popup/PopupStack.jsx
View File

@ -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,13 +71,23 @@ export class PopupStack extends Component {
}; };
} }
popStack() {
const popup = this.props.popups.slice(-1)[0];
if (popup && !popup.disableOverlayClose) {
this.props.destroy(popup);
}
}
onKeyPress = (event) => { onKeyPress = (event) => {
if (event.which === 27) { // ESC key if (event.which === 27) { // ESC key
const popup = this.props.popups.slice(-1)[0]; this.popStack();
}
};
if (popup && !popup.disableOverlayClose) { onRouteLeave = (nextLocation) => {
this.props.destroy(popup); if (nextLocation) {
} this.popStack();
} }
}; };
} }

2
tests/components/ui/popup/PopupStack.test.jsx
View File

@ -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: [