@wix/design-system/dist/esm/StatusToast/StatusToast.js

@wix/design-system

import React, { memo, useContext } from 'react';
import { StatusCompleteFilled, StatusAlertFilled, StatusWarningFilled, InfoCircleFilled, } from '@wix/wix-ui-icons-common';
import { Text } from '../Text';
import { Toast } from '../Toast';
import { useToastTimeout } from './hooks/useToastTimeout';
import { classes } from './StatusToast.classes';
import { WixDesignSystemContext } from '../WixDesignSystemProvider/context';
import { ToastAction } from './components/ToastAction/ToastAction';
import { ToastLink } from './components/ToastLink/ToastLink';
import { useIcons } from '../WixDesignSystemIconThemeProvider';
const DEFAULT_STATUS = 'info';
const SUCCESS_AUTO_DISMISS_DELAY = 7000;
const roleByStatus = {
    success: 'status',
    error: 'alert',
    warning: 'alert',
    info: 'status',
};
const StatusToast = memo(({ status = DEFAULT_STATUS, action, children, className, duration, ...rest }) => {
    const { mobile } = useContext(WixDesignSystemContext);
    const icons = useIcons('StatusToast', {
        StatusCompleteFilled,
        StatusAlertFilled,
        StatusWarningFilled,
        InfoCircleFilled,
    });
    const iconByStatus = {
        success: React.createElement(icons.StatusCompleteFilled, null),
        error: React.createElement(icons.StatusAlertFilled, null),
        warning: React.createElement(icons.StatusWarningFilled, null),
        info: React.createElement(icons.InfoCircleFilled, null),
    };
    const autoDismissEnabled = duration !== null;
    const defaultAutoDismissDuration = ['info', 'success'].includes(status)
        ? SUCCESS_AUTO_DISMISS_DELAY
        : undefined;
    useToastTimeout(autoDismissEnabled ? (duration ?? defaultAutoDismissDuration) : undefined, rest.onDismiss);
    return (React.createElement(Toast, { role: roleByStatus[status], className: classes.toast({ mobile }, className), ...rest },
        React.createElement("div", { "data-hook": "status-toast-root", className: classes.root({
                status: status === 'info' ? null : status,
                mobile,
            }), "data-status": status },
            React.createElement("div", { className: classes.content() },
                React.createElement("div", { className: classes.icon() }, iconByStatus[status] ?? iconByStatus[DEFAULT_STATUS]),
                React.createElement(Text, { light: true, size: "medium", dataHook: "status-toast-content", className: classes.text() }, children)),
            action && React.createElement("div", { className: classes.action() }, action))));
});
StatusToast.displayName = 'StatusToast';
StatusToast.Action = ToastAction;
StatusToast.Link = ToastLink;
export { StatusToast };
//# sourceMappingURL=StatusToast.js.map