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

Opinionated design system for Drivy's projects.

import React from 'react';
import { createToaster, Portal, Toaster, Toast } from '@ark-ui/react';
import '../Icon/index.js';
import cx from 'classnames';
import InfoFilledIcon from '../Icon/__generated__/InfoFilledIcon.js';
import CheckCircleIcon from '../Icon/__generated__/CheckCircleIcon.js';
import ContextualWarningCircleFilledIcon from '../Icon/__generated__/ContextualWarningCircleFilledIcon.js';

const DEFAULT_TIMEOUT = 3000;
const MAX_TEXT_TIMEOUT = 9000;
const computeTimeDurationFromText = (content) => {
    if (typeof content !== "string")
        return DEFAULT_TIMEOUT;
    return Math.min(Math.max(DEFAULT_TIMEOUT, content.length * 90), MAX_TEXT_TIMEOUT);
};
const toaster = createToaster({
    overlap: true,
    gap: 12,
    placement: "bottom",
    max: 12,
});
const useAlerts = () => {
    return {
        sendAlert: ({ message, status, duration, }) => toaster.create({
            description: message,
            type: status,
            duration: duration !== null && duration !== void 0 ? 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 }) => {
    return (React.createElement(React.Fragment, null,
        children,
        React.createElement(Portal, null,
            React.createElement(Toaster, { toaster: toaster, className: "cobalt-alerter" }, (toast) => {
                const status = toast.type;
                const IconComp = STATUS_ICONS_MAP[status];
                return (React.createElement(Toast.Root, { className: cx("cobalt-alert"), key: toast.id },
                    React.createElement("div", { className: "cobalt-alert__wrapper" },
                        React.createElement(IconComp, { size: 20, color: STATUS_ICON_COLOR_MAP[status] }),
                        React.createElement(Toast.Description, null, toast.description))));
            }))));
};

export { Alerter as default, useAlerts };
//# sourceMappingURL=index.js.map