modal 반영
parent
456f48edd6
commit
94ffc738f7
@ -0,0 +1,70 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React, { forwardRef } from 'react';
|
||||
|
||||
// material-ui
|
||||
import { Button, CardContent, CardActions, Divider, Grid, IconButton, Modal, Typography } from '@mui/material';
|
||||
|
||||
// project imports
|
||||
import MainCard from 'ui-component/cards/MainCard';
|
||||
|
||||
// assets
|
||||
import CloseIcon from '@mui/icons-material/Close';
|
||||
import SimpleModal from 'views/form/Modal/SimpleModal';
|
||||
|
||||
// generate random
|
||||
function rand() {
|
||||
return Math.round(Math.random() * 20) - 10;
|
||||
}
|
||||
|
||||
// modal position
|
||||
function getModalStyle() {
|
||||
const top = 50 + rand();
|
||||
const left = 50 + rand();
|
||||
|
||||
return {
|
||||
top: `${top}%`,
|
||||
left: `${left}%`,
|
||||
transform: `translate(-${top}%, -${left}%)`
|
||||
};
|
||||
}
|
||||
|
||||
const ModalDetails = forwardRef(({ modalStyle, handleClose }, ref) => (
|
||||
<div ref={ref} tabIndex={-1}>
|
||||
<MainCard
|
||||
style={modalStyle}
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
width: { xs: 280, lg: 450 },
|
||||
top: '50%',
|
||||
left: '50%',
|
||||
transform: 'translate(-50%, -50%)'
|
||||
}}
|
||||
title="Title"
|
||||
content={false}
|
||||
secondary={
|
||||
<IconButton onClick={handleClose} size="large">
|
||||
<CloseIcon fontSize="small" />
|
||||
</IconButton>
|
||||
}
|
||||
>
|
||||
<CardContent>
|
||||
<Typography variant="body1">Laboris non ad et aute sint aliquip mollit voluptate velit dolore magna fugiat ex.</Typography>
|
||||
<Typography variant="body2" sx={{ mt: 2 }}>
|
||||
Commodo amet veniam nostrud mollit quis sint qui nulla elit esse excepteur ullamco esse magna. Nisi duis aute est in mollit irure
|
||||
enim tempor in.
|
||||
</Typography>
|
||||
</CardContent>
|
||||
<Divider />
|
||||
<CardActions>
|
||||
<SimpleModal />
|
||||
</CardActions>
|
||||
</MainCard>
|
||||
</div>
|
||||
));
|
||||
|
||||
ModalDetails.propTypes = {
|
||||
modalStyle: PropTypes.object,
|
||||
handleClose: PropTypes.func
|
||||
};
|
||||
|
||||
export default ModalDetails;
|
||||
@ -0,0 +1,79 @@
|
||||
import React from 'react';
|
||||
|
||||
// material-ui
|
||||
import { styled } from '@mui/material/styles';
|
||||
import { Button, CardContent, CardActions, Divider, Grid, IconButton, Modal, Typography } from '@mui/material';
|
||||
|
||||
// project imports
|
||||
import MainCard from 'ui-component/cards/MainCard';
|
||||
|
||||
// assets
|
||||
import CloseIcon from '@mui/icons-material/Close';
|
||||
|
||||
const ModalWrapper = styled('div')({
|
||||
marginBottom: 16,
|
||||
height: 500,
|
||||
flexGrow: 1,
|
||||
minWidth: 300,
|
||||
zIndex: -1,
|
||||
transform: 'translateZ(0)',
|
||||
'@media all and (-ms-high-contrast: none)': {
|
||||
display: 'none'
|
||||
}
|
||||
});
|
||||
|
||||
// ==============================|| SERVER MODAL ||============================== //
|
||||
|
||||
export default function ServerModal() {
|
||||
const rootRef = React.useRef(null);
|
||||
|
||||
return (
|
||||
<ModalWrapper ref={rootRef}>
|
||||
<Modal
|
||||
disablePortal
|
||||
disableEnforceFocus
|
||||
disableAutoFocus
|
||||
open
|
||||
aria-labelledby="server-modal-title"
|
||||
aria-describedby="server-modal-description"
|
||||
sx={{
|
||||
display: 'flex',
|
||||
p: 1,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center'
|
||||
}}
|
||||
container={() => rootRef.current}
|
||||
>
|
||||
<MainCard
|
||||
sx={{
|
||||
width: 450,
|
||||
zIndex: 1
|
||||
}}
|
||||
title="Server Side Modal"
|
||||
content={false}
|
||||
secondary={
|
||||
<IconButton size="large">
|
||||
<CloseIcon fontSize="small" />
|
||||
</IconButton>
|
||||
}
|
||||
>
|
||||
<CardContent>
|
||||
<Typography variant="body1">Laboris non ad et aute sint aliquip mollit voluptate velit dolore magna fugiat ex.</Typography>
|
||||
<Typography variant="body2" sx={{ mt: 2 }}>
|
||||
Commodo amet veniam nostrud mollit quis sint qui nulla elit esse excepteur ullamco esse magna. Nisi duis aute est in mollit
|
||||
irure enim tempor in.
|
||||
</Typography>
|
||||
</CardContent>
|
||||
<Divider />
|
||||
<CardActions>
|
||||
<Grid container justifyContent="flex-end">
|
||||
<Button variant="contained" type="button">
|
||||
Open Modal
|
||||
</Button>
|
||||
</Grid>
|
||||
</CardActions>
|
||||
</MainCard>
|
||||
</Modal>
|
||||
</ModalWrapper>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,94 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
|
||||
// material-ui
|
||||
import { Button, CardContent, CardActions, Divider, Grid, IconButton, Modal, Typography } from '@mui/material';
|
||||
|
||||
// project imports
|
||||
import MainCard from 'ui-component/cards/MainCard';
|
||||
|
||||
// assets
|
||||
import CloseIcon from '@mui/icons-material/Close';
|
||||
|
||||
// generate random
|
||||
function rand() {
|
||||
return Math.round(Math.random() * 20) - 10;
|
||||
}
|
||||
|
||||
// modal position
|
||||
function getModalStyle() {
|
||||
const top = 50 + rand();
|
||||
const left = 50 + rand();
|
||||
|
||||
return {
|
||||
top: `${top}%`,
|
||||
left: `${left}%`,
|
||||
transform: `translate(-${top}%, -${left}%)`
|
||||
};
|
||||
}
|
||||
|
||||
const Body = React.forwardRef(({ modalStyle, handleClose }, ref) => (
|
||||
<div ref={ref} tabIndex={-1}>
|
||||
<MainCard
|
||||
style={modalStyle}
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
width: { xs: 280, lg: 450 },
|
||||
top: '50%',
|
||||
left: '50%',
|
||||
transform: 'translate(-50%, -50%)'
|
||||
}}
|
||||
title="Title"
|
||||
content={false}
|
||||
secondary={
|
||||
<IconButton onClick={handleClose} size="large">
|
||||
<CloseIcon fontSize="small" />
|
||||
</IconButton>
|
||||
}
|
||||
>
|
||||
<CardContent>
|
||||
<Typography variant="body1">Laboris non ad et aute sint aliquip mollit voluptate velit dolore magna fugiat ex.</Typography>
|
||||
<Typography variant="body2" sx={{ mt: 2 }}>
|
||||
Commodo amet veniam nostrud mollit quis sint qui nulla elit esse excepteur ullamco esse magna. Nisi duis aute est in mollit irure
|
||||
enim tempor in.
|
||||
</Typography>
|
||||
</CardContent>
|
||||
<Divider />
|
||||
<CardActions>
|
||||
<SimpleModal />
|
||||
</CardActions>
|
||||
</MainCard>
|
||||
</div>
|
||||
));
|
||||
|
||||
Body.propTypes = {
|
||||
modalStyle: PropTypes.object,
|
||||
handleClose: PropTypes.func
|
||||
};
|
||||
|
||||
// ==============================|| SIMPLE MODAL ||============================== //
|
||||
|
||||
export default function SimpleModal() {
|
||||
// getModalStyle is not a pure function, we roll the style only on the first render
|
||||
const [modalStyle] = React.useState(getModalStyle);
|
||||
|
||||
const [open, setOpen] = React.useState(false);
|
||||
const handleOpen = () => {
|
||||
setOpen(true);
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
setOpen(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<Grid container justifyContent="flex-end">
|
||||
<Button variant="contained" type="button" onClick={handleOpen}>
|
||||
Open Modal
|
||||
</Button>
|
||||
<Modal open={open} onClose={handleClose} aria-labelledby="simple-modal-title" aria-describedby="simple-modal-description">
|
||||
<Body modalStyle={modalStyle} handleClose={handleClose} />
|
||||
</Modal>
|
||||
</Grid>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,16 @@
|
||||
// project imports
|
||||
import SimpleModal from './SimpleModal';
|
||||
import ServerModal from './ServerModal';
|
||||
import MainCard from 'ui-component/cards/MainCard';
|
||||
import SecondaryAction from 'ui-component/cards/CardSecondaryAction';
|
||||
|
||||
// ==============================|| MODAL PAGE ||============================== //
|
||||
|
||||
const Modal = () => (
|
||||
<MainCard title="Simple Modal" secondary={<SecondaryAction link="https://next.material-ui.com/components/modal/" />}>
|
||||
<ServerModal />
|
||||
<SimpleModal />
|
||||
</MainCard>
|
||||
);
|
||||
|
||||
export default Modal;
|
||||
Loading…
Reference in New Issue