Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-11 21:27: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 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;

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

@ -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;

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

@ -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>
: