97 lines
2.2 KiB
React
97 lines
2.2 KiB
React
import Stack from "@mui/material/Stack";
|
|
import IconButton from "@mui/material/IconButton";
|
|
import Typography from "@mui/material/Typography";
|
|
import Button from "@mui/material/Button";
|
|
import ToastBody from "./body";
|
|
import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
|
|
import ErrorOutlineOutlinedIcon from "@mui/icons-material/ErrorOutlineOutlined";
|
|
import WarningAmberOutlinedIcon from "@mui/icons-material/WarningAmberOutlined";
|
|
import CloseIcon from "@mui/icons-material/Close";
|
|
|
|
// Utils
|
|
import { useTheme } from "@emotion/react";
|
|
import PropTypes from "prop-types";
|
|
|
|
const icons = {
|
|
info: <InfoOutlinedIcon />,
|
|
error: <ErrorOutlineOutlinedIcon />,
|
|
warning: <WarningAmberOutlinedIcon />,
|
|
};
|
|
|
|
const Toast = ({ variant, title, body, onClick, hasDismiss, hasIcon }) => {
|
|
const theme = useTheme();
|
|
const icon = icons[variant];
|
|
|
|
return (
|
|
<Stack
|
|
gap={theme.spacing(2)}
|
|
paddingTop={theme.spacing(4)}
|
|
paddingRight={theme.spacing(8)}
|
|
paddingBottom={theme.spacing(4)}
|
|
paddingLeft={theme.spacing(8)}
|
|
backgroundColor={theme.palette.alert.main}
|
|
border={`solid 1px ${theme.palette.alert.contrastText}`}
|
|
borderRadius={theme.shape.borderRadius}
|
|
>
|
|
<Stack
|
|
direction="row"
|
|
gap={theme.spacing(8)}
|
|
justifyContent="space-between"
|
|
alignItems="center"
|
|
>
|
|
{hasIcon && icon}
|
|
{title && (
|
|
<Typography
|
|
fontWeight="700"
|
|
color={theme.palette.secondary.contrastText}
|
|
>
|
|
{title}
|
|
</Typography>
|
|
)}
|
|
{title && (
|
|
<IconButton onClick={onClick}>
|
|
<CloseIcon />
|
|
</IconButton>
|
|
)}
|
|
</Stack>
|
|
|
|
<Stack
|
|
direction="row"
|
|
gap={theme.spacing(2)}
|
|
alignItems="center"
|
|
>
|
|
<ToastBody body={body} />
|
|
{!title && (
|
|
<IconButton onClick={onClick}>
|
|
<CloseIcon />
|
|
</IconButton>
|
|
)}
|
|
</Stack>
|
|
{hasDismiss && (
|
|
<Button
|
|
variant="text"
|
|
color="info"
|
|
onClick={onClick}
|
|
sx={{
|
|
fontWeight: "600",
|
|
width: "fit-content",
|
|
}}
|
|
>
|
|
Dismiss
|
|
</Button>
|
|
)}
|
|
</Stack>
|
|
);
|
|
};
|
|
|
|
export default Toast;
|
|
|
|
Toast.propTypes = {
|
|
variant: PropTypes.string.isRequired,
|
|
title: PropTypes.string,
|
|
body: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
|
|
hasDismiss: PropTypes.bool,
|
|
hasIcon: PropTypes.bool,
|
|
onClick: PropTypes.func,
|
|
};
|