@arcblock/ux 2.13.70 → 3.0.1

package/lib/NFTDisplay/index.js

@@ -1,343 +1,175 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-/* eslint-disable react-hooks/rules-of-hooks */
-import React, { useRef, useEffect, useState } from 'react';
-import clsx from 'clsx';
-import { Buffer } from 'buffer';
-import get from 'lodash/get';
-import pako from 'pako';
-import base64 from 'base64-url';
-import isSvg from 'is-svg';
-import noop from 'lodash/noop';
-import { Box } from '@mui/material';
-import AspectRatioContainer from './aspect-ratio-container';
-import ImgSvgEmbedder from './svg-embedder/img';
-import InlineSvgEmbedder from './svg-embedder/inline-svg';
-import DefaultLoading from './loading';
-import DefaultBrokenImage from './broken';
-import { styled } from '../Theme';
-import displayApi from './displayApi';
-import RenderSvg from './render-svg';
-
-/**
- * 从 assetState 中获取 nft data, 兼容新旧两种类型的数据结构, 建议将该方法的返回值传入 NFTDisplay 组件的 data prop
- * - 旧: assetState.data.value (.credentialSubject.display)
- * - 新: assetState.display
- */
-export function getNFTData(assetState) {
-  return assetState?.display || assetState?.data?.value;
+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);
 }
-function fromBase64(v) {
-  if (typeof v !== 'string') {
-    throw new Error('fromBase64 requires input to be a string');
-  }
-  return Buffer.from(base64.unescape(v), 'base64');
+function ar(e) {
+  if (typeof e != "string")
+    throw new Error("fromBase64 requires input to be a string");
+  return O.from(X.unescape(e), "base64");
 }
-
-// const isVC = type => {
-//   return String(type).includes('VerifiableCredential');
-// };
-
-// 仅针对非 url type 的情况
-const getSvgEmbedder = preferredSvgEmbedder => {
-  const embedders = {
-    img: ImgSvgEmbedder,
-    svg: InlineSvgEmbedder
-  };
-  return embedders[preferredSvgEmbedder];
-};
-/**
- * TODO:
- * 考虑把 asset data 解析部分和 nft display 分离, android 端有相关使用场景 - 只传入 svg 或 url, 也可以传入 asset data,
- * 目前如果想直接传入 svg 或 url, 需要构造一个 asset data 的数据才能使用 NFTDisplay 组件
- */
-function NFTDisplay({
-  data,
-  address,
-  inset,
-  aspect,
-  component = 'span',
-  className = '',
-  renderError,
-  renderLoading,
-  preferredSvgEmbedder = 'img',
-  checkSvg = false,
-  minimumLoadingTime = 0,
-  onCompleted = noop,
-  imageFilter = null,
-  ...rest
+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 wrapRoot = children => /*#__PURE__*/_jsx(Root, {
-    component: component,
-    ...rest,
-    className: clsx(className, {
-      'nft-display--inset': inset
-    }),
-    children: children
-  });
-  const parsed = useRef({});
+  var R;
+  const F = (l) => /* @__PURE__ */ n(cr, { component: T, ...k, className: S(z, { "nft-display--inset": m }), children: l }), a = M({});
   try {
-    // 如果是 raw data 先解析
-    if (typeof data === 'string') {
-      parsed.current = JSON.parse(data);
-    } else {
-      parsed.current = data;
-    }
-    const {
-      vcId
-    } = parsed.current;
-    // 需要兼容新旧两种类型的数据结构, nft data 有 credentialSubject 属性, 说明是旧 nft data, 否则是新 nft data
-    const display = parsed.current.credentialSubject ? get(parsed.current, 'credentialSubject.display') : parsed.current;
-    const {
-      content,
-      type
-    } = display;
-    const isUrlType = type === 'url';
-
-    // 首次加载, 对于 url type 的情况, loading 为 true
-    const [state, setState] = useState({
-      loading: isUrlType,
-      error: false,
-      loadingUrlType: true,
+    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,
+      error: !1,
+      loadingUrlType: !0,
       urlType: null
-    });
-    const [minimumLoadingReady, setMinimumLoadingReady] = useState(minimumLoadingTime <= 0);
-    // console.log('[debug] render', {type, minimumLoadingTime}, JSON.stringify(state))
-
-    // assemble the complete url
-    const getFullContentUrl = ({
-      useImageFilter = false,
-      t
-    } = {}) => {
-      const urlObj = new URL(content);
-
-      // check protocol
-      if (window.location.protocol === 'https:' && urlObj.protocol === 'http:') {
-        urlObj.protocol = 'https:';
-      }
-      if (!urlObj.searchParams.has('assetId')) {
-        urlObj.searchParams.append('assetId', address);
-      }
-      if (!urlObj.searchParams.has('vcId') && vcId) {
-        urlObj.searchParams.append('vcId', vcId);
-      }
-
-      // image filter
-      if (useImageFilter && imageFilter) {
-        Object.entries(imageFilter).forEach(([key, value]) => {
-          urlObj.searchParams.append(key, value);
-        });
-      }
-
-      // other params
-      if (t) {
-        urlObj.searchParams.append('t', t);
-      }
-      return urlObj.href;
-    };
-
-    // get url content type
-    const getUrlContentType = async () => {
+    }), [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;
       try {
-        const response = await displayApi({
-          url: getFullContentUrl({
-            useImageFilter: false,
-            t: 'nftdisplay'
-          }),
-          method: 'HEAD'
-        });
-        // @ts-expect-error
-        const contentType = response?.headers?.get('Content-Type');
-        setState({
-          ...state,
-          loadingUrlType: false,
-          urlType: contentType
-        });
-      } catch (error) {
-        console.error('Failed to fetch url content type', error);
-        // display an error message when timeout occurs to avoid repeated waiting.
-        if (error?.message?.includes('timeout')) {
-          setState({
-            ...state,
-            loadingUrlType: false,
-            loading: false,
-            error: true
-          });
+        const r = await ir({
+          url: d({ 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 });
           return;
         }
-        setState({
-          ...state,
-          loadingUrlType: false,
-          urlType: null
-        });
-      }
-    };
-    useEffect(() => {
-      let timer;
-      if (minimumLoadingTime > 0) {
-        timer = setTimeout(() => setMinimumLoadingReady(true), minimumLoadingTime);
-      }
-      if (type === 'url') {
-        getUrlContentType();
-      }
-      return () => clearTimeout(timer);
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-
-    // onCompleted
-    useEffect(() => {
-      if (!state.loading && minimumLoadingReady || state.error) {
-        onCompleted();
-      }
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [state, minimumLoadingReady]);
-    if (state.error) {
-      throw new Error('Failed to render NFT Display.');
-    }
-    const onLoad = () => {
-      if (state.loading) {
-        setState({
-          ...state,
-          loading: false
-        });
+        c({ ...t, loadingUrlType: !1, urlType: null });
       }
     };
-    const onError = () => {
-      setState({
-        ...state,
-        error: true,
-        loading: false
-      });
-    };
-
-    // render image
-    const renderImg = () => {
-      const url = getFullContentUrl({
-        useImageFilter: true
-      });
-      return /*#__PURE__*/_jsx("img", {
-        src: url,
-        onError: onError,
-        onLoad: onLoad,
-        alt: "NFT Display",
-        style: {
-          width: 'auto',
-          height: 'auto'
-        }
-      });
-    };
-
-    // render object
-    const renderObject = () => {
-      const objectType = state.urlType || 'image/svg+xml';
-      const url = getFullContentUrl();
-
-      // do naive image render
-      const pathname = new URL(url).pathname.toLowerCase();
-      const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp', '.svg', '.tiff', '.tif', '.ico', '.jfif', '.pjpeg', '.pjp', '.avif'];
-      if (imageExtensions.some(ext => pathname.endsWith(ext))) {
-        return renderImg();
-      }
-
-      // related: https://github.com/ArcBlock/did-spaces/issues/1367
-      if (objectType.includes('text/html;')) {
-        return /*#__PURE__*/_jsx(DefaultBrokenImage, {});
-      }
-      return (
-        /*#__PURE__*/
+    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)
+      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();
+      return [
+        ".jpg",
+        ".jpeg",
+        ".png",
+        ".gif",
+        ".bmp",
+        ".webp",
+        ".svg",
+        ".tiff",
+        ".tif",
+        ".ico",
+        ".jfif",
+        ".pjpeg",
+        ".pjp",
+        ".avif"
+      ].some((u) => r.endsWith(u)) ? D() : o.includes("text/html;") ? /* @__PURE__ */ n(C, {}) : (
         // eslint-disable-next-line jsx-a11y/alt-text
-        _jsx("object", {
-          type: objectType,
-          data: url,
-          onErrorCapture: onError,
-          onLoad: onLoad,
-          style: {
-            width: '100%',
-            height: '100%',
-            pointerEvents: 'none'
-          }
-        }, url)
+        /* @__PURE__ */ n(
+          "object",
+          {
+            type: o,
+            data: i,
+            onErrorCapture: N,
+            onLoad: v,
+            style: { width: "100%", height: "100%", pointerEvents: "none" }
+          },
+          i
+        )
       );
-    };
-    const renderNFT = () => {
-      if (content) {
-        switch (type) {
-          case 'url':
-            {
-              if (state.loadingUrlType) {
-                return null;
-              }
-              if (state.urlType?.startsWith('image/svg+xml')) {
-                return /*#__PURE__*/_jsx(RenderSvg, {
-                  src: getFullContentUrl(),
-                  onLoad: onLoad
-                });
-              }
-
-              // render image
-              if (state.urlType?.startsWith('image')) {
-                return renderImg();
-              }
-              return renderObject();
-            }
-          case 'uri':
-            {
-              return /*#__PURE__*/_jsx("img", {
-                src: content,
-                onError: () => setState({
-                  ...state,
-                  error: true
-                }),
-                onLoad: () => setState({
-                  ...state,
-                  loading: false
-                }),
+    }, q = () => {
+      var o, i;
+      if (f)
+        switch (y) {
+          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() : $();
+          case "uri":
+            return /* @__PURE__ */ n(
+              "img",
+              {
+                src: f,
+                onError: () => c({ ...t, error: !0 }),
+                onLoad: () => c({ ...t, loading: !1 }),
                 alt: "NFT Display"
-              });
-            }
-          case 'svg_gzipped':
-            {
-              const buffer = pako.ungzip(fromBase64(content), {});
-              const svg = Buffer.from(buffer).toString('utf8');
-              if (checkSvg && !isSvg(svg)) {
-                throw new Error('Invalid SVG of type svg_gzipped');
               }
-              const Embedder = getSvgEmbedder(preferredSvgEmbedder);
-              return /*#__PURE__*/_jsx(Embedder, {
-                svg: svg
-              });
-            }
-          case 'svg':
-            {
-              if (checkSvg && !isSvg(content)) {
-                throw new Error('Invalid SVG of type svg');
-              }
-              const Embedder = getSvgEmbedder(preferredSvgEmbedder);
-              return /*#__PURE__*/_jsx(Embedder, {
-                svg: content
-              });
-            }
+            );
+          case "svg_gzipped": {
+            const r = Q.ungzip(ar(f), {}), p = O.from(r).toString("utf8");
+            if (x && !B(p))
+              throw new Error("Invalid SVG of type svg_gzipped");
+            const u = L(E);
+            return /* @__PURE__ */ n(u, { svg: p });
+          }
+          case "svg": {
+            if (x && !B(f))
+              throw new Error("Invalid SVG of type svg");
+            const r = L(E);
+            return /* @__PURE__ */ n(r, { svg: f });
+          }
           // TODO: 准备测试数据
-          case 'html':
-            {
-              break;
-            }
+          case "html":
+            break;
           default:
         }
-      }
-      throw new Error(`unsupported display protocol: ${display.type}`);
+      throw new Error(`unsupported display protocol: ${U.type}`);
     };
-    return wrapRoot(/*#__PURE__*/_jsxs(_Fragment, {
-      children: [(state.loading || !minimumLoadingReady) && (renderLoading ? renderLoading() : /*#__PURE__*/_jsx(DefaultLoading, {})), renderNFT()]
-    }));
-  } catch (e) {
-    console.error(e?.message, {
-      nftId: address,
-      vcId: parsed?.current?.vcId
-    });
-    return wrapRoot(renderError ? renderError() : /*#__PURE__*/_jsx(DefaultBrokenImage, {}));
+    return F(
+      /* @__PURE__ */ H(J, { children: [
+        (t.loading || !w) && (j ? j() : /* @__PURE__ */ n(or, {})),
+        q()
+      ] })
+    );
+  } 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, {}));
   }
 }
-const Root = styled(Box)`
+const cr = nr(Z)`
   display: flex;
   justify-content: center;
   align-items: center;
@@ -365,28 +197,13 @@ const Root = styled(Box)`
     height: 100%;
   }
 `;
-function withAspectRatio(Component) {
-  // eslint-disable-next-line func-names, react/prop-types
-  return function ({
-    aspect,
-    inset,
-    ...rest
-  }) {
-    // inset 比 aspect ratio 优先级高, 如果同时设置了 inset 和 aspect, 则后者不生效
-    const applyAspectRatio = aspect && aspect > 0 && !inset;
-    if (applyAspectRatio) {
-      return /*#__PURE__*/_jsx(AspectRatioContainer, {
-        aspect: aspect,
-        children: /*#__PURE__*/_jsx(Component, {
-          inset: true,
-          ...rest
-        })
-      });
-    }
-    return /*#__PURE__*/_jsx(Component, {
-      inset: inset,
-      ...rest
-    });
+function pr(e) {
+  return function({ aspect: s, inset: m, ...g }) {
+    return s && s > 0 && !m ? /* @__PURE__ */ n(rr, { aspect: s, children: /* @__PURE__ */ n(e, { inset: !0, ...g }) }) : /* @__PURE__ */ n(e, { inset: m, ...g });
   };
 }
-export default withAspectRatio(NFTDisplay);
+const Dr = pr(lr);
+export {
+  Dr as default,
+  Nr as getNFTData
+};

package/lib/NFTDisplay/loading.js

@@ -1,12 +1,9 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { styled } from '../Theme';
-export default function Loading() {
-  return /*#__PURE__*/_jsx(Root, {
-    className: "nft-display__loading",
-    children: "Loading..."
-  });
+import { jsx as o } from "react/jsx-runtime";
+import { styled as t } from "../Theme/index.js";
+function a() {
+  return /* @__PURE__ */ o(e, { className: "nft-display__loading", children: "Loading..." });
 }
-const Root = styled('span')`
+const e = t("span")`
   display: flex;
   justify-content: center;
   align-items: center;
@@ -15,4 +12,7 @@ const Root = styled('span')`
   height: 100%;
   color: #ccc;
   background-color: #eee;
-`;
+`;
+export {
+  a as default
+};

package/lib/NFTDisplay/render-svg.js

@@ -1,23 +1,16 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import DOMPurify from 'dompurify';
-import { useAsyncEffect } from 'ahooks';
-import axios from 'axios';
-import { useState } from 'react';
-import InlineSvg from './svg-embedder/inline-svg';
-function RenderSvg({
-  src,
-  onLoad
-}) {
-  const [svgContent, setSvgContent] = useState('');
-  useAsyncEffect(async () => {
-    // @note: 注意源站点需要允许跨域
-    const response = await axios.get(src);
-    const cleanSVG = DOMPurify.sanitize(response.data);
-    setSvgContent(cleanSVG);
-    onLoad?.();
-  }, []);
-  return /*#__PURE__*/_jsx(InlineSvg, {
-    svg: svgContent
-  });
+import { jsx as o } 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 }) {
+  const [r, s] = p("");
+  return f(async () => {
+    const n = await c.get(e), i = m.sanitize(n.data);
+    s(i), t == null || t();
+  }, []), /* @__PURE__ */ o(a, { svg: r });
 }
-export default RenderSvg;
+export {
+  y as default
+};

package/lib/NFTDisplay/svg-embedder/img.js

@@ -1,31 +1,15 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import InlineSvgEmbedder from './inline-svg';
-const svgToImgUrl = svg => {
-  // fix: #225, https://stackoverflow.com/a/52135328)
-  const blob = new Blob([svg], {
-    type: 'image/svg+xml'
-  });
-  return URL.createObjectURL(blob);
+import { jsx as o } from "react/jsx-runtime";
+import c from "./inline-svg.js";
+const i = (e) => {
+  const r = new Blob([e], { type: "image/svg+xml" });
+  return URL.createObjectURL(r);
 };
-/** 基于 <img> 嵌入 svg */
-function ImgEmbedder({
-  svg,
-  alt = '',
-  fallback = true,
-  ...rest
-}) {
-  // 包含 foreignObject 的 svg, fallback 到 shadow dom
-  if (fallback && svg.indexOf('</foreignObject>') > -1) {
-    return /*#__PURE__*/_jsx(InlineSvgEmbedder, {
-      svg: svg
-    });
-  }
-  const url = svgToImgUrl(svg);
-  return /*#__PURE__*/_jsx("img", {
-    src: url,
-    onLoad: () => URL.revokeObjectURL(url),
-    alt: alt,
-    ...rest
-  });
+function l({ svg: e, alt: r = "", fallback: n = !0, ...m }) {
+  if (n && e.indexOf("</foreignObject>") > -1)
+    return /* @__PURE__ */ o(c, { svg: e });
+  const t = i(e);
+  return /* @__PURE__ */ o("img", { src: t, onLoad: () => URL.revokeObjectURL(t), alt: r, ...m });
 }
-export default ImgEmbedder;
+export {
+  l as default
+};

package/lib/NFTDisplay/svg-embedder/inline-svg.d.ts

@@ -1,4 +1,4 @@
-import { type SxProps } from '@mui/material';
+import { SxProps } from '@mui/material';
 export interface InlineSvgProps extends React.HTMLAttributes<HTMLSpanElement> {
     svg: string;
     sx?: SxProps;