124 lines
3 KiB
JavaScript
124 lines
3 KiB
JavaScript
import MaterialModal from '@mui/material/Modal'
|
|
import Paper from '@mui/material/Paper'
|
|
import { makeStyles } from '@mui/styles'
|
|
import classnames from 'classnames'
|
|
import React from 'react'
|
|
import { H1, H4 } from 'src/components/typography'
|
|
import CloseIcon from 'src/styling/icons/action/close/zodiac.svg?react'
|
|
|
|
import { IconButton } from 'src/components/buttons'
|
|
|
|
const styles = {
|
|
modal: {
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
flexDirection: 'column',
|
|
alignItems: 'center'
|
|
},
|
|
wrapper: ({ width, height }) => ({
|
|
width,
|
|
height,
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
minHeight: height ?? 400,
|
|
maxHeight: '90vh',
|
|
overflowY: 'auto',
|
|
borderRadius: 8,
|
|
outline: 0
|
|
}),
|
|
infoPanelWrapper: ({ width, infoPanelHeight }) => ({
|
|
width,
|
|
height: infoPanelHeight,
|
|
marginTop: 16,
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
minHeight: infoPanelHeight ?? 200,
|
|
maxHeight: '90vh',
|
|
overflowY: 'auto',
|
|
borderRadius: 8,
|
|
outline: 0
|
|
}),
|
|
panelContent: {
|
|
width: '100%',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
flex: 1,
|
|
padding: [[0, 24]]
|
|
},
|
|
content: ({ small, xl }) => ({
|
|
width: '100%',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
flex: 1,
|
|
padding: xl ? [[0, 60 + 28]] : small ? [[0, 16]] : [[0, 32]]
|
|
}),
|
|
button: ({ small, xl }) => ({
|
|
padding: [[0, 0, 0, 0]],
|
|
margin: xl
|
|
? [[0, 0, 'auto', 'auto']]
|
|
: small
|
|
? [[12, 12, 'auto', 'auto']]
|
|
: [[16, 16, 'auto', 'auto']]
|
|
}),
|
|
header: {
|
|
display: 'flex'
|
|
},
|
|
title: ({ small }) => ({
|
|
margin: small ? [[20, 0, 8, 16]] : [[28, 0, 8, 32]]
|
|
})
|
|
}
|
|
|
|
const useStyles = makeStyles(styles)
|
|
|
|
const Modal = ({
|
|
width,
|
|
height,
|
|
infoPanelHeight,
|
|
title,
|
|
small,
|
|
xl,
|
|
infoPanel,
|
|
handleClose,
|
|
children,
|
|
secondaryModal,
|
|
className,
|
|
closeOnEscape,
|
|
closeOnBackdropClick,
|
|
...props
|
|
}) => {
|
|
const classes = useStyles({ width, height, small, infoPanelHeight, xl })
|
|
const TitleCase = small ? H4 : H1
|
|
const closeSize = xl ? 28 : small ? 16 : 20
|
|
|
|
const innerClose = (evt, reason) => {
|
|
if (!closeOnBackdropClick && reason === 'backdropClick') return
|
|
if (!closeOnEscape && reason === 'escapeKeyDown') return
|
|
handleClose()
|
|
}
|
|
|
|
return (
|
|
<MaterialModal onClose={innerClose} className={classes.modal} {...props}>
|
|
<>
|
|
<Paper className={classnames(classes.wrapper, className)}>
|
|
<div className={classes.header}>
|
|
{title && <TitleCase className={classes.title}>{title}</TitleCase>}
|
|
<IconButton
|
|
size={closeSize}
|
|
className={classes.button}
|
|
onClick={() => handleClose()}>
|
|
<CloseIcon />
|
|
</IconButton>
|
|
</div>
|
|
<div className={classes.content}>{children}</div>
|
|
</Paper>
|
|
{infoPanel && (
|
|
<Paper className={classnames(classes.infoPanelWrapper, className)}>
|
|
<div className={classes.panelContent}>{infoPanel}</div>
|
|
</Paper>
|
|
)}
|
|
</>
|
|
</MaterialModal>
|
|
)
|
|
}
|
|
|
|
export default Modal
|