From e871ff39f1eebdb36e1da940f20908e7b834b824 Mon Sep 17 00:00:00 2001 From: Vladimir Borisov Date: Wed, 2 Oct 2019 15:57:53 +0300 Subject: [PATCH 01/17] New ModalDialog component --- src/common/ModalDialog/ModalDialog.js | 36 +++++++++++++ src/common/ModalDialog/index.js | 3 ++ src/common/ModalDialog/styles.less | 57 ++++++++++++++++++++ src/common/index.js | 2 + storybook/stories/ModalDialog/ModalDialog.js | 56 +++++++++++++++++++ storybook/stories/ModalDialog/index.js | 2 + storybook/stories/ModalDialog/styles.less | 40 ++++++++++++++ storybook/stories/index.js | 1 + 8 files changed, 197 insertions(+) create mode 100644 src/common/ModalDialog/ModalDialog.js create mode 100644 src/common/ModalDialog/index.js create mode 100644 src/common/ModalDialog/styles.less create mode 100644 storybook/stories/ModalDialog/ModalDialog.js create mode 100644 storybook/stories/ModalDialog/index.js create mode 100644 storybook/stories/ModalDialog/styles.less diff --git a/src/common/ModalDialog/ModalDialog.js b/src/common/ModalDialog/ModalDialog.js new file mode 100644 index 000000000..386cc505f --- /dev/null +++ b/src/common/ModalDialog/ModalDialog.js @@ -0,0 +1,36 @@ +const React = require('react'); +const PropTypes = require('prop-types'); +const classnames = require('classnames'); +const Button = require('stremio/common/Button'); +const Icon = require('stremio-icons/dom'); +const styles = require('./styles'); + +const ModalDialog = ({className, children, title, buttons, onClose}) => { + return ( +
+ +

{title}

+
+ {children} +
+
+ {buttons ? buttons.map((button, key) => ( + + )) : null} +
+
+ ) +}; + +module.exports = ModalDialog; \ No newline at end of file diff --git a/src/common/ModalDialog/index.js b/src/common/ModalDialog/index.js new file mode 100644 index 000000000..7dadbbd9e --- /dev/null +++ b/src/common/ModalDialog/index.js @@ -0,0 +1,3 @@ +const ModalDialog = require('./ModalDialog'); + +module.exports = ModalDialog; \ No newline at end of file diff --git a/src/common/ModalDialog/styles.less b/src/common/ModalDialog/styles.less new file mode 100644 index 000000000..7c1b9e4de --- /dev/null +++ b/src/common/ModalDialog/styles.less @@ -0,0 +1,57 @@ +.modal-dialog-container { + position: relative; + padding: 1rem; + background-color: var(--color-surfacelighter); + margin: auto; + + * { + overflow: visible; + } + + .x-icon { + position: absolute; + top: 1rem; + right: 1rem; + width: 1rem; + height: 1rem; + fill: var(--color-surfacedark); + } + + h1 { + font-size: 1.2rem; + } + + .modal-dialog-content { + margin: 1rem auto 0 auto; + } + + .modal-dialog-buttons { + margin: -.5rem; + margin-top: 1rem; + display: flex; + flex-flow: row; + } + + .button { + display: flex; + align-items: center; + justify-content: center; + flex: 1 0 0; + text-align: center; + color: var(--color-surfacelighter); + background-color: var(--color-signal5); + padding: 1rem; + margin: .5rem; + + &:hover { + background-color: var(--color-signal580); + } + + .icon { + fill: var(--color-surfacelighter); + width: 1rem; + height: 1rem; + margin-right: .5rem; + } + } +} \ No newline at end of file diff --git a/src/common/index.js b/src/common/index.js index 5771413e0..944e565e1 100644 --- a/src/common/index.js +++ b/src/common/index.js @@ -9,6 +9,7 @@ const MetaPreview = require('./MetaPreview'); const MetaPreviewPlaceholder = require('./MetaPreviewPlaceholder'); const MetaRow = require('./MetaRow'); const MetaRowPlaceholder = require('./MetaRowPlaceholder'); +const ModalDialog = require('./ModalDialog'); const NavBar = require('./NavBar'); const PlayIconCircleCentered = require('./PlayIconCircleCentered'); const Popup = require('./Popup'); @@ -34,6 +35,7 @@ module.exports = { MetaPreviewPlaceholder, MetaRow, MetaRowPlaceholder, + ModalDialog, NavBar, PlayIconCircleCentered, Popup, diff --git a/storybook/stories/ModalDialog/ModalDialog.js b/storybook/stories/ModalDialog/ModalDialog.js new file mode 100644 index 000000000..9cef96c61 --- /dev/null +++ b/storybook/stories/ModalDialog/ModalDialog.js @@ -0,0 +1,56 @@ + +const React = require('react'); +const { storiesOf } = require('@storybook/react'); +const { action } = require('@storybook/addon-actions'); +const { ModalDialog } = require('stremio/common'); +const Icon = require('stremio-icons/dom'); +const ColorPicker = require('stremio/common/ColorPicker'); +const styles = require('./styles'); + +storiesOf('ModalDialog', module).add('ModalDialog', () => { + const oneButton = [ + { + label: 'Show many buttons', icon: 'ic_ellipsis', props: { + onClick: React.useCallback(()=>setButtons(manyButtons)) + } + }, + ] + const manyButtons = [ + { + label: 'One', icon: 'ic_back_ios', props: { + onClick: React.useCallback(()=>setButtons(oneButton)) + } + }, + { + label: 'A button with a long name', props: { + onClick: action('A button with a long name clicked.') + } + }, + { + label: ( + + + {'A button with a long name, icon and custom class'} + + ), props: { + className: styles['custom-button'], + onClick: action('A button with a long name and icon clicked') + } + }, + {} + ]; + const [buttons, setButtons] = React.useState(oneButton); + return ( + +
+
+ +
+
+

Some text here

+

Lorem ipsum dolor sit amet

+
+
+ + ); +}); \ No newline at end of file diff --git a/storybook/stories/ModalDialog/index.js b/storybook/stories/ModalDialog/index.js new file mode 100644 index 000000000..0e5c21118 --- /dev/null +++ b/storybook/stories/ModalDialog/index.js @@ -0,0 +1,2 @@ + +require('./ModalDialog'); \ No newline at end of file diff --git a/storybook/stories/ModalDialog/styles.less b/storybook/stories/ModalDialog/styles.less new file mode 100644 index 000000000..fcb6d41cb --- /dev/null +++ b/storybook/stories/ModalDialog/styles.less @@ -0,0 +1,40 @@ +.modal-dialog { + width: 45rem; + .content-container { + display: flex; + flex-flow: row; + margin: 0 -0.5rem; + + .content-column { + flex: 1 0 0; + padding: 0 0.5rem; + } + } + + .custom-button { + display: flex; + align-items: center; + justify-content: center; + flex: 1 0 0; + text-align: center; + color: var(--color-surfacelighter); + background-color: var(--color-signal3); + padding: 1rem; + margin: 0.5rem; + + &:hover { + background-color: var(--color-signal380); + color: var(--color-backgrounddarker); + + .icon { + fill: var(--color-backgrounddarker); + } + } + + .icon { + fill: var(--color-surfacelighter); + width: 1rem; + height: 1rem; + } + } +} diff --git a/storybook/stories/index.js b/storybook/stories/index.js index a15267d5f..8660eb557 100644 --- a/storybook/stories/index.js +++ b/storybook/stories/index.js @@ -1,3 +1,4 @@ require('./Addon'); require('./MetaItem'); require('./ColorPicker'); +require('./ModalDialog'); From c35394289c4c26840eaabb0be93baa64ecfb0779 Mon Sep 17 00:00:00 2001 From: Vladimir Borisov Date: Wed, 2 Oct 2019 15:59:40 +0300 Subject: [PATCH 02/17] Custom icon style --- storybook/stories/ModalDialog/styles.less | 1 + 1 file changed, 1 insertion(+) diff --git a/storybook/stories/ModalDialog/styles.less b/storybook/stories/ModalDialog/styles.less index fcb6d41cb..c4a429370 100644 --- a/storybook/stories/ModalDialog/styles.less +++ b/storybook/stories/ModalDialog/styles.less @@ -35,6 +35,7 @@ fill: var(--color-surfacelighter); width: 1rem; height: 1rem; + margin-right: 0.5rem; } } } From 2b83812327cca0e6b376c6402188b4a35bdec8b4 Mon Sep 17 00:00:00 2001 From: Vladimir Borisov Date: Wed, 2 Oct 2019 16:13:36 +0300 Subject: [PATCH 03/17] callback dependencies --- storybook/stories/ModalDialog/ModalDialog.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/storybook/stories/ModalDialog/ModalDialog.js b/storybook/stories/ModalDialog/ModalDialog.js index 9cef96c61..e3440b6c1 100644 --- a/storybook/stories/ModalDialog/ModalDialog.js +++ b/storybook/stories/ModalDialog/ModalDialog.js @@ -11,14 +11,14 @@ storiesOf('ModalDialog', module).add('ModalDialog', () => { const oneButton = [ { label: 'Show many buttons', icon: 'ic_ellipsis', props: { - onClick: React.useCallback(()=>setButtons(manyButtons)) + onClick: React.useCallback(()=>setButtons(manyButtons), []) } }, ] const manyButtons = [ { label: 'One', icon: 'ic_back_ios', props: { - onClick: React.useCallback(()=>setButtons(oneButton)) + onClick: React.useCallback(()=>setButtons(oneButton), []) } }, { From 6167e86bea07f9dd0b243578a8f5eccb32cda67b Mon Sep 17 00:00:00 2001 From: Vladimir Borisov Date: Wed, 2 Oct 2019 16:13:48 +0300 Subject: [PATCH 04/17] PropTypes --- src/common/ModalDialog/ModalDialog.js | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/src/common/ModalDialog/ModalDialog.js b/src/common/ModalDialog/ModalDialog.js index 386cc505f..f91279827 100644 --- a/src/common/ModalDialog/ModalDialog.js +++ b/src/common/ModalDialog/ModalDialog.js @@ -16,7 +16,7 @@ const ModalDialog = ({className, children, title, buttons, onClose}) => { {children}
- {buttons ? buttons.map((button, key) => ( + {Array.isArray(buttons) && buttons.length ? buttons.map((button, key) => (

{title}

diff --git a/src/common/ModalDialog/styles.less b/src/common/ModalDialog/styles.less index e050f5562..1f1032e0b 100644 --- a/src/common/ModalDialog/styles.less +++ b/src/common/ModalDialog/styles.less @@ -8,6 +8,20 @@ overflow: visible; } + .close-button { + position: absolute; + top: 0; + right: 0; + width: 3rem; + height: 3rem; + &:hover { + background-color: var(--color-surfacelight); + .x-icon { + fill: var(--color-signal2); + } + } + } + .x-icon { position: absolute; top: 1rem; From 4f944c2a68ca47f0d649a2d0145e6339b2d196c3 Mon Sep 17 00:00:00 2001 From: Vladimir Borisov Date: Thu, 31 Oct 2019 16:34:30 +0200 Subject: [PATCH 10/17] Easier button styles; Keyboard handling; Better demo --- src/common/ModalDialog/ModalDialog.js | 25 ++++-- src/common/ModalDialog/styles.less | 94 +++++++++++--------- storybook/stories/ModalDialog/ModalDialog.js | 68 +++++++++----- storybook/stories/ModalDialog/styles.less | 57 ++++++------ 4 files changed, 146 insertions(+), 98 deletions(-) diff --git a/src/common/ModalDialog/ModalDialog.js b/src/common/ModalDialog/ModalDialog.js index c12442c37..32f76a468 100644 --- a/src/common/ModalDialog/ModalDialog.js +++ b/src/common/ModalDialog/ModalDialog.js @@ -6,14 +6,27 @@ const Icon = require('stremio-icons/dom'); const { Modal } = require('stremio-router'); const styles = require('./styles'); -const ModalDialog = ({ className, children, title, buttons, visible, onClose }) => { +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 + React.useEffect(() => { + const onKeyUp = (event) => { + if (event.key === 'Escape' && typeof onClose === 'function') { + onClose(); + } + }; + window.addEventListener('keyup', onKeyUp); + return () => { + window.removeEventListener('keyup', onKeyUp); + }; + }, [onClose]); const onModalContainerClick = React.useCallback(event => { - if(event.target === event.currentTarget) { + if (event.target === event.currentTarget && typeof onClose === 'function') { onClose(event); } - }); + }, [onClose]); return ( - +
{Array.isArray(buttons) && buttons.length ? buttons.map((button, key) => ( - +
+ + { + modalVisible + ? + + {modalDummyContents} + + : + null + } - - - - {modalDummyContents} - - - {modalDummyContents} - - + + { + modalBVisible + ? + + {modalDummyContents} + + : + null + } +
); }); \ No newline at end of file diff --git a/storybook/stories/ModalDialog/styles.less b/storybook/stories/ModalDialog/styles.less index d6ae29b64..91e9557e6 100644 --- a/storybook/stories/ModalDialog/styles.less +++ b/storybook/stories/ModalDialog/styles.less @@ -1,39 +1,8 @@ -.button { - display: inline-block; - background-color: var(--color-signal3); - width: 15rem; - text-align: center; - padding: 1rem; - margin: .5rem; -} - .modal-dialog { width: 45rem; - .content-container { - display: flex; - flex-flow: row; - margin: 0 -0.5rem; - - .content-column { - flex: 1 0 0; - padding: 0 0.5rem; - - p { - text-align: justify; - } - } - } .custom-button { - display: flex; - align-items: center; - justify-content: center; - flex: 1 0 0; - text-align: center; - color: var(--color-surfacelighter); background-color: var(--color-signal3); - padding: 1rem; - margin: 0.5rem; &:hover { background-color: var(--color-signal380); @@ -51,4 +20,30 @@ margin-right: 0.5rem; } } + + // This is only for the content. Not relevant for the demo + .content-container { + display: flex; + flex-flow: row; + margin: 0 -0.5rem; + + .content-column { + flex: 1 0 0; + padding: 0 0.5rem; + + p { + text-align: justify; + } + } + } } + +// This is only for the buttons that show the modals. Not relevant for the demo +.show-modal-button { + display: inline-block; + background-color: var(--color-signal4); + width: 15rem; + text-align: center; + padding: 1rem; + margin: .5rem; +} \ No newline at end of file From ac8745ffd50d658456848c6b0275cc6b148aee82 Mon Sep 17 00:00:00 2001 From: svetlagasheva Date: Fri, 1 Nov 2019 15:00:28 +0200 Subject: [PATCH 11/17] SharePrompt and Notifications added to index file --- storybook/stories/index.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/storybook/stories/index.js b/storybook/stories/index.js index 8660eb557..a3b450370 100644 --- a/storybook/stories/index.js +++ b/storybook/stories/index.js @@ -1,4 +1,6 @@ require('./Addon'); require('./MetaItem'); require('./ColorPicker'); +require('./SharePrompt'); +require('./Notification'); require('./ModalDialog'); From cae2eae1c7bfd2c560bad1f0c0a4bebc38b4bd48 Mon Sep 17 00:00:00 2001 From: svetlagasheva Date: Fri, 1 Nov 2019 16:47:46 +0200 Subject: [PATCH 12/17] ModalDialog formatting --- src/common/ModalDialog/ModalDialog.js | 42 ++++++++++++-------- src/common/ModalDialog/styles.less | 17 ++++---- storybook/stories/ModalDialog/ModalDialog.js | 7 +--- 3 files changed, 36 insertions(+), 30 deletions(-) diff --git a/src/common/ModalDialog/ModalDialog.js b/src/common/ModalDialog/ModalDialog.js index 32f76a468..6aed44168 100644 --- a/src/common/ModalDialog/ModalDialog.js +++ b/src/common/ModalDialog/ModalDialog.js @@ -1,4 +1,5 @@ const React = require('react'); +const ReactIs = require('react-is'); const PropTypes = require('prop-types'); const classnames = require('classnames'); const Button = require('stremio/common/Button'); @@ -27,27 +28,36 @@ const ModalDialog = ({ className, children, title, buttons, onClose }) => { }, [onClose]); return ( -
-

{title}

{children}
- {Array.isArray(buttons) && buttons.length ? buttons.map((button, key) => ( - - )) : null} + { + Array.isArray(buttons) && buttons.length > 0 ? + buttons.map((button, key) => ( + + )) + : + null + }
@@ -66,4 +76,4 @@ ModalDialog.propTypes = { onClose: PropTypes.func }; -module.exports = ModalDialog; \ No newline at end of file +module.exports = ModalDialog; diff --git a/src/common/ModalDialog/styles.less b/src/common/ModalDialog/styles.less index 5afbd41ed..6de3bb7e7 100644 --- a/src/common/ModalDialog/styles.less +++ b/src/common/ModalDialog/styles.less @@ -13,33 +13,35 @@ overflow: visible; } - .close-button { + .close-button-container { display: flex; flex-direction: row; align-items: center; + justify-content: center; position: absolute; top: .2rem; right: .2rem; width: 2rem; height: 2rem; + padding: 0.5rem; - .x-icon { - flex: 1 0 0; - width: 1rem; - height: 1rem; + .icon { + display: block; + width: 100%; + height: 100%; fill: var(--color-surfacedark); } &:hover { background-color: var(--color-surfacelight); - .x-icon { + .icon { fill: var(--color-signal2); } } &:focus { - .x-icon { + .icon { fill: var(--color-signal2); } } @@ -81,7 +83,6 @@ &:focus { outline: 3px solid var(--color-surfacelighter); outline-offset: -4px; - } &:global(.disabled) { diff --git a/storybook/stories/ModalDialog/ModalDialog.js b/storybook/stories/ModalDialog/ModalDialog.js index 6bc3125fd..c32f7a7e3 100644 --- a/storybook/stories/ModalDialog/ModalDialog.js +++ b/storybook/stories/ModalDialog/ModalDialog.js @@ -59,12 +59,7 @@ storiesOf('ModalDialog', module).add('ModalDialog', () => { } }, { - label: ( - - - {'A button with a long name, icon and custom class'} - - ), + label: 'A button with a long name, icon and custom class', className: styles['custom-button'], props: { onClick: action('A button with a long name and icon clicked') From 727d2fac13dac7ca6da26e92d546700e3a3822d1 Mon Sep 17 00:00:00 2001 From: Vladimir Borisov Date: Fri, 1 Nov 2019 17:23:52 +0200 Subject: [PATCH 13/17] Button label must be a string --- src/common/ModalDialog/ModalDialog.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/common/ModalDialog/ModalDialog.js b/src/common/ModalDialog/ModalDialog.js index 6aed44168..9938db8cf 100644 --- a/src/common/ModalDialog/ModalDialog.js +++ b/src/common/ModalDialog/ModalDialog.js @@ -48,7 +48,7 @@ const ModalDialog = ({ className, children, title, buttons, onClose }) => { null } { - ReactIs.isValidElementType(button.label) ? + typeof button.label === 'string' && button.label.length > 0 ? button.label : null @@ -68,7 +68,7 @@ ModalDialog.propTypes = { className: PropTypes.string, title: PropTypes.string, buttons: PropTypes.arrayOf(PropTypes.shape({ - label: PropTypes.node, + label: PropTypes.string, icon: PropTypes.string, className: PropTypes.string, props: PropTypes.object // Button.propTypes unfortunately these are not defined From e70c5508c7277a87f6c113e84ac426ef9fcee922 Mon Sep 17 00:00:00 2001 From: svetlagasheva Date: Mon, 4 Nov 2019 10:00:42 +0200 Subject: [PATCH 14/17] not needed react-is removed --- src/common/ModalDialog/ModalDialog.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/common/ModalDialog/ModalDialog.js b/src/common/ModalDialog/ModalDialog.js index 9938db8cf..ddfd890cf 100644 --- a/src/common/ModalDialog/ModalDialog.js +++ b/src/common/ModalDialog/ModalDialog.js @@ -1,5 +1,4 @@ const React = require('react'); -const ReactIs = require('react-is'); const PropTypes = require('prop-types'); const classnames = require('classnames'); const Button = require('stremio/common/Button'); From 1356e87bf91690406f42969c929d14b537ff0af4 Mon Sep 17 00:00:00 2001 From: svetlagasheva Date: Mon, 4 Nov 2019 11:48:37 +0200 Subject: [PATCH 15/17] ModalDialog styles improved --- src/common/ModalDialog/ModalDialog.js | 48 ++++++++++++----------- src/common/ModalDialog/styles.less | 30 +++++++------- storybook/stories/ModalDialog/styles.less | 2 +- 3 files changed, 40 insertions(+), 40 deletions(-) diff --git a/src/common/ModalDialog/ModalDialog.js b/src/common/ModalDialog/ModalDialog.js index ddfd890cf..2bd120acd 100644 --- a/src/common/ModalDialog/ModalDialog.js +++ b/src/common/ModalDialog/ModalDialog.js @@ -35,29 +35,31 @@ const ModalDialog = ({ className, children, title, buttons, onClose }) => {
{children}
-
- { - Array.isArray(buttons) && buttons.length > 0 ? - buttons.map((button, key) => ( - - )) - : - null - } -
+ { + Array.isArray(buttons) && buttons.length > 0 ? +
+ { + buttons.map((button, key) => ( + + )) + } +
+ : + null + }
) diff --git a/src/common/ModalDialog/styles.less b/src/common/ModalDialog/styles.less index 6de3bb7e7..39e05d5ff 100644 --- a/src/common/ModalDialog/styles.less +++ b/src/common/ModalDialog/styles.less @@ -1,17 +1,13 @@ .modal-container { display: flex; - flex-flow: column; + flex-direction: column; background-color: var(--color-backgrounddark40); .modal-dialog-container { position: relative; + margin: auto; padding: 1rem; background-color: var(--color-surfacelighter); - margin: auto; - - * { - overflow: visible; - } .close-button-container { display: flex; @@ -52,37 +48,35 @@ } .modal-dialog-content { - margin: 1rem auto 0 auto; + margin-top: 1rem; } .modal-dialog-buttons { - margin: -.5rem; margin-top: 1rem; display: flex; - flex-flow: row; + flex-direction: row; } - } } .action-button { display: flex; + flex-direction: row; align-items: center; justify-content: center; flex: 1 0 0; + padding: 1rem; text-align: center; color: var(--color-surfacelighter); background-color: var(--color-signal5); - padding: 1rem; - margin: .5rem; &:hover { - background-color: var(--color-signal580); + filter: brightness(1.2); } &:focus { - outline: 3px solid var(--color-surfacelighter); - outline-offset: -4px; + outline: calc(1.5 * var(--focus-outline-size)) solid var(--color-surfacelighter); + outline-offset: calc(-2 * var(--focus-outline-size)); } &:global(.disabled) { @@ -91,9 +85,13 @@ } .icon { - fill: var(--color-surfacelighter); width: 1rem; height: 1rem; margin-right: .5rem; + fill: var(--color-surfacelighter); + } + + &:not(:last-child) { + margin-right: 1rem; } } \ No newline at end of file diff --git a/storybook/stories/ModalDialog/styles.less b/storybook/stories/ModalDialog/styles.less index 91e9557e6..d6a3e426f 100644 --- a/storybook/stories/ModalDialog/styles.less +++ b/storybook/stories/ModalDialog/styles.less @@ -24,7 +24,7 @@ // This is only for the content. Not relevant for the demo .content-container { display: flex; - flex-flow: row; + flex-direction: row; margin: 0 -0.5rem; .content-column { From 9a601b605f312809e670fa456bf385b0b7efee8c Mon Sep 17 00:00:00 2001 From: svetlagasheva Date: Mon, 4 Nov 2019 13:58:08 +0200 Subject: [PATCH 16/17] 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 ( - +
-

{title}

@@ -40,7 +48,7 @@ const ModalDialog = ({ className, children, title, buttons, onClose }) => {
{ buttons.map((button, key) => ( -
- ) + ); }; 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 ? - + {modalDummyContents} : @@ -86,7 +85,7 @@ storiesOf('ModalDialog', module).add('ModalDialog', () => { { modalBVisible ? - + {modalDummyContents} : From 1a719bbc2051063fb9ace155782005077e639817 Mon Sep 17 00:00:00 2001 From: svetlagasheva Date: Mon, 4 Nov 2019 14:04:36 +0200 Subject: [PATCH 17/17] dataset dropped --- src/common/ModalDialog/ModalDialog.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/common/ModalDialog/ModalDialog.js b/src/common/ModalDialog/ModalDialog.js index 81fd375af..20128aa25 100644 --- a/src/common/ModalDialog/ModalDialog.js +++ b/src/common/ModalDialog/ModalDialog.js @@ -11,7 +11,6 @@ const ModalDialog = ({ className, children, title, buttons, onCloseRequest }) => if (typeof onCloseRequest === 'function') { onCloseRequest({ type: 'closeRequest', - dataset: [], reactEvent: event, nativeEvent: event.nativeEvent });