@drivy/cobalt/components/Alerter/index.js

Opinionated design system for Drivy's projects.

import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import { Portal, Toast, Toaster, createToaster } from "@ark-ui/react";
import classnames from "classnames";
import { useEffect, useState } from "react";
import { CheckCircleIcon, ContextualWarningCircleFilledIcon, InfoFilledIcon } from "../Icon/index.js";
const DEFAULT_TIMEOUT = 3000;
const MAX_TEXT_TIMEOUT = 9000;
const computeTimeDurationFromText = (content)=>{
    if ("string" != typeof content) return DEFAULT_TIMEOUT;
    return Math.min(Math.max(DEFAULT_TIMEOUT, 90 * content.length), MAX_TEXT_TIMEOUT);
};
const toaster = createToaster({
    overlap: true,
    gap: 12,
    placement: "bottom",
    max: 12
});
const useAlerts = ()=>({
        sendAlert: ({ message, status, duration })=>toaster.create({
                description: message,
                type: status,
                duration: duration ?? computeTimeDurationFromText(message)
            })
    });
const STATUS_ICONS_MAP = {
    info: InfoFilledIcon,
    success: CheckCircleIcon,
    error: ContextualWarningCircleFilledIcon
};
const STATUS_ICON_COLOR_MAP = {
    info: "tertiary",
    success: "success",
    error: "error"
};
const Alerter = ({ children })=>{
    const [showToaster, setShowToaster] = useState(false);
    useEffect(()=>setShowToaster(true), []);
    return /*#__PURE__*/ jsxs(Fragment, {
        children: [
            children,
            showToaster && /*#__PURE__*/ jsx(Portal, {
                children: /*#__PURE__*/ jsx(Toaster, {
                    toaster: toaster,
                    className: "cobalt-alerter",
                    children: (toast)=>{
                        const status = toast.type;
                        const IconComp = STATUS_ICONS_MAP[status];
                        return /*#__PURE__*/ jsx(Toast.Root, {
                            className: classnames("cobalt-alert"),
                            children: /*#__PURE__*/ jsxs("div", {
                                className: "cobalt-alert__wrapper",
                                children: [
                                    /*#__PURE__*/ jsx(IconComp, {
                                        size: 20,
                                        color: STATUS_ICON_COLOR_MAP[status]
                                    }),
                                    /*#__PURE__*/ jsx(Toast.Description, {
                                        children: toast.description
                                    })
                                ]
                            })
                        }, toast.id);
                    }
                })
            })
        ]
    });
};
const components_Alerter = Alerter;
export default components_Alerter;
export { useAlerts };

//# sourceMappingURL=index.js.map