amplify-material-ui/lib/esm/ui/toast.js

A Material-UI based implementation of aws amplify

import * as React from 'react';
import clsx from 'clsx';
import CheckCircleIcon from '@mui/icons-material/CheckCircle';
import ErrorIcon from '@mui/icons-material/Error';
import InfoIcon from '@mui/icons-material/Info';
import CloseIcon from '@mui/icons-material/Close';
import WarningIcon from '@mui/icons-material/Warning';
import { colors, IconButton, Snackbar, SnackbarContent } from '@mui/material';
import makeStyles from '@mui/styles/makeStyles';
var variantIcon = {
    success: CheckCircleIcon,
    warning: WarningIcon,
    error: ErrorIcon,
    info: InfoIcon,
};
var useStyles = makeStyles(function (theme) { return ({
    success: {
        backgroundColor: colors.green[600],
    },
    error: {
        backgroundColor: theme.palette.error.dark,
    },
    info: {
        backgroundColor: theme.palette.primary.dark,
    },
    warning: {
        backgroundColor: colors.amber[700],
    },
    icon: {
        fontSize: 20,
    },
    iconVariant: {
        opacity: 0.9,
        marginRight: theme.spacing(1),
    },
    message: {
        display: 'flex',
        alignItems: 'center',
    },
}); });
export var Toast = function (props) {
    var _a = props.autoHideDuration, autoHideDuration = _a === void 0 ? 6000 : _a, _b = props.anchorOrigin, anchorOrigin = _b === void 0 ? {
        vertical: 'top',
        horizontal: 'center',
    } : _b, className = props.className, content = props.content, _c = props.variant, variant = _c === void 0 ? 'info' : _c, _d = props.open, open = _d === void 0 ? false : _d, onClose = props.onClose;
    var classes = useStyles();
    var Icon = variantIcon[variant];
    return (React.createElement(Snackbar, { anchorOrigin: anchorOrigin, open: open, autoHideDuration: autoHideDuration, onClose: onClose },
        React.createElement(SnackbarContent, { className: clsx(classes[variant], className), "aria-describedby": "client-snackbar", message: React.createElement("span", { id: "client-snackbar", className: classes.message },
                React.createElement(Icon, { className: clsx(classes.icon, classes.iconVariant) }),
                content), action: [
                React.createElement(IconButton, { key: "close", "aria-label": "Close", color: "inherit", onClick: onClose, size: "large" },
                    React.createElement(CloseIcon, { className: classes.icon })),
            ] })));
};