#120: hide popup on esc key press

src/components/ui/popup/PopupStack.jsx

@@ -15,6 +15,14 @@ export class PopupStack extends Component {
         destroy: PropTypes.func.isRequired
     };
 
+    componentWillMount() {
+        document.addEventListener('keyup', this.onKeyPress);
+    }
+
+    componentWillUnmount() {
+        document.removeEventListener('keyup', this.onKeyPress);
+    }
+
     render() {
         const {popups} = this.props;
 
@@ -59,6 +67,16 @@ export class PopupStack extends Component {
             this.props.destroy(popup);
         };
     }
+
+    onKeyPress = (event) => {
+        if (event.which === 27) { // ESC key
+            const popup = this.props.popups.slice(-1)[0];
+
+            if (popup && !popup.disableOverlayClose) {
+                this.props.destroy(popup);
+            }
+        }
+    };
 }
 
 import { connect } from 'react-redux';

tests/components/ui/popup/PopupStack.test.jsx

@@ -105,4 +105,63 @@ describe('<PopupStack />', () => {
 
         sinon.assert.notCalled(props.destroy);
     });
+
+    it('should hide popup, when esc pressed', () => {
+        const props = {
+            destroy: sinon.stub(),
+            popups: [
+                {
+                    Popup: DummyPopup
+                }
+            ]
+        };
+        mount(<PopupStack {...props} />);
+
+        const event = new Event('keyup');
+        event.which = 27;
+        document.dispatchEvent(event);
+
+        sinon.assert.calledOnce(props.destroy);
+    });
+
+    it('should hide first popup in stack', () => {
+        const props = {
+            destroy: sinon.stub(),
+            popups: [
+                {
+                    Popup() {return null;}
+                },
+                {
+                    Popup: DummyPopup
+                }
+            ]
+        };
+        mount(<PopupStack {...props} />);
+
+        const event = new Event('keyup');
+        event.which = 27;
+        document.dispatchEvent(event);
+
+        sinon.assert.calledOnce(props.destroy);
+        sinon.assert.calledWithExactly(props.destroy, props.popups[1]);
+    });
+
+    it('should NOT hide popup on esc pressed if disableOverlayClose', () => {
+        const props = {
+            destroy: sinon.stub(),
+            popups: [
+                {
+                    Popup: DummyPopup,
+                    disableOverlayClose: true
+                }
+            ]
+        };
+        mount(<PopupStack {...props} />);
+
+        const event = new Event('keyup');
+        event.which = 27;
+        document.dispatchEvent(event);
+
+        sinon.assert.notCalled(props.destroy);
+    });
 });