modal 반영 1차
parent
462017bfdd
commit
c12d4b49ce
@ -0,0 +1,40 @@
|
||||
import * as React from 'react';
|
||||
import Box from '@mui/material/Box';
|
||||
import Button from '@mui/material/Button';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import Modal from '@mui/material/Modal';
|
||||
|
||||
const style = {
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
left: '50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
width: 400,
|
||||
bgcolor: 'background.paper',
|
||||
border: '2px solid #000',
|
||||
boxShadow: 24,
|
||||
p: 4
|
||||
};
|
||||
|
||||
export default function BasicModal() {
|
||||
const [open, setOpen] = React.useState(false);
|
||||
const handleOpen = () => setOpen(true);
|
||||
const handleClose = () => setOpen(false);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Button onClick={handleOpen}>Open BasicModal</Button>
|
||||
<Modal hideBackdrop open={open} onClose={handleClose} aria-labelledby="modal-modal-title" aria-describedby="modal-modal-description">
|
||||
<Box sx={style}>
|
||||
<Typography id="modal-modal-title" variant="h6" component="h2">
|
||||
Text in a modal
|
||||
</Typography>
|
||||
<Typography id="modal-modal-description" sx={{ mt: 2 }}>
|
||||
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
|
||||
</Typography>
|
||||
<Button onClick={handleClose}>Close Modal</Button>
|
||||
</Box>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,46 @@
|
||||
import { useState } from 'react';
|
||||
import { makeStyles } from '@mui/styles';
|
||||
import { Button } from '@mui/material';
|
||||
import DraggableResizeModal from './DraggableResizeModal';
|
||||
|
||||
const useStyles = makeStyles((theme) => ({
|
||||
modal: {
|
||||
'& > *': {
|
||||
margin: theme.spacing(1)
|
||||
},
|
||||
padding: theme.spacing(2)
|
||||
}
|
||||
}));
|
||||
|
||||
function DraggableModal() {
|
||||
const classes = useStyles();
|
||||
const [open, setOpen] = useState(false);
|
||||
const [resizeOpen, setResizeOpen] = useState(false);
|
||||
|
||||
const handleOpenToggle = (evt) => {
|
||||
setOpen(!open);
|
||||
};
|
||||
|
||||
const handleOpenResizeToggle = (evt) => {
|
||||
setResizeOpen(!resizeOpen);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={classes.modal}>
|
||||
<Button variant="outlined" color="primary" onClick={handleOpenToggle}>
|
||||
Open Draggable Modal
|
||||
</Button>
|
||||
<Button variant="outlined" color="primary" onClick={handleOpenResizeToggle}>
|
||||
Open Draggable(+resize) Modal
|
||||
</Button>
|
||||
<DraggableResizeModal title="모달 테스트1" open={open} width={450} height={450} onClose={handleOpenToggle}>
|
||||
test1
|
||||
</DraggableResizeModal>
|
||||
<DraggableResizeModal title="모달 테스트2" open={resizeOpen} isResize width={450} height={450} onClose={handleOpenResizeToggle}>
|
||||
test2
|
||||
</DraggableResizeModal>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default DraggableModal;
|
||||
@ -0,0 +1,164 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Paper, makeStyles, withStyles, IconButton, Typography, Divider } from '@mui/material';
|
||||
|
||||
import { Close as CloseIcon, Remove as RemoveIcon, WebAsset as WebAssetIcon } from '@mui/icons-material';
|
||||
|
||||
import Draggable from 'react-draggable';
|
||||
import { ResizableBox } from 'react-resizable';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
const styles = (theme) => ({
|
||||
modal: {
|
||||
margin: 0,
|
||||
padding: theme.spacing(2),
|
||||
cursor: 'move',
|
||||
userSelect: 'none',
|
||||
minWidth: 200
|
||||
},
|
||||
title: {
|
||||
fontWeight: 'bold'
|
||||
},
|
||||
closeButton: {
|
||||
position: 'fixed',
|
||||
right: theme.spacing(1),
|
||||
top: theme.spacing(1),
|
||||
color: theme.palette.grey[500]
|
||||
},
|
||||
minimize: {
|
||||
position: 'fixed',
|
||||
right: theme.spacing(6),
|
||||
top: theme.spacing(1),
|
||||
color: theme.palette.grey[500]
|
||||
}
|
||||
});
|
||||
|
||||
// modal 의 타이틀과 최소화 및 닫기버튼 구성
|
||||
const ModalTitle = withStyles(styles)((props) => {
|
||||
const { children, classes, width, isMinimized, onMinimized, onClose, ...other } = props;
|
||||
return (
|
||||
<div className={classes.modal} {...other} style={{ width }}>
|
||||
<Typography variant="h6" className={classes.title}>
|
||||
{children}
|
||||
</Typography>
|
||||
{onClose ? (
|
||||
<IconButton aria-label="close" className={classes.closeButton} onClick={onClose}>
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
) : null}
|
||||
{onMinimized ? (
|
||||
<IconButton aria-label="close" className={classes.minimize} onClick={onMinimized}>
|
||||
{isMinimized ? <WebAssetIcon /> : <RemoveIcon />}
|
||||
</IconButton>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
const useContentStyles = (width, height) =>
|
||||
makeStyles((theme) => ({
|
||||
resizable: {
|
||||
padding: theme.spacing(2),
|
||||
position: 'relative',
|
||||
'& .react-resizable-handle': {
|
||||
position: 'absolute',
|
||||
userSelect: 'none',
|
||||
width: 20,
|
||||
height: 20,
|
||||
bottom: 0,
|
||||
right: 0,
|
||||
background:
|
||||
"url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+')",
|
||||
'background-position': 'bottom right',
|
||||
padding: '0 3px 3px 0',
|
||||
'background-repeat': 'no-repeat',
|
||||
'background-origin': 'content-box',
|
||||
'box-sizing': 'border-box',
|
||||
cursor: 'se-resize'
|
||||
}
|
||||
},
|
||||
content: {
|
||||
padding: theme.spacing(2),
|
||||
maxHeight: height,
|
||||
maxWidth: width
|
||||
}
|
||||
}));
|
||||
|
||||
// modal의 content 영역으로 isResize 여부에 따라 다른 컴포넌트를 사용
|
||||
const ModalContent = ({ width, height, isResize, children }) => {
|
||||
const classes = useContentStyles(width, height)();
|
||||
return (
|
||||
<>
|
||||
{isResize ? (
|
||||
<ResizableBox height={height} width={width} className={classes.resizable}>
|
||||
{children}
|
||||
</ResizableBox>
|
||||
) : (
|
||||
<Paper className={classes.content}>{children}</Paper>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const PaperComponent = (props) => (
|
||||
<Draggable handle="#draggable-modal-title">
|
||||
<Paper {...props} />
|
||||
</Draggable>
|
||||
);
|
||||
|
||||
const useStyles = makeStyles((theme) => ({
|
||||
modal: {
|
||||
position: 'fixed',
|
||||
top: '10%',
|
||||
left: '10%',
|
||||
zIndex: 1300,
|
||||
userSelect: 'none'
|
||||
}
|
||||
}));
|
||||
|
||||
const Modal = ({ title, children, width, height, isResize, onClose }) => {
|
||||
const classes = useStyles();
|
||||
const [isMinimized, setIsMinimized] = useState(false);
|
||||
|
||||
const handleMinimized = (evt) => {
|
||||
setIsMinimized(!isMinimized);
|
||||
};
|
||||
|
||||
useEffect(() => () => {}, []);
|
||||
|
||||
return (
|
||||
<PaperComponent className={classes.modal}>
|
||||
<ModalTitle id="draggable-modal-title" onClose={onClose} width={width} isMinimized={isMinimized} onMinimized={handleMinimized}>
|
||||
{title}
|
||||
</ModalTitle>
|
||||
<Divider />
|
||||
{!isMinimized && (
|
||||
<ModalContent width={width} height={height} isResize={isResize}>
|
||||
{children}
|
||||
</ModalContent>
|
||||
)}
|
||||
</PaperComponent>
|
||||
);
|
||||
};
|
||||
|
||||
// open 여부에 따라 mount 및 unmount 처리
|
||||
const DraggableResizeModal = ({ open, ...other }) => <>{open && <Modal {...other} />}</>;
|
||||
|
||||
// property 의 기본값 셋팅
|
||||
DraggableResizeModal.defaultProps = {
|
||||
title: '목록',
|
||||
isResize: false,
|
||||
width: 500,
|
||||
height: 500
|
||||
};
|
||||
|
||||
// property 의 타입 지정
|
||||
DraggableResizeModal.propTypes = {
|
||||
title: PropTypes.string,
|
||||
open: PropTypes.bool.isRequired,
|
||||
onClose: PropTypes.func,
|
||||
isResize: PropTypes.bool,
|
||||
width: PropTypes.number,
|
||||
height: PropTypes.number
|
||||
};
|
||||
|
||||
export default DraggableResizeModal;
|
||||
@ -0,0 +1,44 @@
|
||||
import * as React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import Box from '@mui/material/Box';
|
||||
import Button from '@mui/material/Button';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import Modal from '@mui/material/Modal';
|
||||
|
||||
const style = {
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
left: '50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
width: 400,
|
||||
bgcolor: 'background.paper',
|
||||
border: '2px solid #000',
|
||||
boxShadow: 24,
|
||||
p: 4
|
||||
};
|
||||
|
||||
export default function GridModal({ children }) {
|
||||
const [open, setOpen] = React.useState(false);
|
||||
const handleOpen = () => setOpen(true);
|
||||
const handleClose = () => setOpen(false);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Button onClick={handleOpen}>Grid Modal(List)</Button>
|
||||
<Modal hideBackdrop open={open} onClose={handleClose} aria-labelledby="modal-modal-title" aria-describedby="modal-modal-description">
|
||||
<Box sx={style}>
|
||||
<Typography id="modal-modal-title" variant="h2" component="h2">
|
||||
Text in a modal
|
||||
</Typography>
|
||||
{children}
|
||||
<Button onClick={handleClose}>Close Modal</Button>
|
||||
</Box>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
GridModal.propTypes = {
|
||||
children: PropTypes.node
|
||||
};
|
||||
@ -0,0 +1,82 @@
|
||||
import * as React from 'react';
|
||||
import Box from '@mui/material/Box';
|
||||
import Modal from '@mui/material/Modal';
|
||||
import Button from '@mui/material/Button';
|
||||
import CloseIcon from '@mui/icons-material/Close';
|
||||
import { IconButton } from '@mui/material';
|
||||
|
||||
const style = {
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
left: '50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
width: 400,
|
||||
bgcolor: 'background.paper',
|
||||
border: '2px solid #000',
|
||||
boxShadow: 24,
|
||||
pt: 2,
|
||||
px: 4,
|
||||
pb: 3
|
||||
};
|
||||
|
||||
function ChildModal() {
|
||||
const [open, setOpen] = React.useState(false);
|
||||
const handleOpen = () => {
|
||||
setOpen(true);
|
||||
};
|
||||
const handleClose = () => {
|
||||
setOpen(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Button onClick={handleOpen}>Open Child Modal</Button>
|
||||
<Modal hideBackdrop open={open} onClose={handleClose} aria-labelledby="child-modal-title" aria-describedby="child-modal-description">
|
||||
<Box sx={{ ...style, width: 200 }}>
|
||||
<h2 id="child-modal-title">Text in a child modal</h2>
|
||||
<p id="child-modal-description">Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
|
||||
<Button onClick={handleClose}>Close Child Modal</Button>
|
||||
</Box>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default function NestedModal() {
|
||||
const [open, setOpen] = React.useState(false);
|
||||
const handleOpen = () => {
|
||||
setOpen(true);
|
||||
};
|
||||
const handleClose = () => {
|
||||
setOpen(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
tabIndex={-1}
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
width: { xs: 280, lg: 450 },
|
||||
top: '50%',
|
||||
left: '50%',
|
||||
transform: 'translate(-50%, -50%)'
|
||||
}}
|
||||
>
|
||||
<Button onClick={handleOpen}>Open Nested modal</Button>
|
||||
<Modal
|
||||
hideBackdrop
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
aria-labelledby="parent-modal-title"
|
||||
aria-describedby="parent-modal-description"
|
||||
>
|
||||
<Box content sx={{ ...style, width: 400 }}>
|
||||
<h2 id="parent-modal-title">Text in a modal</h2>
|
||||
<p id="parent-modal-description">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
|
||||
<ChildModal />
|
||||
<Button onClick={handleClose}>Close Modal</Button>
|
||||
</Box>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue