@arcblock/ux 2.13.41 → 2.13.43

package/lib/DIDConnect/app-info-item.js

@@ -1,18 +1,29 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, IconButton, Tooltip, useMediaQuery } from '@mui/material';
+import { Box, IconButton, Tooltip } from '@mui/material';
 import CheckIcon from '@iconify-icons/material-symbols/check';
 import { Icon } from '@iconify/react';
+import { useCreation, useSize } from 'ahooks';
+import { useRef } from 'react';
 import DID from '../DID';
 import { mergeSx } from '../Util/style';
 import AppIcon from './app-icon';
+import { DID_CONNECT_MEDIUM_WIDTH } from '../Util/constant';
 export default function AppInfoItem({
   appInfo,
   active = false,
   appLogo = null,
   sx
 }) {
-  const isTinyView = useMediaQuery('(max-width:400px)');
+  const rootRef = useRef(null);
+  const size = useSize(rootRef);
+  const isTinyView = useCreation(() => {
+    if (size) {
+      return size.width < DID_CONNECT_MEDIUM_WIDTH - 50;
+    }
+    return true;
+  }, [size, size?.width]);
   return /*#__PURE__*/_jsxs(Box, {
+    ref: rootRef,
     sx: mergeSx({
       display: 'flex',
       alignItems: 'center',

package/lib/DIDConnect/did-connect-footer.js

@@ -1,17 +1,28 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, useMediaQuery } from '@mui/material';
+import { Box } from '@mui/material';
+import { useCreation, useSize } from 'ahooks';
+import { useRef } from 'react';
 import PoweredBy from './powered-by';
 import AppInfoItem from './app-info-item';
 import AppIcon from './app-icon';
 import { getDIDColor, hexToRgba } from '../Util';
 import { mergeSx } from '../Util/style';
+import { DID_CONNECT_MEDIUM_WIDTH } from '../Util/constant';
 export default function DIDConnectFooter({
   currentAppInfo = globalThis.blocklet,
   currentAppColor = globalThis.blocklet?.appPid ? getDIDColor(globalThis.blocklet?.appPid) : '#fff',
   sx
 }) {
-  const isSmallView = useMediaQuery('(max-width:640px)');
+  const rootRef = useRef(null);
+  const size = useSize(rootRef);
+  const isSmallView = useCreation(() => {
+    if (size) {
+      return size.width < DID_CONNECT_MEDIUM_WIDTH - 50;
+    }
+    return true;
+  }, [size, size?.width]);
   return /*#__PURE__*/_jsxs(Box, {
+    ref: rootRef,
     sx: mergeSx({
       display: 'flex',
       justifyContent: 'space-between',

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/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/lib/Util/constant.d.ts

@@ -34,3 +34,5 @@ export declare const OAUTH_PROVIDER: {
     github: string;
     google: string;
 };
+export declare const DID_CONNECT_SMALL_WIDTH = 360;
+export declare const DID_CONNECT_MEDIUM_WIDTH = 576;

package/lib/Util/constant.js

@@ -42,4 +42,6 @@ export const OAUTH_PROVIDER = {
   apple: 'Apple',
   github: 'Github',
   google: 'Google'
-};
+};
+export const DID_CONNECT_SMALL_WIDTH = 360;
+export const DID_CONNECT_MEDIUM_WIDTH = 576;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.13.41",
+  "version": "2.13.43",
   "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": "333c9629e6d8ec6a25b85baf28ccf1899c135279",
+  "gitHead": "9b65dc9fcef38218cbf4852cb31a1b76afffab33",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.13.41",
-    "@arcblock/nft-display": "^2.13.41",
-    "@arcblock/react-hooks": "^2.13.41",
+    "@arcblock/icons": "^2.13.43",
+    "@arcblock/nft-display": "^2.13.43",
+    "@arcblock/react-hooks": "^2.13.43",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@blocklet/theme": "^2.13.41",
+    "@blocklet/theme": "^2.13.43",
     "@fontsource/roboto": "~5.1.1",
     "@fontsource/ubuntu-mono": "^5.0.18",
     "@iconify-icons/logos": "^1.2.36",

package/src/DIDConnect/app-info-item.tsx

@@ -1,10 +1,13 @@
 import { Box, IconButton, SxProps, Tooltip, useMediaQuery } from '@mui/material';
 import CheckIcon from '@iconify-icons/material-symbols/check';
 import { Icon } from '@iconify/react';
+import { useCreation, useSize } from 'ahooks';
+import { useRef } from 'react';
 
 import DID from '../DID';
 import { mergeSx } from '../Util/style';
 import AppIcon from './app-icon';
+import { DID_CONNECT_MEDIUM_WIDTH } from '../Util/constant';
 
 export default function AppInfoItem({
   appInfo,
@@ -17,10 +20,18 @@ export default function AppInfoItem({
   appLogo?: React.ReactNode;
   sx?: SxProps;
 }) {
-  const isTinyView = useMediaQuery('(max-width:400px)');
+  const rootRef = useRef<HTMLDivElement>(null);
+  const size = useSize(rootRef);
+  const isTinyView = useCreation(() => {
+    if (size) {
+      return size.width < DID_CONNECT_MEDIUM_WIDTH - 50;
+    }
+    return true;
+  }, [size, size?.width]);
 
   return (
     <Box
+      ref={rootRef}
       sx={mergeSx(
         {
           display: 'flex',

package/src/DIDConnect/did-connect-footer.tsx

@@ -1,10 +1,13 @@
-import { Box, SxProps, useMediaQuery } from '@mui/material';
+import { Box, SxProps } from '@mui/material';
+import { useCreation, useSize } from 'ahooks';
+import { useRef } from 'react';
 
 import PoweredBy from './powered-by';
 import AppInfoItem from './app-info-item';
 import AppIcon from './app-icon';
 import { getDIDColor, hexToRgba } from '../Util';
 import { mergeSx } from '../Util/style';
+import { DID_CONNECT_MEDIUM_WIDTH } from '../Util/constant';
 
 export default function DIDConnectFooter({
   currentAppInfo = globalThis.blocklet,
@@ -15,10 +18,18 @@ export default function DIDConnectFooter({
   currentAppColor?: string;
   sx?: SxProps;
 }) {
-  const isSmallView = useMediaQuery('(max-width:640px)');
+  const rootRef = useRef<HTMLDivElement>(null);
+  const size = useSize(rootRef);
+  const isSmallView = useCreation(() => {
+    if (size) {
+      return size.width < DID_CONNECT_MEDIUM_WIDTH - 50;
+    }
+    return true;
+  }, [size, size?.width]);
 
   return (
     <Box
+      ref={rootRef}
       sx={mergeSx(
         {
           display: 'flex',

package/src/Img/index.jsx

@@ -127,6 +127,7 @@ function Img({
       data-id="2"
       ref={ref}
       style={outerStyle}
+      className="arcblock_ux_img-wrapper"
       {...rest}
       sx={mergeSx(
         {

package/src/UserCard/Content/basic.tsx

@@ -1,4 +1,7 @@
-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';
@@ -10,7 +13,7 @@ import LocationIcon from '@arcblock/icons/lib/Location';
 import EmailIcon from '@arcblock/icons/lib/Email';
 import TimezoneIcon from '@arcblock/icons/lib/Timezone';
 import { joinURL, withoutProtocol } from 'ufo';
-import { Fragment, useState, useMemo, useCallback } from 'react';
+import { useState, useMemo, useCallback, cloneElement } from 'react';
 
 import { User } from '../types';
 import Clock from './clock';
@@ -31,6 +34,16 @@ function formatLinkDisplay(link: string): string {
   return withoutProtocol(link);
 }
 
+/**
+ * dark mode 下，转换 icon 颜色
+ */
+function convertIconColor(isDark: boolean) {
+  return isDark
+    ? {
+        filter: 'brightness(0) saturate(100%) invert(1)',
+      }
+    : {};
+}
 const iconSize = {
   width: 16,
   height: 16,
@@ -49,9 +62,11 @@ interface RenderItem {
 }
 
 function TimeZoneField({ value }: { value: string }) {
+  const theme = useTheme();
+  const isDark = theme.palette.mode === 'dark';
   return (
     <Box display="flex" alignItems="center" gap={1} className="user-card__timezone-field">
-      <TimezoneIcon {...iconSize} />
+      <TimezoneIcon {...iconSize} style={convertIconColor(isDark)} />
       <Clock value={value} variant="body2" color="grey.800" />
     </Box>
   );
@@ -59,6 +74,8 @@ function TimeZoneField({ value }: { value: string }) {
 
 function LinkField({ value }: { value: string }) {
   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,7 @@ function LinkField({ value }: { value: string }) {
           onError={handleImageError}
         />
       ) : (
-        <LinkIcon {...iconSize} />
+        <LinkIcon {...iconSize} style={convertIconColor(isDark)} />
       )}
       <LineText variant="body2" color="grey.800">
         <Typography
@@ -102,9 +119,16 @@ function LinkField({ value }: { value: string }) {
 
 function BasicField({ field, value, children }: { field: string; value: string; children?: React.ReactNode }) {
   const Icon = IconMap[field as keyof typeof IconMap];
+  const theme = useTheme();
+  const isDark = theme.palette.mode === 'dark';
+  const iconColor = convertIconColor(isDark);
   return (
     <Box key={field} display="flex" alignItems="center" gap={1} className={`user-card__${field}-field`}>
-      {Icon ? <Icon {...iconSize} /> : <IconifyIcon icon={infoCircleIcon} {...iconSize} />}
+      {Icon ? (
+        <Icon {...iconSize} style={iconColor} />
+      ) : (
+        <IconifyIcon icon={infoCircleIcon} {...iconSize} {...iconColor} />
+      )}
       <LineText variant="body2" color="grey.800">
         {children ?? value}
       </LineText>

package/src/UserCard/Content/tooltip-avatar.tsx

@@ -29,10 +29,12 @@ function TooltipAvatar({
   avatarProps,
   onAvatarClick,
 }: TooltipAvatarProps) {
-  const avatarElement = (
-    <Box display="inline-block">
-      {renderAvatar(user, avatarSize, avatarProps, onAvatarClick, shouldShowHoverCard || !!tooltipTitle)}
-    </Box>
+  const avatarElement = renderAvatar(
+    user,
+    avatarSize,
+    avatarProps,
+    onAvatarClick,
+    shouldShowHoverCard || !!tooltipTitle
   );
   // 使用普通文本Tooltip
   if (tooltipTitle) {

package/src/UserCard/components.tsx

@@ -43,18 +43,20 @@ export const renderAvatar = (
 
   // 显示用户头像
   return (
-    <Avatar
-      size={avatarSize}
-      did={user.did}
-      variant="circle"
-      style={{
-        cursor: shouldShowHoverCard || onAvatarClick ? 'pointer' : 'default',
-      }}
-      onClick={onClick}
-      src={user.avatar}
-      alt={user.fullName || ''}
-      {...(avatarProps || {})}
-    />
+    <Box className="user-card__avatar" display="flex">
+      <Avatar
+        size={avatarSize}
+        did={user.did}
+        variant="circle"
+        style={{
+          cursor: shouldShowHoverCard || onAvatarClick ? 'pointer' : 'default',
+        }}
+        onClick={onClick}
+        src={user.avatar}
+        alt={user.fullName || ''}
+        {...(avatarProps || {})}
+      />
+    </Box>
   );
 };
 

package/src/UserCard/index.tsx

@@ -71,10 +71,12 @@ function UserCard(props: UserCardProps) {
           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}
+          didProps={props.popupDidProps || props.didProps}
+          showDid={props.popupShowDid || props.showDid}
         />
       </DialogContainer>
     );

package/src/UserCard/types.ts

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

package/src/Util/constant.ts

@@ -49,3 +49,6 @@ export const OAUTH_PROVIDER = {
   github: 'Github',
   google: 'Google',
 };
+
+export const DID_CONNECT_SMALL_WIDTH = 360;
+export const DID_CONNECT_MEDIUM_WIDTH = 576;