@smitch/fluid/lib/toast/Toast.js

A lightweight, Tailwind-powered React/Next.js UI component library.

"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useEffect, useRef, useMemo } from "react";
import { twMerge } from "tailwind-merge";
import { CloseButton } from "..";
var backgrounds = {
    info: "bg-info-light",
    success: "bg-success-light",
    warning: "bg-warning-light",
    danger: "bg-error-light",
    primary: "bg-primary-light",
};
var horizontals = {
    left: "left-4",
    center: "left-1/2 -translate-x-1/2",
    right: "right-4",
};
var verticals = {
    top: "top-4",
    middle: "top-1/2 -translate-y-1/2",
    bottom: "bottom-4",
};
var roundeds = {
    none: "rounded-none",
    md: "rounded-md",
    lg: "rounded-lg",
    xl: "rounded-xl",
    full: "rounded-full",
};
var Toast = function (_a) {
    var _b = _a.toastBackground, toastBackground = _b === void 0 ? "info" : _b, _c = _a.rounded, rounded = _c === void 0 ? "md" : _c, _d = _a.open, open = _d === void 0 ? false : _d, body = _a.body, _e = _a.horizontal, horizontal = _e === void 0 ? "center" : _e, _f = _a.vertical, vertical = _f === void 0 ? "top" : _f, _g = _a.autohide, autohide = _g === void 0 ? true : _g, _h = _a.autohideDuration, autohideDuration = _h === void 0 ? 3000 : _h, _j = _a.className, className = _j === void 0 ? "" : _j, style = _a.style, onClose = _a.onClose, onClick = _a.onClick, _k = _a.closeOnBlur, closeOnBlur = _k === void 0 ? true : _k, _l = _a.dismissable, dismissable = _l === void 0 ? false : _l;
    var _m = useState(false), show = _m[0], setShow = _m[1];
    var toastRef = useRef(null);
    useEffect(function () {
        var _a;
        if (open) {
            setShow(true);
            (_a = toastRef.current) === null || _a === void 0 ? void 0 : _a.focus();
            if (autohide) {
                var timer_1 = setTimeout(function () {
                    setShow(false);
                    onClose && onClose();
                }, autohideDuration);
                return function () { return clearTimeout(timer_1); };
            }
        }
        else {
            setShow(false);
        }
        return function () {
            setShow(false);
        };
    }, [open, autohide, autohideDuration, onClose]);
    var animationClasses = useMemo(function () {
        return "transition-opacity duration-500 ".concat(show ? "visible opacity-100" : "invisible opacity-0");
    }, [show]);
    var otherClasses = useMemo(function () {
        var horizontalClasses = horizontals[horizontal];
        var verticalClasses = verticals[vertical];
        var backgroundClasses = backgrounds[toastBackground];
        var roundedClasses = roundeds[rounded];
        return "".concat(horizontalClasses, " ").concat(verticalClasses, " ").concat(backgroundClasses, " ").concat(roundedClasses);
    }, [horizontal, vertical, toastBackground, rounded]);
    var handleClick = onClick || onClose;
    return (_jsxs("aside", { className: twMerge("toast fixed z-50 text-dark py-4 px-6 max-w-64 shadow-lg ".concat(className, " ").concat(otherClasses, " ").concat(animationClasses), className), style: style, id: "toast", role: "alert", tabIndex: -1, ref: toastRef, onClick: handleClick, onBlur: function () {
            if (!closeOnBlur)
                return;
            setShow(false);
            onClose && onClose();
        }, children: [_jsx("div", { className: "toast-body text-center", children: body }), dismissable && (_jsx(CloseButton, { layout: "circle", size: "md", onClick: function () {
                    setShow(false);
                    onClose && onClose();
                }, className: "toast-close absolute -top-1 -right-1" }))] }));
};
export default Toast;
//# sourceMappingURL=Toast.js.map