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