@codeworker.br/govbr-tw-react/dist/components/Message/index.js

Biblioteca de componentes React usando Tailwind CSS que implementa o Padrão Digital de Governo.

var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import messageVariants from "./variants";
import iconVariants from "./icon-variants";
import timerVariants from "./timer-variants";
import closeButtonVariants from "./close-button-variants";
import { createRef, useEffect, useState } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCircleCheck, faCircleXmark, faInfoCircle, faTriangleExclamation, faXmark, } from "@fortawesome/free-solid-svg-icons";
import { Button } from "../Button";
import BASE_CLASSNAMES from "../../config/baseClassNames";
import { cn } from "../../libs/utils";
const Message = (_a) => {
    var { className, children, variant = "info", closable = "button", hasIcon = true, timer = 5, icon = "" } = _a, props = __rest(_a, ["className", "children", "variant", "closable", "hasIcon", "timer", "icon"]);
    const myRef = createRef();
    const handleDestory = () => myRef.current.remove();
    const closeButtonVariant = {
        info: "ghost",
        danger: "ghost-danger",
        success: "ghost-success",
        warning: "ghost-warning",
    };
    const icons = {
        danger: faCircleXmark,
        success: faCircleCheck,
        warning: faTriangleExclamation,
        info: faInfoCircle,
    };
    const [counter, setCounter] = useState(0);
    useEffect(() => {
        if (closable === "timer" || closable === "both") {
            if (counter <= timer) {
                const timerFn = setInterval(() => {
                    setCounter((prevCounter) => prevCounter + 1);
                }, 1000);
                return () => clearInterval(timerFn);
            }
            else {
                handleDestory();
            }
        }
    }, [counter, timer]);
    icon = icon !== "" ? icon : icons[variant];
    return (_jsxs("span", Object.assign({ className: cn(messageVariants({ variant }), className, BASE_CLASSNAMES.message.root, BASE_CLASSNAMES.message[variant]) }, props, { ref: myRef, role: "alert", children: [_jsxs("span", { className: "flex gap-3 items-center p-6", children: [hasIcon ? (_jsx("span", { className: "size-10 flex items-center justify-center", children: _jsx(FontAwesomeIcon, { icon: icon, className: cn(iconVariants({ variant })) }) })) : (""), _jsx("span", { className: "flex-1", children: children }), closable === "button" || closable === "both" ? (_jsx("span", { children: _jsx(Button, { onClick: handleDestory, size: "icon", variant: closeButtonVariant[variant], className: cn(closeButtonVariants({ variant })), children: _jsx(FontAwesomeIcon, { icon: faXmark }) }) })) : ("")] }), closable === "timer" || closable === "both" ? (_jsx("span", { className: cn("flex w-full -mt-2"), children: _jsx("span", { className: cn(timerVariants({ variant })), style: {
                        width: (counter / timer) * 100 + "%",
                        transition: `all 1s linear`,
                    } }) })) : ("")] })));
};
export default Message;