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 compatible with native data props

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-12-02 11:16:04 +02:00
parent a8f1e934cf
commit 38680cda55
3 changed files with 25 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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

5
src/router/Modal/Modal.js
View file

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

23
storybook/stories/ModalDialog/SampleModalDialog/SampleModalDialog.js
View file

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