Added react-keydown for modal closing

sulu · Aug 25, 2017 · bbc5a24 · bbc5a24
1 parent b100135
commit bbc5a24
Show file tree

Hide file tree

Showing 8 changed files with 20 additions and 27 deletions.
diff --git a/src/Sulu/Bundle/AdminBundle/Resources/js/components/Modal/ClickModal.js b/src/Sulu/Bundle/AdminBundle/Resources/js/components/Modal/ClickModal.js
@@ -24,15 +24,15 @@ export default class ClickModal extends React.PureComponent<Props> {
     };
 
     render() {
-        const {className, clickElement, ...modalProps} = this.props;
+        const {className, clickElement, children, ...modalProps} = this.props;
         return (
             <div className={className}>
                 {React.cloneElement(clickElement, {onClick: this.handleElementClick})}
                 <Modal
                     isOpen={this.modalOpen}
                     onRequestClose={this.handleRequestClose}
                     {...modalProps}>
-                    {this.props.children}
+                    {children}
                 </Modal>
             </div>
         );

diff --git a/src/Sulu/Bundle/AdminBundle/Resources/js/components/Modal/Modal.js b/src/Sulu/Bundle/AdminBundle/Resources/js/components/Modal/Modal.js
@@ -3,7 +3,7 @@ import React from 'react';
 import {observable, action} from 'mobx';
 import {observer} from 'mobx-react';
 import Portal from 'react-portal';
-import classnames from 'classnames';
+import classNames from 'classnames';
 import {afterElementsRendered} from '../../services/DOM';
 import Backdrop from '../Backdrop';
 import ModalBox from './ModalBox';
@@ -15,8 +15,6 @@ type Props = ModalProps & {
     onRequestClose: () => void,
 };
 
-const ESC_KEY = 27;
-
 @observer
 export default class Modal extends React.PureComponent<Props> {
     static defaultProps = {
@@ -31,14 +29,9 @@ export default class Modal extends React.PureComponent<Props> {
     }
 
     componentDidMount() {
-        window.addEventListener('keydown', this.handleKeyDown);
         this.toggleModal();
     }
 
-    componentWillUnmount() {
-        window.removeEventListener('keydown', this.handleKeyDown);
-    }
-
     @action componentWillReceiveProps(newProps: Props) {
         this.isOpenHasChanged = newProps.isOpen !== this.props.isOpen;
     }
@@ -55,20 +48,14 @@ export default class Modal extends React.PureComponent<Props> {
         }));
     }
 
-    handleKeyDown = (event: KeyboardEvent) => {
-        if (event.keyCode === ESC_KEY) {
-            this.props.onRequestClose();
-        }
-    };
-
     @action handleTransitionEnd = () => {
         afterElementsRendered(action(() => {
             this.isOpenHasChanged = false;
         }));
     };
 
     render() {
-        const containerClasses = classnames({
+        const containerClass = classNames({
             [modalStyles.container]: true,
             [modalStyles.isDown]: this.isVisible,
         });
@@ -77,7 +64,7 @@ export default class Modal extends React.PureComponent<Props> {
         return (
             <Portal isOpened={isOpen || this.isOpenHasChanged}>
                 <div
-                    className={containerClasses}
+                    className={containerClass}
                     onTransitionEnd={this.handleTransitionEnd}>
                     <div className={modalStyles.box}>
                         <ModalBox

diff --git a/src/Sulu/Bundle/AdminBundle/Resources/js/components/Modal/ModalBox.js b/src/Sulu/Bundle/AdminBundle/Resources/js/components/Modal/ModalBox.js
@@ -1,5 +1,6 @@
 // @flow
 import React from 'react';
+import keydown from 'react-keydown';
 import Icon from '../Icon';
 import type {ModalProps} from './types';
 import Actions from './Actions';
@@ -16,6 +17,10 @@ export default class ModalBox extends React.PureComponent<Props> {
         actions: [],
     };
 
+    @keydown('esc') requestClose() {
+        this.props.onRequestClose();
+    }
+
     render() {
         const {title, onRequestClose, children, actions, onConfirm, confirmText} = this.props;
 

diff --git a/src/Sulu/Bundle/AdminBundle/Resources/js/components/Modal/README.md b/src/Sulu/Bundle/AdminBundle/Resources/js/components/Modal/README.md
@@ -15,7 +15,7 @@ const actions = [
         onRequestClose={() => setState({open: false})}
         actions={actions}
         confirmText="Apply"
-        isOpen={state.open} >
+        isOpen={state.open}>
         <div style={{width: '900px', height: '500px', display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
             <img src="http://www.nyan.cat/cats/original.gif" />
         </div>
@@ -39,7 +39,7 @@ const button = (<button>Open modal</button>);
     clickElement={button}
     title="Nana Nana Nana"
     actions={actions}
-    confirmText="Ok" >
+    confirmText="Ok">
     <div style={{width: '900px', height: '500px', display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
         <img src="https://media.giphy.com/media/NmhVw98IHkQtq/source.gif" />
     </div>

diff --git a/src/Sulu/Bundle/AdminBundle/Resources/js/components/Modal/tests/Modal.test.js b/src/Sulu/Bundle/AdminBundle/Resources/js/components/Modal/tests/Modal.test.js
@@ -14,7 +14,7 @@ test('The component should render in body when open', () => {
             title="My modal title"
             onRequestClose={onRequestClose}
             confirmText="Apply"
-            isOpen={true} >
+            isOpen={true}>
             <p>My modal content</p>
         </Modal>
     ).render();
@@ -30,7 +30,7 @@ test('The component should not render in body when closed', () => {
             title="My modal title"
             onRequestClose={onRequestClose}
             confirmText="Apply"
-            isOpen={false} >
+            isOpen={false}>
             <p>My modal content</p>
         </Modal>
     ).render();
@@ -45,7 +45,7 @@ test('The component should request to be closed on click on backdrop', () => {
             title="My modal title"
             onRequestClose={requestCloseSpy}
             confirmText="Apply"
-            isOpen={true} >
+            isOpen={true}>
             <p>My modal content</p>
         </Modal>
     );

diff --git a/src/Sulu/Bundle/AdminBundle/Resources/js/components/Modal/tests/ModalBox.test.js b/src/Sulu/Bundle/AdminBundle/Resources/js/components/Modal/tests/ModalBox.test.js
@@ -16,7 +16,7 @@ test('The component should render', () => {
             actions={actions}
             onRequestClose={onRequestClose}
             onConfirm={onConfirm}
-            confirmText="Alright mate!" >
+            confirmText="Alright mate!">
             <p>My modal content</p>
         </ModalBox>
     );
@@ -31,7 +31,7 @@ test('The component should request to be closed when the close icon is clicked',
             title="My title"
             onRequestClose={onRequestClose}
             onConfirm={onConfirm}
-            confirmText="Alright mate!" >
+            confirmText="Alright mate!">
             <p>My modal content</p>
         </ModalBox>
     );
@@ -47,7 +47,7 @@ test('The component should call the callback when the confirm button is clicked'
             title="My title"
             onRequestClose={onRequestClose}
             onConfirm={onConfirm}
-            confirmText="Alright mate!" >
+            confirmText="Alright mate!">
             <p>My modal content</p>
         </ModalBox>
     );

diff --git a/src/Sulu/Bundle/AdminBundle/Resources/js/components/RectangleSelection/README.md b/src/Sulu/Bundle/AdminBundle/Resources/js/components/RectangleSelection/README.md
@@ -31,7 +31,7 @@ if (state.imageLoaded) {
         <RectangleSelection
             minWidth={150}
             minHeight={50}
-            onChange={s => setState({selection: s})} >
+            onChange={s => setState({selection: s})}>
             <img src="https://unsplash.it/800/500" />
         </RectangleSelection>
         

diff --git a/src/Sulu/Bundle/AdminBundle/Resources/js/package.json b/src/Sulu/Bundle/AdminBundle/Resources/js/package.json
@@ -14,6 +14,7 @@
         "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"
     },