@blocklet/ui-react 3.0.9 → 3.0.11

package/lib/ComponentInstaller/use-component-installed.js

@@ -1,44 +1,38 @@
-import { BLOCKLET_SERVICE_PATH_PREFIX as y } from "@arcblock/did-connect/lib/constant";
-import { useState as A, useRef as M, useMemo as C, useEffect as P } from "react";
-import { joinURL as I } from "ufo";
-const u = (e) => typeof e == "string" ? new Set(e.split(";;")) : new Set(e);
-function B({ did: e, onInstalled: f, onError: p }) {
-  const o = Array.isArray(e) ? e.join(";;") : e, [L, i] = A({}), d = M({ onInstalled: f, onError: p });
-  d.current = { onInstalled: f, onError: p };
-  const { optionalComponents: l, componentMountPoints: m } = window.blocklet, r = C(() => {
-    var s;
-    if (!l || !l.length)
+import { BLOCKLET_SERVICE_PATH_PREFIX as k } from "@arcblock/did-connect/lib/constant";
+import { useState as b, useRef as C, useMemo as h, useEffect as I } from "react";
+import { joinURL as w } from "ufo";
+const c = (e) => typeof e == "string" ? new Set(e.split(";;")) : new Set(e);
+function y({ did: e, onInstalled: u, onError: f }) {
+  const o = Array.isArray(e) ? e.join(";;") : e, [S, a] = b({}), i = C({ onInstalled: u, onError: f });
+  i.current = { onInstalled: u, onError: f };
+  const { optionalComponents: s, componentMountPoints: p } = window.blocklet, r = h(() => {
+    if (!s || !s.length)
       return [];
-    const t = u(o), n = l.filter((a) => t.has(a.meta.did));
-    return (s = n ? d.current.onError : d.current.onInstalled) == null || s(n), n;
-  }, [o, l]), h = C(() => {
+    const t = c(o), n = s.filter((l) => t.has(l.meta.did));
+    return (n ? i.current.onError : i.current.onInstalled)?.(n), n;
+  }, [o, s]), m = h(() => {
     if (r.length)
       return !0;
-    const t = u(o);
-    return (m || []).find((n) => t.has(n.did));
-  }, [r, m, o]);
+    const t = c(o);
+    return (p || []).find((n) => t.has(n.did));
+  }, [r, p, o]);
   return r.forEach((t) => {
-    t.storeUrl = I(t.meta.homepage, "blocklets", t.meta.did), t.installUrl = I(
+    t.storeUrl = w(t.meta.homepage, "blocklets", t.meta.did), t.installUrl = w(
       window.blocklet.appUrl,
-      y,
+      k,
       `/admin/components?install-component=${t.meta.did}`
     );
-  }), P(() => {
+  }), I(() => {
     const t = (n) => {
-      var s, a, w, S, g;
-      if (n.origin === window.blocklet.appUrl && ((s = n.data) == null ? void 0 : s.kind) === "component-installer" && (w = (a = n.data) == null ? void 0 : a.blocklet) != null && w.children) {
-        let E = !1;
-        const R = u(o);
-        (g = (S = n.data) == null ? void 0 : S.blocklet) == null || g.children.forEach((c) => {
-          var k;
-          R.has((k = c.meta) == null ? void 0 : k.did) && (E = !0, i((U) => {
-            var b;
-            return {
-              ...U,
-              [(b = c.meta) == null ? void 0 : b.did]: c.status || "waiting"
-            };
-          }));
-        }), E || i({});
+      if (n.origin === window.blocklet.appUrl && n.data?.kind === "component-installer" && n.data?.blocklet?.children) {
+        let l = !1;
+        const g = c(o);
+        n.data?.blocklet?.children.forEach((d) => {
+          g.has(d.meta?.did) && (l = !0, a((E) => ({
+            ...E,
+            [d.meta?.did]: d.status || "waiting"
+          })));
+        }), l || a({});
       }
     };
     return window.addEventListener("message", t), () => {
@@ -46,12 +40,12 @@ function B({ did: e, onInstalled: f, onError: p }) {
     };
   }, [o]), {
     optComponents: r,
-    installed: !r.length && h,
-    installStatus: L,
-    setInstallStatus: i,
-    definedInBlockletYML: h
+    installed: !r.length && m,
+    installStatus: S,
+    setInstallStatus: a,
+    definedInBlockletYML: m
   };
 }
 export {
-  B as default
+  y as default
 };

package/lib/ComponentManager/components/add-component.js

@@ -1,89 +1,86 @@
-import { jsxs as y, Fragment as B, jsx as g } from "react/jsx-runtime";
-import { use as C, useRef as F, useEffect as I } from "react";
+import { jsxs as k, Fragment as y, jsx as c } from "react/jsx-runtime";
+import { use as B, useRef as F, useEffect as I } from "react";
 import S from "@arcblock/ux/lib/Button";
 import { useLocaleContext as j } from "@arcblock/ux/lib/Locale/context";
 import { BLOCKLET_SERVICE_PATH_PREFIX as P } from "@arcblock/ux/lib/Util/constant";
-import { useMemoizedFn as r, useReactive as T } from "ahooks";
+import { useMemoizedFn as e, useReactive as T } from "ahooks";
 import { translate as U } from "@arcblock/ux/lib/Locale/util";
 import { withQuery as _, joinURL as A } from "ufo";
 import { SessionContext as M } from "@arcblock/did-connect/lib/Session";
-import h from "@arcblock/ux/lib/Toast";
+import f from "@arcblock/ux/lib/Toast";
 import O from "./resource-dialog.js";
 import { translations as z } from "../libs/locales.js";
 function $({
-  componentDid: a,
-  resourceType: w = void 0,
-  resourceDid: p = void 0,
-  grantedRoles: L = ["admin", "owner"],
-  autoClose: R = !0,
-  selectedMeta: D = void 0,
-  storeUrl: E = void 0,
-  onComplete: n,
-  onClose: t,
-  render: d = void 0
+  componentDid: s,
+  resourceType: u = void 0,
+  resourceDid: g = void 0,
+  grantedRoles: p = ["admin", "owner"],
+  autoClose: h = !0,
+  selectedMeta: w = void 0,
+  storeUrl: C = void 0,
+  onComplete: v,
+  onClose: L,
+  render: a = void 0
 }) {
-  const { session: m } = C(M), { locale: x } = j(), i = r((o, s = {}) => U(z, o, x, "en", s)), l = F(null), e = T({
+  const { session: i } = B(M), { locale: R } = j(), t = e((n, b = {}) => U(z, n, R, "en", b)), r = F(null), o = T({
     loading: !1,
     showDialog: !1
-  }), b = _(A(P, "embed/resources", a, "add"), {
-    resourceDid: p,
-    resourceType: w,
+  }), D = _(A(P, "embed/resources", s, "add"), {
+    resourceDid: g,
+    resourceType: u,
     mode: "dialog",
     showFromUrl: "false",
     showResourcesSwitch: "false",
     enableRunBackground: "false",
     showCategory: "false"
-  }), v = r(() => {
-    e.showDialog = !1, t == null || t();
-  }), c = r(() => {
-    e.showDialog = !1, n == null || n();
-  }), f = r(() => {
-    var o;
-    if (!m.user) {
-      h.warning(i("needLogin"));
+  }), E = e(() => {
+    o.showDialog = !1, L?.();
+  }), l = e(() => {
+    o.showDialog = !1, v?.();
+  }), m = e(() => {
+    if (!i.user) {
+      f.warning(t("needLogin"));
       return;
     }
-    if (!L.includes((o = m.user) == null ? void 0 : o.role)) {
-      h.warning(i("noPermission"));
+    if (!p.includes(i.user?.role)) {
+      f.warning(t("noPermission"));
       return;
     }
-    e.loading = !0, e.showDialog = !0;
-  }), k = r(() => {
-    var o;
-    e.loading = !1, l.current && ((o = l.current) == null || o.selectBlocklet(D));
-  }), u = r((o) => {
-    var s;
-    ((s = o == null ? void 0 : o.data) == null ? void 0 : s.event) === "component.installed" && o.data.componentDid === a && (R || o.data.manual) && c();
+    o.loading = !0, o.showDialog = !0;
+  }), x = e(() => {
+    o.loading = !1, r.current && r.current?.selectBlocklet(w);
+  }), d = e((n) => {
+    n?.data?.event === "component.installed" && n.data.componentDid === s && (h || n.data.manual) && l();
   });
   return I(() => {
-    e.showDialog ? window.addEventListener("message", u) : window.removeEventListener("message", u);
-  }, [e.showDialog]), /* @__PURE__ */ y(B, { children: [
-    d ? d({ onClick: f, loading: e.loading }) : /* @__PURE__ */ g(
+    o.showDialog ? window.addEventListener("message", d) : window.removeEventListener("message", d);
+  }, [o.showDialog]), /* @__PURE__ */ k(y, { children: [
+    a ? a({ onClick: m, loading: o.loading }) : /* @__PURE__ */ c(
       S,
       {
         variant: "outlined",
         color: "secondary",
         type: "button",
         className: "submit",
-        onClick: f,
-        loading: e.loading,
+        onClick: m,
+        loading: o.loading,
         sx: { mr: 1, ml: 1 },
-        children: i("importResource")
+        children: t("importResource")
       },
       "button"
     ),
-    e.showDialog && /* @__PURE__ */ g(
+    o.showDialog && /* @__PURE__ */ c(
       O,
       {
-        ref: l,
-        src: b,
-        storeUrl: E,
+        ref: r,
+        src: D,
+        storeUrl: C,
         open: !0,
-        componentDid: a,
-        loading: e.loading,
-        onClose: v,
-        onComplete: c,
-        onLoad: k
+        componentDid: s,
+        loading: o.loading,
+        onClose: E,
+        onComplete: l,
+        onLoad: x
       }
     )
   ] });

package/lib/ComponentManager/components/publish-component.js

@@ -1,67 +1,66 @@
-import { jsxs as x, Fragment as b, jsx as u } from "react/jsx-runtime";
-import { use as w } from "react";
-import L from "@arcblock/ux/lib/Button";
-import { useLocaleContext as C } from "@arcblock/ux/lib/Locale/context";
+import { jsxs as C, Fragment as x, jsx as a } from "react/jsx-runtime";
+import { use as b } from "react";
+import w from "@arcblock/ux/lib/Button";
+import { useLocaleContext as L } from "@arcblock/ux/lib/Locale/context";
 import { BLOCKLET_SERVICE_PATH_PREFIX as v } from "@arcblock/ux/lib/Util/constant";
-import { useMemoizedFn as t, useReactive as D } from "ahooks";
+import { useMemoizedFn as e, useReactive as D } from "ahooks";
 import { translate as E } from "@arcblock/ux/lib/Locale/util";
 import { SessionContext as P } from "@arcblock/did-connect/lib/Session";
-import c from "@arcblock/ux/lib/Toast";
+import m from "@arcblock/ux/lib/Toast";
 import F from "./resource-dialog.js";
-import { translations as S } from "../libs/locales.js";
-function H({
-  componentDid: s,
-  grantedRoles: i = void 0,
-  onClose: n,
-  render: a = void 0
+import { translations as R } from "../libs/locales.js";
+function A({
+  componentDid: t,
+  grantedRoles: n = void 0,
+  onClose: u,
+  render: i = void 0
 }) {
-  const { session: l } = w(P), { locale: f } = C(), e = t((r, h = {}) => E(S, r, f, "en", h)), o = D({
+  const { session: s } = b(P), { locale: c } = L(), r = e((p, h = {}) => E(R, p, c, "en", h)), o = D({
     showDialog: !1,
     loading: !1
-  }), d = `${v}/embed/resources/${s}/publish?mode=dialog`, p = t(() => {
-    o.showDialog = !1, n == null || n();
-  }), g = t(() => {
+  }), d = `${v}/embed/resources/${t}/publish?mode=dialog`, f = e(() => {
+    o.showDialog = !1, u?.();
+  }), g = e(() => {
     o.loading = !1;
-  }), m = t(() => {
-    var r;
-    if (!l.user) {
-      c.warning(e("needLogin"));
+  }), l = e(() => {
+    if (!s.user) {
+      m.warning(r("needLogin"));
       return;
     }
-    if (i && i.length > 0 && !(i != null && i.includes((r = l.user) == null ? void 0 : r.role))) {
-      c.warning(e("noPermission"));
+    if (n && n.length > 0 && !n?.includes(s.user?.role)) {
+      m.warning(r("noPermission"));
       return;
     }
     o.loading = !0, o.showDialog = !0;
   });
-  return /* @__PURE__ */ x(b, { children: [
-    a ? a({ onClick: m, loading: o.loading }) : /* @__PURE__ */ u(
-      L,
+  return /* @__PURE__ */ C(x, { children: [
+    i ? i({ onClick: l, loading: o.loading }) : /* @__PURE__ */ a(
+      w,
       {
         variant: "outlined",
         color: "secondary",
         type: "button",
         className: "submit",
         loading: o.loading,
-        onClick: m,
+        onClick: l,
         sx: { mr: 1, ml: 1 },
-        children: e("exportResource")
+        children: r("exportResource")
       },
       "button"
     ),
-    o.showDialog && /* @__PURE__ */ u(
+    o.showDialog && /* @__PURE__ */ a(
       F,
       {
         src: d,
         open: !0,
-        onClose: p,
+        onClose: f,
         onLoad: g,
-        componentDid: s,
+        componentDid: t,
         loading: o.loading
       }
     )
   ] });
 }
 export {
-  H as default
+  A as default
 };

package/lib/ComponentManager/components/resource-dialog.js

@@ -1,50 +1,48 @@
-import { jsx as w } from "react/jsx-runtime";
-import { useMemoizedFn as p, useMount as D, useUnmount as R } from "ahooks";
-import { forwardRef as h, useRef as x, useImperativeHandle as M } from "react";
-function b({
-  src: l,
+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: n,
-  loading: u = !0,
-  storeUrl: c = "",
-  onClose: d = () => {
+  componentDid: i,
+  loading: s = !0,
+  storeUrl: a = "",
+  onClose: l = () => {
   },
-  onComplete: f = () => {
+  onComplete: u = () => {
   },
-  onLoad: m = () => {
+  onLoad: c = () => {
   }
-}, g) {
-  const r = x(null), i = p((e) => {
-    var o, s, a;
-    t && (((o = e == null ? void 0 : e.data) == null ? void 0 : o.event) === "resourceDialog.close" && d(), ((s = e == null ? void 0 : e.data) == null ? void 0 : s.event) === "resourceDialog.complete" && f(), ((a = e == null ? void 0 : e.data) == null ? void 0 : a.event) === "resourceDialog.loaded" && m());
+}, 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 D(() => {
-    window.addEventListener("message", i);
-  }), R(() => {
-    window.removeEventListener("message", i);
-  }), M(g, () => ({
+  return g(() => {
+    window.addEventListener("message", r);
+  }), w(() => {
+    window.removeEventListener("message", r);
+  }), D(d, () => ({
     selectBlocklet: (e) => {
-      var o;
-      (o = r.current) != null && o.contentWindow && r.current.contentWindow.postMessage(
+      o.current?.contentWindow && o.current.contentWindow.postMessage(
         {
           event: "resourceDialog.select",
           data: e,
-          componentDid: n,
-          storeUrl: c
+          componentDid: i,
+          storeUrl: a
         },
         "*"
       );
     }
-  })), t ? /* @__PURE__ */ w(
+  })), t ? /* @__PURE__ */ f(
     "iframe",
     {
-      ref: r,
-      src: l,
+      ref: o,
+      src: n,
       title: "Resource Dialog",
       style: {
         position: "fixed",
         top: 0,
-        left: u ? "-100vw" : 0,
+        left: s ? "-100vw" : 0,
         width: "100vw",
         height: "100vh",
         zIndex: 9999,
@@ -54,7 +52,7 @@ function b({
     }
   ) : null;
 }
-const I = h(b);
+const b = p(R);
 export {
-  I as default
+  b as default
 };

package/lib/Dashboard/index.d.ts

@@ -22,7 +22,7 @@ declare namespace Dashboard {
         export { BlockletMetaProps as meta };
         export let fallbackUrl: PropTypes.Requireable<string>;
         export let invalidPathFallback: PropTypes.Requireable<(...args: any[]) => any>;
-        export let headerAddons: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike | ((...args: any[]) => any)>>;
+        export let headerAddons: PropTypes.Requireable<NonNullable<((...args: any[]) => any) | PropTypes.ReactNodeLike>>;
         export { SessionManagerProps as sessionManagerProps };
         export let links: PropTypes.Requireable<NonNullable<any[] | ((...args: any[]) => any) | null | undefined>>;
         export let showDomainWarningDialog: PropTypes.Requireable<boolean>;

package/lib/Dashboard/index.js

@@ -1,54 +1,52 @@
-import { jsx as s } from "react/jsx-runtime";
+import { jsx as i } from "react/jsx-runtime";
 import "iconify-icon";
-import { use as A, useMemo as N, useLayoutEffect as P } from "react";
+import { use as I, useMemo as v, useLayoutEffect as w } from "react";
 import t from "prop-types";
-import { SessionContext as D } from "@arcblock/did-connect/lib/Session";
-import { useLocaleContext as M } from "@arcblock/ux/lib/Locale/context";
-import B from "@arcblock/ux/lib/Img";
-import O from "@arcblock/ux/lib/Layout/dashboard";
-import j from "@arcblock/ux/lib/hooks/use-blocklet-logo";
-import { SessionManagerProps as H, BlockletMetaProps as S } from "../types.js";
-import { mapRecursive as _, flatRecursive as C, matchPaths as E } from "../utils.js";
-import { formatBlockletInfo as U, getLocalizedNavigation as q, filterNavByRole as F, publicPath as h } from "../blocklets.js";
-import G from "../common/header-addons.js";
-import { useWalletHiddenTopbar as J } from "../common/wallet-hidden-topbar.js";
-function K({
-  meta: l = {},
-  fallbackUrl: c = h,
-  invalidPathFallback: d = null,
+import { SessionContext as R } from "@arcblock/did-connect/lib/Session";
+import { useLocaleContext as T } from "@arcblock/ux/lib/Locale/context";
+import z from "@arcblock/ux/lib/Img";
+import A from "@arcblock/ux/lib/Layout/dashboard";
+import C from "@arcblock/ux/lib/hooks/use-blocklet-logo";
+import { SessionManagerProps as D, BlockletMetaProps as M } from "../types.js";
+import { mapRecursive as O, flatRecursive as j, matchPaths as H } from "../utils.js";
+import { formatBlockletInfo as S, getLocalizedNavigation as _, filterNavByRole as E, publicPath as m } from "../blocklets.js";
+import U from "../common/header-addons.js";
+import { useWalletHiddenTopbar as q } from "../common/wallet-hidden-topbar.js";
+function F({
+  meta: s = {},
+  fallbackUrl: a = m,
+  invalidPathFallback: l = null,
   headerAddons: k = void 0,
-  sessionManagerProps: W = {
+  sessionManagerProps: L = {
     showRole: !0,
     // dashboard 默认退出登录行为: 跳转到 (root) blocklet 首页
     onLogout: () => {
-      window.location.href = h;
+      window.location.href = m;
     }
   },
-  links: f = [],
-  showDomainWarningDialog: I = !0,
-  ...g
+  links: c = [],
+  showDomainWarningDialog: N = !0,
+  ...h
 }) {
-  var x;
-  J();
-  const p = A(D), i = (x = p == null ? void 0 : p.session) == null ? void 0 : x.user, y = i == null ? void 0 : i.role, { locale: b } = M() || {}, r = N(() => {
-    const e = Object.assign({}, window.blocklet, l);
+  q();
+  const d = I(R)?.session?.user, g = d?.role, { locale: x } = T() || {}, r = v(() => {
+    const e = Object.assign({}, window.blocklet, s);
     try {
-      return U(e);
-    } catch (a) {
-      return console.error("Failed to format blocklet info", a, e), e;
+      return S(e);
+    } catch (n) {
+      return console.error("Failed to format blocklet info", n, e), e;
     }
-  }, [l]), { localizedNav: v, flattened: n, matchedIndex: w } = N(() => {
-    var L;
-    let e = q((L = r == null ? void 0 : r.navigation) == null ? void 0 : L.dashboard, b) || [];
-    e = F(e, y), e = _(
+  }, [s]), { localizedNav: y, flattened: f, matchedIndex: b } = v(() => {
+    let e = _(r?.navigation?.dashboard, x) || [];
+    e = E(e, g), e = O(
       e,
       (o) => {
-        let m = null;
-        return o.icon && (o.icon.startsWith("http") || o.icon.startsWith("data:") ? m = /* @__PURE__ */ s(B, { src: o.icon }) : m = /* @__PURE__ */ s("iconify-icon", { height: "100%", width: "100%", icon: o.icon })), {
+        let u = null;
+        return o.icon && (o.icon.startsWith("http") || o.icon.startsWith("data:") ? u = /* @__PURE__ */ i(z, { src: o.icon }) : u = /* @__PURE__ */ i("iconify-icon", { height: "100%", width: "100%", icon: o.icon })), {
           id: o.id,
           title: o.title,
           url: o.link,
-          icon: m,
+          icon: u,
           // https://github.com/ArcBlock/ux/issues/755#issuecomment-1208692620
           external: !0,
           children: o.items
@@ -56,55 +54,55 @@ function K({
       },
       "items"
     );
-    const a = C(e).filter((o) => !!o.url), u = E(a.map((o) => o.url));
-    return u !== -1 && (a[u].active = !0), { localizedNav: e, flattened: a, matchedIndex: u };
-  }, [r, b, y]), R = typeof f == "function" ? f(v) : [...v, ...f], T = j({
-    meta: l
+    const n = j(e).filter((o) => !!o.url), p = H(n.map((o) => o.url));
+    return p !== -1 && (n[p].active = !0), { localizedNav: e, flattened: n, matchedIndex: p };
+  }, [r, x, g]), P = typeof c == "function" ? c(y) : [...y, ...c], W = C({
+    meta: s
   });
-  if (P(() => {
-    i && !(n != null && n.length) && c && (window.location.href = c);
-  }, [c]), P(() => {
-    i && (n != null && n.length) && w === -1 && d && d();
-  }, [d, n, w]), !r.appName)
+  if (w(() => {
+    d && !f?.length && a && (window.location.href = a);
+  }, [a]), w(() => {
+    d && f?.length && b === -1 && l && l();
+  }, [l, f, b]), !r.appName)
     return null;
-  const { appName: z } = r;
-  return /* @__PURE__ */ s(
-    O,
+  const { appName: B } = r;
+  return /* @__PURE__ */ i(
+    A,
     {
-      title: z,
+      title: B,
       fullWidth: !0,
       sidebarWidth: 128,
       legacy: !1,
-      links: R,
-      ...g,
+      links: P,
+      ...h,
       headerProps: {
-        homeLink: h,
-        logo: /* @__PURE__ */ s("img", { src: T, alt: "logo" }),
-        addons: /* @__PURE__ */ s(
-          G,
+        homeLink: m,
+        logo: /* @__PURE__ */ i("img", { src: W, alt: "logo" }),
+        addons: /* @__PURE__ */ i(
+          U,
           {
             formattedBlocklet: r,
             addons: k,
-            sessionManagerProps: W,
-            showDomainWarningDialog: I
+            sessionManagerProps: L,
+            showDomainWarningDialog: N
           }
         ),
-        ...g.headerProps
+        ...h.headerProps
       }
     }
   );
 }
-K.propTypes = {
-  meta: S,
+F.propTypes = {
+  meta: M,
   // 如果当前用户没有权限访问任何导航菜单, 则自动跳转到 fallbackUrl, 默认值为 publicPath, 设置为 null 表示禁用自动跳转
   fallbackUrl: t.string,
   // 当前路径未匹配任何 nav links 时的 fallback, 默认行为跳转到首个可用的 nav link
   invalidPathFallback: t.func,
   headerAddons: t.oneOfType([t.func, t.node]),
-  sessionManagerProps: H,
+  sessionManagerProps: D,
   links: t.oneOfType([t.array, t.func]),
   showDomainWarningDialog: t.bool
 };
 export {
-  K as default
+  F as default
 };