@engie-group/fluid-design-system-react/lib/components/toast/NJToast.js

Fluid Design System React

import { jsxs, jsx } from 'react/jsx-runtime';
import React__default, { useEffect, isValidElement } from 'react';
import { Utils } from '../../utils/util.js';
import { NJIcon } from '../icon/NJIcon.js';
import { NJIconButton } from '../icon-button/NJIconButton.js';

const NJToast = React__default.forwardRef(({ id, iconName, title, children, isInverse, gaugeLabel, hasCloseIcon = true, shouldDismiss = true, dismissAfter = 5000, onClose, closeToast, closeButtonRef, className, ...htmlProps }, forwardedRef) => {
    let closeTimeoutId;
    useEffect(() => {
        // If duration is provided, close toast after duration
        if (shouldDismiss) {
            closeTimeoutId = setTimeout(() => {
                closeToast?.(id);
            }, dismissAfter);
        }
        return () => {
            if (shouldDismiss) {
                clearTimeout(closeTimeoutId);
            }
        };
    }, [shouldDismiss, dismissAfter, closeToast]);
    const toastClass = Utils.classNames('nj-toast', {
        ['nj-toast--inverse']: isInverse
    }, className);
    const toastDescriptionId = `toast-description-${id}`;
    return (jsxs("div", { ref: forwardedRef, ...htmlProps, id: id, className: toastClass, children: [jsxs("div", { className: "nj-toast__body", children: [iconName && jsx(NJIcon, { name: iconName, className: "nj-toast__icon" }), jsxs("div", { className: "nj-toast__content", children: [title && (jsx("p", { className: "nj-toast__title", id: toastDescriptionId, children: title })), isValidElement(children) ? (children) : (jsx("p", { className: "nj-toast__text", id: !title ? toastDescriptionId : undefined, children: children }))] })] }), hasCloseIcon && (jsx("div", { className: "nj-toast__action", children: jsx(NJIconButton, { ref: closeButtonRef, type: "button", variant: isInverse ? 'primary' : 'inverse', scale: "sm", icon: "close", "aria-label": "Close", "aria-describedby": toastDescriptionId, onClick: () => onClose?.(id) }) })), shouldDismiss && dismissAfter > 0 && (jsx("div", { className: "nj-toast__gauge", children: jsx("div", { className: "nj-toast__gauge-bar", style: { animationDuration: `${dismissAfter}ms` }, children: jsx("p", { className: "nj-sr-only", children: gaugeLabel }) }) }))] }));
});
NJToast.displayName = 'NJToast';
const NJMemoizedToast = React__default.memo(NJToast, toastPropsAreEqual);
function toastPropsAreEqual(prevToast, nextToast) {
    return prevToast.id === nextToast.id;
}

export { NJMemoizedToast, NJToast };