@blocklet/ui-react 3.0.9 → 3.0.10

package/lib/BlockletStudio/index.js

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

package/lib/ComponentInstaller/index.js

@@ -1,54 +1,54 @@
-import { jsx as e, jsxs as o, Fragment as x } from "react/jsx-runtime";
-import { SessionContext as R } from "@arcblock/did-connect/lib/Session";
-import { useLocaleContext as W } from "@arcblock/ux/lib/Locale/context";
-import { translate as q } from "@arcblock/ux/lib/Locale/util";
-import A from "@arcblock/ux/lib/SessionPermission";
-import { Icon as I } from "@iconify/react";
-import { Close as S } from "@mui/icons-material";
-import { ClickAwayListener as F, Fade as N, Paper as O, Box as n, IconButton as C } from "@mui/material";
-import { useMemoizedFn as Y } from "ahooks";
-import t from "prop-types";
-import { use as P } from "react";
-import $ from "./installer-item.js";
-import E from "./locales.js";
-import H from "./use-component-installed.js";
-function m({
+import { jsx as e, jsxs as r, Fragment as x } from "react/jsx-runtime";
+import { SessionContext as j } from "@arcblock/did-connect/lib/Session";
+import { useLocaleContext as M } from "@arcblock/ux/lib/Locale/context";
+import { translate as R } from "@arcblock/ux/lib/Locale/util";
+import W from "@arcblock/ux/lib/SessionPermission";
+import { Icon as y } from "@iconify/react";
+import { Close as w } from "@mui/icons-material";
+import { ClickAwayListener as q, Fade as A, Paper as F, Box as n, IconButton as b } from "@mui/material";
+import { useMemoizedFn as N } from "ahooks";
+import o from "prop-types";
+import { use as O } from "react";
+import Y from "./installer-item.js";
+import P from "./locales.js";
+import $ from "./use-component-installed.js";
+function c({
   warnIcon: l = null,
-  did: u,
-  noPermissionMute: k = !1,
-  onInstalled: v = null,
-  onError: z = null,
-  children: d,
-  closeByOutSize: L = !1,
-  onClose: s = null,
+  did: m,
+  noPermissionMute: I = !1,
+  onInstalled: C = null,
+  onError: S = null,
+  children: a,
+  closeByOutSize: k = !1,
+  onClose: d = null,
   fallback: p = null,
-  disabled: T = !1,
-  roles: D = ["owner", "admin"]
+  disabled: v = !1,
+  roles: z = ["owner", "admin"]
 }) {
-  const { locale: B } = W(), a = Y((i, r = {}) => q(E, i, B, "en", r)), { installed: j, optComponents: g, installStatus: h, definedInBlockletYML: M } = H({
-    did: u,
-    onInstalled: v,
-    onError: z
-  }), f = P(R), c = () => {
-    s == null || s(!1);
+  const { locale: L } = M(), s = N((i, t = {}) => R(P, i, L, "en", t)), { installed: T, optComponents: u, installStatus: g, definedInBlockletYML: D } = $({
+    did: m,
+    onInstalled: C,
+    onError: S
+  }), B = O(j), f = () => {
+    d?.(!1);
   };
-  return T ? d : /* @__PURE__ */ e(A, { session: f == null ? void 0 : f.session, roles: D, children: ({ hasPermission: i }) => j ? d : k && !i ? p || null : typeof d == "function" ? /* @__PURE__ */ o(x, { children: [
+  return v ? a : /* @__PURE__ */ e(W, { session: B?.session, roles: z, children: ({ hasPermission: i }) => T ? a : I && !i ? p || null : typeof a == "function" ? /* @__PURE__ */ r(x, { children: [
     p,
-    d({
+    a({
       hasPermission: i,
-      optComponents: g,
-      installStatus: h
+      optComponents: u,
+      installStatus: g
     })
-  ] }) : /* @__PURE__ */ o(x, { children: [
+  ] }) : /* @__PURE__ */ r(x, { children: [
     p,
     /* @__PURE__ */ e(
-      F,
+      q,
       {
-        onClickAway: (r) => {
-          r.preventDefault(), r.stopPropagation(), L && c();
+        onClickAway: (t) => {
+          t.preventDefault(), t.stopPropagation(), k && f();
         },
-        children: /* @__PURE__ */ e(N, { in: !0, timeout: 350, children: /* @__PURE__ */ e(
-          O,
+        children: /* @__PURE__ */ e(A, { in: !0, timeout: 350, children: /* @__PURE__ */ e(
+          F,
           {
             variant: "outlined",
             sx: {
@@ -63,10 +63,10 @@ function m({
               border: "0 !important",
               fontSize: "14px",
               textAlign: "left",
-              boxShadow: ({ palette: r }) => `0px 8px 16px 0px ${r.grey[100]}, 0px 0px 0px 1px ${r.grey[100]}`
+              boxShadow: ({ palette: t }) => `0px 8px 16px 0px ${t.grey[100]}, 0px 0px 0px 1px ${t.grey[100]}`
             },
-            children: M ? /* @__PURE__ */ o(n, { sx: { display: "flex", flexDirection: "column" }, children: [
-              /* @__PURE__ */ o(
+            children: D ? /* @__PURE__ */ r(n, { sx: { display: "flex", flexDirection: "column" }, children: [
+              /* @__PURE__ */ r(
                 n,
                 {
                   sx: {
@@ -78,34 +78,31 @@ function m({
                     justifyContent: "flex-start"
                   },
                   children: [
-                    l || /* @__PURE__ */ e(I, { icon: "mdi:warning-box", style: { color: "yellowgreen", fontSize: 24 } }),
-                    /* @__PURE__ */ e(n, { sx: { marginLeft: 1, fontSize: "16px", fontWeight: "bold" }, children: a("componentInstallerTitle") }),
+                    l || /* @__PURE__ */ e(y, { icon: "mdi:warning-box", style: { color: "yellowgreen", fontSize: 24 } }),
+                    /* @__PURE__ */ e(n, { sx: { marginLeft: 1, fontSize: "16px", fontWeight: "bold" }, children: s("componentInstallerTitle") }),
                     /* @__PURE__ */ e(n, { sx: { flex: 1 } }),
-                    s ? /* @__PURE__ */ e(C, { variant: "outlined", className: "button", onClick: c, children: /* @__PURE__ */ e(S, {}) }) : null
+                    d ? /* @__PURE__ */ e(b, { variant: "outlined", className: "button", onClick: f, children: /* @__PURE__ */ e(w, {}) }) : null
                   ]
                 }
               ),
               /* @__PURE__ */ e(n, { sx: { width: "100%", height: "1px", backgroundColor: "grey.100" } }),
-              /* @__PURE__ */ e(n, { sx: { maxHeight: "70vh", overflowY: "auto" }, children: g.map((r, y) => {
-                var w, b;
-                return /* @__PURE__ */ e(
-                  $,
-                  {
-                    t: a,
-                    hasPermission: i,
-                    index: y,
-                    optionalComponent: r,
-                    installStatus: h[(w = r.meta) == null ? void 0 : w.did]
-                  },
-                  ((b = r.meta) == null ? void 0 : b.did) || y
-                );
-              }) }),
-              i ? null : /* @__PURE__ */ o(x, { children: [
+              /* @__PURE__ */ e(n, { sx: { maxHeight: "70vh", overflowY: "auto" }, children: u.map((t, h) => /* @__PURE__ */ e(
+                Y,
+                {
+                  t: s,
+                  hasPermission: i,
+                  index: h,
+                  optionalComponent: t,
+                  installStatus: g[t.meta?.did]
+                },
+                t.meta?.did || h
+              )) }),
+              i ? null : /* @__PURE__ */ r(x, { children: [
                 /* @__PURE__ */ e(n, { sx: { width: "100%", height: "1px", backgroundColor: "grey.100" } }),
-                /* @__PURE__ */ e(n, { sx: { padding: "20px 24px" }, children: /* @__PURE__ */ e(n, { sx: { opacity: 1 }, children: a("componentInstallerSuggestions") }) })
+                /* @__PURE__ */ e(n, { sx: { padding: "20px 24px" }, children: /* @__PURE__ */ e(n, { sx: { opacity: 1 }, children: s("componentInstallerSuggestions") }) })
               ] })
-            ] }) : /* @__PURE__ */ o(n, { sx: { display: "flex", flexDirection: "column" }, children: [
-              /* @__PURE__ */ o(
+            ] }) : /* @__PURE__ */ r(n, { sx: { display: "flex", flexDirection: "column" }, children: [
+              /* @__PURE__ */ r(
                 n,
                 {
                   sx: {
@@ -117,18 +114,18 @@ function m({
                     justifyContent: "flex-start"
                   },
                   children: [
-                    l || /* @__PURE__ */ e(I, { icon: "mdi:warning-box", style: { color: "yellowgreen", fontSize: 24 } }),
-                    /* @__PURE__ */ e(n, { sx: { marginLeft: 1, fontSize: "16px", fontWeight: "bold" }, children: a("componentInstallerTitle") }),
+                    l || /* @__PURE__ */ e(y, { icon: "mdi:warning-box", style: { color: "yellowgreen", fontSize: 24 } }),
+                    /* @__PURE__ */ e(n, { sx: { marginLeft: 1, fontSize: "16px", fontWeight: "bold" }, children: s("componentInstallerTitle") }),
                     /* @__PURE__ */ e(n, { sx: { flex: 1 } }),
-                    s ? /* @__PURE__ */ e(C, { variant: "outlined", className: "button", onClick: c, children: /* @__PURE__ */ e(S, {}) }) : null
+                    d ? /* @__PURE__ */ e(b, { variant: "outlined", className: "button", onClick: f, children: /* @__PURE__ */ e(w, {}) }) : null
                   ]
                 }
               ),
               /* @__PURE__ */ e(n, { sx: { width: "100%", height: "1px", backgroundColor: "grey.100" } }),
-              /* @__PURE__ */ o(n, { sx: { padding: "20px 24px", marginTop: 0 }, children: [
-                a("componentInstallerNoDefinedInBlockletYML"),
+              /* @__PURE__ */ r(n, { sx: { padding: "20px 24px", marginTop: 0 }, children: [
+                s("componentInstallerNoDefinedInBlockletYML"),
                 ": ",
-                u
+                m
               ] })
             ] })
           }
@@ -137,26 +134,26 @@ function m({
     )
   ] }) });
 }
-m.propTypes = {
-  disabled: t.bool,
-  warnIcon: t.node,
-  did: t.oneOfType([t.string, t.arrayOf(t.string)]).isRequired,
-  noPermissionMute: t.bool,
-  onInstalled: t.func,
-  onError: t.func,
-  children: t.any.isRequired,
-  closeByOutSize: t.bool,
-  onClose: t.func,
-  fallback: t.node,
-  roles: t.array
+c.propTypes = {
+  disabled: o.bool,
+  warnIcon: o.node,
+  did: o.oneOfType([o.string, o.arrayOf(o.string)]).isRequired,
+  noPermissionMute: o.bool,
+  onInstalled: o.func,
+  onError: o.func,
+  children: o.any.isRequired,
+  closeByOutSize: o.bool,
+  onClose: o.func,
+  fallback: o.node,
+  roles: o.array
 };
-function G(l) {
-  return window.blocklet ? /* @__PURE__ */ e(m, { ...l }) : l.children;
+function E(l) {
+  return window.blocklet ? /* @__PURE__ */ e(c, { ...l }) : l.children;
 }
-G.propTypes = {
-  ...m.propTypes,
-  children: t.any.isRequired
+E.propTypes = {
+  ...c.propTypes,
+  children: o.any.isRequired
 };
 export {
-  G as default
+  E as default
 };

package/lib/ComponentInstaller/installer-item.js

@@ -1,19 +1,19 @@
-import { jsxs as n, jsx as i } from "react/jsx-runtime";
-import { Icon as x } from "@iconify/react";
-import { useTheme as y, Box as r, Button as d } from "@mui/material";
-import s from "prop-types";
-function I({ optionalComponent: e, index: h, installStatus: l = "", hasPermission: f, t: c }) {
-  const { palette: m } = y(), g = () => {
-    window.open(e == null ? void 0 : e.installUrl, "_blank");
-  }, p = () => {
-    window.open(e == null ? void 0 : e.storeUrl, "_blank");
-  }, u = () => {
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { Icon as d } from "@iconify/react";
+import { useTheme as u, Box as i, Button as a } from "@mui/material";
+import r from "prop-types";
+function y({ optionalComponent: n, index: p, installStatus: l = "", hasPermission: m, t: s }) {
+  const { palette: x } = u(), h = () => {
+    window.open(n?.installUrl, "_blank");
+  }, f = () => {
+    window.open(n?.storeUrl, "_blank");
+  }, g = () => {
     window.location.reload();
-  }, o = l === "stopped" || l === "running", a = 60;
-  return /* @__PURE__ */ n(r, { children: [
-    h === 0 ? null : /* @__PURE__ */ i(r, { sx: { width: "100%", height: "1px", backgroundColor: "grey.100" } }),
-    /* @__PURE__ */ n(
-      r,
+  }, c = l === "stopped" || l === "running", o = 60;
+  return /* @__PURE__ */ t(i, { children: [
+    p === 0 ? null : /* @__PURE__ */ e(i, { sx: { width: "100%", height: "1px", backgroundColor: "grey.100" } }),
+    /* @__PURE__ */ t(
+      i,
       {
         sx: {
           padding: "20px 24px",
@@ -25,16 +25,16 @@ function I({ optionalComponent: e, index: h, installStatus: l = "", hasPermissio
           alignItems: "flex-start"
         },
         children: [
-          /* @__PURE__ */ i(
+          /* @__PURE__ */ e(
             "img",
             {
-              style: { width: a, height: a, minWidth: a, minHeight: a },
-              src: e.logoUrl,
-              alt: e.meta.title
+              style: { width: o, height: o, minWidth: o, minHeight: o },
+              src: n.logoUrl,
+              alt: n.meta.title
             }
           ),
-          /* @__PURE__ */ n(
-            r,
+          /* @__PURE__ */ t(
+            i,
             {
               sx: {
                 display: "flex",
@@ -44,8 +44,8 @@ function I({ optionalComponent: e, index: h, installStatus: l = "", hasPermissio
                 marginLeft: 2
               },
               children: [
-                /* @__PURE__ */ n(
-                  r,
+                /* @__PURE__ */ t(
+                  i,
                   {
                     sx: {
                       fontSize: "16px",
@@ -58,14 +58,11 @@ function I({ optionalComponent: e, index: h, installStatus: l = "", hasPermissio
                         opacity: 1
                       }
                     },
-                    onClick: () => {
-                      var t;
-                      return p((t = e.meta) == null ? void 0 : t.did);
-                    },
+                    onClick: () => f(n.meta?.did),
                     children: [
-                      e.meta.title,
-                      /* @__PURE__ */ n(
-                        r,
+                      n.meta.title,
+                      /* @__PURE__ */ t(
+                        i,
                         {
                           sx: {
                             paddingLeft: 1,
@@ -74,14 +71,14 @@ function I({ optionalComponent: e, index: h, installStatus: l = "", hasPermissio
                           },
                           component: "span",
                           children: [
-                            e.meta.version,
-                            /* @__PURE__ */ i(
-                              x,
+                            n.meta.version,
+                            /* @__PURE__ */ e(
+                              d,
                               {
                                 className: "link-icon",
                                 icon: "fluent:open-20-filled",
                                 style: {
-                                  color: m.primary.main,
+                                  color: x.primary.main,
                                   fontSize: 16,
                                   transform: "translate(6px, 3px)",
                                   transition: "all 0.3s"
@@ -94,32 +91,29 @@ function I({ optionalComponent: e, index: h, installStatus: l = "", hasPermissio
                     ]
                   }
                 ),
-                /* @__PURE__ */ i(r, { sx: { marginTop: 0, opacity: 0.7 }, children: e.meta.description }),
-                /* @__PURE__ */ i(r, { sx: { display: f ? "flex" : "none", flexDirection: "row", gap: 1 }, children: l ? /* @__PURE__ */ i(r, { sx: { marginTop: 2, opacity: 0.7 }, children: o ? /* @__PURE__ */ i(d, { variant: "contained", onClick: u, children: c("componentInstallerRefresh") }, "refresh") : /* @__PURE__ */ i(
-                  d,
+                /* @__PURE__ */ e(i, { sx: { marginTop: 0, opacity: 0.7 }, children: n.meta.description }),
+                /* @__PURE__ */ e(i, { sx: { display: m ? "flex" : "none", flexDirection: "row", gap: 1 }, children: l ? /* @__PURE__ */ e(i, { sx: { marginTop: 2, opacity: 0.7 }, children: c ? /* @__PURE__ */ e(a, { variant: "contained", onClick: g, children: s("componentInstallerRefresh") }, "refresh") : /* @__PURE__ */ e(
+                  a,
                   {
                     disabled: !0,
                     sx: { color: "text.primary" },
-                    startIcon: /* @__PURE__ */ i(x, { icon: "line-md:loading-loop", style: { color: "text.primary", fontSize: 16 } }),
+                    startIcon: /* @__PURE__ */ e(d, { icon: "line-md:loading-loop", style: { color: "text.primary", fontSize: 16 } }),
                     variant: "contained",
                     children: l
                   },
                   "status"
-                ) }) : /* @__PURE__ */ i(
-                  d,
+                ) }) : /* @__PURE__ */ e(
+                  a,
                   {
                     sx: { marginTop: 2 },
                     variant: "contained",
                     className: "button",
-                    onClick: () => {
-                      var t;
-                      return g((t = e.meta) == null ? void 0 : t.did);
-                    },
-                    children: c("componentInstallerInstall")
+                    onClick: () => h(n.meta?.did),
+                    children: s("componentInstallerInstall")
                   },
                   "install"
                 ) }),
-                o ? /* @__PURE__ */ i(r, { sx: { marginTop: 2, opacity: 0.7 }, children: c("componentInstallerSuccessInstalled") }) : null
+                c ? /* @__PURE__ */ e(i, { sx: { marginTop: 2, opacity: 0.7 }, children: s("componentInstallerSuccessInstalled") }) : null
               ]
             }
           )
@@ -128,13 +122,13 @@ function I({ optionalComponent: e, index: h, installStatus: l = "", hasPermissio
     )
   ] });
 }
-I.propTypes = {
-  t: s.func.isRequired,
-  optionalComponent: s.object.isRequired,
-  index: s.number.isRequired,
-  installStatus: s.string,
-  hasPermission: s.bool.isRequired
+y.propTypes = {
+  t: r.func.isRequired,
+  optionalComponent: r.object.isRequired,
+  index: r.number.isRequired,
+  installStatus: r.string,
+  hasPermission: r.bool.isRequired
 };
 export {
-  I as default
+  y as default
 };