@codeworker.br/govbr-tw-react
Version:
Biblioteca de componentes React usando Tailwind CSS que implementa o Padrão Digital de Governo.
67 lines (66 loc) • 3.71 kB
JavaScript
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 = "", onClose, disableAutoRemove = false } = _a, props = __rest(_a, ["className", "children", "variant", "closable", "hasIcon", "timer", "icon", "onClose", "disableAutoRemove"]);
const myRef = createRef();
const handleDestory = () => {
if (typeof onClose === "function") {
onClose();
}
if (!disableAutoRemove && myRef.current) {
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, closable]);
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;