@arcblock/ux 3.0.9 → 3.0.11

package/lib/Locale/context.js

@@ -1,81 +1,80 @@
-import { jsx as g } from "react/jsx-runtime";
-import { createContext as x, use as k, useState as p, useRef as A, useEffect as R, useCallback as b } from "react";
+import { jsx as y } from "react/jsx-runtime";
+import { createContext as x, use as k, useState as h, useRef as A, useEffect as R, useCallback as b } from "react";
 import j from "lodash/get";
 import i from "js-cookie";
 import S from "./browser-lang.js";
 import { translate as U } from "./util.js";
 import { getCookieOptions as D, resolveRootDomain as E } from "../Util/index.js";
-const f = "nf_lang", F = (e, o = window.location.href) => {
+const l = "nf_lang", F = (e, o = window.location.href) => {
   const t = new URL(o).searchParams.get("locale");
-  return e.find((r) => r.code === t) ? t : null;
+  return e.find((c) => c.code === t) ? t : null;
 }, O = (e, o = window.location.href) => {
   const t = new URL(o);
   t.searchParams.has("locale") && (t.searchParams.set("locale", e), window.history.replaceState({}, "", t.href));
 }, d = (e = []) => {
-  var t;
   const o = {
-    languages: e.map((r) => r.code),
+    languages: e.map((t) => t.code),
     // 取 languages 首个元素的 code 值, 如果不存在则取 'en'
-    fallback: ((t = e == null ? void 0 : e[0]) == null ? void 0 : t.code) || "en"
+    fallback: e?.[0]?.code || "en"
   };
-  return F(e) || i.get(f) || S(o);
+  return F(e) || i.get(l) || S(o);
 }, z = (e) => {
   const o = D();
   if (!o.domain) {
     const t = E();
-    t && i.remove(f, { path: o.path || "/", domain: t });
+    t && i.remove(l, { path: o.path || "/", domain: t });
   }
-  i.set(f, e, o), O(e);
+  i.set(l, e, o), O(e);
 }, N = (e) => {
   const o = j(window, "blocklet.languages");
   return Array.isArray(o) && o.length ? o : Array.isArray(e) && e.length ? e : [
     { code: "en", name: "English" },
     { code: "zh", name: "简体中文" }
   ];
-}, L = x(null), { Provider: _, Consumer: M } = L;
+}, g = x(null), { Provider: _, Consumer: M } = g;
 function Q({
   children: e,
   locale: o = void 0,
   fallbackLocale: t = void 0,
-  translations: r,
-  onLoadingTranslation: m = void 0,
-  languages: P = [],
-  ...v
+  translations: c,
+  onLoadingTranslation: p = void 0,
+  languages: L = [],
+  ...P
 }) {
-  const a = N(P);
-  let [n, C] = p(o || d(a));
-  const l = A(t || ""), [, w] = p(0), u = (c) => {
-    C(c), z(c);
+  const s = N(L);
+  let [n, v] = h(o || d(s));
+  const m = A(t || ""), [, C] = h(0), u = (r) => {
+    v(r), z(r);
   };
   if (R(() => {
-    const c = o || d(a);
-    c !== n && u(c);
-  }, [o]), n && r[n] && typeof r[n] == "function") {
-    const c = n;
+    const r = o || d(s);
+    r !== n && u(r);
+  }, [o]), n && c[n] && typeof c[n] == "function") {
+    const r = n;
     try {
-      Promise.resolve(r[c]()).then((s) => {
-        s && typeof s == "object" && (r[c] = s, w((h) => h > 999 ? 0 : h + 1));
+      Promise.resolve(c[r]()).then((a) => {
+        a && typeof a == "object" && (c[r] = a, C((f) => f > 999 ? 0 : f + 1));
       });
-    } catch (s) {
-      console.error(s);
+    } catch (a) {
+      console.error(a);
     }
-    m == null || m(c, a), n = l.current;
+    p?.(r, s), n = m.current;
   } else
-    l.current = n;
-  const y = b(
-    (c, s) => U(r, c, n, t, s),
-    [r, n, t]
+    m.current = n;
+  const w = b(
+    (r, a) => U(c, r, n, t, a),
+    [c, n, t]
   );
-  return /* @__PURE__ */ g(_, { value: { locale: n, changeLocale: u, t: y, languages: a, ...v }, children: e });
+  return /* @__PURE__ */ y(_, { value: { locale: n, changeLocale: u, t: w, languages: s, ...P }, children: e });
 }
-function V() {
-  return k(L);
+function T() {
+  return k(g);
 }
 export {
   M as LocaleConsumer,
-  L as LocaleContext,
+  g as LocaleContext,
   Q as LocaleProvider,
   d as getLocale,
   z as setLocale,
-  V as useLocaleContext
+  T as useLocaleContext
 };

package/lib/Locale/selector.js

@@ -1,20 +1,18 @@
-import { jsx as n, jsxs as s } from "react/jsx-runtime";
-import { use as z, useRef as L, useState as M, useMemo as N } from "react";
-import { Box as m, Button as w, IconButton as B, Typography as E, Popper as j, Paper as A, ClickAwayListener as R, MenuList as T, MenuItem as P } from "@mui/material";
-import { Icon as h } from "@iconify/react";
-import $ from "@iconify-icons/material-symbols/check";
-import H from "iconify-icons-material-symbols-400/language";
-import { LocaleContext as O } from "./context.js";
-import { styled as W } from "../Theme/index.js";
-import { mergeSx as q } from "../Util/style.js";
-function Z({ ...t }) {
-  var g;
-  const { showText: p = !0, popperProps: r = {}, popperType: d = "click", icon: c, size: f = 24, ...y } = t, { locale: l, changeLocale: I, languages: u } = z(O), a = L(null), [x, o] = M(!1), k = (e) => {
-    I(e), o(!1), typeof t.onChange == "function" && t.onChange(e);
-  }, C = (e) => {
-    var i;
-    (i = a.current) != null && i.contains(e.target) || o(!1);
-  }, S = p ? w : B, b = d === "hover" ? {
+import { jsx as n, jsxs as l } from "react/jsx-runtime";
+import { use as v, useRef as z, useState as L, useMemo as M } from "react";
+import { Box as s, Button as N, IconButton as w, Typography as B, Popper as E, Paper as P, ClickAwayListener as j, MenuList as A, MenuItem as R } from "@mui/material";
+import { Icon as x } from "@iconify/react";
+import T from "@iconify-icons/material-symbols/check";
+import $ from "iconify-icons-material-symbols-400/language";
+import { LocaleContext as H } from "./context.js";
+import { styled as O } from "../Theme/index.js";
+import { mergeSx as W } from "../Util/style.js";
+function Y({ ...t }) {
+  const { showText: a = !0, popperProps: p = {}, popperType: g = "click", icon: r, size: m = 24, ...h } = t, { locale: i, changeLocale: d, languages: f } = v(H), c = z(null), [u, o] = L(!1), y = (e) => {
+    d(e), o(!1), typeof t.onChange == "function" && t.onChange(e);
+  }, I = (e) => {
+    c.current?.contains(e.target) || o(!1);
+  }, k = a ? N : w, C = g === "hover" ? {
     onMouseEnter: () => {
       o(!0);
     },
@@ -23,50 +21,50 @@ function Z({ ...t }) {
     }
   } : {
     onClick: () => {
-      o(!x);
+      o(!u);
     }
-  }, v = N(() => c ? /* @__PURE__ */ n(c, {}) : /* @__PURE__ */ n(h, { icon: H, fontSize: f, style: { transform: "scale(1.10)" } }), [c, f]);
+  }, S = M(() => r ? /* @__PURE__ */ n(r, {}) : /* @__PURE__ */ n(x, { icon: $, fontSize: m, style: { transform: "scale(1.10)" } }), [r, m]);
   return (
     // @ts-ignore
-    /* @__PURE__ */ s(D, { ...y, ...b, children: [
-      /* @__PURE__ */ n(S, { ref: a, className: "trigger", role: "button", "aria-label": "Locale selector button", children: /* @__PURE__ */ s(
-        m,
+    /* @__PURE__ */ l(q, { ...h, ...C, children: [
+      /* @__PURE__ */ n(k, { ref: c, className: "trigger", role: "button", "aria-label": "Locale selector button", children: /* @__PURE__ */ l(
+        s,
         {
           sx: {
             display: "flex",
             alignItems: "center"
           },
           children: [
-            v,
-            p ? /* @__PURE__ */ n(E, { component: "strong", className: "trigger-text", children: (g = u.find((e) => e.code === l)) == null ? void 0 : g.name }) : ""
+            S,
+            a ? /* @__PURE__ */ n(B, { component: "strong", className: "trigger-text", children: f.find((e) => e.code === i)?.name }) : ""
           ]
         }
       ) }),
       /* @__PURE__ */ n(
-        j,
+        E,
         {
-          open: x,
-          anchorEl: a.current,
-          ...r,
-          sx: q(
+          open: u,
+          anchorEl: c.current,
+          ...p,
+          sx: W(
             // @ts-ignore
             { zIndex: (e) => e.zIndex.tooltip + 10 },
             // @ts-ignore
-            r == null ? void 0 : r.sx
+            p?.sx
           ),
           children: /* @__PURE__ */ n(
-            A,
+            P,
             {
               variant: "outlined",
               className: "locales",
               sx: {
                 borderRadius: 1
               },
-              children: /* @__PURE__ */ n(R, { onClickAway: C, children: /* @__PURE__ */ n(T, { children: u.map(({ code: e, name: i }) => /* @__PURE__ */ s(
-                P,
+              children: /* @__PURE__ */ n(j, { onClickAway: I, children: /* @__PURE__ */ n(A, { children: f.map(({ code: e, name: b }) => /* @__PURE__ */ l(
+                R,
                 {
                   className: "locale-item",
-                  onClick: () => k(e),
+                  onClick: () => y(e),
                   sx: {
                     fontSize: 16,
                     fontStyle: "normal",
@@ -82,18 +80,18 @@ function Z({ ...t }) {
                   },
                   children: [
                     /* @__PURE__ */ n(
-                      m,
+                      s,
                       {
-                        component: h,
-                        icon: $,
-                        className: e === l ? "check-icon check-icon-visible" : "check-icon",
+                        component: x,
+                        icon: T,
+                        className: e === i ? "check-icon check-icon-visible" : "check-icon",
                         sx: {
                           marginRight: 1,
-                          visibility: e === l ? "visible" : "hidden"
+                          visibility: e === i ? "visible" : "hidden"
                         }
                       }
                     ),
-                    i
+                    b
                   ]
                 },
                 e
@@ -105,7 +103,7 @@ function Z({ ...t }) {
     ] })
   );
 }
-const D = W(m)`
+const q = O(s)`
   display: inline-block;
 
   .trigger {
@@ -123,5 +121,5 @@ const D = W(m)`
   }
 `;
 export {
-  Z as default
+  Y as default
 };

package/lib/NFTDisplay/index.js

@@ -1,99 +1,96 @@
-import { jsx as n, jsxs as H, Fragment as J } from "react/jsx-runtime";
-import { useRef as M, useState as P, useEffect as A } from "react";
-import S from "clsx";
-import { Buffer as O } from "buffer";
-import K from "lodash/get";
-import Q from "pako";
-import X from "base64-url";
-import B from "is-svg";
-import Y from "lodash/noop";
-import { Box as Z } from "@mui/material";
-import rr from "./aspect-ratio-container.js";
-import er from "./svg-embedder/img.js";
-import tr from "./svg-embedder/inline-svg.js";
-import or from "./loading.js";
-import C from "./broken.js";
-import { styled as nr } from "../Theme/index.js";
-import ir from "./displayApi.js";
-import sr from "./render-svg.js";
-function Nr(e) {
-  var s;
-  return (e == null ? void 0 : e.display) || ((s = e == null ? void 0 : e.data) == null ? void 0 : s.value);
+import { jsx as n, jsxs as $, Fragment as q } from "react/jsx-runtime";
+import { useRef as H, useState as S, useEffect as D } from "react";
+import J from "clsx";
+import { Buffer as C } from "buffer";
+import M from "lodash/get";
+import K from "pako";
+import Q from "base64-url";
+import P from "is-svg";
+import X from "lodash/noop";
+import { Box as Y } from "@mui/material";
+import Z from "./aspect-ratio-container.js";
+import ee from "./svg-embedder/img.js";
+import te from "./svg-embedder/inline-svg.js";
+import re from "./loading.js";
+import A from "./broken.js";
+import { styled as oe } from "../Theme/index.js";
+import ne from "./displayApi.js";
+import se from "./render-svg.js";
+function Ue(r) {
+  return r?.display || r?.data?.value;
 }
-function ar(e) {
-  if (typeof e != "string")
+function ie(r) {
+  if (typeof r != "string")
     throw new Error("fromBase64 requires input to be a string");
-  return O.from(X.unescape(e), "base64");
+  return C.from(Q.unescape(r), "base64");
 }
-const L = (e) => ({
-  img: er,
-  svg: tr
-})[e];
-function lr({
-  data: e,
-  address: s,
-  inset: m,
-  aspect: g,
-  component: T = "span",
-  className: z = "",
-  renderError: b,
-  renderLoading: j,
-  preferredSvgEmbedder: E = "img",
-  checkSvg: x = !1,
-  minimumLoadingTime: h = 0,
-  onCompleted: W = Y,
-  imageFilter: I = null,
-  ...k
+const B = (r) => ({
+  img: ee,
+  svg: te
+})[r];
+function ae({
+  data: r,
+  address: i,
+  inset: f,
+  aspect: m,
+  component: v = "span",
+  className: L = "",
+  renderError: T,
+  renderLoading: b,
+  preferredSvgEmbedder: j = "img",
+  checkSvg: E = !1,
+  minimumLoadingTime: d = 0,
+  onCompleted: O = X,
+  imageFilter: x = null,
+  ...z
 }) {
-  var R;
-  const F = (l) => (
+  const I = (p) => (
     // @ts-expect-error
-    /* @__PURE__ */ n(cr, { component: T, ...k, className: S(z, { "nft-display--inset": m }), children: l })
-  ), a = M({});
+    /* @__PURE__ */ n(le, { component: v, ...z, className: J(L, { "nft-display--inset": f }), children: p })
+  ), a = H({});
   try {
-    typeof e == "string" ? a.current = JSON.parse(e) : a.current = e;
-    const { vcId: l } = a.current, U = a.current.credentialSubject ? K(a.current, "credentialSubject.display") : a.current, { content: f, type: y } = U, G = y === "url", [t, c] = P({
-      loading: G,
+    typeof r == "string" ? a.current = JSON.parse(r) : a.current = r;
+    const { vcId: p } = a.current, F = a.current.credentialSubject ? M(a.current, "credentialSubject.display") : a.current, { content: c, type: g } = F, W = g === "url", [e, l] = S({
+      loading: W,
       error: !1,
       loadingUrlType: !0,
       urlType: null
-    }), [w, V] = P(h <= 0), d = ({ useImageFilter: o = !1, t: i } = {}) => {
-      const r = new URL(f);
-      return window.location.protocol === "https:" && r.protocol === "http:" && (r.protocol = "https:"), r.searchParams.has("assetId") || r.searchParams.append("assetId", s), !r.searchParams.has("vcId") && l && r.searchParams.append("vcId", l), o && I && Object.entries(I).forEach(([p, u]) => {
-        r.searchParams.append(p, u);
-      }), i && r.searchParams.append("t", i), r.href;
-    }, _ = async () => {
-      var o, i;
+    }), [h, k] = S(d <= 0), u = ({ useImageFilter: t = !1, t: s } = {}) => {
+      const o = new URL(c);
+      return window.location.protocol === "https:" && o.protocol === "http:" && (o.protocol = "https:"), o.searchParams.has("assetId") || o.searchParams.append("assetId", i), !o.searchParams.has("vcId") && p && o.searchParams.append("vcId", p), t && x && Object.entries(x).forEach(([N, w]) => {
+        o.searchParams.append(N, w);
+      }), s && o.searchParams.append("t", s), o.href;
+    }, G = async () => {
       try {
-        const r = await ir({
-          url: d({ useImageFilter: !1, t: "nftdisplay" }),
+        const s = (await ne({
+          url: u({ useImageFilter: !1, t: "nftdisplay" }),
           method: "HEAD"
-        }), p = (o = r == null ? void 0 : r.headers) == null ? void 0 : o.get("Content-Type");
-        c({ ...t, loadingUrlType: !1, urlType: p });
-      } catch (r) {
-        if (console.error("Failed to fetch url content type", r), (i = r == null ? void 0 : r.message) != null && i.includes("timeout")) {
-          c({ ...t, loadingUrlType: !1, loading: !1, error: !0 });
+        }))?.headers?.get("Content-Type");
+        l({ ...e, loadingUrlType: !1, urlType: s });
+      } catch (t) {
+        if (console.error("Failed to fetch url content type", t), t?.message?.includes("timeout")) {
+          l({ ...e, loadingUrlType: !1, loading: !1, error: !0 });
           return;
         }
-        c({ ...t, loadingUrlType: !1, urlType: null });
+        l({ ...e, loadingUrlType: !1, urlType: null });
       }
     };
-    if (A(() => {
-      let o;
-      return h > 0 && (o = setTimeout(() => V(!0), h)), y === "url" && _(), () => clearTimeout(o);
-    }, []), A(() => {
-      (!t.loading && w || t.error) && W();
-    }, [t, w]), t.error)
+    if (D(() => {
+      let t;
+      return d > 0 && (t = setTimeout(() => k(!0), d)), g === "url" && G(), () => clearTimeout(t);
+    }, []), D(() => {
+      (!e.loading && h || e.error) && O();
+    }, [e, h]), e.error)
       throw new Error("Failed to render NFT Display.");
-    const v = () => {
-      t.loading && c({ ...t, loading: !1 });
-    }, N = () => {
-      c({ ...t, error: !0, loading: !1 });
-    }, D = () => {
-      const o = d({ useImageFilter: !0 });
-      return /* @__PURE__ */ n("img", { src: o, onError: N, onLoad: v, alt: "NFT Display", style: { width: "auto", height: "auto" } });
-    }, $ = () => {
-      const o = t.urlType || "image/svg+xml", i = d(), r = new URL(i).pathname.toLowerCase();
+    const y = () => {
+      e.loading && l({ ...e, loading: !1 });
+    }, R = () => {
+      l({ ...e, error: !0, loading: !1 });
+    }, U = () => {
+      const t = u({ useImageFilter: !0 });
+      return /* @__PURE__ */ n("img", { src: t, onError: R, onLoad: y, alt: "NFT Display", style: { width: "auto", height: "auto" } });
+    }, V = () => {
+      const t = e.urlType || "image/svg+xml", s = u(), o = new URL(s).pathname.toLowerCase();
       return [
         ".jpg",
         ".jpeg",
@@ -109,70 +106,69 @@ function lr({
         ".pjpeg",
         ".pjp",
         ".avif"
-      ].some((u) => r.endsWith(u)) ? D() : o.includes("text/html;") ? /* @__PURE__ */ n(C, {}) : (
+      ].some((w) => o.endsWith(w)) ? U() : t.includes("text/html;") ? /* @__PURE__ */ n(A, {}) : (
         // eslint-disable-next-line jsx-a11y/alt-text
         /* @__PURE__ */ n(
           "object",
           {
-            type: o,
-            data: i,
-            onErrorCapture: N,
-            onLoad: v,
+            type: t,
+            data: s,
+            onErrorCapture: R,
+            onLoad: y,
             style: { width: "100%", height: "100%", pointerEvents: "none" }
           },
-          i
+          s
         )
       );
-    }, q = () => {
-      var o, i;
-      if (f)
-        switch (y) {
+    }, _ = () => {
+      if (c)
+        switch (g) {
           case "url":
-            return t.loadingUrlType ? null : (o = t.urlType) != null && o.startsWith("image/svg+xml") ? /* @__PURE__ */ n(sr, { src: d(), onLoad: v }) : (i = t.urlType) != null && i.startsWith("image") ? D() : $();
+            return e.loadingUrlType ? null : e.urlType?.startsWith("image/svg+xml") ? /* @__PURE__ */ n(se, { src: u(), onLoad: y }) : e.urlType?.startsWith("image") ? U() : V();
           case "uri":
             return /* @__PURE__ */ n(
               "img",
               {
-                src: f,
-                onError: () => c({ ...t, error: !0 }),
-                onLoad: () => c({ ...t, loading: !1 }),
+                src: c,
+                onError: () => l({ ...e, error: !0 }),
+                onLoad: () => l({ ...e, loading: !1 }),
                 alt: "NFT Display"
               }
             );
           case "svg_gzipped": {
-            const r = Q.ungzip(ar(f), {}), p = O.from(r).toString("utf8");
-            if (x && !B(p))
+            const t = K.ungzip(ie(c), {}), s = C.from(t).toString("utf8");
+            if (E && !P(s))
               throw new Error("Invalid SVG of type svg_gzipped");
-            const u = L(E);
-            return /* @__PURE__ */ n(u, { svg: p });
+            const o = B(j);
+            return /* @__PURE__ */ n(o, { svg: s });
           }
           case "svg": {
-            if (x && !B(f))
+            if (E && !P(c))
               throw new Error("Invalid SVG of type svg");
-            const r = L(E);
-            return /* @__PURE__ */ n(r, { svg: f });
+            const t = B(j);
+            return /* @__PURE__ */ n(t, { svg: c });
           }
           // TODO: 准备测试数据
           case "html":
             break;
           default:
         }
-      throw new Error(`unsupported display protocol: ${U.type}`);
+      throw new Error(`unsupported display protocol: ${F.type}`);
     };
-    return F(
-      /* @__PURE__ */ H(J, { children: [
-        (t.loading || !w) && (j ? j() : /* @__PURE__ */ n(or, {})),
-        q()
+    return I(
+      /* @__PURE__ */ $(q, { children: [
+        (e.loading || !h) && (b ? b() : /* @__PURE__ */ n(re, {})),
+        _()
       ] })
     );
-  } catch (l) {
-    return console.error(l == null ? void 0 : l.message, {
-      nftId: s,
-      vcId: (R = a == null ? void 0 : a.current) == null ? void 0 : R.vcId
-    }), F(b ? b() : /* @__PURE__ */ n(C, {}));
+  } catch (p) {
+    return console.error(p?.message, {
+      nftId: i,
+      vcId: a?.current?.vcId
+    }), I(T ? T() : /* @__PURE__ */ n(A, {}));
   }
 }
-const cr = nr(Z)`
+const le = oe(Y)`
   display: flex;
   justify-content: center;
   align-items: center;
@@ -200,13 +196,13 @@ const cr = nr(Z)`
     height: 100%;
   }
 `;
-function pr(e) {
-  return function({ aspect: s = void 0, inset: m = !1, ...g }) {
-    return s && s > 0 && !m ? /* @__PURE__ */ n(rr, { aspect: s, children: /* @__PURE__ */ n(e, { inset: !0, ...g }) }) : /* @__PURE__ */ n(e, { inset: m, ...g });
+function pe(r) {
+  return function({ aspect: i = void 0, inset: f = !1, ...m }) {
+    return i && i > 0 && !f ? /* @__PURE__ */ n(Z, { aspect: i, children: /* @__PURE__ */ n(r, { inset: !0, ...m }) }) : /* @__PURE__ */ n(r, { inset: f, ...m });
   };
 }
-const Dr = pr(lr);
+const Ne = pe(ae);
 export {
-  Dr as default,
-  Nr as getNFTData
+  Ne as default,
+  Ue as getNFTData
 };

package/lib/NFTDisplay/render-svg.js

@@ -1,16 +1,16 @@
-import { jsx as o } from "react/jsx-runtime";
+import { jsx as i } from "react/jsx-runtime";
 import m from "dompurify";
-import { useAsyncEffect as f } from "ahooks";
-import c from "axios";
-import { useState as p } from "react";
-import a from "./svg-embedder/inline-svg.js";
-function y({ src: e, onLoad: t = void 0 }) {
-  const [r, s] = p("");
-  return f(async () => {
-    const i = await c.get(e), n = m.sanitize(i.data);
-    s(n), t == null || t();
-  }, []), /* @__PURE__ */ o(a, { svg: r });
+import { useAsyncEffect as a } from "ahooks";
+import f from "axios";
+import { useState as c } from "react";
+import p from "./svg-embedder/inline-svg.js";
+function x({ src: t, onLoad: o = void 0 }) {
+  const [e, n] = c("");
+  return a(async () => {
+    const r = await f.get(t), s = m.sanitize(r.data);
+    n(s), o?.();
+  }, []), /* @__PURE__ */ i(p, { svg: e });
 }
 export {
-  y as default
+  x as default
 };