From 9a601b605f312809e670fa456bf385b0b7efee8c Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Mon, 4 Nov 2019 13:58:08 +0200
Subject: [PATCH] ModalDialog refactored

---
 src/common/ModalDialog/ModalDialog.js        | 46 ++++++++++++--------
 src/common/ModalDialog/styles.less           |  2 +
 storybook/stories/ModalDialog/ModalDialog.js |  9 ++--
 3 files changed, 33 insertions(+), 24 deletions(-)

diff --git a/src/common/ModalDialog/ModalDialog.js b/src/common/ModalDialog/ModalDialog.js
index 2bd120acd..81fd375af 100644
--- a/src/common/ModalDialog/ModalDialog.js
+++ b/src/common/ModalDialog/ModalDialog.js
@@ -6,29 +6,37 @@ const Icon = require('stremio-icons/dom');
 const { Modal } = require('stremio-router');
 const styles = require('./styles');
 
-const ModalDialog = ({ className, children, title, buttons, onClose }) => {
-    // Close with the Escape key
-    // TODO: Maybe we should consider a global actions mapping so the 'close' key can be globbaly changed
+const ModalDialog = ({ className, children, title, buttons, onCloseRequest }) => {
+    const dispatchCloseRequestEvent = React.useCallback(event => {
+        if (typeof onCloseRequest === 'function') {
+            onCloseRequest({
+                type: 'closeRequest',
+                dataset: [],
+                reactEvent: event,
+                nativeEvent: event.nativeEvent
+            });
+        }
+    }, [onCloseRequest]);
     React.useEffect(() => {
-        const onKeyUp = (event) => {
-            if (event.key === 'Escape' && typeof onClose === 'function') {
-                onClose();
+        const onKeyDown = (event) => {
+            if (event.key === 'Escape') {
+                dispatchCloseRequestEvent(event);
             }
         };
-        window.addEventListener('keyup', onKeyUp);
+        window.addEventListener('keydown', onKeyDown);
         return () => {
-            window.removeEventListener('keyup', onKeyUp);
+            window.removeEventListener('keydown', onKeyDown);
         };
-    }, [onClose]);
-    const onModalContainerClick = React.useCallback(event => {
-        if (event.target === event.currentTarget && typeof onClose === 'function') {
-            onClose(event);
+    }, [dispatchCloseRequestEvent]);
+    const onModalContainerMouseDown = React.useCallback(event => {
+        if (event.target === event.currentTarget) {
+            dispatchCloseRequestEvent(event);
         }
-    }, [onClose]);
+    }, [dispatchCloseRequestEvent]);
     return (
-        <Modal className={styles['modal-container']} onMouseDown={onModalContainerClick}>
+        <Modal className={styles['modal-container']} onMouseDown={onModalContainerMouseDown}>
             <div className={classnames(className, styles['modal-dialog-container'])}>
-                <Button className={styles['close-button-container']} title={'Close'} onClick={onClose}>
+                <Button className={styles['close-button-container']} title={'Close'} onClick={dispatchCloseRequestEvent}>
                     <Icon className={styles['icon']} icon={'ic_x'} />
                 </Button>
                 <h1>{title}</h1>
@@ -40,7 +48,7 @@ const ModalDialog = ({ className, children, title, buttons, onClose }) => {
                         <div className={styles['modal-dialog-buttons']}>
                             {
                                 buttons.map((button, key) => (
-                                    <Button key={key} className={classnames(button.className, styles['action-button'])} {...button.props}>
+                                    <Button className={classnames(button.className, styles['action-button'])} {...button.props} key={key}>
                                         {
                                             typeof button.icon === 'string' && button.icon.length > 0 ?
                                                 <Icon className={styles['icon']} icon={button.icon} />
@@ -62,7 +70,7 @@ const ModalDialog = ({ className, children, title, buttons, onClose }) => {
                 }
             </div>
         </Modal>
-    )
+    );
 };
 
 ModalDialog.propTypes = {
@@ -72,9 +80,9 @@ ModalDialog.propTypes = {
         label: PropTypes.string,
         icon: PropTypes.string,
         className: PropTypes.string,
-        props: PropTypes.object // Button.propTypes unfortunately these are not defined
+        props: PropTypes.object
     })),
-    onClose: PropTypes.func
+    onCloseRequest: PropTypes.func
 };
 
 module.exports = ModalDialog;
diff --git a/src/common/ModalDialog/styles.less b/src/common/ModalDialog/styles.less
index 39e05d5ff..09196210b 100644
--- a/src/common/ModalDialog/styles.less
+++ b/src/common/ModalDialog/styles.less
@@ -22,6 +22,7 @@
             padding: 0.5rem;
 
             .icon {
+                flex: none;
                 display: block;
                 width: 100%;
                 height: 100%;
@@ -85,6 +86,7 @@
     }
 
     .icon {
+        flex: none;
         width: 1rem;
         height: 1rem;
         margin-right: .5rem;
diff --git a/storybook/stories/ModalDialog/ModalDialog.js b/storybook/stories/ModalDialog/ModalDialog.js
index c32f7a7e3..31f8d3e33 100644
--- a/storybook/stories/ModalDialog/ModalDialog.js
+++ b/storybook/stories/ModalDialog/ModalDialog.js
@@ -2,7 +2,6 @@
 const React = require('react');
 const { storiesOf } = require('@storybook/react');
 const { action } = require('@storybook/addon-actions');
-const Icon = require('stremio-icons/dom');
 const { ModalDialog } = require('stremio/common');
 const styles = require('./styles');
 const useBinaryState = require('stremio/common/useBinaryState');
@@ -30,8 +29,8 @@ storiesOf('ModalDialog', module).add('ModalDialog', () => {
 
     label (String/React component) - the contents of the button.
     icon                  (String) - icon class name. It will be shown to the left of the button's text
-    className             (String) - Custom className applied along side the  default one. Used for custom styles
-    props                 (Object) - the properties applied to the button itself. If a className is supplied here it will override all other class names  for this Button
+    className             (String) - Custom className applied along side the default one. Used for custom styles
+    props                 (Object) - the properties applied to the button itself. If a className is supplied here it will override all other class names for this Button
 
     */
 
@@ -75,7 +74,7 @@ storiesOf('ModalDialog', module).add('ModalDialog', () => {
             {
                 modalVisible
                     ?
-                    <ModalDialog className={styles['modal-dialog']} title={'Test dialog without buttons'} visible={modalVisible} onClose={hideModal}>
+                    <ModalDialog className={styles['modal-dialog']} title={'Test dialog without buttons'} visible={modalVisible} onCloseRequest={hideModal}>
                         {modalDummyContents}
                     </ModalDialog>
                     :
@@ -86,7 +85,7 @@ storiesOf('ModalDialog', module).add('ModalDialog', () => {
             {
                 modalBVisible
                     ?
-                    <ModalDialog className={styles['modal-dialog']} title={'Test dialog with buttons'} buttons={buttons} visible={modalBVisible} onClose={hideModalB}>
+                    <ModalDialog className={styles['modal-dialog']} title={'Test dialog with buttons'} buttons={buttons} visible={modalBVisible} onCloseRequest={hideModalB}>
                         {modalDummyContents}
                     </ModalDialog>
                     :