parent
3ea29bb96c
commit
15a88f050a
@ -0,0 +1,47 @@
|
|||||||
|
import Box from '@mui/material/Box';
|
||||||
|
import Alert from '@mui/material/Alert';
|
||||||
|
import IconButton from '@mui/material/IconButton';
|
||||||
|
import Collapse from '@mui/material/Collapse';
|
||||||
|
import CloseIcon from '@mui/icons-material/Close';
|
||||||
|
import AlertTitle from '@mui/material/AlertTitle';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
|
||||||
|
// severity는 double-quote를 써야만 한다 - prettier-ignore 설정
|
||||||
|
// prettier-ignore
|
||||||
|
export default function MuiAlert({ severity = "info", title = '', message, open, setOpen }) {
|
||||||
|
console.log(severity);
|
||||||
|
return (
|
||||||
|
<Box sx={{ width: '100%' }}>
|
||||||
|
<Collapse in={open}>
|
||||||
|
<Alert
|
||||||
|
variant="filled"
|
||||||
|
severity={severity}
|
||||||
|
action={
|
||||||
|
<IconButton
|
||||||
|
aria-label="close"
|
||||||
|
color="inherit"
|
||||||
|
size="small"
|
||||||
|
onClick={() => {
|
||||||
|
setOpen(false);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<CloseIcon fontSize="inherit" />
|
||||||
|
</IconButton>
|
||||||
|
}
|
||||||
|
sx={{ mb: 2 }}
|
||||||
|
>
|
||||||
|
{title && <AlertTitle>{title}</AlertTitle>}
|
||||||
|
<strong>{message}</strong>
|
||||||
|
</Alert>
|
||||||
|
</Collapse>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
MuiAlert.propTypes = {
|
||||||
|
severity: PropTypes.string,
|
||||||
|
title: PropTypes.string,
|
||||||
|
message: PropTypes.string.isRequired,
|
||||||
|
open: PropTypes.bool.isRequired,
|
||||||
|
setOpen: PropTypes.func.isRequired
|
||||||
|
};
|
||||||
@ -1,42 +0,0 @@
|
|||||||
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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,32 +0,0 @@
|
|||||||
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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,29 +0,0 @@
|
|||||||
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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,29 +0,0 @@
|
|||||||
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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,17 +0,0 @@
|
|||||||
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;
|
|
||||||
@ -1,17 +0,0 @@
|
|||||||
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 })}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,17 +0,0 @@
|
|||||||
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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,21 +0,0 @@
|
|||||||
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