@wix/design-system
Version:
@wix/design-system
51 lines • 2.59 kB
JavaScript
import React, { memo } 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 { st, classes } from './StatusToast.st.css.js';
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 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: st(classes.toast, className), ...rest },
React.createElement("div", { "data-hook": "status-toast-root", className: st(classes.root, {
success: status === 'success',
error: status === 'error',
warning: status === 'warning',
}), "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 default StatusToast;
//# sourceMappingURL=StatusToast.js.map