UNPKG

analytica-frontend-lib

Version:

Repositório público dos componentes utilizados nas plataformas da Analytica Ensino

101 lines (99 loc) 3.6 kB
import { cn } from "./chunk-53ICLDGS.mjs"; // src/components/Toast/Toast.tsx import { useEffect, useRef } from "react"; import { CheckCircleIcon } from "@phosphor-icons/react/dist/csr/CheckCircle"; import { WarningCircleIcon } from "@phosphor-icons/react/dist/csr/WarningCircle"; import { InfoIcon } from "@phosphor-icons/react/dist/csr/Info"; import { XIcon } from "@phosphor-icons/react/dist/csr/X"; import { jsx, jsxs } from "react/jsx-runtime"; var DEFAULT_TOAST_DURATION_MS = 3e3; var VARIANT_ACTION_CLASSES = { solid: { warning: "bg-warning text-warning-600 border-none focus-visible:outline-none", success: "bg-success text-success-800 border-none focus-visible:outline-none", info: "bg-info text-info-600 border-none focus-visible:outline-none" }, outlined: { warning: "bg-warning text-warning-600 border border-warning-300 focus-visible:outline-none", success: "bg-success text-success-800 border border-success-200 focus-visible:outline-none", info: "bg-info text-info-600 border border-info-600 focus-visible:outline-none" } }; var iconMap = { success: CheckCircleIcon, info: InfoIcon, warning: WarningCircleIcon }; var Toast = ({ variant = "outlined", action = "success", className = "", onClose, title, description, position = "default", duration = DEFAULT_TOAST_DURATION_MS, ...props }) => { const onCloseRef = useRef(onClose); useEffect(() => { onCloseRef.current = onClose; }, [onClose]); useEffect(() => { if (duration <= 0) return; const timer = setTimeout(() => onCloseRef.current(), duration); return () => clearTimeout(timer); }, [duration]); const variantClasses = VARIANT_ACTION_CLASSES[variant][action]; const positionClasses = { "top-left": "fixed top-4 left-4", "top-center": "fixed top-4 left-1/2 transform -translate-x-1/2", "top-right": "fixed top-4 right-4", "bottom-left": "fixed bottom-4 left-4", "bottom-center": "fixed bottom-4 left-1/2 transform -translate-x-1/2", "bottom-right": "fixed bottom-4 right-4", default: "" }; const IconAction = iconMap[action] || iconMap["success"]; const baseClasses = "max-w-[390px] w-full flex flex-row items-start justify-between shadow-lg rounded-lg border p-4 gap-6 group z-50"; return /* @__PURE__ */ jsxs( "div", { role: "alert", "aria-live": "assertive", "aria-atomic": "true", className: cn( baseClasses, positionClasses[position], variantClasses, className ), ...props, children: [ /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-start gap-3", children: [ /* @__PURE__ */ jsx("span", { className: "mt-1", "data-testid": `toast-icon-${action}`, children: /* @__PURE__ */ jsx(IconAction, {}) }), /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start justify-start", children: [ /* @__PURE__ */ jsx("p", { className: "font-semibold text-md", children: title }), description && /* @__PURE__ */ jsx("p", { className: "text-md text-text-900", children: description }) ] }) ] }), /* @__PURE__ */ jsx( "button", { onClick: onClose, "aria-label": "Dismiss notification", className: "text-background-500 cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity", children: /* @__PURE__ */ jsx(XIcon, {}) } ) ] } ); }; var Toast_default = Toast; export { Toast_default }; //# sourceMappingURL=chunk-YGF3KVWG.mjs.map