@arcblock/ux 2.13.42 → 2.13.44

package/lib/AnimationWaiter/index.d.ts

@@ -42,7 +42,7 @@ declare namespace AnimationWaiter {
     namespace defaultProps {
         let animationData_1: null;
         export { animationData_1 as animationData };
-        let size_1: string;
+        let size_1: number;
         export { size_1 as size };
         let message_1: string;
         export { message_1 as message };

package/lib/AnimationWaiter/index.js

@@ -1,10 +1,10 @@
 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 lottieJson from './default-animation.json';
-import { styled } from '../Theme';
+import { styled, useTheme } from '../Theme';
 
 /**
  * 用于长时间等待的用的动画组件
@@ -35,15 +35,36 @@ export default function AnimationWaiter({
   increaseSpeed,
   ...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;
@@ -108,9 +129,22 @@ export default function AnimationWaiter({
   };
   return /*#__PURE__*/_jsxs(Container, {
     ...rest,
-    children: [/*#__PURE__*/_jsx(Lottie, {
+    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 || lottieJson,
+      animationData: animationData || defaultAnimation,
       play: true,
       speed: currentSpeed,
       style: {
@@ -158,7 +192,7 @@ AnimationWaiter.propTypes = {
 };
 AnimationWaiter.defaultProps = {
   animationData: null,
-  size: '',
+  size: 256,
   message: '',
   messageDuration: 5000,
   messageLoop: true,

package/lib/Footer/index.js

@@ -98,7 +98,9 @@ const Container = styled('div', {
   shouldForwardProp: prop => prop !== 'dark'
 })`
   position: relative;
-  margin-top: 64px;
+  margin-top: ${({
+  theme
+}) => theme.spacing(2)};
   padding: 24px 0 32px;
   border-top: 1px solid ${props => props.theme.palette.divider};
   box-sizing: border-box;

package/lib/Img/index.js

@@ -122,6 +122,7 @@ function Img({
       "data-id": "2",
       ref: ref,
       style: outerStyle,
+      className: "arcblock_ux_img-wrapper",
       ...rest,
       sx: mergeSx({
         [`& .${classes.root}`]: {

package/lib/SessionUser/components/session-user-item.js

@@ -49,6 +49,7 @@ const SessionUserItem = /*#__PURE__*/forwardRef(({
           size: 36
         })
       }), /*#__PURE__*/_jsx(WalletOSIcon, {
+        color: palette.text.secondary,
         loading: sessionItem.__isDefault,
         provider: sessionItem?.extra?.provider,
         walletOS: sessionItem?.extra?.walletOS

package/lib/UserCard/Content/basic.js

@@ -1,5 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Typography, Box, Grid } from '@mui/material';
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+import Grid from '@mui/material/Grid';
+import useTheme from '@mui/material/styles/useTheme';
 import { useCreation, useMemoizedFn } from 'ahooks';
 import styled from '@emotion/styled';
 import isArray from 'lodash/isArray';
@@ -28,6 +31,15 @@ const IconMap = {
 function formatLinkDisplay(link) {
   return withoutProtocol(link);
 }
+
+/**
+ * dark mode 下，转换 icon 颜色
+ */
+function convertIconColor(isDark) {
+  return isDark ? {
+    filter: 'brightness(0) saturate(100%) invert(1)'
+  } : {};
+}
 const iconSize = {
   width: 16,
   height: 16
@@ -38,13 +50,16 @@ const iconSize = {
 function TimeZoneField({
   value
 }) {
+  const theme = useTheme();
+  const isDark = theme.palette.mode === 'dark';
   return /*#__PURE__*/_jsxs(Box, {
     display: "flex",
     alignItems: "center",
     gap: 1,
     className: "user-card__timezone-field",
     children: [/*#__PURE__*/_jsx(TimezoneIcon, {
-      ...iconSize
+      ...iconSize,
+      style: convertIconColor(isDark)
     }), /*#__PURE__*/_jsx(Clock, {
       value: value,
       variant: "body2",
@@ -56,6 +71,8 @@ function LinkField({
   value
 }) {
   const [useFallback, setUseFallback] = useState(false);
+  const theme = useTheme();
+  const isDark = theme.palette.mode === 'dark';
   const faviconUrl = useCreation(() => {
     try {
       const url = new URL(value);
@@ -82,7 +99,8 @@ function LinkField({
       },
       onError: handleImageError
     }) : /*#__PURE__*/_jsx(LinkIcon, {
-      ...iconSize
+      ...iconSize,
+      style: convertIconColor(isDark)
     }), /*#__PURE__*/_jsx(LineText, {
       variant: "body2",
       color: "grey.800",
@@ -109,16 +127,21 @@ function BasicField({
   children
 }) {
   const Icon = IconMap[field];
+  const theme = useTheme();
+  const isDark = theme.palette.mode === 'dark';
+  const iconColor = convertIconColor(isDark);
   return /*#__PURE__*/_jsxs(Box, {
     display: "flex",
     alignItems: "center",
     gap: 1,
     className: `user-card__${field}-field`,
     children: [Icon ? /*#__PURE__*/_jsx(Icon, {
-      ...iconSize
+      ...iconSize,
+      style: iconColor
     }) : /*#__PURE__*/_jsx(IconifyIcon, {
       icon: infoCircleIcon,
-      ...iconSize
+      ...iconSize,
+      ...iconColor
     }), /*#__PURE__*/_jsx(LineText, {
       variant: "body2",
       color: "grey.800",

package/lib/UserCard/Content/tooltip-avatar.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-import { Box, Tooltip } from '@mui/material';
+import { Tooltip } from '@mui/material';
 import Zoom from '@mui/material/Zoom';
 import { renderAvatar } from '../components';
 /**
@@ -17,10 +17,7 @@ function TooltipAvatar({
   avatarProps,
   onAvatarClick
 }) {
-  const avatarElement = /*#__PURE__*/_jsx(Box, {
-    display: "inline-block",
-    children: renderAvatar(user, avatarSize, avatarProps, onAvatarClick, shouldShowHoverCard || !!tooltipTitle)
-  });
+  const avatarElement = renderAvatar(user, avatarSize, avatarProps, onAvatarClick, shouldShowHoverCard || !!tooltipTitle);
   // 使用普通文本Tooltip
   if (tooltipTitle) {
     return /*#__PURE__*/_jsx(Tooltip, {

package/lib/UserCard/components.js

@@ -37,17 +37,21 @@ export const renderAvatar = (user, avatarSize = 48, avatarProps = undefined, onA
   }
 
   // 显示用户头像
-  return /*#__PURE__*/_jsx(Avatar, {
-    size: avatarSize,
-    did: user.did,
-    variant: "circle",
-    style: {
-      cursor: shouldShowHoverCard || onAvatarClick ? 'pointer' : 'default'
-    },
-    onClick: onClick,
-    src: user.avatar,
-    alt: user.fullName || '',
-    ...(avatarProps || {})
+  return /*#__PURE__*/_jsx(Box, {
+    className: "user-card__avatar",
+    display: "flex",
+    children: /*#__PURE__*/_jsx(Avatar, {
+      size: avatarSize,
+      did: user.did,
+      variant: "circle",
+      style: {
+        cursor: shouldShowHoverCard || onAvatarClick ? 'pointer' : 'default'
+      },
+      onClick: onClick,
+      src: user.avatar,
+      alt: user.fullName || '',
+      ...(avatarProps || {})
+    })
   });
 };
 

package/lib/UserCard/index.js

@@ -78,10 +78,12 @@ function UserCard(props) {
         shouldShowHoverCard: false,
         user: user,
         avatarProps: props.popupAvatarProps,
-        shortenLabelProps: props.popupShortenLabelProps,
+        shortenLabelProps: props.popupShortenLabelProps || props.shortenLabelProps,
         renderFields: props.popupRenderFields,
         renderName: props.popupRenderName,
-        infoType: props.popupInfoType || props.infoType
+        infoType: props.popupInfoType || props.infoType,
+        didProps: props.popupDidProps || props.didProps,
+        showDid: props.popupShowDid || props.showDid
       })
     });
   };

package/lib/UserCard/types.d.ts

@@ -99,6 +99,8 @@ export interface UserCardProps {
     showHoverCard?: boolean;
     showDid?: boolean;
     didProps?: Partial<DIDProps>;
+    popupDidProps?: Partial<DIDProps>;
+    popupShowDid?: boolean;
     avatarProps?: Partial<AvatarProps>;
     popupAvatarProps?: Partial<AvatarProps>;
     tooltipProps?: Partial<TooltipProps>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.13.42",
+  "version": "2.13.44",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -71,14 +71,14 @@
     "react": ">=18.2.0",
     "react-router-dom": ">=6.22.3"
   },
-  "gitHead": "30e0b6eaccfe6847ba5404894e8ce76b352053e6",
+  "gitHead": "0ce16241a15426bb4be273eeb7ddaa7aa370ad2e",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.13.42",
-    "@arcblock/nft-display": "^2.13.42",
-    "@arcblock/react-hooks": "^2.13.42",
+    "@arcblock/icons": "^2.13.44",
+    "@arcblock/nft-display": "^2.13.44",
+    "@arcblock/react-hooks": "^2.13.44",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@blocklet/theme": "^2.13.42",
+    "@blocklet/theme": "^2.13.44",
     "@fontsource/roboto": "~5.1.1",
     "@fontsource/ubuntu-mono": "^5.0.18",
     "@iconify-icons/logos": "^1.2.36",