2022-12-05 17:48:57 +00:00
|
|
|
import { Component, JSXElement } from 'solid-js';
|
|
|
|
import {
|
|
|
|
Dialog as MuiDialog,
|
|
|
|
DialogContent,
|
|
|
|
DialogTitle,
|
|
|
|
Grid,
|
|
|
|
IconButton,
|
|
|
|
} from '@suid/material';
|
|
|
|
import CloseIcon from '@suid/icons-material/Close';
|
|
|
|
|
|
|
|
const Dialog: Component<{
|
|
|
|
open: boolean;
|
2022-12-15 17:46:58 +00:00
|
|
|
fullScreen?: boolean;
|
2022-12-05 17:48:57 +00:00
|
|
|
title: JSXElement;
|
2022-12-12 20:35:00 +00:00
|
|
|
closeHandler: (event: any, reason?: string) => void;
|
2022-12-05 17:48:57 +00:00
|
|
|
children: JSXElement;
|
|
|
|
}> = (props) => {
|
|
|
|
return (
|
|
|
|
<MuiDialog
|
|
|
|
onClose={props.closeHandler}
|
|
|
|
open={props.open}
|
|
|
|
PaperProps={{ sx: { minWidth: '300px' } }}
|
2022-12-15 17:46:58 +00:00
|
|
|
fullScreen={props.fullScreen}
|
2022-12-05 17:48:57 +00:00
|
|
|
>
|
|
|
|
<DialogTitle
|
|
|
|
sx={{
|
|
|
|
backgroundColor: 'rgba(14, 116, 144, 0.7)',
|
|
|
|
color: 'white',
|
|
|
|
clear: 'both',
|
|
|
|
paddingRight: '20px',
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
<Grid container spacing={2} alignItems='center'>
|
|
|
|
<Grid item xs={11}>
|
|
|
|
{props.title}
|
|
|
|
</Grid>
|
|
|
|
<Grid
|
|
|
|
item
|
|
|
|
xs={1}
|
|
|
|
sx={{
|
|
|
|
alignSelf: 'right',
|
|
|
|
marginRight: '0px',
|
|
|
|
paddingRight: '0px',
|
|
|
|
paddingTop: '16px',
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
<IconButton onClick={props.closeHandler}>
|
|
|
|
<CloseIcon />
|
|
|
|
</IconButton>
|
|
|
|
</Grid>
|
|
|
|
</Grid>
|
|
|
|
</DialogTitle>
|
|
|
|
<DialogContent sx={{ width: 'calc(100% - 60px)' }}>
|
|
|
|
{props.children}
|
|
|
|
</DialogContent>
|
|
|
|
</MuiDialog>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default Dialog;
|