@penaprieto/design-system
Version:
Multi-brand React design system with design tokens from Figma
55 lines (54 loc) • 2.86 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Toast = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
require("./Toast.css");
const Icon_1 = require("../Icon");
const Button_1 = require("../Button");
const variantIcons = {
success: 'check-circle',
error: 'x-circle',
warning: 'alert',
info: 'info-circle',
neutral: '',
};
const Toast = ({ title, description, variant = 'info', action, onClose, duration = 5000, className = '', }) => {
const [isExiting, setIsExiting] = (0, react_1.useState)(false);
(0, react_1.useEffect)(() => {
if (duration !== null && duration > 0 && onClose) {
const timer = setTimeout(() => {
setIsExiting(true);
// Wait for exit animation before calling onClose
setTimeout(() => {
onClose();
}, 300); // Match animation duration
}, duration);
return () => clearTimeout(timer);
}
}, [duration, onClose]);
const rootClassName = [
'ds-toast',
`ds-toast--${variant}`,
isExiting && 'ds-toast--exiting',
!description && 'ds-toast--no-description',
className,
]
.filter(Boolean)
.join(' ');
const icon = variantIcons[variant];
const handleActionClick = (e) => {
if (action === null || action === void 0 ? void 0 : action.onClick) {
e.preventDefault();
action.onClick();
}
if ((action === null || action === void 0 ? void 0 : action.type) === 'close' && onClose) {
setIsExiting(true);
setTimeout(() => {
onClose();
}, 300); // Match animation duration
}
};
return ((0, jsx_runtime_1.jsxs)("div", { className: rootClassName, role: "alert", children: [icon && ((0, jsx_runtime_1.jsx)("div", { className: "ds-toast__icon", children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: icon, size: 24 }) })), (0, jsx_runtime_1.jsxs)("div", { className: "ds-toast__content", children: [(0, jsx_runtime_1.jsx)("div", { className: "ds-toast__title", children: title }), description && ((0, jsx_runtime_1.jsx)("div", { className: "ds-toast__description", children: description }))] }), action && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: action.type === 'close' ? ((0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "ghost", shape: "icon", size: "medium", onClick: handleActionClick, "aria-label": "Cerrar", className: "ds-toast__close", children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "x", size: 24 }) })) : ((0, jsx_runtime_1.jsx)("a", { href: action.href || '#', className: "ds-toast__link", onClick: handleActionClick, children: action.label || 'Acción' })) }))] }));
};
exports.Toast = Toast;