92 lines
2.4 KiB
JavaScript
92 lines
2.4 KiB
JavaScript
import React from 'react';
|
|
|
|
import { Trans } from '@lingui/macro';
|
|
import makeStyles from '@mui/styles/makeStyles';
|
|
import Button from '@mui/material/Button';
|
|
import CloseIcon from '@mui/icons-material/Close';
|
|
import Grid from '@mui/material/Grid';
|
|
import HelpIcon from '@mui/icons-material/HelpOutline';
|
|
import IconButton from '@mui/material/IconButton';
|
|
import Paper from '@mui/material/Paper';
|
|
import Stack from '@mui/material/Stack';
|
|
import Typography from '@mui/material/Typography';
|
|
|
|
const useStyles = makeStyles((theme) => ({
|
|
modalHeader: {
|
|
marginBottom: '.7em',
|
|
'& button': {
|
|
float: 'right',
|
|
marginLeft: '.5em',
|
|
paddingTop: '.25em',
|
|
marginRight: '-.7em',
|
|
},
|
|
},
|
|
modalFooter: {
|
|
marginTop: '1.2em',
|
|
minHeight: '38px',
|
|
'& button': {
|
|
marginRight: '.5em',
|
|
},
|
|
'& .right': {
|
|
float: 'right',
|
|
marginRight: '0',
|
|
marginLeft: '.5em',
|
|
},
|
|
},
|
|
modalPaper: {
|
|
padding: '1em 1.5em 1.3em 1.5em',
|
|
width: '95%',
|
|
maxWidth: 980,
|
|
maxHeight: '95%',
|
|
overflow: 'scroll',
|
|
backgroundColor: theme.palette.background.modal,
|
|
color: theme.palette.text.primary,
|
|
},
|
|
}));
|
|
|
|
const Component = React.forwardRef((props, ref) => {
|
|
const classes = useStyles();
|
|
|
|
const { title, onClose, onHelp, ...other } = props;
|
|
|
|
return (
|
|
<Paper className={classes.modalPaper} elevation={0} tabIndex={-1} ref={ref} {...other}>
|
|
<Grid container spacing={0}>
|
|
<Grid item xs={12} className={classes.modalHeader}>
|
|
<Stack direction="row" justifyContent="space-between" alignItems="center" spacing={2}>
|
|
<Typography variant="button">{props.title}</Typography>
|
|
<Stack direction="row" justifyContent="flex-end" alignItems="center" spacing={2}>
|
|
{typeof props.onHelp === 'function' && (
|
|
<IconButton color="inherit" size="small" onClick={props.onHelp}>
|
|
<HelpIcon fontSize="small" />
|
|
</IconButton>
|
|
)}
|
|
{typeof props.onClose === 'function' && (
|
|
<IconButton color="inherit" size="small" onClick={props.onClose}>
|
|
<CloseIcon fontSize="small" />
|
|
</IconButton>
|
|
)}
|
|
</Stack>
|
|
</Stack>
|
|
</Grid>
|
|
</Grid>
|
|
{props.children}
|
|
<Grid container spacing={0}>
|
|
<Grid item xs={12} className={classes.modalFooter}>
|
|
<Button variant="outlined" color="default" onClick={props.onClose}>
|
|
<Trans>Close</Trans>
|
|
</Button>
|
|
</Grid>
|
|
</Grid>
|
|
</Paper>
|
|
);
|
|
});
|
|
|
|
export default Component;
|
|
|
|
Component.defaultProps = {
|
|
title: '',
|
|
onClose: null,
|
|
onHelp: null,
|
|
};
|