Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-21 11:42:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

ModalDialog refactored

Browse source
This commit is contained in:
svetlagasheva 2019-11-04 13:58:08 +02:00
parent 0f6d6b22f0
commit 9a601b605f
3 changed files with 33 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
src/common/ModalDialog/ModalDialog.js
View file

@ -6,29 +6,37 @@ const Icon = require('stremio-icons/dom');
const { Modal } = require('stremio-router'); const { Modal } = require('stremio-router');
const styles = require('./styles'); const styles = require('./styles');
const ModalDialog = ({ className, children, title, buttons, onClose }) => { const ModalDialog = ({ className, children, title, buttons, onCloseRequest }) => {
// Close with the Escape key const dispatchCloseRequestEvent = React.useCallback(event => {
// TODO: Maybe we should consider a global actions mapping so the 'close' key can be globbaly changed if (typeof onCloseRequest === 'function') {
onCloseRequest({
type: 'closeRequest',
dataset: [],
reactEvent: event,
nativeEvent: event.nativeEvent
});
}
}, [onCloseRequest]);
React.useEffect(() => { React.useEffect(() => {
const onKeyUp = (event) => { const onKeyDown = (event) => {
if (event.key === 'Escape' && typeof onClose === 'function') { if (event.key === 'Escape') {
onClose(); dispatchCloseRequestEvent(event);
} }
}; };
window.addEventListener('keyup', onKeyUp); window.addEventListener('keydown', onKeyDown);
return () => { return () => {
window.removeEventListener('keyup', onKeyUp); window.removeEventListener('keydown', onKeyDown);
}; };
}, [onClose]); }, [dispatchCloseRequestEvent]);
const onModalContainerClick = React.useCallback(event => { const onModalContainerMouseDown = React.useCallback(event => {
if (event.target === event.currentTarget && typeof onClose === 'function') { if (event.target === event.currentTarget) {
onClose(event); dispatchCloseRequestEvent(event);
} }
}, [onClose]); }, [dispatchCloseRequestEvent]);
return ( return (
<Modal className={styles['modal-container']} onMouseDown={onModalContainerClick}> <Modal className={styles['modal-container']} onMouseDown={onModalContainerMouseDown}>
<div className={classnames(className, styles['modal-dialog-container'])}> <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'} /> <Icon className={styles['icon']} icon={'ic_x'} />
</Button> </Button>
<h1>{title}</h1> <h1>{title}</h1>
@ -40,7 +48,7 @@ const ModalDialog = ({ className, children, title, buttons, onClose }) => {
<div className={styles['modal-dialog-buttons']}> <div className={styles['modal-dialog-buttons']}>
{ {
buttons.map((button, key) => ( 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 ? typeof button.icon === 'string' && button.icon.length > 0 ?
<Icon className={styles['icon']} icon={button.icon} /> <Icon className={styles['icon']} icon={button.icon} />
@ -62,7 +70,7 @@ const ModalDialog = ({ className, children, title, buttons, onClose }) => {
} }
</div> </div>
</Modal> </Modal>
) );
}; };
ModalDialog.propTypes = { ModalDialog.propTypes = {
@ -72,9 +80,9 @@ ModalDialog.propTypes = {
label: PropTypes.string, label: PropTypes.string,
icon: PropTypes.string, icon: PropTypes.string,
className: 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; module.exports = ModalDialog;

2
src/common/ModalDialog/styles.less
View file

@ -22,6 +22,7 @@
padding: 0.5rem; padding: 0.5rem;
.icon { .icon {
flex: none;
display: block; display: block;
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -85,6 +86,7 @@
} }
.icon { .icon {
flex: none;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
margin-right: .5rem; margin-right: .5rem;

9
storybook/stories/ModalDialog/ModalDialog.js
View file

@ -2,7 +2,6 @@
const React = require('react'); const React = require('react');
const { storiesOf } = require('@storybook/react'); const { storiesOf } = require('@storybook/react');
const { action } = require('@storybook/addon-actions'); const { action } = require('@storybook/addon-actions');
const Icon = require('stremio-icons/dom');
const { ModalDialog } = require('stremio/common'); const { ModalDialog } = require('stremio/common');
const styles = require('./styles'); const styles = require('./styles');
const useBinaryState = require('stremio/common/useBinaryState'); const useBinaryState = require('stremio/common/useBinaryState');
@ -30,8 +29,8 @@ storiesOf('ModalDialog', module).add('ModalDialog', () => {
label (String/React component) - the contents of the button. 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 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 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 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 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} {modalDummyContents}
</ModalDialog> </ModalDialog>
: :
@ -86,7 +85,7 @@ storiesOf('ModalDialog', module).add('ModalDialog', () => {
{ {
modalBVisible 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} {modalDummyContents}
</ModalDialog> </ModalDialog>
: :