xit-front
/
xit-opst-fo
20
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

modal 반영 1차

Browse Source
main
minuk926 3 years ago
parent 5b3083772e
commit a8da06253d
10 changed files with 214 additions and 77 deletions
Show Stats Download Patch File Download Diff File

79
src/views/biz/parking/ModalDetails.jsx
Unescape Escape View File

@ -1,76 +1,9 @@
import PropTypes from 'prop-types';
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 GridModal from '../../form/Modal/GridModal';
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 handleOpen = () => {
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 />
{/* dkdkkd */}
</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
// };
const ModalDetails = () => (
<GridModal>
<Board />
</GridModal>
);
export default ModalDetails;

8
src/views/form/Modal/GridModal.jsx
Unescape Escape View File

@ -11,7 +11,7 @@ const style = {
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
width: 400,
width: 900,
bgcolor: 'background.paper',
border: '2px solid #000',
boxShadow: 24,
@ -19,14 +19,14 @@ const style = {
};
export default function GridModal({ children }) {
const [open, setOpen] = React.useState(false);
const [open, setOpen] = React.useState(true);
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">
{/* <Button onClick={handleOpen}>Grid Modal(List)</Button> */}
<Modal 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

42
src/views/form/Popup/Popup.js
Unescape Escape View File

@ -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>
);
}

32
src/views/form/Popup/controls/ActionButton.js
Unescape Escape View File

@ -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>
);
}

29
src/views/form/Popup/controls/Button.js
Unescape Escape View File

@ -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>
);
}

29
src/views/form/Popup/controls/Checkbox.js
Unescape Escape View File

@ -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>
);
}

17
src/views/form/Popup/controls/Controls.js
Unescape Escape View File

@ -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;

17
src/views/form/Popup/controls/Input.js
Unescape Escape View File

@ -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 })}
/>
);
}

17
src/views/form/Popup/controls/RadioGroup.js
Unescape Escape View File

@ -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>
);
}

21
src/views/form/Popup/controls/Select.js
Unescape Escape View File

@ -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>
);
}
Write Preview
Loading…
Cancel
Save