@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
57 lines (56 loc) • 2.29 kB
JavaScript
"use client";
import { useProps } from "../../core/MantineProvider/use-props/use-props.mjs";
import { factory } from "../../core/factory/factory.mjs";
import { useRef, useState } from "react";
import { assignRef, useIsomorphicEffect } from "@mantine/hooks";
import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
import { createPortal } from "react-dom";
//#region packages/@mantine/core/src/components/Portal/Portal.tsx
function createPortalNode(props) {
const node = document.createElement("div");
node.setAttribute("data-portal", "true");
typeof props.className === "string" && node.classList.add(...props.className.split(" ").filter(Boolean));
typeof props.style === "object" && Object.assign(node.style, props.style);
typeof props.id === "string" && node.setAttribute("id", props.id);
return node;
}
function getTargetNode({ target, reuseTargetNode, ...others }) {
if (target) {
if (typeof target === "string") return document.querySelector(target) || createPortalNode(others);
return target;
}
if (reuseTargetNode) {
const existingNode = document.querySelector("[data-mantine-shared-portal-node]");
if (existingNode) return existingNode;
const node = createPortalNode(others);
node.setAttribute("data-mantine-shared-portal-node", "true");
document.body.appendChild(node);
return node;
}
return createPortalNode(others);
}
const defaultProps = { reuseTargetNode: true };
const Portal = factory((props) => {
const { children, target, reuseTargetNode, ref, ...others } = useProps("Portal", defaultProps, props);
const [mounted, setMounted] = useState(false);
const nodeRef = useRef(null);
useIsomorphicEffect(() => {
setMounted(true);
nodeRef.current = getTargetNode({
target,
reuseTargetNode,
...others
});
assignRef(ref, nodeRef.current);
if (!target && !reuseTargetNode && nodeRef.current) document.body.appendChild(nodeRef.current);
return () => {
if (!target && !reuseTargetNode && nodeRef.current) document.body.removeChild(nodeRef.current);
};
}, [target]);
if (!mounted || !nodeRef.current) return null;
return createPortal(/* @__PURE__ */ jsx(Fragment$1, { children }), nodeRef.current);
});
Portal.displayName = "@mantine/core/Portal";
//#endregion
export { Portal };
//# sourceMappingURL=Portal.mjs.map