rsuite/esm/toaster/toaster.js

A suite of react components

'use client';
import ToastContainer, { defaultToasterContainer } from "./ToastContainer.js";
import { RSUITE_TOASTER_ID } from "../internals/symbols.js";
import { guid } from "../internals/utils/index.js";
const containers = new Map();

/**
 * Track in-progress container creation promises keyed by `${containerId}_${placement}`.
 * This prevents duplicate containers from being created when `push` is called multiple
 * times synchronously (e.g. inside a loop) before the first container has mounted.
 */
const pendingContainerPromises = new Map();

/**
 * Create a container instance.
 * @param placement
 * @param props
 */
async function createContainer(placement, props) {
  const [container, containerId] = await ToastContainer.getInstance(props);
  const key = `${containerId}_${placement}`;
  containers.set(key, container);
  pendingContainerPromises.delete(key);
  return container;
}

/**
 * Get the container by ID. Use default ID when ID is not available.
 * @param containerId
 * @param placement
 */
function getContainer(containerId, placement) {
  return containers.get(`${containerId}_${placement}`);
}
const toaster = message => toaster.push(message);
toaster.push = (message, options = {}) => {
  const {
    placement = 'topCenter',
    container = defaultToasterContainer,
    ...restOptions
  } = options;
  const containerElement = typeof container === 'function' ? container() : container;
  if (containerElement) {
    // Pre-assign the container ID so subsequent synchronous calls can find it
    // before the async container creation has completed.
    if (!containerElement[RSUITE_TOASTER_ID]) {
      containerElement[RSUITE_TOASTER_ID] = guid();
    }
    const containerElementId = containerElement[RSUITE_TOASTER_ID];
    const key = `${containerElementId}_${placement}`;
    const existedContainer = getContainer(containerElementId, placement);
    if (existedContainer) {
      return existedContainer.current?.push(message, restOptions);
    }

    // A container creation for this placement may already be in progress (e.g. when `push`
    // is called multiple times synchronously in a loop). Reuse that promise instead of
    // creating a second container.
    const pendingPromise = pendingContainerPromises.get(key);
    if (pendingPromise) {
      return pendingPromise.then(ref => ref.current?.push(message, restOptions));
    }
    const newOptions = {
      ...options,
      container: containerElement,
      placement
    };
    const containerPromise = createContainer(placement, newOptions);

    // Register the pending promise before any async work begins so that subsequent
    // synchronous `push` calls for the same placement chain onto it.
    pendingContainerPromises.set(key, containerPromise);
    return containerPromise.then(ref => ref.current?.push(message, restOptions));
  }
  const newOptions = {
    ...options,
    container: containerElement,
    placement
  };
  return createContainer(placement, newOptions).then(ref => {
    return ref.current?.push(message, restOptions);
  });
};
toaster.remove = key => {
  containers.forEach(c => c.current?.remove(key));
};
toaster.clear = () => {
  containers.forEach(c => c.current?.clear());
};
export default toaster;