@arcblock/ux 2.13.69 → 3.0.0

package/lib/AnimationWaiter/index.d.ts

@@ -1,3 +1,4 @@
+import { default as PropTypes } from 'prop-types';
 /**
  * 用于长时间等待的用的动画组件
  * 动画会随着时间的变化而逐步加快播放速度，好适应用户的等待心理
@@ -17,10 +18,10 @@
 declare function AnimationWaiter({ animationData, size, message, messageDuration, messageLoop, tips, tipsDuration, maybeDuration, speed, increaseSpeed, ...rest }: {
     animationData?: object | undefined;
     size?: string | number | undefined;
-    message?: string | import("react").ReactNode[] | undefined;
+    message?: string | import('react').ReactNode[] | undefined;
     messageDuration?: number | undefined;
     messageLoop?: boolean | undefined;
-    tips?: import("react").ReactNode[] | undefined;
+    tips?: import('react').ReactNode[] | undefined;
     tipsDuration?: number | undefined;
     speed?: number | undefined;
     maybeDuration?: number | undefined;
@@ -39,28 +40,5 @@ declare namespace AnimationWaiter {
         let maybeDuration: PropTypes.Requireable<number>;
         let increaseSpeed: PropTypes.Requireable<number>;
     }
-    namespace defaultProps {
-        let animationData_1: null;
-        export { animationData_1 as animationData };
-        let size_1: number;
-        export { size_1 as size };
-        let message_1: string;
-        export { message_1 as message };
-        let messageDuration_1: number;
-        export { messageDuration_1 as messageDuration };
-        let messageLoop_1: boolean;
-        export { messageLoop_1 as messageLoop };
-        let tips_1: never[];
-        export { tips_1 as tips };
-        let tipsDuration_1: number;
-        export { tipsDuration_1 as tipsDuration };
-        let speed_1: number;
-        export { speed_1 as speed };
-        let maybeDuration_1: number;
-        export { maybeDuration_1 as maybeDuration };
-        let increaseSpeed_1: number;
-        export { increaseSpeed_1 as increaseSpeed };
-    }
 }
 export default AnimationWaiter;
-import PropTypes from 'prop-types';

package/lib/AnimationWaiter/index.js

@@ -1,208 +1,114 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect, useRef } from 'react';
-import { Skeleton } from '@mui/material';
-import PropTypes from 'prop-types';
-import Lottie from 'react-lottie-player';
-import noop from 'lodash/noop';
-import { styled, useTheme } from '../Theme';
-
-/**
- * 用于长时间等待的用的动画组件
- * 动画会随着时间的变化而逐步加快播放速度，好适应用户的等待心理
- * @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,
-  size,
-  message,
-  messageDuration,
-  messageLoop,
-  tips,
-  tipsDuration,
-  maybeDuration,
-  speed,
-  increaseSpeed,
-  ...rest
+import { jsxs as b, jsx as o } from "react/jsx-runtime";
+import { useState as l, useRef as $, useEffect as c } from "react";
+import { useTheme as M, Skeleton as E } from "@mui/material";
+import n from "prop-types";
+import F from "react-lottie-player";
+import P from "lodash/noop";
+import { styled as R } from "../Theme/index.js";
+function W({
+  animationData: m = null,
+  size: s = 256,
+  message: r = "",
+  messageDuration: f = 5e3,
+  messageLoop: T = !0,
+  tips: a = [],
+  tipsDuration: u = 5e3,
+  maybeDuration: v = 12e4,
+  speed: h = 1,
+  increaseSpeed: x = 0,
+  ...I
 }) {
-  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;
-        }
+  const g = M(), [d, N] = l(0), [y, k] = l(h), [w, A] = l(0), [O, S] = l(null), [j, p] = l(!m), C = $((/* @__PURE__ */ new Date()).getTime());
+  Array.isArray(r) || (r = [r]), c(() => {
+    m || (p(!0), (async () => {
+      try {
+        const e = await (g.palette.mode === "dark" ? import("./dark-animation.json.js") : import("./default-animation.json.js"));
+        S(e.default || e), p(!1);
+      } catch (e) {
+        console.error("Failed to load animation:", e), p(!1);
       }
-      setMessageId(msgIndex);
-    }, messageDuration);
-
-    // eslint-disable-next-line consistent-return
+    })());
+  }, [m, g.palette.mode]), c(() => {
+    if (!r)
+      return;
+    let t = 0;
+    const e = setInterval(() => {
+      t++, t >= r.length && (T ? t = 0 : t = r.length - 1), A(t);
+    }, f);
     return () => {
-      clearInterval(timer);
+      clearInterval(e);
     };
-    // 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;
+  }, [r, f]), c(() => {
+    if (!a.length)
+      return P;
+    const t = setTimeout(() => {
+      let e = d + 1;
+      e >= a.length && (e = 0), N(e);
+    }, u);
+    return () => clearTimeout(t);
+  }, [a, u, d]), c(() => {
+    const t = setTimeout(() => {
+      let i = ((/* @__PURE__ */ new Date()).getTime() - C.current) / v;
+      i > 1 && (i = 1);
+      const D = h + x * i;
+      k(D);
+    }, 1e3);
+    return () => clearTimeout(t);
+  }, [y]);
+  const L = (t) => {
+    let e = "message-before";
+    return w === t ? e = "show-message" : w < t && (e = "message-after"), e;
   };
-  return /*#__PURE__*/_jsxs(Container, {
-    ...rest,
-    children: [isLoading ? /*#__PURE__*/_jsx("div", {
-      style: {
-        width: size,
-        height: size,
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center'
-      },
-      children: /*#__PURE__*/_jsx(Skeleton, {
-        variant: "rounded",
-        width: size * 0.4,
-        height: size * 0.4
-      })
-    }) : /*#__PURE__*/_jsx(Lottie, {
-      loop: true,
-      animationData: animationData || defaultAnimation,
-      play: true,
-      speed: currentSpeed,
-      style: {
-        width: size,
-        height: size
+  return /* @__PURE__ */ b(q, { ...I, children: [
+    j ? /* @__PURE__ */ o("div", { style: { width: s, height: s, display: "flex", justifyContent: "center", alignItems: "center" }, children: /* @__PURE__ */ o(E, { variant: "rounded", width: s * 0.4, height: s * 0.4 }) }) : /* @__PURE__ */ o(
+      F,
+      {
+        loop: !0,
+        animationData: m || O,
+        play: !0,
+        speed: y,
+        style: {
+          width: s,
+          height: s
+        }
       }
-    }), 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);
-      })
-    }) : '']
-  });
+    ),
+    r && /* @__PURE__ */ o("div", { className: "waiter-message", children: r.map((t, e) => {
+      const i = L(e);
+      return /* @__PURE__ */ b(
+        "div",
+        {
+          children: [
+            /* @__PURE__ */ o("span", { className: `message-block ${i}`, children: t }),
+            /* @__PURE__ */ o("span", { className: `placeholder-message ${i}`, children: t })
+          ]
+        },
+        e
+      );
+    }) }),
+    a.length ? /* @__PURE__ */ o("div", { className: "waiter-tips-container", children: a.map((t, e) => /* @__PURE__ */ o(
+      "div",
+      {
+        className: `waiter-tips-block ${d === e ? "show-tips" : ""}`,
+        children: t
+      },
+      e
+    )) }) : ""
+  ] });
 }
-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
+W.propTypes = {
+  animationData: n.oneOfType([n.object, n.oneOf([null])]),
+  size: n.oneOfType([n.number, n.string]),
+  message: n.oneOfType([n.string, n.arrayOf(n.node)]),
+  messageDuration: n.number,
+  messageLoop: n.bool,
+  tips: n.arrayOf(n.node),
+  tipsDuration: n.number,
+  speed: n.number,
+  maybeDuration: n.number,
+  increaseSpeed: n.number
 };
-AnimationWaiter.defaultProps = {
-  animationData: null,
-  size: 256,
-  message: '',
-  messageDuration: 5000,
-  messageLoop: true,
-  tips: [],
-  tipsDuration: 5000,
-  speed: 1,
-  maybeDuration: 120000,
-  increaseSpeed: 0
-};
-const Container = styled('div')`
+const q = R("div")`
   display: flex;
   justify-content: center;
   align-items: center;
@@ -271,4 +177,7 @@ const Container = styled('div')`
       }
     }
   }
-`;
+`;
+export {
+  W as default
+};

package/lib/Async/index.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { default as React } from 'react';
 export default function LoadAsyncComponent<T extends React.ComponentType<any>>(importComponent: () => Promise<Record<string, T>>, key?: string, showProgress?: boolean): {
     new (props: React.ComponentProps<T>): {
         componentDidMount(): void;
@@ -29,9 +29,6 @@ export default function LoadAsyncComponent<T extends React.ComponentType<any>>(i
             Component: React.ComponentType<any> | null;
             error: string | null;
         }>;
-        refs: {
-            [key: string]: React.ReactInstance;
-        };
         shouldComponentUpdate?(nextProps: Readonly<React.ComponentProps<T>>, nextState: Readonly<{
             Component: React.ComponentType<any> | null;
             error: string | null;
@@ -60,4 +57,5 @@ export default function LoadAsyncComponent<T extends React.ComponentType<any>>(i
         }>, nextContext: any): void;
     };
     contextType?: React.Context<any> | undefined;
+    propTypes?: any;
 };

package/lib/Async/index.js

@@ -1,38 +1,24 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from 'react';
-import CircularProgress from '@mui/material/CircularProgress';
-export default function LoadAsyncComponent(importComponent, key = 'default', showProgress = true) {
-  class AsyncComponent extends React.Component {
-    constructor(props) {
-      super(props);
-      this.state = {
+import { jsx as e } from "react/jsx-runtime";
+import m from "react";
+import { CircularProgress as p } from "@mui/material";
+function d(r, n = "default", s = !0) {
+  class a extends m.Component {
+    constructor(t) {
+      super(t), 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}`
-      }));
+      r().then((t) => this.setState({ Component: t[n] })).catch((t) => this.setState({ error: `Failed to load async component: ${t.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;
+      const { Component: t, error: o } = this.state;
+      return o || (t ? /* @__PURE__ */ e(t, { ...this.props }) : s ? /* @__PURE__ */ e(p, { color: "primary" }) : null);
     }
   }
-  return AsyncComponent;
-}
+  return a;
+}
+export {
+  d as default
+};

package/lib/Avatar/Avatar.stories.d.ts

@@ -0,0 +1,11 @@
+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';
+declare namespace _default {
+    let title: string;
+}
+export default _default;

package/lib/Avatar/did-motif.d.ts

@@ -1,11 +1,12 @@
+import { default as PropTypes } from 'prop-types';
 export default DIDMotif;
 declare function DIDMotif({ did, size, animation, shape, responsive, ...rest }: {
     [x: string]: any;
     did: any;
-    size: any;
-    animation: any;
-    shape: any;
-    responsive: any;
+    size?: number | undefined;
+    animation?: boolean | undefined;
+    shape?: null | undefined;
+    responsive?: boolean | undefined;
 }): import("react/jsx-runtime").JSX.Element;
 declare namespace DIDMotif {
     namespace propTypes {
@@ -15,15 +16,4 @@ declare namespace DIDMotif {
         let responsive: PropTypes.Requireable<boolean>;
         let shape: PropTypes.Requireable<number>;
     }
-    namespace defaultProps {
-        let size_1: number;
-        export { size_1 as size };
-        let animation_1: boolean;
-        export { animation_1 as animation };
-        let responsive_1: boolean;
-        export { responsive_1 as responsive };
-        let shape_1: null;
-        export { shape_1 as shape };
-    }
 }
-import PropTypes from 'prop-types';

package/lib/Avatar/did-motif.js

@@ -1,70 +1,35 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-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,
-  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,
-      className: "arc-avatar-did-motif"
-    });
+import { jsx as n } from "react/jsx-runtime";
+import { useRef as p, useLayoutEffect as c } from "react";
+import o from "prop-types";
+import { update as u } from "@arcblock/did-motif";
+import { Box as s } from "@mui/material";
+function d({ did: i, size: t = 200, animation: l = !1, shape: a = null, responsive: m = !1, ...e }) {
+  const r = p(null);
+  if (c(() => {
+    u(r.current, i, { size: t, animation: l, shape: a });
+  }, [i, t, a]), m) {
+    const f = { ...e.style, width: "100%" };
+    return /* @__PURE__ */ n(s, { component: "svg", ref: r, ...e, style: f, className: "arc-avatar-did-motif" });
   }
-  return /*#__PURE__*/_jsx(Box, {
-    component: "span",
-    ...rest,
-    style: {
-      display: 'inline-block',
-      width: size,
-      height: size,
-      ...rest.style
-    },
-    className: "arc-avatar-did-motif",
-    children: /*#__PURE__*/_jsx(Box, {
-      component: "svg",
-      ref: svgRef,
-      style: {
-        width: '100%'
-      }
-    })
-  });
+  return /* @__PURE__ */ n(
+    s,
+    {
+      component: "span",
+      ...e,
+      style: { display: "inline-block", width: t, height: t, ...e.style },
+      className: "arc-avatar-did-motif",
+      children: /* @__PURE__ */ n(s, { component: "svg", ref: r, style: { width: "100%" } })
+    }
+  );
 }
-DIDMotif.propTypes = {
-  did: PropTypes.string.isRequired,
-  size: PropTypes.number,
-  animation: PropTypes.bool,
+d.propTypes = {
+  did: o.string.isRequired,
+  size: o.number,
+  animation: o.bool,
   // 直接返回 svg 元素, svg 尺寸由父窗口决定 (撑满父窗口)
-  responsive: PropTypes.bool,
-  shape: PropTypes.number
+  responsive: o.bool,
+  shape: o.number
 };
-DIDMotif.defaultProps = {
-  size: 200,
-  animation: false,
-  responsive: false,
-  shape: null
+export {
+  d as default
 };
-export default DIDMotif;