modal 반영 1차
parent
5b3083772e
commit
a8da06253d
@ -1,76 +1,9 @@
|
|||||||
import PropTypes from 'prop-types';
|
import GridModal from '../../form/Modal/GridModal';
|
||||||
import React, { forwardRef, useState } from 'react';
|
|
||||||
|
|
||||||
// material-ui
|
|
||||||
import { Button, CardContent, CardActions, Divider, Grid, IconButton, Modal, Typography, Card } 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';
|
|
||||||
import Board from '../board/Board';
|
import Board from '../board/Board';
|
||||||
// import DraggableResizeModal from 'views/form/Modal/DraggableResizeModal';
|
|
||||||
|
|
||||||
// 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 = () => {
|
|
||||||
// getModalStyle is not a pure function, we roll the style only on the first render
|
|
||||||
const [modalStyle] = useState(getModalStyle);
|
|
||||||
|
|
||||||
const [open, setOpen] = useState(true);
|
const ModalDetails = () => (
|
||||||
const handleOpen = () => {
|
<GridModal>
|
||||||
setOpen(true);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleClose = () => {
|
|
||||||
setOpen(false);
|
|
||||||
};
|
|
||||||
|
|
||||||
const [resizeOpen, setResizeOpen] = useState(false);
|
|
||||||
const handleOpenResizeToggle = (evt) => {
|
|
||||||
setResizeOpen(!resizeOpen);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<MainCard>
|
|
||||||
<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} /> */}
|
|
||||||
<Board />
|
<Board />
|
||||||
{/* dkdkkd */}
|
</GridModal>
|
||||||
</Modal>
|
);
|
||||||
</Grid>
|
|
||||||
</MainCard>
|
|
||||||
|
|
||||||
// <DraggableResizeModal title="모달 테스트2" open={resizeOpen} isResize width={450} height={450} onClose={handleOpenResizeToggle}>
|
|
||||||
// test2
|
|
||||||
// </DraggableResizeModal>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
// ModalDetails.propTypes = {
|
|
||||||
// modalStyle: PropTypes.object,
|
|
||||||
// handleClose: PropTypes.func
|
|
||||||
// };
|
|
||||||
|
|
||||||
export default ModalDetails;
|
export default ModalDetails;
|
||||||
|
|||||||
@ -0,0 +1,42 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Dialog, DialogTitle, DialogContent, makeStyles, Typography } from '@mui/material';
|
||||||
|
import Controls from './controls/Controls';
|
||||||
|
// import CloseIcon from '@mui/icons-material';
|
||||||
|
import { IconSquareX } from '@tabler/icons';
|
||||||
|
|
||||||
|
const useStyles = makeStyles((theme) => ({
|
||||||
|
dialogWrapper: {
|
||||||
|
padding: theme.spacing(2),
|
||||||
|
position: 'absolute',
|
||||||
|
top: theme.spacing(5)
|
||||||
|
},
|
||||||
|
dialogTitle: {
|
||||||
|
paddingRight: '0px'
|
||||||
|
}
|
||||||
|
}));
|
||||||
|
|
||||||
|
export default function Popup(props) {
|
||||||
|
const { title, children, openPopup, setOpenPopup } = props;
|
||||||
|
const classes = useStyles();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Dialog open={openPopup} maxWidth="md" classes={{ paper: classes.dialogWrapper }}>
|
||||||
|
<DialogTitle className={classes.dialogTitle}>
|
||||||
|
<div style={{ display: 'flex' }}>
|
||||||
|
<Typography variant="h6" component="div" style={{ flexGrow: 1 }}>
|
||||||
|
{title}
|
||||||
|
</Typography>
|
||||||
|
<Controls.ActionButton
|
||||||
|
color="secondary"
|
||||||
|
onClick={() => {
|
||||||
|
setOpenPopup(false);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<IconSquareX />
|
||||||
|
</Controls.ActionButton>
|
||||||
|
</div>
|
||||||
|
</DialogTitle>
|
||||||
|
<DialogContent dividers>{children}</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,32 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Button, makeStyles } from '@mui/material';
|
||||||
|
|
||||||
|
const useStyles = makeStyles((theme) => ({
|
||||||
|
root: {
|
||||||
|
minWidth: 0,
|
||||||
|
margin: theme.spacing(0.5)
|
||||||
|
},
|
||||||
|
secondary: {
|
||||||
|
backgroundColor: theme.palette.secondary.light,
|
||||||
|
'& .MuiButton-label': {
|
||||||
|
color: theme.palette.secondary.main
|
||||||
|
}
|
||||||
|
},
|
||||||
|
primary: {
|
||||||
|
backgroundColor: theme.palette.primary.light,
|
||||||
|
'& .MuiButton-label': {
|
||||||
|
color: theme.palette.primary.main
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}));
|
||||||
|
|
||||||
|
export default function ActionButton(props) {
|
||||||
|
const { color, children, onClick } = props;
|
||||||
|
const classes = useStyles();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Button className={`${classes.root} ${classes[color]}`} onClick={onClick}>
|
||||||
|
{children}
|
||||||
|
</Button>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,29 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Button as MuiButton, makeStyles } from '@mui/material';
|
||||||
|
|
||||||
|
const useStyles = makeStyles((theme) => ({
|
||||||
|
root: {
|
||||||
|
margin: theme.spacing(0.5)
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
textTransform: 'none'
|
||||||
|
}
|
||||||
|
}));
|
||||||
|
|
||||||
|
export default function Button(props) {
|
||||||
|
const { text, size, color, variant, onClick, ...other } = props;
|
||||||
|
const classes = useStyles();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<MuiButton
|
||||||
|
variant={variant || 'contained'}
|
||||||
|
size={size || 'large'}
|
||||||
|
color={color || 'primary'}
|
||||||
|
onClick={onClick}
|
||||||
|
{...other}
|
||||||
|
classes={{ root: classes.root, label: classes.label }}
|
||||||
|
>
|
||||||
|
{text}
|
||||||
|
</MuiButton>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,29 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { FormControl, FormControlLabel, Checkbox as MuiCheckbox } from '@mui/material';
|
||||||
|
|
||||||
|
export default function Checkbox(props) {
|
||||||
|
const { name, label, value, onChange } = props;
|
||||||
|
|
||||||
|
const convertToDefEventPara = (name, value) => ({
|
||||||
|
target: {
|
||||||
|
name,
|
||||||
|
value
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<FormControl>
|
||||||
|
<FormControlLabel
|
||||||
|
control={
|
||||||
|
<MuiCheckbox
|
||||||
|
name={name}
|
||||||
|
color="primary"
|
||||||
|
checked={value}
|
||||||
|
onChange={(e) => onChange(convertToDefEventPara(name, e.target.checked))}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
label={label}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
import Input from './Input';
|
||||||
|
import RadioGroup from './RadioGroup';
|
||||||
|
import Select from './Select';
|
||||||
|
import Checkbox from './Checkbox';
|
||||||
|
import Button from './Button';
|
||||||
|
import ActionButton from './ActionButton';
|
||||||
|
|
||||||
|
const Controls = {
|
||||||
|
Input,
|
||||||
|
RadioGroup,
|
||||||
|
Select,
|
||||||
|
Checkbox,
|
||||||
|
Button,
|
||||||
|
ActionButton
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Controls;
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { TextField } from '@mui/material';
|
||||||
|
|
||||||
|
export default function Input(props) {
|
||||||
|
const { name, label, value, error = null, onChange, ...other } = props;
|
||||||
|
return (
|
||||||
|
<TextField
|
||||||
|
variant="outlined"
|
||||||
|
label={label}
|
||||||
|
name={name}
|
||||||
|
value={value}
|
||||||
|
onChange={onChange}
|
||||||
|
{...other}
|
||||||
|
{...(error && { error: true, helperText: error })}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { FormControl, FormLabel, RadioGroup as MuiRadioGroup, FormControlLabel, Radio } from '@mui/material';
|
||||||
|
|
||||||
|
export default function RadioGroup(props) {
|
||||||
|
const { name, label, value, onChange, items } = props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<FormControl>
|
||||||
|
<FormLabel>{label}</FormLabel>
|
||||||
|
<MuiRadioGroup row name={name} value={value} onChange={onChange}>
|
||||||
|
{items.map((item) => (
|
||||||
|
<FormControlLabel key={item.id} value={item.id} control={<Radio />} label={item.title} />
|
||||||
|
))}
|
||||||
|
</MuiRadioGroup>
|
||||||
|
</FormControl>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,21 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { FormControl, InputLabel, Select as MuiSelect, MenuItem, FormHelperText } from '@mui/material';
|
||||||
|
|
||||||
|
export default function Select(props) {
|
||||||
|
const { name, label, value, error = null, onChange, options } = props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<FormControl variant="outlined" {...(error && { error: true })}>
|
||||||
|
<InputLabel>{label}</InputLabel>
|
||||||
|
<MuiSelect label={label} name={name} value={value} onChange={onChange}>
|
||||||
|
<MenuItem value="">None</MenuItem>
|
||||||
|
{options.map((item) => (
|
||||||
|
<MenuItem key={item.id} value={item.id}>
|
||||||
|
{item.title}
|
||||||
|
</MenuItem>
|
||||||
|
))}
|
||||||
|
</MuiSelect>
|
||||||
|
{error && <FormHelperText>{error}</FormHelperText>}
|
||||||
|
</FormControl>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue