148 lines
4.0 KiB
JavaScript
148 lines
4.0 KiB
JavaScript
import { Alert, Box, Collapse, IconButton, Typography } from "@mui/material";
|
|
import { styled } from "@mui/material/styles";
|
|
import { useEffect, useState } from "react";
|
|
|
|
import GhostStyledIcon from "../Icon/GhostIcon";
|
|
import CloseIcon from '@mui/icons-material/Close';
|
|
|
|
const PREFIX = "Notification";
|
|
|
|
const classes = {
|
|
root: `${PREFIX}-root`,
|
|
icon: `${PREFIX}-icon`,
|
|
text: `${PREFIX}-text`,
|
|
};
|
|
|
|
const StyledCollapse = styled(Collapse, { shouldForwardProp: prop => prop !== "square" })(
|
|
({ theme, square }) => ({
|
|
[`& .${classes.root}`]: {
|
|
borderRadius: square ? "0px" : "9px",
|
|
paddingTop: "9px",
|
|
paddingBottom: "9px",
|
|
marginBottom: "10px",
|
|
wordBreak: "break-word",
|
|
justifyContent: "center",
|
|
color: theme.colors.gray[700],
|
|
"& a": {
|
|
fontWeight: "500",
|
|
color: theme.colors.gray[700],
|
|
textDecoration: "underline",
|
|
},
|
|
"& .MuiAlert-message": {
|
|
padding: "0px",
|
|
flexGrow: "1",
|
|
},
|
|
"& .MuiAlert-action": {
|
|
paddingLeft: "0px",
|
|
"& .MuiIconButton-sizeSmall": {
|
|
padding: "0px",
|
|
"& .MuiSvgIcon-fontSizeSmall": {
|
|
fontSize: "1.14rem",
|
|
},
|
|
},
|
|
},
|
|
"&.MuiAlert-filledSuccess": {
|
|
color: "#253449",
|
|
},
|
|
},
|
|
|
|
[`& .${classes.icon}`]: {
|
|
fontSize: "16.5px",
|
|
marginRight: "9px",
|
|
},
|
|
|
|
[`& .${classes.text}`]: {
|
|
fontSize: "15px",
|
|
lineHeight: "24px",
|
|
},
|
|
}),
|
|
);
|
|
|
|
const Notification = ({
|
|
template = "info",
|
|
dismissible = false,
|
|
onDismiss,
|
|
show,
|
|
square = false,
|
|
...props
|
|
}) => {
|
|
let icon;
|
|
let severity = props.severity;
|
|
let variant = props.variant;
|
|
switch (template) {
|
|
case "default":
|
|
severity = "info";
|
|
variant = "filled";
|
|
break;
|
|
case "success":
|
|
icon = "check-circle";
|
|
severity = "success";
|
|
variant = "filled";
|
|
break;
|
|
case "error":
|
|
icon = "alert-circle";
|
|
severity = "error";
|
|
variant = "filled";
|
|
break;
|
|
case "info":
|
|
icon = "info";
|
|
severity = "info";
|
|
variant = "filled";
|
|
break;
|
|
case "warning":
|
|
icon = "info";
|
|
severity = "warning";
|
|
variant = "filled";
|
|
break;
|
|
}
|
|
|
|
const action =
|
|
props.action || dismissible === false ? (
|
|
props.action
|
|
) : (
|
|
<IconButton
|
|
aria-label="close"
|
|
color="inherit"
|
|
size="small"
|
|
onClick={() => {
|
|
setOpen(false);
|
|
if (onDismiss) {
|
|
onDismiss();
|
|
}
|
|
}}
|
|
>
|
|
<GhostStyledIcon component={CloseIcon} />
|
|
</IconButton>
|
|
);
|
|
|
|
const [open, setOpen] = useState(true);
|
|
useEffect(() => {
|
|
if (show === true) {
|
|
setOpen(true);
|
|
}
|
|
}, [show]);
|
|
|
|
return (
|
|
<StyledCollapse in={open} square={square}>
|
|
<Alert
|
|
variant={variant}
|
|
icon={false}
|
|
severity={severity}
|
|
className={classes.root}
|
|
action={action}
|
|
{...props}
|
|
elevation={8}
|
|
>
|
|
<Box display="flex" alignItems="center" justifyContent="center">
|
|
{icon && <GhostStyledIcon className={classes.icon} component={icon} />}
|
|
<Box display="flex" alignItems="center">
|
|
<Typography className={classes.text}>{props.children}</Typography>
|
|
</Box>
|
|
</Box>
|
|
</Alert>
|
|
</StyledCollapse>
|
|
);
|
|
};
|
|
|
|
export default Notification;
|