@dndbuilder.com/react
Version:
Drag and drop builder for React
55 lines (54 loc) • 1.85 kB
JavaScript
"use client";
import { jsx as l } from "react/jsx-runtime";
import { FrameContextProvider as y } from "../../contexts/frame-context.js";
import d, { useEffect as F } from "react";
import h from "react-dom";
const I = ({
style: u = {},
head: r,
initialContent: o = '<!DOCTYPE html><html><head></head><body><div class="frame-root"></div></body></html>',
mountTarget: P,
contentDidMount: v = () => {
},
contentDidUpdate: C = () => {
},
children: L,
...w
}) => {
const [s, D] = d.useState(!1), t = d.useRef(null), c = () => {
clearInterval(E), s || D(!0);
}, E = setInterval(() => {
c();
}, 500);
d.useEffect(() => {
var n, a;
if (!t.current) return;
if ((n = t.current) == null ? void 0 : n.contentDocument)
return (a = t.current.contentWindow) == null || a.addEventListener("DOMContentLoaded", c), () => {
var i, m;
(m = (i = t.current) == null ? void 0 : i.contentWindow) == null || m.removeEventListener("DOMContentLoaded", c);
};
}, []);
const f = () => t.current ? t.current.contentDocument : null, p = () => {
const e = f();
return e == null ? void 0 : e.defaultView;
};
return /* @__PURE__ */ l("iframe", { ...w, style: u, ref: t, onLoad: c, srcDoc: o, children: s && (() => {
if (!t.current)
return null;
const e = f();
if (!e)
return null;
const n = p();
if (!n)
return null;
const a = /* @__PURE__ */ l(O, { contentDidMount: v, contentDidUpdate: C, children: /* @__PURE__ */ l(y, { value: { document: e, window: n }, children: L }) });
return [h.createPortal(r, e.head), h.createPortal(a, e.body)];
})() });
}, O = ({ children: u, contentDidMount: r, contentDidUpdate: o }) => (F(() => (r(), () => {
o();
}), [r, o]), d.Children.only(u));
export {
I as default
};
//# sourceMappingURL=frame.js.map