react-atom-toast/dist/components/toast-container.js

Tiny & Headless toast for React

import { __spreadProps, __spreadValues } from '../chunk-5USKE2QT.js';
import { useState, Fragment } from 'react';
import { useMemoizedFn } from '../hooks/use-memoized-fn.js';
import { omit } from '../utils.js';
import Toast from './toast.js';
import { jsx } from 'react/jsx-runtime';

function ToastContainer(props) {
  const { toasts, onClosed, onOpenChange } = props;
  const [hoverState, setHoverState] = useState(false);
  const [heightMap, setHeightMap] = useState(/* @__PURE__ */ new Map());
  const onEnter = useMemoizedFn((key, height) => {
    setHeightMap((prev) => {
      prev.set(key, height);
      return new Map(prev);
    });
  });
  const onUpdate = useMemoizedFn(onEnter);
  const onExited = useMemoizedFn((key) => {
    setHeightMap((prev) => {
      prev.delete(key);
      return new Map(prev);
    });
  });
  const offsetHeight = useMemoizedFn((toast) => {
    const index = toasts.findIndex((t) => t.key === toast.key);
    let offset = 0;
    const start = toasts.length - 1;
    for (let i = start; i > index; i--) {
      const currentToastHeight = heightMap.get(toasts[i].key) || 0;
      const nextToastHeight = heightMap.get(toasts[i - 1].key) || 0;
      offset += nextToastHeight / 2 + currentToastHeight / 2 + toasts[index].gap;
    }
    return offset;
  });
  return /* @__PURE__ */ jsx(
    "div",
    {
      onMouseEnter: () => {
        setHoverState(true);
      },
      onMouseLeave: () => {
        setHoverState(false);
      },
      className: "toast__container",
      children: toasts.map((toast) => /* @__PURE__ */ jsx(Fragment, { children: toast.render(
        /* @__PURE__ */ jsx(
          Toast,
          __spreadProps(__spreadValues({}, omit(toast, ["key"])), {
            onOpenChange: (open) => onOpenChange(toast.key, open),
            onEnter: (height) => {
              onEnter(toast.key, height);
            },
            onUpdate: (height) => {
              onUpdate(toast.key, height);
            },
            onExited: () => {
              onExited(toast.key);
            },
            onClosed: () => {
              var _a;
              (_a = toast.onClosed) == null ? void 0 : _a.call(toast);
              onClosed(toast.key);
            },
            hover: hoverState,
            offsetHeight: offsetHeight(toast)
          })
        )
      ) }, toast.key))
    }
  );
}
var toast_container_default = ToastContainer;

export { toast_container_default as default };