@arcblock/ux 3.4.14 → 3.5.0

package/src/AnimationWaiter/index.jsx

@@ -1,296 +0,0 @@
-import { lazy, Suspense, useState, useEffect, useRef } from 'react';
-import { Skeleton } from '@mui/material';
-
-import PropTypes from 'prop-types';
-import noop from 'lodash/noop';
-
-import { styled, useTheme } from '../Theme';
-
-const Lottie = lazy(() => import('react-lottie-player'));
-
-/**
- * 用于长时间等待的用的动画组件
- * 动画会随着时间的变化而逐步加快播放速度，好适应用户的等待心理
- * @param {object} props - 组件属性
- * @param {object} [props.animationData] - lottie json 动画数据
- * @param {number|string} [props.size] - 动画的尺寸，单位px
- * @param {string|React.ReactNode[]} [props.message] - 动画下方的文字；数组情况下会在一定时间切换文案
- * @param {number} [props.messageDuration=5000] - 动画下方的文字为数组时，每个文案的持续时间（毫秒）
- * @param {boolean} [props.messageLoop=true] - 动画下方的文字为数组时，文案是否循环播放
- * @param {React.ReactNode[]} [props.tips=[]] - 底部的提示元素
- * @param {number} [props.tipsDuration=5000] - 底部提示的切换时间（毫秒）
- * @param {number} [props.speed=1] - 动画默认的播放速度
- * @param {number} [props.maybeDuration=120000] - 整个动画大概的持续时间（毫秒），用于计算增量下的动画速度
- * @param {number} [props.increaseSpeed=0] - 在 maybeDuration 时间下增加的速度
- * @returns {JSX.Element}
- */
-export default function AnimationWaiter({
-  animationData = null,
-  size = 256,
-  message = '',
-  messageDuration = 5000,
-  messageLoop = true,
-  tips = [],
-  tipsDuration = 5000,
-  maybeDuration = 120000,
-  speed = 1,
-  increaseSpeed = 0,
-  ...rest
-}) {
-  const theme = useTheme();
-  const [tipsId, setTipsId] = useState(0);
-  const [currentSpeed, setCurrentSpeed] = useState(speed);
-  const [messageId, setMessageId] = useState(0);
-  const [defaultAnimation, setDefaultAnimation] = useState(null);
-  const [isLoading, setIsLoading] = useState(!animationData);
-  // 动画的开始时间
-  const startTime = useRef(new Date().getTime());
-
-  if (!Array.isArray(message)) {
-    // eslint-disable-next-line no-param-reassign
-    message = [message];
-  }
-
-  // 懒加载默认动画
-  useEffect(() => {
-    if (!animationData) {
-      setIsLoading(true);
-      const loadAnimation = async () => {
-        try {
-          const module = await (theme.palette.mode === 'dark'
-            ? import('./dark-animation.json')
-            : import('./default-animation.json'));
-
-          setDefaultAnimation(module.default || module);
-
-          setIsLoading(false);
-        } catch (error) {
-          console.error('Failed to load animation:', error);
-          setIsLoading(false);
-        }
-      };
-
-      loadAnimation();
-    }
-  }, [animationData, theme.palette.mode]);
-
-  useEffect(() => {
-    if (!message) {
-      return;
-    }
-
-    let msgIndex = 0;
-
-    const timer = setInterval(() => {
-      msgIndex++;
-      if (msgIndex >= message.length) {
-        if (messageLoop) {
-          msgIndex = 0;
-        } else {
-          msgIndex = message.length - 1;
-        }
-      }
-      setMessageId(msgIndex);
-    }, messageDuration);
-
-    // eslint-disable-next-line consistent-return
-    return () => {
-      clearInterval(timer);
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [message, messageDuration]);
-
-  // tips
-  useEffect(() => {
-    if (!tips.length) {
-      return noop;
-    }
-
-    const timer = setTimeout(() => {
-      let nextId = tipsId + 1;
-
-      if (nextId >= tips.length) {
-        nextId = 0;
-      }
-
-      setTipsId(nextId);
-    }, tipsDuration);
-
-    return () => clearTimeout(timer);
-  }, [tips, tipsDuration, tipsId]);
-
-  // 动画speed
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      const diffTime = new Date().getTime() - startTime.current;
-
-      let percentage = diffTime / maybeDuration;
-      if (percentage > 1) {
-        percentage = 1;
-      }
-
-      const newSpeed = speed + increaseSpeed * percentage;
-
-      setCurrentSpeed(newSpeed);
-    }, 1000);
-
-    return () => clearTimeout(timer);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [currentSpeed]);
-
-  const getMsgClassName = (index) => {
-    let className = 'message-before';
-    if (messageId === index) {
-      className = 'show-message';
-    } else if (messageId < index) {
-      className = 'message-after';
-    }
-    return className;
-  };
-
-  const fallback = (
-    <div style={{ width: size, height: size, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
-      <Skeleton variant="rounded" width={size * 0.4} height={size * 0.4} />
-    </div>
-  );
-
-  return (
-    <Container {...rest}>
-      {isLoading ? (
-        // 当正在加载默认动画时直接展示 fallback
-        fallback
-      ) : (
-        // 否则使用 Suspense 包裹懒加载的 Lottie，Suspense 会在 Lottie 本身未加载完成时展示 fallback
-        <Suspense fallback={fallback}>
-          <Lottie
-            loop
-            animationData={animationData || defaultAnimation}
-            play
-            speed={currentSpeed}
-            style={{
-              width: size,
-              height: size,
-            }}
-          />
-        </Suspense>
-      )}
-
-      {message && (
-        <div className="waiter-message">
-          {message.map((text, index) => {
-            const className = getMsgClassName(index);
-            return (
-              <div
-                // eslint-disable-next-line react/no-array-index-key
-                key={index}>
-                <span className={`message-block ${className}`}>{text}</span>
-                <span className={`placeholder-message ${className}`}>{text}</span>
-              </div>
-            );
-          })}
-        </div>
-      )}
-
-      {tips.length ? (
-        <div className="waiter-tips-container">
-          {tips.map((e, index) => {
-            return (
-              <div
-                className={`waiter-tips-block ${tipsId === index ? 'show-tips' : ''}`}
-                // eslint-disable-next-line react/no-array-index-key
-                key={index}>
-                {e}
-              </div>
-            );
-          })}
-        </div>
-      ) : (
-        ''
-      )}
-    </Container>
-  );
-}
-
-AnimationWaiter.propTypes = {
-  animationData: PropTypes.oneOfType([PropTypes.object, PropTypes.oneOf([null])]),
-  size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  message: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.node)]),
-  messageDuration: PropTypes.number,
-  messageLoop: PropTypes.bool,
-  tips: PropTypes.arrayOf(PropTypes.node),
-  tipsDuration: PropTypes.number,
-  speed: PropTypes.number,
-  maybeDuration: PropTypes.number,
-  increaseSpeed: PropTypes.number,
-};
-
-const Container = styled('div')`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-
-  .waiter-message {
-    position: relative;
-    width: 100%;
-    font-weight: 700;
-    font-size: 18px;
-    line-height: 22px;
-    text-align: center;
-    overflow: hidden;
-    .message-block {
-      position: absolute;
-      left: 0;
-      width: 100%;
-      opacity: 0;
-      transition: all ease 0.3s;
-      user-select: none;
-      &.message-before {
-        transform: translate(-20px, 0);
-      }
-      &.message-after {
-        transform: translate(20px, 0);
-      }
-      &.show-message {
-        transform: translate(0, 0);
-        opacity: 1;
-        user-select: text;
-        z-index: 2;
-      }
-    }
-
-    .placeholder-message {
-      user-select: none;
-      display: none;
-      opacity: 0;
-      &.show-message {
-        display: block;
-      }
-    }
-  }
-
-  .waiter-tips-container {
-    position: relative;
-    margin-top: auto;
-    width: 100%;
-    .waiter-tips-block {
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      width: 100%;
-      opacity: 0;
-      pointer-events: none;
-      z-index: 1;
-      transform: translate(-20px, 0);
-      transition: all ease 0.4s;
-      &.show-tips {
-        opacity: 1;
-        pointer-events: auto;
-        z-index: 2;
-        transform: translate(0, 0);
-      }
-    }
-  }
-`;

package/src/Async/index.tsx

@@ -1,44 +0,0 @@
-import React from 'react';
-import { CircularProgress } from '@mui/material';
-
-export default function LoadAsyncComponent<T extends React.ComponentType<any>>(
-  importComponent: () => Promise<Record<string, T>>,
-  key = 'default',
-  showProgress = true
-) {
-  type Props = React.ComponentProps<T>;
-  type State = {
-    Component: React.ComponentType<any> | null;
-    error: string | null;
-  };
-
-  class AsyncComponent extends React.Component<Props, State> {
-    constructor(props: Props) {
-      super(props);
-
-      this.state = {
-        Component: null,
-        error: null,
-      };
-    }
-
-    componentDidMount() {
-      importComponent()
-        .then((asyncModule) => this.setState({ Component: asyncModule[key] }))
-        .catch((err) => this.setState({ error: `Failed to load async component: ${err.message}` }));
-    }
-
-    render() {
-      const { Component, error } = this.state;
-
-      if (error) {
-        return error;
-      }
-
-      // eslint-disable-next-line no-nested-ternary
-      return Component ? <Component {...this.props} /> : showProgress ? <CircularProgress color="primary" /> : null;
-    }
-  }
-
-  return AsyncComponent;
-}

package/src/Avatar/Avatar.stories.jsx

@@ -1,11 +0,0 @@
-export { default as WithDifferentSizes } from './demo/with-different-sizes';
-export { default as WithDifferentDid } from './demo/with-different-did';
-export { default as WithSpecifiedMotifShape } from './demo/with-specified-motif-shape';
-export { default as ResponsiveDidMotif } from './demo/responsive-did-motif';
-export { default as EthAddresses } from './demo/eth-addresses';
-export { default as WithAnimation } from './demo/with-animation';
-export { default as WithEmptyDidErrorFallback } from './demo/with-empty-did-error-fallback';
-
-export default {
-  title: 'DID/Avatar',
-};

package/src/Avatar/did-motif.jsx

@@ -1,38 +0,0 @@
-import { useRef, useLayoutEffect } from 'react';
-import PropTypes from 'prop-types';
-import { update } from '@arcblock/did-motif';
-import { Box } from '@mui/material';
-
-function DIDMotif({ did, size = 200, animation = false, shape = null, responsive = false, ...rest }) {
-  const svgRef = useRef(null);
-
-  useLayoutEffect(() => {
-    update(svgRef.current, did, { size, animation, shape });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [did, size, shape]);
-  if (responsive) {
-    // fix avatar 显示问题 (safari 下父容器为 flex 时 inline svg 显示不出来, 需要明确指定 width)
-    const styles = { ...rest.style, width: '100%' };
-    return <Box component="svg" ref={svgRef} {...rest} style={styles} className="arc-avatar-did-motif" />;
-  }
-  return (
-    <Box
-      component="span"
-      {...rest}
-      style={{ display: 'inline-block', width: size, height: size, ...rest.style }}
-      className="arc-avatar-did-motif">
-      <Box component="svg" ref={svgRef} style={{ width: '100%' }} />
-    </Box>
-  );
-}
-
-DIDMotif.propTypes = {
-  did: PropTypes.string.isRequired,
-  size: PropTypes.number,
-  animation: PropTypes.bool,
-  // 直接返回 svg 元素, svg 尺寸由父窗口决定 (撑满父窗口)
-  responsive: PropTypes.bool,
-  shape: PropTypes.number,
-};
-
-export default DIDMotif;

package/src/Avatar/etherscan-blockies.js

@@ -1,81 +0,0 @@
-/* eslint-disable prefer-destructuring */
-/* eslint-disable no-bitwise */
-// copy from https://etherscan.io/jss/blockies.js
-const randseed = new Array(4);
-function seedrand(seed) {
-  for (let i = 0; i < randseed.length; i++) {
-    randseed[i] = 0;
-  }
-  for (let i = 0; i < seed.length; i++) {
-    randseed[i % 4] = (randseed[i % 4] << 5) - randseed[i % 4] + seed.charCodeAt(i);
-  }
-}
-function rand() {
-  const t = randseed[0] ^ (randseed[0] << 11);
-  randseed[0] = randseed[1];
-  randseed[1] = randseed[2];
-  randseed[2] = randseed[3];
-  randseed[3] = randseed[3] ^ (randseed[3] >> 19) ^ t ^ (t >> 8);
-  return (randseed[3] >>> 0) / ((1 << 31) >>> 0);
-}
-function createColor() {
-  const h = Math.floor(rand() * 360);
-  const s = `${rand() * 60 + 40}%`;
-  const l = `${(rand() + rand() + rand() + rand()) * 25}%`;
-  const color = `hsl(${h},${s},${l})`;
-  return color;
-}
-function createImageData(size) {
-  const width = size;
-  const height = size;
-  const dataWidth = Math.ceil(width / 2);
-  const mirrorWidth = width - dataWidth;
-  const data = [];
-  for (let y = 0; y < height; y++) {
-    let row = [];
-    for (let x = 0; x < dataWidth; x++) {
-      row[x] = Math.floor(rand() * 2.3);
-    }
-    const r = row.slice(0, mirrorWidth);
-    r.reverse();
-    row = row.concat(r);
-    for (let i = 0; i < row.length; i++) {
-      data.push(row[i]);
-    }
-  }
-  return data;
-}
-function createCanvas(imageData, color, scale, bgcolor, spotcolor) {
-  const c = document.createElement('canvas');
-  const width = Math.sqrt(imageData.length);
-  // eslint-disable-next-line no-multi-assign
-  c.width = c.height = width * scale;
-  const cc = c.getContext('2d');
-  cc.fillStyle = bgcolor;
-  cc.fillRect(0, 0, c.width, c.height);
-  cc.fillStyle = color;
-  for (let i = 0; i < imageData.length; i++) {
-    const row = Math.floor(i / width);
-    const col = i % width;
-    cc.fillStyle = imageData[i] === 1 ? color : spotcolor;
-    if (imageData[i]) {
-      cc.fillRect(col * scale, row * scale, scale, scale);
-    }
-  }
-  return c;
-}
-function createIcon(opts) {
-  // eslint-disable-next-line no-param-reassign
-  opts = opts || {};
-  const size = opts.size || 8;
-  const scale = opts.scale || 4;
-  const seed = opts.seed || Math.floor(Math.random() * 10 ** 16).toString(16);
-  seedrand(seed);
-  const color = opts.color || createColor();
-  const bgcolor = opts.bgcolor || createColor();
-  const spotcolor = opts.spotcolor || createColor();
-  const imageData = createImageData(size);
-  const canvas = createCanvas(imageData, color, scale, bgcolor, spotcolor);
-  return canvas;
-}
-export default { createIcon };

package/src/Avatar/index.jsx

@@ -1,195 +0,0 @@
-/* eslint-disable react/no-unused-prop-types */
-import { useState, useMemo } from 'react';
-import PropTypes from 'prop-types';
-import { ErrorBoundary } from 'react-error-boundary';
-import { Shape } from '@arcblock/did-motif';
-import { Box } from '@mui/material';
-import isUndefined from 'lodash/isUndefined';
-
-import Img from '../Img';
-import { mergeProps, isEthereumDid } from '../Util';
-import DIDMotif from './did-motif';
-import blockies from './etherscan-blockies';
-import { DID_PREFIX } from '../Util/constant';
-
-/**
- * Avatar component
- * @typedef {{
- *  src?: string;
- *  did?: string;
- *  size?: number;
- *  variant?: 'circle' | 'rounded' | 'default';
- *  animation?: false | true;
- *  shape?: '' | 'rectangle' | 'square' | 'hexagon' | 'circle';
- *  blockiesPadding?: true | false;
- *  responsive?: false | true;
- *  useProxyFallback?: boolean;
- * } & Omit<import('../Img').ImgProps, 'size' | 'src'>} AvatarProps
- */
-
-/**
- * @see 参考: https://github.com/blocklet/block-explorer/issues/478#issuecomment-1038954976
- * @param {AvatarProps} props
- * @returns {JSX.Element}
- */
-function Avatar({ ...rawProps }) {
-  const props = Object.assign({}, rawProps);
-  if (isUndefined(props.did)) {
-    props.did = '';
-  }
-  if (isUndefined(props.size)) {
-    props.size = 36;
-  }
-  if (isUndefined(props.variant)) {
-    props.variant = 'default';
-  }
-  if (isUndefined(props.animation)) {
-    props.animation = false;
-  }
-  if (isUndefined(props.shape)) {
-    props.shape = '';
-  }
-  if (isUndefined(props.blockiesPadding)) {
-    props.blockiesPadding = true;
-  }
-  if (isUndefined(props.responsive)) {
-    props.responsive = false;
-  }
-  const [imgError, setImgError] = useState(false);
-  /** @type {AvatarProps} */
-  const newProps = mergeProps(props, Avatar, []);
-  const { did = '', size, src, variant, animation, shape, blockiesPadding, responsive, ...rest } = newProps;
-
-  // ethereum blockies
-  const blockyIcon = useMemo(() => {
-    if (isEthereumDid(did)) {
-      return blockies
-        .createIcon({
-          seed: did.replace(DID_PREFIX, '').toLowerCase(),
-          size: 8,
-          scale: 16,
-        })
-        .toDataURL();
-    }
-    return null;
-  }, [did]);
-
-  // 如果显式传入 src 则直接使用 src
-  if (src && !imgError) {
-    return (
-      <Img
-        width={size}
-        src={src}
-        alt={did}
-        onError={() => setImgError(true)}
-        {...rest}
-        // HACK: 这个 className 是传递给子元素的，所以下面的 sx 需要通过子元素选择器来写样式
-        className={`avatar-img--${variant} ${rest?.className || ''}`}
-        useProxyFallback
-        sx={{
-          '& .avatar-img--rounded': {
-            borderRadius: '4px',
-            overflow: 'hidden',
-          },
-          '& .avatar-img--circle': {
-            borderRadius: '100%',
-            overflow: 'hidden',
-          },
-          ...rest.sx,
-        }}
-      />
-    );
-  }
-  // 对于 eth address, 渲染成 blocky icon, 形状与 account role type 的 did motif 相似都为矩形, 高宽比为 0.7
-  if (blockyIcon) {
-    if (blockiesPadding) {
-      // blocky icon 要与灰色卡片矩形留有空间
-      const padding = size > 24 ? 4 : 2;
-      return (
-        <Box
-          {...rest}
-          sx={{
-            display: 'flex',
-            alignItems: 'center',
-            width: size,
-            height: size,
-            '.blocky-icon-inner': {
-              boxSizing: 'border-box',
-              display: 'flex',
-              justifyContent: 'center',
-              alignItems: 'center',
-              width: size,
-              height: size * 0.7,
-              borderRadius: `${Math.min(10, Math.floor(0.1 * size + 2))}px`,
-              background: '#ddd',
-            },
-            ...rest.sx,
-          }}>
-          <div className="blocky-icon-inner">
-            <Img width={size * 0.7 - padding * 2} src={blockyIcon} alt={did} />
-          </div>
-        </Box>
-      );
-    }
-
-    return <Img {...rest} width={size} src={blockyIcon} alt={did} style={{ marginRight: 4 }} />;
-  }
-
-  if (did) {
-    // 渲染 did motif
-    return (
-      <DIDMotif
-        did={did.replace(DID_PREFIX, '')}
-        size={size}
-        animation={animation}
-        shape={Shape[(shape || '').toUpperCase()]}
-        responsive={responsive}
-        {...rest}
-      />
-    );
-  }
-  throw new Error(`Invalid DID: ${did}`);
-}
-
-Avatar.propTypes = {
-  did: PropTypes.string,
-  size: PropTypes.number,
-  variant: PropTypes.oneOf(['circle', 'rounded', 'default']),
-  // animation 仅对 did motif 有效
-  animation: PropTypes.bool,
-  // shape 仅对 did motif 有效, 明确指定 motif shape, 而非由 did role type 自动推断 shape
-  shape: PropTypes.oneOf(['', 'rectangle', 'square', 'hexagon', 'circle']),
-  blockiesPadding: PropTypes.bool,
-  responsive: PropTypes.bool,
-  useProxyFallback: PropTypes.bool,
-};
-
-/**
- * @param {AvatarProps} props
- * @returns {JSX.Element}
- */
-export default function AvatarWithErrorBoundary(props) {
-  const size = props.size || 36;
-  const borderRadius = { rounded: '4px', circle: '100%' }[props.variant] || 0;
-  return (
-    <ErrorBoundary
-      // eslint-disable-next-line react/no-unstable-nested-components
-      fallbackRender={() => (
-        <Box
-          sx={{
-            width: size,
-            height: size,
-            bgcolor: 'grey.300',
-            borderRadius,
-          }}
-        />
-      )}>
-      <Avatar {...props} />
-    </ErrorBoundary>
-  );
-}
-
-AvatarWithErrorBoundary.propTypes = Avatar.propTypes;
-
-// Export Avatar for access to its props
-export { Avatar as AvatarProps };

package/src/Badge/Badge.stories.jsx

@@ -1,41 +0,0 @@
-import Badge from '.';
-
-export default {
-  title: 'Deprecated/Badge',
-
-  parameters: {
-    readme: {
-      sidebar: '<!-- PROPS -->',
-    },
-  },
-};
-
-export function WithDifferentType() {
-  return (
-    <div
-      style={{
-        display: 'flex',
-        flexDirection: 'column',
-        width: '300px',
-        justifyContent: 'space-between',
-      }}>
-      <Badge type="error" style={{ marginBottom: 16 }}>
-        Error message
-      </Badge>
-      <Badge type="warning" style={{ marginBottom: 16 }}>
-        Warning message
-      </Badge>
-      <Badge type="success" style={{ marginBottom: 16 }}>
-        Success message
-      </Badge>
-      <Badge type="primary" style={{ marginBottom: 16 }}>
-        Default tip
-      </Badge>
-      <Badge type="reverse" style={{ marginBottom: 16 }}>
-        Reverse styling
-      </Badge>
-    </div>
-  );
-}
-
-WithDifferentType.storyName = 'with different type';