@arcblock/ux 2.6.8 → 2.7.0

package/es/AnimationWaiter/index.js

@@ -0,0 +1,239 @@
+import { useState, useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import Lottie from 'react-lottie-player';
+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 () => {};
+    }
+    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

@@ -0,0 +1,38 @@
+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

@@ -0,0 +1,64 @@
+import { useRef, useLayoutEffect } from 'react';
+import PropTypes from 'prop-types';
+import { update } from '@arcblock/did-motif';
+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("svg", {
+      ref: svgRef,
+      ...rest,
+      style: styles
+    });
+  }
+  return /*#__PURE__*/_jsx("span", {
+    ...rest,
+    style: {
+      display: 'inline-block',
+      width: size,
+      height: size,
+      ...rest.style
+    },
+    children: /*#__PURE__*/_jsx("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

@@ -0,0 +1,83 @@
+/* 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

@@ -0,0 +1,176 @@
+/* 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 { styled } from '../Theme';
+import DIDMotif from './did-motif';
+import blockies from './etherscan-blockies';
+
+/**
+ * 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:abt:', '').toLowerCase(),
+        size: 8,
+        scale: 16
+      }).toDataURL();
+    }
+    return null;
+  }, [did]);
+
+  // 如果显式传入 src 则直接使用 src
+  if (src && !imgError) {
+    return /*#__PURE__*/_jsx(StyledImg, {
+      width: size,
+      src: src,
+      alt: did,
+      onError: () => setImgError(true),
+      ...rest,
+      className: `avatar-img--${variant} ${rest.className}`
+    });
+  }
+  // 对于 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(BlockyIconContainer, {
+        $size: size,
+        ...rest,
+        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, {
+      width: size,
+      src: blockyIcon,
+      alt: did,
+      style: {
+        marginRight: 4
+      }
+    });
+  }
+  if (did) {
+    // 渲染 did motif
+    return /*#__PURE__*/_jsx(DIDMotif, {
+      did: did.replace('did:abt:', ''),
+      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
+};
+const BlockyIconContainer = styled('div')`
+  display: flex;
+  align-items: center;
+  width: ${props => props.$size}px;
+  height: ${props => props.$size}px;
+  .blocky-icon-inner {
+    box-sizing: border-box;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: ${props => props.$size}px;
+    height: ${props => props.$size * 0.7}px;
+    border-radius: ${props => Math.min(10, Math.floor(0.1 * props.$size + 2))}px;
+    background: #ddd;
+  }
+`;
+const StyledImg = styled(Img)`
+  &.avatar-img--rounded {
+    border-radius: 4px;
+    overflow: hidden;
+  }
+  &.avatar-img--circle {
+    border-radius: 100%;
+    overflow: hidden;
+  }
+`;
+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

@@ -0,0 +1,98 @@
+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;
+  }
+`;