@arcblock/ux 3.0.0 → 3.0.2

package/lib/LoadingMask/index.js

@@ -1,4 +1,4 @@
-import { jsxs as p, jsx as a } from "react/jsx-runtime";
+import { jsxs as h, jsx as a } from "react/jsx-runtime";
 import { Box as n } from "@mui/material";
 function b({
   size: s = 64,
@@ -8,8 +8,8 @@ function b({
   duration: c,
   children: g
 }) {
-  const t = s, o = f ?? t / 8, e = l ?? t / 32, i = d ?? t * 0.25 - e, m = c ?? 2.5;
-  return /* @__PURE__ */ p(
+  const t = s, i = f ?? t / 8, e = l ?? t / 32, o = d ?? t * 0.25 - e, p = c ?? 2.5;
+  return /* @__PURE__ */ h(
     n,
     {
       sx: {
@@ -37,15 +37,11 @@ function b({
               width: t,
               height: t,
               overflow: "hidden",
-              borderRadius: `${o}px`,
+              borderRadius: `${i}px`,
               backgroundColor: "grey.200",
               "&::before,&::after": {
                 content: '""',
                 position: "absolute",
-                top: 0,
-                bottom: 0,
-                left: 0,
-                right: 0,
                 pointerEvents: "none"
               },
               "&::after": {
@@ -54,18 +50,22 @@ function b({
                 top: e,
                 bottom: e,
                 backgroundColor: "background.default",
-                borderRadius: `${o - e}px`
+                borderRadius: `${i - e}px`
               },
               "&::before": {
+                width: t * 5,
+                height: t * 5,
+                top: "50%",
+                left: "50%",
+                transform: "translate(-50%, -50%)",
                 background: ({ palette: r }) => `conic-gradient(from 45deg, transparent 0%, transparent 50%, ${r.secondary.main} 90%, ${r.secondary.main} 100%)`,
-                transform: "scale(100)",
-                animation: `rotate ${m}s linear infinite`,
+                animation: `rotate ${p}s linear infinite`,
                 "@keyframes rotate": {
                   "0%": {
-                    transform: "scale(100) rotate(0deg)"
+                    transform: "translate(-50%, -50%) rotate(0deg)"
                   },
                   "100%": {
-                    transform: "scale(100) rotate(360deg)"
+                    transform: "translate(-50%, -50%) rotate(360deg)"
                   }
                 }
               }
@@ -80,8 +80,8 @@ function b({
               display: "flex",
               justifyContent: "center",
               alignItems: "center",
-              width: t - i - e,
-              height: t - i - e
+              width: t - o - e,
+              height: t - o - e
             },
             children: g
           }

package/lib/UserCard/Content/basic.js

@@ -1,41 +1,41 @@
-import { jsxs as b, jsx as o } from "react/jsx-runtime";
-import { Typography as k, Box as u, Grid as D, useTheme as x } from "@mui/material";
-import { useCreation as h, useMemoizedFn as A } from "ahooks";
-import B from "@emotion/styled";
-import F from "lodash/isArray";
-import { Icon as T } from "@iconify/react";
-import $ from "@iconify-icons/tabler/info-circle";
-import S from "@arcblock/icons/lib/Link";
-import R from "@arcblock/icons/lib/Phone";
-import U from "@arcblock/icons/lib/Location";
-import M from "@arcblock/icons/lib/Email";
-import E from "@arcblock/icons/lib/Timezone";
-import { joinURL as P, withoutProtocol as V } from "ufo";
-import { useCallback as G, useMemo as L, useState as Z } from "react";
-import q from "./clock.js";
-const H = {
-  timezone: E,
-  email: M,
-  phone: R,
-  location: U,
-  link: S
+import { jsxs as y, jsx as r } from "react/jsx-runtime";
+import { Typography as g, Box as f, Grid as _, useTheme as k } from "@mui/material";
+import { useCreation as p, useMemoizedFn as T } from "ahooks";
+import $ from "@emotion/styled";
+import D from "lodash/isArray";
+import { Icon as j } from "@iconify/react";
+import E from "@iconify-icons/tabler/info-circle";
+import A from "@arcblock/icons/lib/Link";
+import M from "@arcblock/icons/lib/Phone";
+import P from "@arcblock/icons/lib/Location";
+import V from "@arcblock/icons/lib/Email";
+import B from "@arcblock/icons/lib/Timezone";
+import { withoutProtocol as R } from "ufo";
+import { useCallback as G, useMemo as N } from "react";
+import Z from "./clock.js";
+const q = {
+  timezone: B,
+  email: V,
+  phone: M,
+  location: P,
+  link: A
 };
-function J(e) {
-  return V(e);
+function H(e) {
+  return R(e);
 }
-function v(e) {
+function x(e) {
   return e ? {
     filter: "brightness(0) saturate(100%) invert(1)"
   } : {};
 }
-const y = {
+const u = {
   width: 16,
   height: 16
 };
-function K({ value: e }) {
-  const a = x().palette.mode === "dark";
-  return /* @__PURE__ */ b(
-    u,
+function J({ value: e }) {
+  const a = k().palette.mode === "dark";
+  return /* @__PURE__ */ y(
+    f,
     {
       className: "user-card__timezone-field",
       sx: {
@@ -44,65 +44,37 @@ function K({ value: e }) {
         gap: 1
       },
       children: [
-        /* @__PURE__ */ o(E, { ...y, style: v(a) }),
-        /* @__PURE__ */ o(q, { value: e, variant: "body2", color: "grey.800" })
+        /* @__PURE__ */ r(B, { ...u, style: x(a) }),
+        /* @__PURE__ */ r(Z, { value: e, variant: "body2", color: "grey.800" })
       ]
     }
   );
 }
-function O({ value: e }) {
-  const [m, a] = Z(!1), c = x().palette.mode === "dark", l = h(() => {
-    try {
-      const p = new URL(e);
-      return P(p.origin, "favicon.ico");
-    } catch {
-      return "";
-    }
-  }, [e]);
-  return /* @__PURE__ */ b(
-    u,
-    {
-      className: "user-card__link-field",
-      sx: {
-        display: "flex",
-        alignItems: "center",
-        gap: 1
-      },
-      children: [
-        l && !m ? /* @__PURE__ */ o(
-          "img",
-          {
-            src: l,
-            alt: "site icon",
-            style: { width: 16, height: 16, objectFit: "contain" },
-            onError: () => {
-              a(!0);
-            }
-          }
-        ) : /* @__PURE__ */ o(S, { ...y, style: v(c) }),
-        /* @__PURE__ */ o(I, { variant: "body2", color: "grey.800", children: /* @__PURE__ */ o(
-          k,
-          {
-            component: "a",
-            href: e,
-            style: { textDecoration: "none", color: "inherit", fontSize: "inherit" },
-            target: "_blank",
-            variant: "body2",
-            rel: "noopener noreferrer",
-            sx: {
-              color: "grey.800"
-            },
-            children: J(e)
-          }
-        ) })
-      ]
-    }
-  );
+function K({ value: e }) {
+  const a = k().palette.mode === "dark";
+  return /* @__PURE__ */ y(f, { display: "flex", alignItems: "center", gap: 1, className: "user-card__link-field", children: [
+    /* @__PURE__ */ r(A, { ...u, style: x(a) }),
+    /* @__PURE__ */ r(v, { variant: "body2", color: "grey.800", children: /* @__PURE__ */ r(
+      g,
+      {
+        component: "a",
+        href: e,
+        style: { textDecoration: "none", color: "inherit", fontSize: "inherit" },
+        target: "_blank",
+        variant: "body2",
+        rel: "noopener noreferrer",
+        sx: {
+          color: "grey.800"
+        },
+        children: H(e)
+      }
+    ) })
+  ] });
 }
-function N({ field: e, value: m, children: a }) {
-  const f = H[e], l = x().palette.mode === "dark", s = v(l);
-  return /* @__PURE__ */ b(
-    u,
+function S({ field: e, value: s, children: a }) {
+  const h = q[e], m = k().palette.mode === "dark", c = x(m);
+  return /* @__PURE__ */ y(
+    f,
     {
       className: `user-card__${e}-field`,
       sx: {
@@ -111,94 +83,94 @@ function N({ field: e, value: m, children: a }) {
         gap: 1
       },
       children: [
-        f ? /* @__PURE__ */ o(f, { ...y, style: s }) : /* @__PURE__ */ o(T, { icon: $, ...y, ...s }),
-        /* @__PURE__ */ o(I, { variant: "body2", color: "grey.800", children: a ?? m })
+        h ? /* @__PURE__ */ r(h, { ...u, style: c }) : /* @__PURE__ */ r(j, { icon: E, ...u, ...c }),
+        /* @__PURE__ */ r(v, { variant: "body2", color: "grey.800", children: a ?? s })
       ]
     },
     e
   );
 }
-function de({ user: e, renderFields: m }) {
-  var C;
-  const a = h(() => m ?? ["bio", "email", "phone", "location", "timezone", "link"], [m]), f = h(() => a.includes("bio"), [a]), c = h(() => e.metadata ?? {
+function se({ user: e, renderFields: s }) {
+  var w;
+  const a = p(() => s ?? ["bio", "email", "phone", "location", "timezone", "link"], [s]), h = p(() => a.includes("bio"), [a]), l = p(() => e.metadata ?? {
     joinedAt: e == null ? void 0 : e.createdAt,
     email: e == null ? void 0 : e.email,
     phone: {
       country: "cn",
       phoneNumber: (e == null ? void 0 : e.phone) ?? ""
     }
-  }, [e]), l = h(() => e.address, [e.address]), s = G(
-    (t) => {
-      var i, n, r;
-      if (!t) return "";
-      switch (t) {
+  }, [e]), m = p(() => e.address, [e.address]), c = G(
+    (n) => {
+      var i, t, o;
+      if (!n) return "";
+      switch (n) {
         case "bio":
           return ((i = e.metadata) == null ? void 0 : i.bio) || "";
         case "email":
-          return c.email || e.email || "";
+          return l.email || e.email || "";
         case "phone":
-          return ((n = c.phone) == null ? void 0 : n.phoneNumber) || e.phone || "";
+          return ((t = l.phone) == null ? void 0 : t.phoneNumber) || e.phone || "";
         case "location":
-          return (l == null ? void 0 : l.city) || c.location || "";
+          return (m == null ? void 0 : m.city) || l.location || "";
         case "timezone":
-          return c.timezone || "";
+          return l.timezone || "";
         case "link":
-          return ((r = c.links) == null ? void 0 : r.map((d) => d.url).filter(Boolean)) || [];
+          return ((o = l.links) == null ? void 0 : o.map((d) => d.url).filter(Boolean)) || [];
         default:
-          return e[t] || "";
+          return e[n] || "";
       }
     },
-    [e, c, l]
-  ), { effectiveRenderCount: p } = L(() => {
-    const t = a.filter((n) => {
-      if (n === "bio") return !1;
-      const r = s(n);
-      return r == null || r === "" ? !1 : F(r) ? r.length > 0 : String(r).trim().length > 0;
-    }), i = t.reduce((n, r) => {
-      const d = s(r);
-      return n + (Array.isArray(d) ? d.filter((_) => _ && String(_).trim()).length : 1);
+    [e, l, m]
+  ), { effectiveRenderCount: F } = N(() => {
+    const n = a.filter((t) => {
+      if (t === "bio") return !1;
+      const o = c(t);
+      return o == null || o === "" ? !1 : D(o) ? o.length > 0 : String(o).trim().length > 0;
+    }), i = n.reduce((t, o) => {
+      const d = c(o);
+      return t + (Array.isArray(d) ? d.filter((C) => C && String(C).trim()).length : 1);
     }, 0);
-    return { visibleFields: t, effectiveRenderCount: i };
-  }, [a, s]), j = p > 4, g = A(
-    (t) => t != null && String(t).trim().length > 0
-  ), w = L(() => {
-    const t = [];
+    return { visibleFields: n, effectiveRenderCount: i };
+  }, [a, c]), L = F > 4, b = T(
+    (n) => n != null && String(n).trim().length > 0
+  ), I = N(() => {
+    const n = [];
     return a.forEach((i) => {
       if (i === "bio") return;
-      const n = s(i);
-      n && (F(n) ? n.forEach((r, d) => {
-        g(r) && t.push({
+      const t = c(i);
+      t && (D(t) ? t.forEach((o, d) => {
+        b(o) && n.push({
           field: i,
-          value: r,
+          value: o,
           key: `${i}-${d}`
         });
-      }) : g(n) && t.push({
+      }) : b(t) && n.push({
         field: i,
-        value: n,
+        value: t,
         key: i
       }));
-    }), t;
-  }, [a, s, g]);
+    }), n;
+  }, [a, c, b]);
   if (a.length === 0)
     return null;
-  const z = (t) => {
-    const { field: i, value: n, key: r } = t;
+  const z = (n) => {
+    const { field: i, value: t, key: o } = n;
     switch (i) {
       case "link":
-        return /* @__PURE__ */ o(O, { value: n }, r);
+        return /* @__PURE__ */ r(K, { value: t }, o);
       case "timezone":
-        return /* @__PURE__ */ o(K, { value: n }, r);
+        return /* @__PURE__ */ r(J, { value: t }, o);
       case "email":
-        return /* @__PURE__ */ o(
-          N,
+        return /* @__PURE__ */ r(
+          S,
           {
             field: i,
-            value: n,
-            children: /* @__PURE__ */ o(
-              k,
+            value: t,
+            children: /* @__PURE__ */ r(
+              g,
               {
                 component: "a",
-                href: `mailto:${n}`,
+                href: `mailto:${t}`,
                 rel: "noopener noreferrer",
                 referrerPolicy: "no-referrer",
                 style: {
@@ -206,17 +178,17 @@ function de({ user: e, renderFields: m }) {
                   textDecoration: "none",
                   fontSize: "inherit"
                 },
-                children: n
+                children: t
               }
             )
           }
         );
       default:
-        return /* @__PURE__ */ o(N, { field: i, value: n }, r);
+        return /* @__PURE__ */ r(S, { field: i, value: t }, o);
     }
   };
-  return /* @__PURE__ */ b(
-    u,
+  return /* @__PURE__ */ y(
+    f,
     {
       className: "user-card__basic-content",
       sx: {
@@ -226,23 +198,23 @@ function de({ user: e, renderFields: m }) {
         gap: 1.5
       },
       children: [
-        f && ((C = e.metadata) == null ? void 0 : C.bio) && /* @__PURE__ */ o(I, { variant: "body2", color: "grey.800", className: "user-card__bio-field", children: e.metadata.bio }),
-        j ? /* @__PURE__ */ o(D, { container: !0, spacing: 0.5, children: w.map((t) => /* @__PURE__ */ o(D, { size: 6, children: z(t) }, t.key)) }) : /* @__PURE__ */ o(
-          u,
+        h && ((w = e.metadata) == null ? void 0 : w.bio) && /* @__PURE__ */ r(v, { variant: "body2", color: "grey.800", className: "user-card__bio-field", children: e.metadata.bio }),
+        L ? /* @__PURE__ */ r(_, { container: !0, spacing: 0.5, children: I.map((n) => /* @__PURE__ */ r(_, { size: 6, children: z(n) }, n.key)) }) : /* @__PURE__ */ r(
+          f,
           {
             sx: {
               display: "flex",
               flexDirection: "column",
               gap: 0.5
             },
-            children: w.map((t) => z(t))
+            children: I.map((n) => z(n))
           }
         )
       ]
     }
   );
 }
-const I = B(k)`
+const v = $(g)`
   flex: 1;
   display: -webkit-box;
   line-height: 1.5;
@@ -253,5 +225,5 @@ const I = B(k)`
   word-break: break-word;
 `;
 export {
-  de as default
+  se as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "3.0.0",
+  "version": "3.0.2",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -60,16 +60,16 @@
     "react": ">=19.0.0",
     "react-router-dom": ">=6.22.3"
   },
-  "gitHead": "b001c32ca85d40d8a0784ca581bfd54d90550b24",
+  "gitHead": "82d588535242081273ada50bca749f532689b785",
   "dependencies": {
-    "@arcblock/bridge": "3.0.0",
+    "@arcblock/bridge": "3.0.2",
     "@arcblock/did": "^1.20.14",
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "3.0.0",
-    "@arcblock/nft-display": "3.0.0",
-    "@arcblock/react-hooks": "3.0.0",
+    "@arcblock/icons": "3.0.2",
+    "@arcblock/nft-display": "3.0.2",
+    "@arcblock/react-hooks": "3.0.2",
     "@blocklet/js-sdk": "^1.16.44",
-    "@blocklet/theme": "3.0.0",
+    "@blocklet/theme": "3.0.2",
     "@fontsource/roboto": "~5.1.1",
     "@fontsource/ubuntu-mono": "^5.2.6",
     "@iconify-icons/logos": "^1.2.36",

package/src/LoadingMask/index.tsx

@@ -51,10 +51,6 @@ export default function LoadingMask({
           '&::before,&::after': {
             content: '""',
             position: 'absolute',
-            top: 0,
-            bottom: 0,
-            left: 0,
-            right: 0,
             pointerEvents: 'none',
           },
           '&::after': {
@@ -66,16 +62,20 @@ export default function LoadingMask({
             borderRadius: `${finialRadius - finialBorderWidth}px`,
           },
           '&::before': {
+            width: finialSize * 5,
+            height: finialSize * 5,
+            top: '50%',
+            left: '50%',
+            transform: 'translate(-50%, -50%)',
             background: ({ palette }) =>
               `conic-gradient(from 45deg, transparent 0%, transparent 50%, ${palette.secondary.main} 90%, ${palette.secondary.main} 100%)`,
-            transform: 'scale(100)',
             animation: `rotate ${finialDuration}s linear infinite`,
             '@keyframes rotate': {
               '0%': {
-                transform: 'scale(100) rotate(0deg)',
+                transform: 'translate(-50%, -50%) rotate(0deg)',
               },
               '100%': {
-                transform: 'scale(100) rotate(360deg)',
+                transform: 'translate(-50%, -50%) rotate(360deg)',
               },
             },
           },

package/src/UserCard/Content/basic.tsx

@@ -9,8 +9,8 @@ import PhoneIcon from '@arcblock/icons/lib/Phone';
 import LocationIcon from '@arcblock/icons/lib/Location';
 import EmailIcon from '@arcblock/icons/lib/Email';
 import TimezoneIcon from '@arcblock/icons/lib/Timezone';
-import { joinURL, withoutProtocol } from 'ufo';
-import { useState, useMemo, useCallback } from 'react';
+import { withoutProtocol } from 'ufo';
+import { useMemo, useCallback } from 'react';
 
 import { User } from '../types';
 import Clock from './clock';
@@ -75,40 +75,12 @@ function TimeZoneField({ value }: { value: string }) {
 }
 
 function LinkField({ value }: { value: string }) {
-  const [useFallback, setUseFallback] = useState(false);
   const theme = useTheme();
   const isDark = theme.palette.mode === 'dark';
-  const faviconUrl = useCreation(() => {
-    try {
-      const url = new URL(value);
-      return joinURL(url.origin, 'favicon.ico');
-    } catch (e) {
-      return '';
-    }
-  }, [value]);
-
-  const handleImageError = () => {
-    setUseFallback(true);
-  };
 
   return (
-    <Box
-      className="user-card__link-field"
-      sx={{
-        display: 'flex',
-        alignItems: 'center',
-        gap: 1,
-      }}>
-      {faviconUrl && !useFallback ? (
-        <img
-          src={faviconUrl}
-          alt="site icon"
-          style={{ width: 16, height: 16, objectFit: 'contain' }}
-          onError={handleImageError}
-        />
-      ) : (
-        <LinkIcon {...iconSize} style={convertIconColor(isDark)} />
-      )}
+    <Box display="flex" alignItems="center" gap={1} className="user-card__link-field">
+      <LinkIcon {...iconSize} style={convertIconColor(isDark)} />
       <LineText variant="body2" color="grey.800">
         <Typography
           component="a"