@blocklet/ui-react/lib/BlockletStudio/index.js

Some useful front-end web components that can be used in Blocklets.

import { jsx as _ } from "react/jsx-runtime";
import { BLOCKLET_SERVICE_PATH_PREFIX as k } from "@arcblock/ux/lib/Util/constant";
import { useState as C, useRef as f, useEffect as F } from "react";
import { joinURL as I } from "ufo";
function T(n, r) {
  const t = new URL(n);
  return Object.keys(r).forEach((i) => {
    const e = r[i];
    e !== void 0 && t.searchParams.set(i, typeof e == "string" ? e : JSON.stringify(e));
  }), t.pathname + t.search;
}
function K({
  open: n,
  setOpen: r,
  onOpened: t = void 0,
  componentDid: i,
  tenantScope: e = void 0,
  resourcesParams: v = {},
  mode: p = "dialog",
  title: m = void 0,
  logo: g = void 0,
  description: h = void 0,
  introduction: w = void 0,
  note: E = void 0,
  componentsTitle: R = void 0,
  resourcesTitle: L = void 0,
  onUploaded: y = void 0,
  onReleased: D = void 0,
  onConnected: S = void 0,
  components: b = [],
  resources: O = {},
  style: j = {},
  zIndex: x = 9999,
  dependentComponentsMode: B = void 0,
  ...P
}) {
  const [d, a] = C(!1), c = f("");
  c.current = i;
  const o = f({});
  if (o.current["resourceDialog.close"] = () => {
    a(!1), r(!1);
  }, o.current["resourceDialog.loaded"] = () => {
    a(!0), t?.();
  }, o.current["studioDialog.uploaded"] = y, o.current["studioDialog.connected"] = S, o.current["studioDialog.released"] = D, F(() => {
    const u = (s) => {
      if (s?.data?.componentDid !== c.current)
        return;
      const l = o.current[s?.data?.event];
      typeof l == "function" && l(s?.data?.data);
    };
    return window.addEventListener("message", u), () => {
      window.removeEventListener("message", u);
    };
  }, []), !n)
    return null;
  const U = T(
    I(window.location.origin, k, "/embed/resources", i, "/publish"),
    {
      title: m,
      logo: g,
      description: h,
      introduction: w,
      note: E,
      tenantScope: e,
      mode: p,
      resourcesParams: v,
      resources: O,
      components: b,
      resourcesTitle: L,
      componentsTitle: R,
      dependentComponentsMode: B
    }
  );
  return /* @__PURE__ */ _(
    "iframe",
    {
      src: U,
      title: "Blocklet Studio",
      style: {
        position: "fixed",
        top: 0,
        left: 0,
        width: "100vw",
        height: "100vh",
        zIndex: x,
        border: 0,
        padding: 0,
        margin: 0,
        pointerEvents: d ? "auto" : "none",
        opacity: d ? 1 : 0,
        ...j
      },
      ...P
    }
  );
}
export {
  K as default
};