@arcblock/ux 0.78.25 → 1.6.59

package/src/NFTDisplay/index.js

@@ -0,0 +1,257 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import clsx from 'clsx';
+import get from 'lodash/get';
+import pako from 'pako';
+import base64 from 'base64-url';
+import isSvg from 'is-svg';
+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';
+
+/**
+ * 从 assetState 中获取 nft data, 兼容新旧两种类型的数据结构, 建议将该方法的返回值传入 NFTDisplay 组件的 data prop
+ * - 旧: assetState.data.value (.credentialSubject.display)
+ * - 新: assetState.display
+ */
+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 => (
+    <Root as={component} {...rest} className={clsx(className, { 'nft-display--inset': inset })}>
+      {children}
+    </Root>
+  );
+
+  try {
+    const parsed = React.useRef(data);
+    // 如果是 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))
+
+    React.useEffect(() => {
+      let timer;
+      if (minimumLoadingTime > 0) {
+        timer = setTimeout(() => setMinimumLoadingReady(true), minimumLoadingTime);
+      }
+      return () => clearTimeout(timer);
+    }, []);
+
+    // onCompleted
+    React.useEffect(() => {
+      if ((!state.loading && minimumLoadingReady) || state.error) {
+        onCompleted();
+      }
+    }, [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')) {
+              urlObj.searchParams.append('vcId', vcId);
+            }
+
+            const url = urlObj.href;
+            return (
+              <img
+                src={url}
+                onError={() => setState({ ...state, error: true })}
+                onLoad={() => setState({ ...state, loading: false })}
+                alt="NFT Display"
+              />
+            );
+          }
+          case 'uri': {
+            return (
+              <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: ${svg}`);
+            }
+            const Embedder = getSvgEmbedder(preferredSvgEmbedder);
+            return <Embedder svg={svg} />;
+          }
+          case 'svg': {
+            if (checkSvg && !isSvg(content)) {
+              throw new Error(`Invalid SVG: ${content}`);
+            }
+            const Embedder = getSvgEmbedder(preferredSvgEmbedder);
+            return <Embedder svg={content} />;
+          }
+          // TODO: 准备测试数据
+          case 'html': {
+            break;
+          }
+          default:
+        }
+      }
+      throw new Error(`unsupported display protocol: ${display.type}`);
+    };
+
+    return wrapRoot(
+      <>
+        {(state.loading || !minimumLoadingReady) &&
+          (renderLoading ? renderLoading() : <DefaultLoading />)}
+        {renderNFT()}
+      </>
+    );
+  } catch (e) {
+    console.error(e);
+    return wrapRoot(renderError ? renderError() : <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: () => {},
+};
+
+const Root = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  /* 默认尺寸 */
+  width: 150px;
+  height: 150px;
+  overflow: hidden;
+
+  &,
+  img {
+    max-width: 100%;
+    max-height: 100%;
+  }
+
+  img {
+    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 (
+        <AspectRatioContainer aspect={aspect}>
+          <Component inset {...rest} />
+        </AspectRatioContainer>
+      );
+    }
+    return <Component inset={inset} {...rest} />;
+  };
+}
+
+export default withAspectRatio(NFTDisplay);

package/src/NFTDisplay/loading.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import styled from 'styled-components';
+
+export default function Loading() {
+  return <Root className="nft-display__loading">loading...</Root>;
+}
+
+const Root = styled.span`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  color: #ccc;
+  background-color: #eee;
+`;

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+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);
+};
+
+/**
+ * 基于 <img> 嵌入 svg
+ */
+function ImgEmbedder({ svg, alt, fallback, ...rest }) {
+  // 包含 foreignObject 的 svg, fallback 到 shadow dom
+  if (fallback && svg.indexOf('</foreignObject>') > -1) {
+    return <InlineSvgEmbedder svg={svg} />;
+  }
+
+  const url = svgToImgUrl(svg);
+  return <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/src/NFTDisplay/svg-embedder/inline-svg.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import root from 'react-shadow/styled-components';
+
+/**
+ * inline svg 的方式嵌入 svg, 使用 shadow DOM 避免样式污染
+ */
+function InlineSvg({ svg, ...rest }) {
+  return (
+    <Root {...rest}>
+      <Inner dangerouslySetInnerHTML={{ __html: svg }} />
+    </Root>
+  );
+}
+
+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/src/PageScroller/index.js

@@ -0,0 +1,342 @@
+/* eslint-disable jsx-a11y/no-noninteractive-tabindex */
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import isEqual from 'lodash/isEqual';
+import isNil from 'lodash/isNil';
+import isNull from 'lodash/isNull';
+
+import usePrevious from './usePrevValue';
+
+const Events = {
+  TOUCHMOVE: 'touchmove',
+  KEYDOWN: 'keydown',
+};
+
+const DEFAULT_ANIMATION_TIMER = 500;
+const DEFAULT_ANIMATION = 'ease-in-out';
+const DEFAULT_CONTAINER_HEIGHT = '100vh';
+const DEFAULT_CONTAINER_WIDTH = '100vw';
+const DEFAULT_COMPONENT_INDEX = 0;
+const DEFAULT_COMPONENTS_TO_RENDER_LENGTH = 0;
+
+const ANIMATION_TIMER_BUFFER = 100;
+const KEY_UP = 38;
+const KEY_DOWN = 40;
+const DISABLED_CLASS_NAME = 'rps-scroll--disabled';
+
+let previousTouchMove = null;
+let isScrolling = false;
+let isMounted = false;
+let isBodyScrollEnabled = true;
+let isTransitionAfterComponentsToRenderChanged = false;
+const containers = [];
+
+const PageScroller = ({
+  animationTimer,
+  blockScrollDown,
+  blockScrollUp,
+  children,
+  height,
+  width,
+  customPageNumber,
+  onScrollUnavailable,
+  onChange,
+  renderAllPagesOnFirstRender,
+  transitionTimingFunction,
+}) => {
+  const [componentIndex, setComponentIndex] = useState(DEFAULT_COMPONENT_INDEX);
+  const [componentsToRenderLength, setComponentsToRenderLength] = useState(
+    DEFAULT_COMPONENTS_TO_RENDER_LENGTH
+  );
+  const prevComponentIndex = usePrevious(componentIndex);
+  const pageContainer = useRef(null);
+
+  const addNextComponent = useCallback(
+    componentsToRenderOnMountLength => {
+      let tempComponentsToRenderLength = 0;
+
+      if (!isNil(componentsToRenderOnMountLength)) {
+        tempComponentsToRenderLength = componentsToRenderOnMountLength;
+      }
+
+      tempComponentsToRenderLength = Math.max(
+        tempComponentsToRenderLength,
+        componentsToRenderLength
+      );
+
+      if (tempComponentsToRenderLength <= componentIndex + 1) {
+        if (!isNil(children[componentIndex + 1])) {
+          tempComponentsToRenderLength++;
+        }
+      }
+
+      setComponentsToRenderLength(tempComponentsToRenderLength);
+    },
+    [children, componentIndex, componentsToRenderLength]
+  );
+
+  const checkRenderOnMount = useCallback(() => {
+    if (renderAllPagesOnFirstRender) {
+      setComponentsToRenderLength(React.Children.count(children));
+    } else if (!isNil(children[DEFAULT_COMPONENT_INDEX + 1])) {
+      addNextComponent(DEFAULT_COMPONENTS_TO_RENDER_LENGTH + 1);
+    }
+  }, [addNextComponent, children, renderAllPagesOnFirstRender]);
+
+  const disableScroll = useCallback(() => {
+    if (isBodyScrollEnabled) {
+      isBodyScrollEnabled = false;
+      window.scrollTo({
+        left: 0,
+        top: 0,
+        behavior: 'smooth',
+      });
+      document.body.classList.add(DISABLED_CLASS_NAME);
+      document.documentElement.classList.add(DISABLED_CLASS_NAME);
+    }
+  }, []);
+
+  const enableDocumentScroll = useCallback(() => {
+    if (!isBodyScrollEnabled) {
+      isBodyScrollEnabled = true;
+      document.body.classList.remove(DISABLED_CLASS_NAME);
+      document.documentElement.classList.remove(DISABLED_CLASS_NAME);
+    }
+  }, []);
+
+  const setRenderComponents = useCallback(() => {
+    const newComponentsToRender = [];
+
+    let i = 0;
+
+    while (i < componentsToRenderLength && !isNil(children[i])) {
+      containers[i] = true;
+      newComponentsToRender.push(
+        <div key={i} style={{ height: '100%', width: '100%' }}>
+          {React.cloneElement(children[i], { ...children[i].props })}
+        </div>
+      );
+      i++;
+    }
+
+    return newComponentsToRender;
+  }, [children, componentsToRenderLength]);
+
+  const scrollWindowDown = useCallback(() => {
+    if (!isScrolling && !blockScrollDown) {
+      if (!isNil(containers[componentIndex + 1])) {
+        disableScroll();
+        isScrolling = true;
+        pageContainer.current.style.transform = `translate3d(0, ${(componentIndex + 1) * -100}%, 0)`; // prettier-ignore
+
+        setTimeout(() => {
+          if (isMounted) {
+            setComponentIndex(prevState => prevState + 1);
+          }
+        }, animationTimer + ANIMATION_TIMER_BUFFER);
+      } else {
+        enableDocumentScroll();
+        if (onScrollUnavailable) {
+          onScrollUnavailable();
+        }
+      }
+    }
+  }, [
+    animationTimer,
+    blockScrollDown,
+    componentIndex,
+    disableScroll,
+    enableDocumentScroll,
+    onScrollUnavailable,
+  ]);
+
+  const scrollWindowUp = useCallback(() => {
+    if (!isScrolling && !blockScrollUp) {
+      if (!isNil(containers[componentIndex - 1])) {
+        disableScroll();
+        isScrolling = true;
+        pageContainer.current.style.transform = `translate3d(0, ${(componentIndex - 1) * -100}%, 0)`; // prettier-ignore
+
+        setTimeout(() => {
+          if (isMounted) {
+            setComponentIndex(prevState => prevState - 1);
+          }
+        }, animationTimer + ANIMATION_TIMER_BUFFER);
+      } else {
+        enableDocumentScroll();
+        if (onScrollUnavailable) {
+          onScrollUnavailable();
+        }
+      }
+    }
+  }, [
+    animationTimer,
+    blockScrollUp,
+    componentIndex,
+    disableScroll,
+    enableDocumentScroll,
+    onScrollUnavailable,
+  ]);
+
+  const touchMove = useCallback(
+    event => {
+      if (!isNull(previousTouchMove)) {
+        if (event.touches[0].clientY > previousTouchMove) {
+          scrollWindowUp();
+        } else {
+          scrollWindowDown();
+        }
+      } else {
+        previousTouchMove = event.touches[0].clientY;
+      }
+    },
+    [scrollWindowDown, scrollWindowUp]
+  );
+
+  const wheelScroll = useCallback(
+    event => {
+      if (event.deltaY < 0) {
+        scrollWindowUp();
+      } else {
+        scrollWindowDown();
+      }
+    },
+    [scrollWindowDown, scrollWindowUp]
+  );
+
+  const keyPress = useCallback(
+    event => {
+      if (isEqual(event.keyCode, KEY_UP)) {
+        scrollWindowUp();
+      }
+      if (isEqual(event.keyCode, KEY_DOWN)) {
+        scrollWindowDown();
+      }
+    },
+    [scrollWindowDown, scrollWindowUp]
+  );
+
+  useEffect(() => {
+    pageContainer.current.addEventListener(Events.TOUCHMOVE, touchMove);
+    pageContainer.current.addEventListener(Events.KEYDOWN, keyPress);
+    return () => {
+      pageContainer.current.removeEventListener(Events.TOUCHMOVE, touchMove);
+      pageContainer.current.removeEventListener(Events.KEYDOWN, keyPress);
+    };
+  }, [touchMove, keyPress]);
+
+  useEffect(() => {
+    isMounted = true;
+
+    checkRenderOnMount();
+    return () => {
+      isMounted = false;
+    };
+  }, []);
+
+  useEffect(() => {
+    isScrolling = false;
+    previousTouchMove = null;
+    if (componentIndex > prevComponentIndex) {
+      addNextComponent();
+    }
+  }, [addNextComponent, componentIndex, prevComponentIndex]);
+
+  useEffect(() => {
+    if (onChange) {
+      onChange(componentIndex);
+    }
+  }, [onChange, componentIndex]);
+
+  useEffect(() => {
+    if (!isNil(customPageNumber) && !isEqual(customPageNumber, componentIndex)) {
+      let newComponentsToRenderLength = componentsToRenderLength;
+
+      if (!isEqual(componentIndex, customPageNumber)) {
+        if (!isNil(containers[customPageNumber]) && !isScrolling) {
+          isScrolling = true;
+          pageContainer.current.style.transform = `translate3d(0, ${customPageNumber * -100}%, 0)`;
+
+          if (isNil(containers[customPageNumber]) && !isNil(children[customPageNumber])) {
+            newComponentsToRenderLength++;
+          }
+
+          setTimeout(() => {
+            setComponentIndex(customPageNumber);
+            setComponentsToRenderLength(newComponentsToRenderLength);
+          }, animationTimer + ANIMATION_TIMER_BUFFER);
+        } else if (!isScrolling && !isNil(children[customPageNumber])) {
+          for (let i = componentsToRenderLength; i <= customPageNumber; i++) {
+            newComponentsToRenderLength++;
+          }
+
+          if (!isNil(children[customPageNumber])) {
+            newComponentsToRenderLength++;
+          }
+
+          isScrolling = true;
+          isTransitionAfterComponentsToRenderChanged = true;
+          setComponentsToRenderLength(newComponentsToRenderLength);
+        }
+      }
+    }
+  }, [customPageNumber]);
+
+  useEffect(() => {
+    if (isTransitionAfterComponentsToRenderChanged) {
+      isTransitionAfterComponentsToRenderChanged = false;
+
+      pageContainer.current.style.transform = `translate3d(0, ${customPageNumber * -100}%, 0)`;
+
+      setTimeout(() => {
+        setComponentIndex(customPageNumber);
+      }, animationTimer + ANIMATION_TIMER_BUFFER);
+    }
+  }, [animationTimer, componentsToRenderLength, customPageNumber]);
+
+  return (
+    <div style={{ height, width, overflow: 'hidden' }}>
+      <div
+        ref={pageContainer}
+        onWheel={wheelScroll}
+        style={{
+          height: '100%',
+          width: '100%',
+          transition: `transform ${animationTimer}ms ${transitionTimingFunction}`,
+          outline: 'none',
+        }}
+        tabIndex={0}>
+        {setRenderComponents()}
+      </div>
+    </div>
+  );
+};
+
+PageScroller.propTypes = {
+  animationTimer: PropTypes.number,
+  blockScrollDown: PropTypes.bool,
+  blockScrollUp: PropTypes.bool,
+  children: PropTypes.any.isRequired,
+  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  customPageNumber: PropTypes.number,
+  onScrollUnavailable: PropTypes.func,
+  onChange: PropTypes.func,
+  renderAllPagesOnFirstRender: PropTypes.bool,
+  transitionTimingFunction: PropTypes.string,
+};
+
+PageScroller.defaultProps = {
+  animationTimer: DEFAULT_ANIMATION_TIMER,
+  transitionTimingFunction: DEFAULT_ANIMATION,
+  height: DEFAULT_CONTAINER_HEIGHT,
+  width: DEFAULT_CONTAINER_WIDTH,
+  onChange: undefined,
+  onScrollUnavailable: undefined,
+  blockScrollUp: false,
+  blockScrollDown: false,
+  renderAllPagesOnFirstRender: false,
+  customPageNumber: undefined,
+};
+
+export default PageScroller;

package/src/PageScroller/usePrevValue.js

@@ -0,0 +1,12 @@
+// eslint-disable-next-line no-unused-vars
+import React, { useEffect, useRef } from 'react';
+
+export default function usePrevious(value) {
+  const ref = useRef({});
+
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+
+  return ref.current;
+}