@chayns-components/core/lib/esm/hooks/container.js

A set of beautiful React components for developing your own applications with chayns.

import { useEffect, useState } from 'react';
export let ContainerAnchor = /*#__PURE__*/function (ContainerAnchor) {
  ContainerAnchor["BODY"] = "body";
  ContainerAnchor["DIALOG"] = ".dialog-inner";
  ContainerAnchor["PAGE"] = ".page-provider";
  ContainerAnchor["RESERVATION_WRAPPER"] = ".reservation-wrapper";
  ContainerAnchor["ROOT"] = "#root";
  ContainerAnchor["TAPP"] = ".tapp";
  ContainerAnchor["WALLET"] = ".wallet";
  return ContainerAnchor;
}({});
const DEFAULT_CONTAINER_ANCHORS = [ContainerAnchor.BODY, ContainerAnchor.DIALOG, ContainerAnchor.PAGE, ContainerAnchor.ROOT, ContainerAnchor.TAPP];
export const useContainer = ({
  ref,
  anchorElement,
  container,
  anchors = DEFAULT_CONTAINER_ANCHORS
}) => {
  const [newContainer, setNewContainer] = useState(container ?? undefined);

  // Get the closest container if none is set
  useEffect(() => {
    let el = anchorElement;
    if (ref?.current) {
      el = ref.current;
    }
    if (!container) {
      const reservationWrapperContainer = document.querySelector(ContainerAnchor.RESERVATION_WRAPPER);
      const rootContainer = document.querySelector(ContainerAnchor.ROOT);
      const walletContainer = document.querySelector(ContainerAnchor.WALLET);
      const isInWallet = reservationWrapperContainer && reservationWrapperContainer.contains(el) || walletContainer && walletContainer.contains(el);
      if (isInWallet && rootContainer && rootContainer.contains(el)) {
        setNewContainer(rootContainer);
        return;
      }
      const element = el.closest(anchors?.join(', '));
      setNewContainer(element ?? undefined);
    }
  }, [anchors, container, anchorElement, ref]);
  useEffect(() => {
    if (container instanceof Element) {
      setNewContainer(container);
    }
  }, [container]);
  return newContainer;
};
//# sourceMappingURL=container.js.map