updated message dialog base
This commit is contained in:
parent
8a1938cafe
commit
b012555c95
|
@ -1,7 +1,9 @@
|
||||||
import { Dialog } from '@mui/material';
|
import { Dialog, DialogProps } from '@mui/material';
|
||||||
|
import { FC } from 'react';
|
||||||
|
import React from 'react';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
|
|
||||||
const MessageDialogBase = styled(Dialog)(({ theme }) => ({
|
const StyledMessageDialog = styled(Dialog)(({ theme }) => ({
|
||||||
'& .MuiPaper-root': {
|
'& .MuiPaper-root': {
|
||||||
padding: '32px 32px 32px 28px',
|
padding: '32px 32px 32px 28px',
|
||||||
margin: '16px',
|
margin: '16px',
|
||||||
|
@ -40,4 +42,27 @@ const MessageDialogBase = styled(Dialog)(({ theme }) => ({
|
||||||
},
|
},
|
||||||
}));
|
}));
|
||||||
|
|
||||||
|
interface MessageDialogBaseProps extends DialogProps {
|
||||||
|
staticBackDrop?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
const MessageDialogBase: FC<MessageDialogBaseProps> = ({
|
||||||
|
children,
|
||||||
|
staticBackDrop,
|
||||||
|
...props
|
||||||
|
}) => {
|
||||||
|
const handleClose: DialogProps['onClose'] = (_, reason) => {
|
||||||
|
if (staticBackDrop && reason === 'backdropClick') {
|
||||||
|
// no-op
|
||||||
|
} else {
|
||||||
|
props.onClose;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<StyledMessageDialog onClose={handleClose} {...props}>
|
||||||
|
{children}
|
||||||
|
</StyledMessageDialog>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
export default MessageDialogBase;
|
export default MessageDialogBase;
|
||||||
|
|
|
@ -53,15 +53,14 @@ export default function MessageDialog({
|
||||||
open={props.show}
|
open={props.show}
|
||||||
maxWidth={props.size}
|
maxWidth={props.size}
|
||||||
fullWidth
|
fullWidth
|
||||||
onClose={!attributes.nonClosable && props.onHide}>
|
staticBackDrop={attributes.staticBackdrop}
|
||||||
|
onClose={attributes.nonClosable ? props.onHide : () => null}>
|
||||||
{attributes.title && <DialogTitle>{attributes.title}</DialogTitle>}
|
{attributes.title && <DialogTitle>{attributes.title}</DialogTitle>}
|
||||||
{(children || attributes?.content) && (
|
{(children || attributes?.content) && (
|
||||||
<DialogContent>
|
<DialogContent>
|
||||||
{children || (
|
<DialogContentText>
|
||||||
<DialogContentText>
|
{children ?? attributes.content}
|
||||||
{attributes.content}
|
</DialogContentText>
|
||||||
</DialogContentText>
|
|
||||||
)}
|
|
||||||
</DialogContent>
|
</DialogContent>
|
||||||
)}
|
)}
|
||||||
{(attributes.close || attributes.proceed) && (
|
{(attributes.close || attributes.proceed) && (
|
||||||
|
|
Loading…
Reference in a new issue