@arcblock/ux 2.9.91 → 2.10.0

package/es/NFTDisplay/index.js

@@ -1,328 +0,0 @@
-/* eslint-disable react-hooks/rules-of-hooks */
-import { useRef, useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
-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 { ReactSVG } from 'react-svg';
-import noop from 'lodash/noop';
-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';
-
-/**
- * 从 assetState 中获取 nft data, 兼容新旧两种类型的数据结构, 建议将该方法的返回值传入 NFTDisplay 组件的 data prop
- * - 旧: assetState.data.value (.credentialSubject.display)
- * - 新: assetState.display
- */
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-export function getNFTData(assetState) {
-  return assetState?.display || assetState?.data?.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');
-}
-
-// 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,
-  className,
-  renderError,
-  renderLoading,
-  preferredSvgEmbedder,
-  checkSvg,
-  minimumLoadingTime,
-  onCompleted,
-  ...rest
-}) {
-  const wrapRoot = children => /*#__PURE__*/_jsx(Root, {
-    as: component,
-    ...rest,
-    className: clsx(className, {
-      'nft-display--inset': inset
-    }),
-    children: children
-  });
-  const parsed = useRef(data);
-  try {
-    // 如果是 raw data 先解析
-    if (typeof parsed.current === 'string') {
-      parsed.current = JSON.parse(data);
-      // console.log('[debug] parse 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
-    });
-    const [minimumLoadingReady, setMinimumLoadingReady] = useState(minimumLoadingTime <= 0);
-    // console.log('[debug] render', {type, minimumLoadingTime}, JSON.stringify(state))
-
-    useEffect(() => {
-      let timer;
-      if (minimumLoadingTime > 0) {
-        timer = setTimeout(() => setMinimumLoadingReady(true), minimumLoadingTime);
-      }
-      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 renderNFT = () => {
-      if (content) {
-        switch (type) {
-          case 'url':
-            {
-              const urlObj = new URL(content);
-              if (!urlObj.searchParams.has('assetId')) {
-                urlObj.searchParams.append('assetId', address);
-              }
-              if (!urlObj.searchParams.has('vcId') && vcId) {
-                urlObj.searchParams.append('vcId', vcId);
-              }
-              const url = urlObj.href;
-              const safeOnLoad = () => {
-                if (state.loading) {
-                  setState({
-                    ...state,
-                    loading: false
-                  });
-                }
-              };
-              return state.fallback ? state.fallback?.() : /*#__PURE__*/_jsx(ReactSVG, {
-                src: url,
-                beforeInjection: svg => {
-                  svg.setAttribute('style', 'pointer-events: none; width: 100%; height: 100%;');
-                },
-                afterInjection: safeOnLoad,
-                onError: error => {
-                  let objectType = null;
-                  if (error?.message?.indexOf('Invalid content type: ') > -1) {
-                    objectType = error.message.split('Invalid content type: ')?.[1];
-                  } else if (error?.message?.indexOf('Unable to load SVG file: ') > -1) {
-                    objectType = 'image/svg+xml';
-                  }
-                  setState({
-                    ...state,
-                    // fallback to object, and use objectType to render
-                    fallback: () =>
-                    /*#__PURE__*/
-                    // eslint-disable-next-line jsx-a11y/alt-text
-                    _jsx("object", {
-                      type: objectType,
-                      data: url,
-                      onErrorCapture: () => {
-                        setState({
-                          ...state,
-                          error: true,
-                          loading: false
-                        });
-                      },
-                      onLoad: safeOnLoad,
-                      style: {
-                        width: 'auto',
-                        height: 'auto',
-                        pointerEvents: 'none'
-                      }
-                    }, url)
-                  });
-                }
-                // evalScripts="always"
-                ,
-                wrapper: "div"
-              });
-            }
-          case 'uri':
-            {
-              return /*#__PURE__*/_jsx("img", {
-                src: content,
-                onError: () => setState({
-                  ...state,
-                  error: true
-                }),
-                onLoad: () => setState({
-                  ...state,
-                  loading: false
-                }),
-                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
-              });
-            }
-          // TODO: 准备测试数据
-          case 'html':
-            {
-              break;
-            }
-          default:
-        }
-      }
-      throw new Error(`unsupported display protocol: ${display.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, {}));
-  }
-}
-NFTDisplay.propTypes = {
-  // asset data 可以是 raw data 和 parsed data
-  data: PropTypes.oneOfType([PropTypes.object, PropTypes.string]).isRequired,
-  address: PropTypes.string.isRequired,
-  component: PropTypes.string,
-  inset: PropTypes.bool,
-  aspect: PropTypes.number,
-  className: PropTypes.string,
-  renderError: PropTypes.func,
-  renderLoading: PropTypes.func,
-  // 对于非 url type 的情况, 支持优先选用的 svg 嵌入方式, 默认是 img
-  preferredSvgEmbedder: PropTypes.oneOf(['img', 'svg']),
-  // 针对非 url type 的情况, 检测 svg 有效性, 默认禁用
-  checkSvg: PropTypes.bool,
-  // loading 最小显示时间 (避免闪烁)
-  minimumLoadingTime: PropTypes.number,
-  // 完成回调, 无论加载成功|失败
-  onCompleted: PropTypes.func
-};
-NFTDisplay.defaultProps = {
-  component: 'span',
-  inset: false,
-  aspect: 0,
-  className: '',
-  renderError: null,
-  renderLoading: null,
-  preferredSvgEmbedder: 'img',
-  checkSvg: false,
-  minimumLoadingTime: 0,
-  onCompleted: noop
-};
-const Root = styled('div')`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  /* 默认尺寸 */
-  width: 150px;
-  height: 150px;
-  overflow: hidden;
-
-  &,
-  img,
-  object {
-    max-width: 100%;
-    max-height: 100%;
-  }
-
-  img,
-  object {
-    width: 100%;
-    height: 100%;
-  }
-
-  &.nft-display--inset {
-    width: 100%;
-    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 > 0 && !inset;
-    if (applyAspectRatio) {
-      return /*#__PURE__*/_jsx(AspectRatioContainer, {
-        aspect: aspect,
-        children: /*#__PURE__*/_jsx(Component, {
-          inset: true,
-          ...rest
-        })
-      });
-    }
-    return /*#__PURE__*/_jsx(Component, {
-      inset: inset,
-      ...rest
-    });
-  };
-}
-export default withAspectRatio(NFTDisplay);

package/es/NFTDisplay/loading.js

@@ -1,18 +0,0 @@
-import { styled } from '../Theme';
-import { jsx as _jsx } from "react/jsx-runtime";
-export default function Loading() {
-  return /*#__PURE__*/_jsx(Root, {
-    className: "nft-display__loading",
-    children: "Loading..."
-  });
-}
-const Root = styled('span')`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  color: #ccc;
-  background-color: #eee;
-`;

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

@@ -1,45 +0,0 @@
-import PropTypes from 'prop-types';
-import InlineSvgEmbedder from './inline-svg';
-import { jsx as _jsx } from "react/jsx-runtime";
-const svgToImgUrl = svg => {
-  // fix: #225, https://stackoverflow.com/a/52135328)
-  const blob = new Blob([svg], {
-    type: 'image/svg+xml'
-  });
-  return URL.createObjectURL(blob);
-};
-
-/**
- * 基于 <img> 嵌入 svg
- */
-function ImgEmbedder({
-  svg,
-  alt,
-  fallback,
-  ...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
-  });
-}
-ImgEmbedder.propTypes = {
-  svg: PropTypes.string.isRequired,
-  alt: PropTypes.string,
-  // 对于包含 foreignObject 的 svg, fallback 到 inline svg + shadow DOM
-  fallback: PropTypes.bool
-};
-ImgEmbedder.defaultProps = {
-  alt: '',
-  fallback: true
-};
-export default ImgEmbedder;

package/es/NFTDisplay/svg-embedder/inline-svg.js

@@ -1,39 +0,0 @@
-import PropTypes from 'prop-types';
-import root from 'react-shadow/emotion';
-import { styled } from '../../Theme';
-
-/**
- * inline svg 的方式嵌入 svg, 使用 shadow DOM 避免样式污染
- */
-import { jsx as _jsx } from "react/jsx-runtime";
-function InlineSvg({
-  svg,
-  ...rest
-}) {
-  return /*#__PURE__*/_jsx(Root, {
-    ...rest,
-    children: /*#__PURE__*/_jsx(Inner, {
-      dangerouslySetInnerHTML: {
-        __html: svg
-      }
-    })
-  });
-}
-InlineSvg.propTypes = {
-  svg: PropTypes.string.isRequired
-};
-const Root = styled(root.span)`
-  display: block;
-  width: 100%;
-  height: 100%;
-`;
-const Inner = styled('div')`
-  &,
-  & > svg {
-    height: 100%;
-    width: 100%;
-    min-width: 100%;
-    max-width: 100%;
-  }
-`;
-export default InlineSvg;

package/es/NavMenu/index.js

@@ -1,2 +0,0 @@
-// eslint-disable-next-line no-restricted-exports
-export { default } from './nav-menu';