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

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

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useContainer = exports.ContainerAnchor = void 0;
var _react = require("react");
let ContainerAnchor = exports.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];
const useContainer = ({
  ref,
  anchorElement,
  container,
  anchors = DEFAULT_CONTAINER_ANCHORS
}) => {
  const [newContainer, setNewContainer] = (0, _react.useState)(container ?? undefined);

  // Get the closest container if none is set
  (0, _react.useEffect)(() => {
    let el = anchorElement;
    if (ref !== null && ref !== void 0 && 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 === null || anchors === void 0 ? void 0 : anchors.join(', '));
      setNewContainer(element ?? undefined);
    }
  }, [anchors, container, anchorElement, ref]);
  (0, _react.useEffect)(() => {
    if (container instanceof Element) {
      setNewContainer(container);
    }
  }, [container]);
  return newContainer;
};
exports.useContainer = useContainer;
//# sourceMappingURL=container.js.map