@arcblock/ux 2.9.91 → 2.10.0

package/es/AnimationWaiter/index.js

@@ -1,240 +0,0 @@
-import { useState, useEffect, useRef } from 'react';
-import PropTypes from 'prop-types';
-import Lottie from 'react-lottie-player';
-import noop from 'lodash/noop';
-import lottieJson from './default-animation.json';
-import { styled } from '../Theme';
-
-/**
- * 用于长时间等待的用的动画组件
- * 动画会随着时间的变化而逐步加快播放速度，好适应用户的等待心理
- * @param {Object} animationData lottie json 动画数据
- * @param {Number} size 动画的尺寸，单位px
- * @param {String｜Array} message 动画下方的文字；数组情况下会在一定时间切换文案
- * @param {Number} messageDuration 动画下方的文字为数组时，每个文案的持续时间；默认5000ms
- * @param {Number} messageLoop 动画下方的文字为数组时，文案是否循环播放
- * @param {Array} tips 底部的提示元素
- * @param {Number} tipsDuration 底部提示的切换时间，单位毫秒，默认3000ms
- * @param {Number} speed 动画默认的播放速度
- * @param {Number} maybeDuration 整个动画大概的持续时间，单位毫秒，用于计算增量下的动画速度，默认两分钟(120000ms)
- * @param {Number} increaseSpeed 在 maybeDuration 时间下增加的速度，默认为0（不增加速度）
- * @returns element
- */
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-export default function AnimationWaiter({
-  animationData,
-  size,
-  message,
-  messageDuration,
-  messageLoop,
-  tips,
-  tipsDuration,
-  maybeDuration,
-  speed,
-  increaseSpeed,
-  ...rest
-}) {
-  const [tipsId, setTipsId] = useState(0);
-  const [currentSpeed, setCurrentSpeed] = useState(speed);
-  const [messageId, setMessageId] = useState(0);
-  // 动画的开始时间
-  const startTime = useRef(new Date().getTime());
-  if (!Array.isArray(message)) {
-    // eslint-disable-next-line no-param-reassign
-    message = [message];
-  }
-  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;
-  };
-  return /*#__PURE__*/_jsxs(Container, {
-    ...rest,
-    children: [/*#__PURE__*/_jsx(Lottie, {
-      loop: true,
-      animationData: animationData || lottieJson,
-      play: true,
-      speed: currentSpeed,
-      style: {
-        width: size,
-        height: size
-      }
-    }), message && /*#__PURE__*/_jsx("div", {
-      className: "waiter-message",
-      children: message.map((text, index) => {
-        const className = getMsgClassName(index);
-        return /*#__PURE__*/_jsxs("div", {
-          children: [/*#__PURE__*/_jsx("span", {
-            className: `message-block ${className}`,
-            children: text
-          }), /*#__PURE__*/_jsx("span", {
-            className: `placeholder-message ${className}`,
-            children: text
-          })]
-        }, index);
-      })
-    }), tips.length ? /*#__PURE__*/_jsx("div", {
-      className: "waiter-tips-container",
-      children: tips.map((e, index) => {
-        return /*#__PURE__*/_jsx("div", {
-          className: `waiter-tips-block ${tipsId === index ? 'show-tips' : ''}`
-          // eslint-disable-next-line react/no-array-index-key
-          ,
-          children: e
-        }, index);
-      })
-    }) : '']
-  });
-}
-AnimationWaiter.propTypes = {
-  animationData: PropTypes.any,
-  size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  message: PropTypes.any,
-  messageDuration: PropTypes.number,
-  messageLoop: PropTypes.bool,
-  tips: PropTypes.array,
-  tipsDuration: PropTypes.number,
-  speed: PropTypes.number,
-  maybeDuration: PropTypes.number,
-  increaseSpeed: PropTypes.number
-};
-AnimationWaiter.defaultProps = {
-  animationData: null,
-  size: '',
-  message: '',
-  messageDuration: 5000,
-  messageLoop: true,
-  tips: [],
-  tipsDuration: 5000,
-  speed: 1,
-  maybeDuration: 120000,
-  increaseSpeed: 0
-};
-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/es/Async/index.js

@@ -1,38 +0,0 @@
-import * as React from 'react';
-import CircularProgress from '@mui/material/CircularProgress';
-import { jsx as _jsx } from "react/jsx-runtime";
-export default function LoadAsyncComponent(importComponent, key = 'default', showProgress = true) {
-  class AsyncComponent extends React.Component {
-    constructor(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 ? /*#__PURE__*/_jsx(Component, {
-        ...this.props
-      }) : showProgress ? /*#__PURE__*/_jsx(CircularProgress, {
-        color: "primary"
-      }) : null;
-    }
-  }
-  return AsyncComponent;
-}

package/es/Avatar/did-motif.js

@@ -1,68 +0,0 @@
-import { useRef, useLayoutEffect } from 'react';
-import PropTypes from 'prop-types';
-import { update } from '@arcblock/did-motif';
-import { Box } from '@mui/material';
-import { jsx as _jsx } from "react/jsx-runtime";
-function DIDMotif({
-  did,
-  size,
-  animation,
-  shape,
-  responsive,
-  ...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 /*#__PURE__*/_jsx(Box, {
-      component: "svg",
-      ref: svgRef,
-      ...rest,
-      style: styles
-    });
-  }
-  return /*#__PURE__*/_jsx(Box, {
-    component: "span",
-    ...rest,
-    style: {
-      display: 'inline-block',
-      width: size,
-      height: size,
-      ...rest.style
-    },
-    children: /*#__PURE__*/_jsx(Box, {
-      component: "svg",
-      ref: svgRef,
-      style: {
-        width: '100%'
-      }
-    })
-  });
-}
-DIDMotif.propTypes = {
-  did: PropTypes.string.isRequired,
-  size: PropTypes.number,
-  animation: PropTypes.bool,
-  // 直接返回 svg 元素, svg 尺寸由父窗口决定 (撑满父窗口)
-  responsive: PropTypes.bool,
-  shape: PropTypes.number
-};
-DIDMotif.defaultProps = {
-  size: 200,
-  animation: false,
-  responsive: false,
-  shape: null
-};
-export default DIDMotif;

package/es/Avatar/etherscan-blockies.js

@@ -1,83 +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/es/Avatar/index.js

@@ -1,179 +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/Box';
-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 {{
- *  did: string;
- *  size?: number;
- *  variant?: 'circle' | 'rounded' | 'default';
- *  animation?: boolean;
- *  shape?: '' | 'rectangle' | 'square' | 'hexagon' | 'circle';
- *  src?: string;
- *  responsive?: boolean;
- * }} AvatarProps
- */
-
-/**
- * Avatar component
- * @see 参考: https://github.com/blocklet/block-explorer/issues/478#issuecomment-1038954976
- * @param {AvatarProps} props
- * @returns {JSX.Element}
- */
-import { jsx as _jsx } from "react/jsx-runtime";
-function Avatar(props) {
-  const [imgError, setImgError] = useState(false);
-  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 /*#__PURE__*/_jsx(Img, {
-      width: size,
-      src: src,
-      alt: did,
-      onError: () => setImgError(true),
-      ...rest,
-      // HACK: 这个 className 是传递给子元素的，所以下面的 sx 需要通过子元素选择器来写样式
-      className: `avatar-img--${variant} ${rest?.className || ''}`,
-      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 /*#__PURE__*/_jsx(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
-        },
-        children: /*#__PURE__*/_jsx("div", {
-          className: "blocky-icon-inner",
-          children: /*#__PURE__*/_jsx(Img, {
-            width: size * 0.7 - padding * 2,
-            src: blockyIcon,
-            alt: did
-          })
-        })
-      });
-    }
-    return /*#__PURE__*/_jsx(Img, {
-      ...rest,
-      width: size,
-      src: blockyIcon,
-      alt: did,
-      style: {
-        marginRight: 4
-      }
-    });
-  }
-  if (did) {
-    // 渲染 did motif
-    return /*#__PURE__*/_jsx(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.isRequired,
-  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
-};
-Avatar.defaultProps = {
-  size: 36,
-  variant: 'default',
-  animation: false,
-  blockiesPadding: true,
-  shape: '',
-  responsive: false
-};
-export default function AvatarWithErrorBoundary(props) {
-  const size = props.size || 36;
-  const borderRadius = {
-    rounded: '4px',
-    circle: '100%'
-  }[props.variant] || 0;
-  return /*#__PURE__*/_jsx(ErrorBoundary
-  // eslint-disable-next-line react/no-unstable-nested-components
-  , {
-    fallbackRender: () => /*#__PURE__*/_jsx(Box, {
-      width: size,
-      height: size,
-      bgcolor: "grey.300",
-      borderRadius: borderRadius
-    }),
-    children: /*#__PURE__*/_jsx(Avatar, {
-      ...props
-    })
-  });
-}
-AvatarWithErrorBoundary.propTypes = Avatar.propTypes;

package/es/Badge/index.js

@@ -1,98 +0,0 @@
-import { forwardRef } from 'react';
-import PropTypes from 'prop-types';
-import Typography from '@mui/material/Typography';
-import colors from '../Colors';
-import { mergeProps } from '../Util';
-import { withDeprecated } from '../Util/deprecate';
-import { styled } from '../Theme';
-import { jsx as _jsx } from "react/jsx-runtime";
-const types = {
-  error: {
-    color: colors.common.white,
-    backgroundColor: colors.error.main
-  },
-  warning: {
-    color: colors.common.white,
-    backgroundColor: colors.warning.main
-  },
-  success: {
-    color: colors.common.white,
-    backgroundColor: colors.success.main
-  },
-  primary: {
-    color: colors.common.white,
-    backgroundColor: colors.primary.main
-  },
-  reverse: {
-    color: colors.common.white,
-    backgroundColor: colors.grey[900]
-  }
-};
-
-/**
- * Badge component to display notification badge
- * @typedef {{
- *   children: import('react').ReactNode;
- *   content?: string;
- *   type?: 'error' | 'warning' | 'success' | 'primary' | 'reverse';
- *   className?: string;
- *   style?: object | string;
- * } & import('@mui/material').TypographyProps } BadgeProps
- */
-
-/**
- * Badge notification component
- * @param {BadgeProps} props
- * @returns {JSX.Element}
- */
-function Badge(props) {
-  const newProps = mergeProps(props, Badge, ['style']);
-  const {
-    type,
-    content,
-    children,
-    style,
-    className,
-    forwardedRef,
-    ...rest
-  } = newProps;
-  const styles = Object.assign(types[type] || types.primary, style);
-  return /*#__PURE__*/_jsx(Span, {
-    ref: forwardedRef,
-    component: "span",
-    className: className,
-    style: styles,
-    ...rest,
-    children: content || children
-  });
-}
-Badge.propTypes = {
-  children: PropTypes.any.isRequired,
-  content: PropTypes.string,
-  type: PropTypes.oneOf(Object.keys(types)),
-  className: PropTypes.string,
-  style: PropTypes.oneOfType([PropTypes.object, PropTypes.string])
-};
-Badge.defaultProps = {
-  type: 'primary',
-  content: '',
-  className: '',
-  style: '{}'
-};
-export default withDeprecated( /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/_jsx(Badge, {
-  ...props,
-  forwardedRef: ref
-})), {
-  name: 'Badge',
-  alternative: '@arcblock/ux/lib/Tag'
-});
-const Span = styled(Typography)`
-  && {
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    padding: 2px 10px;
-    height: 24px;
-    line-height: 24px;
-  }
-`;