@blocklet/ui-react
Version:
Some useful front-end web components that can be used in Blocklets.
59 lines (58 loc) • 1.41 kB
JavaScript
import { jsx as f } from "react/jsx-runtime";
import { useMemoizedFn as m, useMount as g, useUnmount as w } from "ahooks";
import { forwardRef as p, useRef as v, useImperativeHandle as D } from "react";
function R({
src: n,
open: t = !1,
componentDid: i,
loading: s = !0,
storeUrl: a = "",
onClose: l = () => {
},
onComplete: u = () => {
},
onLoad: c = () => {
}
}, d) {
const o = v(null), r = m((e) => {
t && (e?.data?.event === "resourceDialog.close" && l(), e?.data?.event === "resourceDialog.complete" && u(), e?.data?.event === "resourceDialog.loaded" && c());
});
return g(() => {
window.addEventListener("message", r);
}), w(() => {
window.removeEventListener("message", r);
}), D(d, () => ({
selectBlocklet: (e) => {
o.current?.contentWindow && o.current.contentWindow.postMessage(
{
event: "resourceDialog.select",
data: e,
componentDid: i,
storeUrl: a
},
"*"
);
}
})), t ? /* @__PURE__ */ f(
"iframe",
{
ref: o,
src: n,
title: "Resource Dialog",
style: {
position: "fixed",
top: 0,
left: s ? "-100vw" : 0,
width: "100vw",
height: "100vh",
zIndex: 9999,
backgroundColor: "transparent",
border: "none"
}
}
) : null;
}
const b = p(R);
export {
b as default
};