add mousetrap for keyboard shortcut

sulu · Aug 29, 2017 · e6753cb · e6753cb
1 parent 273688e
commit e6753cb
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 6 deletions.
diff --git a/src/Sulu/Bundle/AdminBundle/Resources/js/components/Overlay/Overlay.js b/src/Sulu/Bundle/AdminBundle/Resources/js/components/Overlay/Overlay.js
@@ -1,10 +1,11 @@
 // @flow
-import React from 'react';
-import type {Node} from 'react';
+import classNames from 'classnames';
+import Mousetrap from 'mousetrap';
 import {observable, action} from 'mobx';
 import {observer} from 'mobx-react';
+import type {Node} from 'react';
+import React from 'react';
 import Portal from 'react-portal';
-import classNames from 'classnames';
 import Icon from '../Icon';
 import {afterElementsRendered} from '../../services/DOM';
 import Backdrop from '../Backdrop';
@@ -35,9 +36,14 @@ export default class Overlay extends React.PureComponent<Props> {
     @observable isOpenHasChanged: boolean = false;
 
     @action componentWillMount() {
+        Mousetrap.bind('esc', this.close);
         this.isOpenHasChanged = this.props.isOpen;
     }
 
+    componentWillUnmount() {
+        Mousetrap.unbind('esc', this.close);
+    }
+
     componentDidMount() {
         this.toggle();
     }
@@ -50,9 +56,9 @@ export default class Overlay extends React.PureComponent<Props> {
         this.toggle();
     }
 
-    close() {
+    close = () => {
         this.props.onRequestClose();
-    }
+    };
 
     @action toggle() {
         afterElementsRendered(action(() => {

diff --git a/src/Sulu/Bundle/AdminBundle/Resources/js/components/Overlay/tests/Overlay.test.js b/src/Sulu/Bundle/AdminBundle/Resources/js/components/Overlay/tests/Overlay.test.js
@@ -1,5 +1,6 @@
 /* eslint-disable flowtype/require-valid-file-annotation */
 import {mount, shallow} from 'enzyme';
+import Mousetrap from 'mousetrap';
 import React from 'react';
 import pretty from 'pretty';
 import Overlay from '../Overlay';
@@ -97,6 +98,23 @@ test('The component should request to be closed when the close icon is clicked',
     expect(requestCloseSpy).toBeCalled();
 });
 
+test('The component should request to be closed when the esc key is pressed', () => {
+    const requestCloseSpy = jest.fn();
+    mount(
+        <Overlay
+            title="My overlay title"
+            onRequestClose={requestCloseSpy}
+            confirmText="Apply"
+            isOpen={true}>
+            <p>My overlay content</p>
+        </Overlay>
+    );
+
+    expect(requestCloseSpy).not.toBeCalled();
+    Mousetrap.trigger('esc');
+    expect(requestCloseSpy).toBeCalled();
+});
+
 test('The component should call the callback when the confirm button is clicked', () => {
     const onRequestClose = () => {};
     const onConfirm = jest.fn();

diff --git a/src/Sulu/Bundle/AdminBundle/Resources/js/package.json b/src/Sulu/Bundle/AdminBundle/Resources/js/package.json
@@ -10,11 +10,11 @@
         "loglevel": "^1.4.1",
         "mobx": "^3.1.16",
         "mobx-react": "^4.2.1",
+        "mousetrap": "^1.6.1",
         "normalize.css": "^7.0.0",
         "path-to-regexp": "^1.7.0",
         "react": "^15.6.0",
         "react-dom": "^15.6.0",
-        "react-keydown": "^1.9.4",
         "react-portal": "^3.1.0",
         "whatwg-fetch": "^2.0.3"
     },