wix-style-react
Version:
wix-style-react
58 lines • 3 kB
JavaScript
import React from 'react';
import { STATUS, SUCCESS_AUTO_CLOSE_TIME } from '../../constants';
import Text from '../../../Text';
import { StatusCompleteFilled, StatusAlertFilled, StatusWarningFilled, InfoCircleFilled, } from '@wix/wix-ui-icons-common';
import TextButton from '../../../TextButton';
import { st, classes } from './ToastItem.st.css';
export const ToastItem = ({ children, toastId, onClose, showDismiss = true, status = STATUS.DEFAULT, action, dismissTitle = 'Dismiss', dataHook, }) => {
React.useEffect(() => {
if (status !== STATUS.SUCCESS)
return;
const timer = setTimeout(() => onClose(), SUCCESS_AUTO_CLOSE_TIME);
return () => clearTimeout(timer);
// TODO: fix ESLint error
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const icon = React.useMemo(() => {
switch (status) {
case STATUS.SUCCESS: {
return (React.createElement("div", { className: classes.iconContainer },
React.createElement(StatusCompleteFilled, null)));
}
case STATUS.ERROR: {
return (React.createElement("div", { className: classes.iconContainer },
React.createElement(StatusAlertFilled, null)));
}
case STATUS.WARNING: {
return (React.createElement("div", { className: classes.iconContainer },
React.createElement(StatusWarningFilled, null)));
}
default: {
return (React.createElement("div", { className: classes.iconContainer },
React.createElement(InfoCircleFilled, null)));
}
}
}, [status]);
const handleDismissClick = (e) => {
e.preventDefault();
e.stopPropagation();
onClose(e);
};
return (React.createElement("div", { id: toastId, className: st(classes.toast, {
showDismiss,
success: status === STATUS.SUCCESS,
error: status === STATUS.ERROR,
warning: status === STATUS.WARNING,
}), "data-hook": dataHook ? `toast-item ${dataHook}` : `toast-item`, "data-status": status,
// will be redefined after proper component spec
role: "alert", "aria-live": "polite" },
icon,
React.createElement(Text, { light: true, size: "medium", dataHook: "toast-text", className: classes.toastText }, children),
action && (
// @ts-ignore
React.createElement(TextButton, { skin: "light", size: "medium", underline: "always", as: action.href ? 'a' : undefined, href: action.href, onClick: action.onClick, className: classes.secondAction, dataHook: "action-button" }, action.title)),
showDismiss && (
// @ts-ignore
React.createElement(TextButton, { skin: "light", size: "medium", underline: "always", onClick: handleDismissClick, dataHook: "dismiss-button" }, dismissTitle))));
};
//# sourceMappingURL=ToastItem.js.map