@arcblock/ux 3.0.32 → 3.0.33

package/lib/Img/index.js

@@ -1,83 +1,91 @@
-import { jsx as t, jsxs as W } from "react/jsx-runtime";
-import { useState as H, useMemo as f, useEffect as V } from "react";
+import { jsx as i, jsxs as X } from "react/jsx-runtime";
+import { useState as h, useMemo as b, useEffect as x } from "react";
 import e from "prop-types";
-import { useInView as X } from "react-intersection-observer";
-import _ from "@iconify-icons/material-symbols/warning-rounded";
-import q from "@iconify-icons/material-symbols/image-rounded";
-import { Icon as h } from "@iconify/react";
-import { Box as B } from "@mui/material";
-import I from "lodash/noop";
-import { mergeSx as C } from "../Util/style.js";
-const D = "Img", b = {
-  root: `${D}-root`
+import { useInView as _ } from "react-intersection-observer";
+import q from "@iconify-icons/material-symbols/warning-rounded";
+import B from "@iconify-icons/material-symbols/image-rounded";
+import { Icon as y } from "@iconify/react";
+import { Box as C } from "@mui/material";
+import S from "lodash/noop";
+import { mergeSx as D } from "../Util/style.js";
+const M = "Img", N = {
+  root: `${M}-root`
 };
-function F({
-  lazy: x = !0,
-  width: i = null,
-  height: c = null,
-  repeat: y = "no-repeat",
-  ratio: S = 1,
-  alt: N = null,
-  size: g = "cover",
-  position: u = "top center",
-  src: r,
-  placeholder: n = null,
-  fallback: a = null,
-  style: v = null,
-  className: $ = "",
-  onError: k = I,
-  onSuccess: w = I,
-  ...d
+function O({
+  lazy: v = !0,
+  width: a = null,
+  height: g = null,
+  repeat: w = "no-repeat",
+  ratio: $ = 1,
+  alt: k = null,
+  size: u = "cover",
+  position: d = "top center",
+  src: s,
+  placeholder: l = null,
+  fallback: t = null,
+  style: R = null,
+  className: E = "",
+  onError: j = S,
+  onSuccess: z = S,
+  ...p
 }) {
-  const [R, p] = x ? X({ threshold: 0, triggerOnce: !0 }) : [null, !0], [o, s] = H("init"), m = f(() => {
+  const [P, f] = v ? _({ threshold: 0, triggerOnce: !0 }) : [null, !0], [o, m] = h("init"), [n, I] = h(!1), c = b(() => {
     switch (o) {
       case "init":
       case "loading":
-        return n;
+        return l;
       case "error":
-        return a;
+        return n ? null : t;
       case "loaded":
-        return r;
+        return s;
       default:
         return null;
     }
-  }, [n, a, r, o]), j = i && c ? 100 * c / i : S * 100, z = f(
+  }, [l, t, s, o, n]), T = a && g ? 100 * g / a : $ * 100, W = b(
     () => ({
-      backgroundImage: m ? `url(${m})` : "",
-      backgroundPosition: u,
-      backgroundSize: g,
-      backgroundRepeat: y,
-      paddingTop: `${j}%`
+      backgroundImage: c ? `url(${c})` : "",
+      backgroundPosition: d,
+      backgroundSize: u,
+      backgroundRepeat: w,
+      paddingTop: `${T}%`
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [m, u, g, o]
-  ), E = {
-    ...v,
+    [c, d, u, o]
+  ), F = {
+    ...R,
     display: "inline-block",
-    width: i ? `${i}px` : "100%"
+    width: a ? `${a}px` : "100%"
   };
-  function P() {
-    const l = new Image();
-    l.src = r, s("loading"), l.onload = () => {
-      s("loaded"), w();
-    }, l.onerror = (T) => {
-      s("error"), k(T);
+  function H() {
+    const r = new Image();
+    r.src = s, m("loading"), I(!1), r.onload = () => {
+      m("loaded"), z();
+    }, r.onerror = (V) => {
+      m("error"), j(V);
     };
   }
-  return V(() => {
-    p && P();
-  }, [p]), // paddingTop 要求元素本身的宽度为 100%，所以只能加一个外层元素去限制宽度
-  /* @__PURE__ */ t(
-    B,
+  return x(() => {
+    f && H();
+  }, [f]), x(() => {
+    if (o === "error" && t && !n) {
+      const r = new Image();
+      r.src = t, r.onload = () => {
+      }, r.onerror = () => {
+        I(!0);
+      };
+    }
+  }, [o, t, n]), // paddingTop 要求元素本身的宽度为 100%，所以只能加一个外层元素去限制宽度
+  /* @__PURE__ */ i(
+    C,
     {
       "data-id": "2",
-      ref: R,
-      style: E,
+      ref: P,
+      style: F,
       className: "arcblock_ux_img-wrapper",
-      ...d,
-      sx: C(
+      ...p,
+      sx: D(
         {
-          [`& .${b.root}`]: {
+          [`& .${N.root}`]: {
             position: "relative",
             overflow: "hidden",
             "& .image--state, & .image--img": {
@@ -109,17 +117,17 @@ function F({
             }
           }
         },
-        d.sx
+        p.sx
       ),
-      children: /* @__PURE__ */ W("div", { className: `image ${$} ${b.root}`, style: z, children: [
-        !a && o === "error" && /* @__PURE__ */ t("div", { className: "image--state", title: "loading image", children: /* @__PURE__ */ t(h, { icon: _, className: "image--icon" }) }),
-        !n && o === "loading" && /* @__PURE__ */ t("div", { className: "image--state", title: "Image load error", children: /* @__PURE__ */ t(h, { icon: q, className: "image--icon" }) }),
-        o === "loaded" && /* @__PURE__ */ t("img", { className: "image--img", src: r, alt: N })
+      children: /* @__PURE__ */ X("div", { className: `image ${E} ${N.root}`, style: W, children: [
+        (n || !t && o === "error") && /* @__PURE__ */ i("div", { className: "image--state", title: "Image load error", children: /* @__PURE__ */ i(y, { icon: q, className: "image--icon" }) }),
+        !l && o === "loading" && /* @__PURE__ */ i("div", { className: "image--state", title: "loading image", children: /* @__PURE__ */ i(y, { icon: B, className: "image--icon" }) }),
+        o === "loaded" && /* @__PURE__ */ i("img", { className: "image--img", src: s, alt: k })
       ] })
     }
   );
 }
-F.propTypes = {
+O.propTypes = {
   src: e.string.isRequired,
   alt: e.string,
   size: e.string,
@@ -137,5 +145,5 @@ F.propTypes = {
   onSuccess: e.func
 };
 export {
-  F as default
+  O as default
 };

package/lib/LoadingMask/index.js

@@ -1,15 +1,15 @@
-import { jsxs as h, jsx as a } from "react/jsx-runtime";
+import { jsxs as g, jsx as i } from "react/jsx-runtime";
 import { Box as n } from "@mui/material";
-function b({
+function x({
   size: s = 64,
-  padding: d = void 0,
-  borderWidth: l = void 0,
-  borderRadius: f = void 0,
+  padding: l = void 0,
+  borderWidth: f = void 0,
+  borderRadius: d = void 0,
   duration: c = void 0,
-  children: g
+  children: m
 }) {
-  const t = s, i = f ?? t / 8, e = l ?? t / 32, o = d ?? t * 0.25 - e, p = c ?? 2.5;
-  return /* @__PURE__ */ h(
+  const t = s, a = d ?? t / 8, e = f ?? t / 32, r = l ?? t * 0.35 - e, p = c ?? 2.5;
+  return /* @__PURE__ */ g(
     n,
     {
       sx: {
@@ -21,7 +21,7 @@ function b({
         position: "relative"
       },
       children: [
-        /* @__PURE__ */ a(
+        /* @__PURE__ */ i(
           n,
           {
             sx: {
@@ -37,7 +37,7 @@ function b({
               width: t,
               height: t,
               overflow: "hidden",
-              borderRadius: `${i}px`,
+              borderRadius: `${a}px`,
               backgroundColor: "grey.200",
               "&::before,&::after": {
                 content: '""',
@@ -50,7 +50,7 @@ function b({
                 top: e,
                 bottom: e,
                 backgroundColor: "background.default",
-                borderRadius: `${i - e}px`
+                borderRadius: `${a - e}px`
               },
               "&::before": {
                 width: t * 5,
@@ -58,7 +58,7 @@ function b({
                 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%)`,
+                background: ({ palette: o }) => `conic-gradient(from 45deg, transparent 0%, transparent 50%, ${o.secondary.main} 90%, ${o.secondary.main} 100%)`,
                 animation: `rotate ${p}s linear infinite`,
                 "@keyframes rotate": {
                   "0%": {
@@ -72,7 +72,7 @@ function b({
             }
           }
         ),
-        /* @__PURE__ */ a(
+        /* @__PURE__ */ i(
           n,
           {
             sx: {
@@ -80,10 +80,20 @@ function b({
               display: "flex",
               justifyContent: "center",
               alignItems: "center",
-              width: t - o - e,
-              height: t - o - e
+              width: t - r - e,
+              height: t - r - e,
+              animation: "wait-bounce 1.6s infinite",
+              transformOrigin: "center bottom",
+              "@keyframes wait-bounce": {
+                "0%": { transform: "scale(1) translateY(0)" },
+                "20%": { transform: "scale(1.03) translateY(-4px)" },
+                "40%": { transform: "scale(0.98) translateY(2px)" },
+                "60%": { transform: "scale(1.01) translateY(-2px)" },
+                "80%": { transform: "scale(0.99) translateY(1px)" },
+                "100%": { transform: "scale(1) translateY(0)" }
+              }
             },
-            children: g
+            children: m
           }
         )
       ]
@@ -91,5 +101,5 @@ function b({
   );
 }
 export {
-  b as default
+  x as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "3.0.32",
+  "version": "3.0.33",
   "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": "c81f41bdecc9ffb41a2f8158fb7a557fae62666b",
+  "gitHead": "4b6fbddbcafd122684b82a0b452ca34fc6d1a6ab",
   "dependencies": {
-    "@arcblock/bridge": "3.0.32",
+    "@arcblock/bridge": "3.0.33",
     "@arcblock/did": "^1.21.0",
     "@arcblock/did-motif": "^1.1.14",
-    "@arcblock/icons": "3.0.32",
-    "@arcblock/nft-display": "3.0.32",
-    "@arcblock/react-hooks": "3.0.32",
+    "@arcblock/icons": "3.0.33",
+    "@arcblock/nft-display": "3.0.33",
+    "@arcblock/react-hooks": "3.0.33",
     "@blocklet/js-sdk": "^1.16.46",
-    "@blocklet/theme": "3.0.32",
+    "@blocklet/theme": "3.0.33",
     "@fontsource/roboto": "~5.1.1",
     "@fontsource/ubuntu-mono": "^5.2.6",
     "@iconify-icons/logos": "^1.2.36",

package/src/Img/index.jsx

@@ -64,6 +64,7 @@ function Img({
   const [ref, inView] = lazy ? useInView({ threshold: 0, triggerOnce: true }) : [null, true];
 
   const [imgState, setImgState] = useState('init');
+  const [fallbackError, setFallbackError] = useState(false);
 
   const actualSrc = useMemo(() => {
     switch (imgState) {
@@ -71,13 +72,13 @@ function Img({
       case 'loading':
         return placeholder;
       case 'error':
-        return fallback;
+        return fallbackError ? null : fallback;
       case 'loaded':
         return src;
       default:
         return null;
     }
-  }, [placeholder, fallback, src, imgState]);
+  }, [placeholder, fallback, src, imgState, fallbackError]);
 
   const actualRatio = width && height ? (100 * height) / width : ratio * 100;
 
@@ -106,6 +107,7 @@ function Img({
     const img = new Image();
     img.src = src;
     setImgState('loading');
+    setFallbackError(false);
     img.onload = () => {
       setImgState('loaded');
       onSuccess();
@@ -121,6 +123,21 @@ function Img({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [inView]);
 
+  // 处理 fallback 加载
+  useEffect(() => {
+    if (imgState === 'error' && fallback && !fallbackError) {
+      const fallbackImg = new Image();
+      fallbackImg.src = fallback;
+      fallbackImg.onload = () => {
+        // fallback 加载成功，保持在 error 状态但显示 fallback
+      };
+      fallbackImg.onerror = () => {
+        // fallback 也加载失败
+        setFallbackError(true);
+      };
+    }
+  }, [imgState, fallback, fallbackError]);
+
   return (
     // paddingTop 要求元素本身的宽度为 100%，所以只能加一个外层元素去限制宽度
     <Box
@@ -166,13 +183,13 @@ function Img({
         rest.sx
       )}>
       <div className={`image ${className} ${classes.root}`} style={mergedStyle}>
-        {!fallback && imgState === 'error' && (
-          <div className="image--state" title="loading image">
+        {(fallbackError || (!fallback && imgState === 'error')) && (
+          <div className="image--state" title="Image load error">
             <Icon icon={WarningRoundedIcon} className="image--icon" />
           </div>
         )}
         {!placeholder && imgState === 'loading' && (
-          <div className="image--state" title="Image load error">
+          <div className="image--state" title="loading image">
             <Icon icon={ImageRoundedIcon} className="image--icon" />
           </div>
         )}

package/src/LoadingMask/index.tsx

@@ -20,7 +20,7 @@ export default function LoadingMask({
   const finialSize = size;
   const finialRadius = borderRadius ?? finialSize / 8;
   const finialBorderWidth = borderWidth ?? finialSize / 32;
-  const finialPadding = padding ?? finialSize * 0.25 - finialBorderWidth;
+  const finialPadding = padding ?? finialSize * 0.35 - finialBorderWidth;
   const finialDuration = duration ?? 2.5;
   return (
     <Box
@@ -89,6 +89,17 @@ export default function LoadingMask({
           alignItems: 'center',
           width: finialSize - finialPadding - finialBorderWidth,
           height: finialSize - finialPadding - finialBorderWidth,
+
+          animation: 'wait-bounce 1.6s infinite',
+          transformOrigin: 'center bottom',
+          '@keyframes wait-bounce': {
+            '0%': { transform: 'scale(1) translateY(0)' },
+            '20%': { transform: 'scale(1.03) translateY(-4px)' },
+            '40%': { transform: 'scale(0.98) translateY(2px)' },
+            '60%': { transform: 'scale(1.01) translateY(-2px)' },
+            '80%': { transform: 'scale(0.99) translateY(1px)' },
+            '100%': { transform: 'scale(1) translateY(0)' },
+          },
         }}>
         {children}
       </Box>