From 38680cda55b25dbed83dd5660367e536e278d253 Mon Sep 17 00:00:00 2001
From: NikolaBorislavovHristov <hristovnikola@protonmail.com>
Date: Mon, 2 Dec 2019 11:16:04 +0200
Subject: [PATCH] ModalDialog  compatible with native data props

---
 src/common/ModalDialog/ModalDialog.js         | 11 +++++----
 src/router/Modal/Modal.js                     |  5 ++--
 .../SampleModalDialog/SampleModalDialog.js    | 23 +++++++++++++------
 3 files changed, 25 insertions(+), 14 deletions(-)

diff --git a/src/common/ModalDialog/ModalDialog.js b/src/common/ModalDialog/ModalDialog.js
index c6e5522e4..152a561a3 100644
--- a/src/common/ModalDialog/ModalDialog.js
+++ b/src/common/ModalDialog/ModalDialog.js
@@ -6,22 +6,24 @@ const Icon = require('stremio-icons/dom');
 const { Modal } = require('stremio-router');
 const styles = require('./styles');
 
-const ModalDialog = ({ className, title, buttons, children, onCloseRequest }) => {
+const ModalDialog = ({ className, title, buttons, children, dataset, onCloseRequest, ...props }) => {
     const onModalDialogContainerMouseDown = React.useCallback((event) => {
         event.nativeEvent.closeModalDialogPrevented = true;
     }, []);
     const closeButtonOnClick = React.useCallback((event) => {
         onCloseRequest({
             type: 'close',
+            dataset: dataset,
             reactEvent: event,
             nativeEvent: event.nativeEvent
         });
-    }, [onCloseRequest]);
+    }, [dataset, onCloseRequest]);
     React.useEffect(() => {
         const onCloseEvent = (event) => {
             if (!event.closeModalDialogPrevented && typeof onCloseRequest === 'function') {
                 const closeEvent = {
                     type: 'close',
+                    dataset: dataset,
                     nativeEvent: event
                 };
                 switch (event.type) {
@@ -49,9 +51,9 @@ const ModalDialog = ({ className, title, buttons, children, onCloseRequest }) =>
             window.removeEventListener('keydown', onCloseEvent);
             window.removeEventListener('mousedown', onCloseEvent);
         };
-    }, [onCloseRequest]);
+    }, [dataset, onCloseRequest]);
     return (
-        <Modal className={classnames(className, styles['modal-container'])}>
+        <Modal {...props} className={classnames(className, styles['modal-container'])}>
             <div className={styles['modal-dialog-container']} onMouseDown={onModalDialogContainerMouseDown}>
                 <div className={styles['header-container']}>
                     {
@@ -108,6 +110,7 @@ ModalDialog.propTypes = {
         PropTypes.arrayOf(PropTypes.node),
         PropTypes.node
     ]),
+    dataset: PropTypes.objectOf(String),
     onCloseRequest: PropTypes.func
 };
 
diff --git a/src/router/Modal/Modal.js b/src/router/Modal/Modal.js
index a27802939..75f20a13a 100644
--- a/src/router/Modal/Modal.js
+++ b/src/router/Modal/Modal.js
@@ -5,10 +5,10 @@ const classnames = require('classnames');
 const FocusLock = require('react-focus-lock').default;
 const { useModalsContainer } = require('../ModalsContainerContext');
 
-const Modal = ({ className, autoFocus, disabled, children, ...props }) => {
+const Modal = ({ className, autoFocus, children, ...props }) => {
     const modalsContainer = useModalsContainer();
     return ReactDOM.createPortal(
-        <FocusLock className={classnames(className, 'modal-container')} autoFocus={typeof autoFocus === 'boolean' ? autoFocus : false} disabled={disabled} lockProps={props}>
+        <FocusLock className={classnames(className, 'modal-container')} autoFocus={typeof autoFocus === 'boolean' ? autoFocus : false} lockProps={props}>
             {children}
         </FocusLock>,
         modalsContainer
@@ -18,7 +18,6 @@ const Modal = ({ className, autoFocus, disabled, children, ...props }) => {
 Modal.propTypes = {
     className: PropTypes.string,
     autoFocus: PropTypes.bool,
-    disabled: PropTypes.bool,
     children: PropTypes.oneOfType([
         PropTypes.arrayOf(PropTypes.node),
         PropTypes.node
diff --git a/storybook/stories/ModalDialog/SampleModalDialog/SampleModalDialog.js b/storybook/stories/ModalDialog/SampleModalDialog/SampleModalDialog.js
index f7c8de1de..3627b5031 100644
--- a/storybook/stories/ModalDialog/SampleModalDialog/SampleModalDialog.js
+++ b/storybook/stories/ModalDialog/SampleModalDialog/SampleModalDialog.js
@@ -3,10 +3,19 @@ const { storiesOf } = require('@storybook/react');
 const { action } = require('@storybook/addon-actions');
 const { ModalDialog } = require('stremio/common');
 
-storiesOf('ModalDialog', module).add('SampleModalDialog', () => (
-    <ModalDialog title={'SampleModalDialog'} onCloseRequest={action('onCloseRequest')}>
-        <div style={{ height: 100, background: 'red', color: 'white' }}>
-            100px height content
-        </div>
-    </ModalDialog>
-));
\ No newline at end of file
+storiesOf('ModalDialog', module).add('SampleModalDialog', () => {
+    const domEventHandler = React.useCallback((event) => {
+        action('domEventHandler')(event.currentTarget.dataset);
+    }, []);
+    return (
+        <ModalDialog title={'SampleModalDialog'}
+            data-prop={'data-value'}
+            dataset={{ 'dataset-prop': 'dataset-value' }}
+            onCloseRequest={action('onCloseRequest')}
+            onClick={domEventHandler}>
+            <div style={{ height: 100, background: 'red', color: 'white' }}>
+                100px height content
+            </div>
+        </ModalDialog>
+    );
+});
\ No newline at end of file