@arcblock/ux 2.13.7 → 2.13.9

package/lib/UserCard/index.js

@@ -1,10 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { CardType } from './types';
 import AvatarOnlyCard from './Cards/avatar-only';
 import DetailedCard from './Cards';
 import DialogContainer from './Container/dialog';
 import CardContainer from './Container/card';
+import Avatar from '../Avatar';
+import { getUserByDid, isUserDid } from './utils';
 
 // 创建仅显示名称首字母的头像
 export function createNameOnlyAvatar(user) {
@@ -36,7 +38,33 @@ function UserCard(props) {
   // 默认规则：AvatarOnly模式下默认显示悬停卡片，Detailed模式下默认不显示
   const shouldShowHoverCard = showHoverCard !== undefined ? showHoverCard : cardType === CardType.AvatarOnly;
   const containerRef = useRef(null);
+  const [user, setUser] = useState(null);
+  useEffect(() => {
+    let isSubscribed = true;
+    if (props.user) {
+      setUser(props.user);
+    } else if (props.did && isUserDid(props.did) && !props.user) {
+      getUserByDid(props.did).then(_user => {
+        if (isSubscribed) {
+          setUser(_user);
+        }
+      });
+    }
+    return () => {
+      isSubscribed = false;
+    };
+  }, [props.did, props.user]);
 
+  // 如果不存在，则使用 did 渲染头像
+  if (!user) {
+    return /*#__PURE__*/_jsx(Avatar, {
+      did: props.did,
+      size: props.avatarSize,
+      ...props.avatarProps
+    });
+  }
+
+  // user 存在，则使用 user 渲染头像
   // 渲染卡片内容（用于Tooltip）
   const renderCardContent = () => {
     const _avatarProps = props.popupAvatarProps || props.avatarProps;
@@ -46,8 +74,10 @@ function UserCard(props) {
       children: /*#__PURE__*/_jsx(DetailedCard, {
         ...props,
         shouldShowHoverCard: false,
+        user: user,
         avatarProps: _avatarProps,
-        shortenLabelProps: _shortenLabelProps
+        shortenLabelProps: _shortenLabelProps,
+        renderFields: props.popupRenderFields
       })
     });
   };
@@ -57,7 +87,8 @@ function UserCard(props) {
     return /*#__PURE__*/_jsx(AvatarOnlyCard, {
       ...props,
       shouldShowHoverCard: shouldShowHoverCard,
-      renderCardContent: renderCardContent
+      renderCardContent: renderCardContent,
+      user: user
     });
   }
 
@@ -69,7 +100,8 @@ function UserCard(props) {
     children: /*#__PURE__*/_jsx(DetailedCard, {
       ...props,
       shouldShowHoverCard: shouldShowHoverCard,
-      renderCardContent: renderCardContent
+      renderCardContent: renderCardContent,
+      user: user
     })
   });
 }

package/lib/UserCard/types.d.ts

@@ -57,7 +57,6 @@ export type UserAddress = {
     postalCode?: string;
 };
 export type User = UserPublicInfo & {
-    role: string;
     email?: string;
     phone?: string;
     sourceProvider?: string;
@@ -69,7 +68,7 @@ export type User = UserPublicInfo & {
     didSpace?: Record<string, any>;
     connectedAccounts?: any[];
     locale?: string;
-    url: string;
+    url?: string;
     inviter?: string;
     emailVerified?: boolean;
     phoneVerified?: boolean;
@@ -92,7 +91,8 @@ export declare enum InfoType {
     Basic = "Basic"
 }
 export interface UserCardProps {
-    user: User;
+    user?: User;
+    did?: string;
     cardType?: CardType;
     infoType?: InfoType;
     avatarSize?: number;
@@ -101,13 +101,16 @@ export interface UserCardProps {
     didProps?: Partial<DIDProps>;
     avatarProps?: Partial<AvatarProps>;
     popupAvatarProps?: Partial<AvatarProps>;
-    tooltipProps?: Omit<TooltipProps, 'title'>;
+    tooltipProps?: Partial<TooltipProps>;
     sx?: SxProps<Theme>;
     popupSx?: SxProps<Theme>;
     shortenLabelProps?: Partial<ShortenLabelProps>;
     popupShortenLabelProps?: Partial<ShortenLabelProps>;
+    renderFields?: string[];
+    popupRenderFields?: string[];
     renderTopRightContent?: () => React.ReactNode;
     topRightMaxWidth?: number;
     renderCustomContent?: () => React.ReactNode;
+    onAvatarClick?: (user: User, e?: React.MouseEvent<HTMLDivElement>) => void;
 }
 export {};

package/lib/UserCard/utils.d.ts

@@ -1,2 +1,4 @@
 import { User } from './types';
 export declare function createNameOnlyAvatar(user: User): string | null;
+export declare function isUserDid(did: string): boolean;
+export declare function getUserByDid(did: string): Promise<User | null>;

package/lib/UserCard/utils.js

@@ -1,3 +1,14 @@
+import { toTypeInfo } from '@arcblock/did';
+import { types } from '@ocap/mcrypto';
+import { BlockletSDK } from '@blocklet/js-sdk';
+let client = null;
+try {
+  client = new BlockletSDK();
+} catch (error) {
+  console.error('Failed to initialize BlockletSDK:', error);
+  client = null;
+}
+
 // 创建仅显示名称首字母的头像
 // eslint-disable-next-line import/prefer-default-export
 export function createNameOnlyAvatar(user) {
@@ -16,4 +27,26 @@ export function createNameOnlyAvatar(user) {
     content = user.did ? user.did.charAt(0).toUpperCase() : '?';
   }
   return content;
+}
+export function isUserDid(did) {
+  if (!did || typeof did !== 'string') return false;
+  try {
+    const didInfo = toTypeInfo(did);
+    return didInfo.role !== undefined && didInfo.role !== types.RoleType.ROLE_APPLICATION;
+  } catch (error) {
+    console.error('Failed to check if did is user did:', error);
+    return false;
+  }
+}
+export async function getUserByDid(did) {
+  if (!client) return null;
+  try {
+    const user = await client.user.getUserPublicInfo({
+      did
+    });
+    return user;
+  } catch (error) {
+    console.error('Failed to get user by did:', error);
+    return null;
+  }
 }

package/package.json

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

package/src/UserCard/Cards/avatar-only.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
-import { UserCardProps, InfoType } from '../types';
+import { UserCardProps, InfoType, User } from '../types';
 import TooltipAvatar from '../Content/tooltip-avatar';
 
-interface AvatarOnlyCardProps extends UserCardProps {
+interface AvatarOnlyCardProps extends Omit<UserCardProps, 'user'> {
+  user: User;
   renderCardContent: () => React.ReactNode;
   shouldShowHoverCard: boolean;
 }

package/src/UserCard/Cards/basic-info.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
 import { Box } from '@mui/material';
-import { InfoType, UserCardProps } from '../types';
+import { InfoType, UserCardProps, User } from '../types';
 import MinimalContent from '../Content/minimal';
 import BasicContent from '../Content/basic';
 
-interface BasicCardProps extends UserCardProps {
+interface BasicCardProps extends Omit<UserCardProps, 'user'> {
+  user: User;
   shouldShowHoverCard: boolean;
   renderCardContent?: () => React.ReactNode | null;
   isFull?: boolean;
@@ -12,14 +13,25 @@ interface BasicCardProps extends UserCardProps {
 
 // 详细卡片模式下的Basic渲染组件
 function BasicCard(props: BasicCardProps) {
-  const { user, avatarSize = 40, renderCustomContent, isFull = true, infoType = InfoType.Minimal, ...rest } = props;
+  const {
+    user,
+    avatarSize = 40,
+    renderCustomContent,
+    isFull = true,
+    infoType = InfoType.Minimal,
+    renderFields,
+    popupRenderFields,
+    ...rest
+  } = props;
 
   return (
     <Box display="flex" flexDirection="column" width="100%" sx={{ flex: 1, minWidth: 0 }}>
       <MinimalContent user={user} avatarSize={avatarSize} {...rest} />
 
-      {infoType === InfoType.Basic && <BasicContent user={user} isFull={isFull} />}
-      {renderCustomContent && <Box sx={{ mt: 1.5 }}>{renderCustomContent()}</Box>}
+      {infoType === InfoType.Basic && <BasicContent user={user} isFull={isFull} renderFields={renderFields} />}
+      <Box className="user-card__footer">
+        {renderCustomContent && <Box sx={{ mt: 1.5 }}>{renderCustomContent()}</Box>}
+      </Box>
     </Box>
   );
 }

package/src/UserCard/Cards/index.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
-import { UserCardProps, InfoType } from '../types';
+import { UserCardProps, InfoType, User } from '../types';
 import NameOnlyCard from './name-only';
 import BasicCard from './basic-info';
 
-interface DetailedCardProps extends UserCardProps {
+interface DetailedCardProps extends Omit<UserCardProps, 'user'> {
+  user: User;
   shouldShowHoverCard: boolean;
   renderCardContent?: () => React.ReactNode | null;
 }

package/src/UserCard/Cards/name-only.tsx

@@ -1,14 +1,14 @@
 import { Typography } from '@mui/material';
-import { UserCardProps } from '../types';
+import { UserCardProps, User } from '../types';
 import { renderAvatar } from '../components';
 
 // 详细卡片模式下的NameOnly渲染组件
-function NameOnlyCard(props: UserCardProps) {
-  const { user, avatarSize = 48 } = props;
+function NameOnlyCard(props: Omit<UserCardProps, 'user'> & { user: User }) {
+  const { user, avatarSize = 48, onAvatarClick } = props;
 
   return (
     <>
-      {renderAvatar(user, avatarSize, props.avatarProps)}
+      {renderAvatar(user, avatarSize, props.avatarProps, onAvatarClick)}
       <Typography variant="body1">{user.fullName || user.email || user.did}</Typography>
     </>
   );

package/src/UserCard/Container/dialog.tsx

@@ -23,7 +23,7 @@ function DialogContainer({ children, sx }: DialogContainerProps) {
           border: '1px solid',
           borderColor: 'divider',
           borderRadius: 2,
-          maxWidth: 400,
+          maxWidth: 500,
           minWidth: 320,
           display: 'flex',
         },

package/src/UserCard/Content/basic.tsx

@@ -1,15 +1,28 @@
-import { Typography, Box } from '@mui/material';
-import { useCreation } from 'ahooks';
+import { Typography, Box, Grid } from '@mui/material';
+import { useCreation, useMemoizedFn } from 'ahooks';
 import styled from '@emotion/styled';
+import isArray from 'lodash/isArray';
+import { Icon as IconifyIcon } from '@iconify/react';
+import infoCircleIcon from '@iconify-icons/tabler/info-circle';
 import LinkIcon from '@arcblock/icons/lib/Link';
+import PhoneIcon from '@arcblock/icons/lib/Phone';
 import LocationIcon from '@arcblock/icons/lib/Location';
 import EmailIcon from '@arcblock/icons/lib/Email';
 import TimezoneIcon from '@arcblock/icons/lib/Timezone';
-import { withoutProtocol } from 'ufo';
+import { joinURL, withoutProtocol } from 'ufo';
+import { Fragment, useState, useMemo, useCallback } from 'react';
 
 import { User } from '../types';
 import Clock from './clock';
 
+const IconMap = {
+  timezone: TimezoneIcon,
+  email: EmailIcon,
+  phone: PhoneIcon,
+  location: LocationIcon,
+  link: LinkIcon,
+};
+
 /**
  * 格式化链接显示
  * 对于 http/https 协议只显示域名，其他协议显示完整链接
@@ -25,9 +38,89 @@ const iconSize = {
 interface BasicContentProps {
   user: User;
   isFull?: boolean;
+  renderFields?: string[];
+}
+
+// 定义渲染项的类型
+interface RenderItem {
+  field: string;
+  value: string | any;
+  key: string;
+}
+
+function TimeZoneField({ value }: { value: string }) {
+  return (
+    <Box display="flex" alignItems="center" gap={1} className="user-card__timezone-field">
+      <TimezoneIcon {...iconSize} />
+      <Clock value={value} variant="body2" color="grey.800" />
+    </Box>
+  );
 }
 
-function BasicContent({ user, isFull = false }: BasicContentProps) {
+function LinkField({ value }: { value: string }) {
+  const [useFallback, setUseFallback] = useState(false);
+  const faviconUrl = useCreation(() => {
+    try {
+      const url = new URL(value);
+      return joinURL(url.origin, 'favicon.ico');
+    } catch (e) {
+      return '';
+    }
+  }, [value]);
+
+  const handleImageError = () => {
+    setUseFallback(true);
+  };
+
+  return (
+    <Box display="flex" alignItems="center" gap={1} className="user-card__link-field">
+      {faviconUrl && !useFallback ? (
+        <img
+          src={faviconUrl}
+          alt="site icon"
+          style={{ width: 16, height: 16, objectFit: 'contain' }}
+          onError={handleImageError}
+        />
+      ) : (
+        <LinkIcon {...iconSize} />
+      )}
+      <LineText variant="body2" color="grey.800">
+        <Typography
+          component="a"
+          href={value}
+          style={{ textDecoration: 'none', color: 'inherit', fontSize: 'inherit' }}
+          target="_blank"
+          variant="body2"
+          color="grey.800"
+          rel="noopener noreferrer">
+          {formatLinkDisplay(value)}
+        </Typography>
+      </LineText>
+    </Box>
+  );
+}
+
+function BasicField({ field, value, children }: { field: string; value: string; children?: React.ReactNode }) {
+  const Icon = IconMap[field as keyof typeof IconMap];
+  return (
+    <Box key={field} display="flex" alignItems="center" gap={1} className={`user-card__${field}-field`}>
+      {Icon ? <Icon {...iconSize} /> : <IconifyIcon icon={infoCircleIcon} {...iconSize} />}
+      <LineText variant="body2" color="grey.800">
+        {children ?? value}
+      </LineText>
+    </Box>
+  );
+}
+
+function BasicContent({ user, isFull = false, renderFields }: BasicContentProps) {
+  const fields = useCreation(() => {
+    return renderFields ?? ['bio', 'email', 'phone', 'location', 'timezone', 'link'];
+  }, [renderFields]);
+
+  const includeBio = useCreation(() => {
+    return fields.includes('bio');
+  }, [fields]);
+
   const metadata = useCreation(() => {
     return (
       user.metadata ?? {
@@ -41,67 +134,159 @@ function BasicContent({ user, isFull = false }: BasicContentProps) {
     );
   }, [user]);
 
-  // 获取第一个链接（如果有）
-  const firstLink = metadata.links && metadata.links.length > 0 ? metadata.links[0] : null;
+  const address = useCreation(() => {
+    return user.address;
+  }, [user.address]);
 
-  const moreContent = () => {
-    return metadata.timezone ? (
-      <Box display="flex" alignItems="center" gap={1}>
-        <TimezoneIcon {...iconSize} />
-        <LineText variant="body2" color="grey.800">
-          <Clock value={metadata.timezone} variant="body2" color="grey.800" />
-        </LineText>
-      </Box>
-    ) : null;
+  const getFieldValue = useCallback(
+    (field: string) => {
+      if (!field) return '';
+      switch (field) {
+        case 'bio':
+          return user.metadata?.bio || '';
+        case 'email':
+          return metadata.email || user.email || '';
+        case 'phone':
+          return metadata.phone?.phoneNumber || user.phone || '';
+        case 'location':
+          return address?.city || metadata.location || '';
+        case 'timezone':
+          return metadata.timezone || '';
+        case 'link':
+          return metadata.links?.map((link) => link.url).filter(Boolean) || [];
+        default:
+          return user[field as keyof User] || '';
+      }
+    },
+    [user, metadata, address]
+  );
+
+  // 计算实际可见的字段数量和渲染元素数量
+  const { effectiveRenderCount } = useMemo(() => {
+    const visible = fields.filter((field) => {
+      if (field === 'bio') return false; // bio field is handled separately
+      const value = getFieldValue(field);
+
+      if (value === undefined || value === null || value === '') return false;
+
+      if (isArray(value)) {
+        return value.length > 0;
+      }
+
+      return String(value).trim().length > 0;
+    });
+
+    // 计算实际渲染数量
+    const renderCount = visible.reduce((count, field) => {
+      const value = getFieldValue(field);
+      return count + (Array.isArray(value) ? value.filter((item) => item && String(item).trim()).length : 1);
+    }, 0);
+
+    return { visibleFields: visible, effectiveRenderCount: renderCount };
+  }, [fields, getFieldValue]);
+
+  // 判断是否需要使用两列布局
+  const useDoubleColumn = effectiveRenderCount > 4;
+
+  const isValidValue = useMemoizedFn(
+    (value: any) => value !== undefined && value !== null && String(value).trim().length > 0
+  );
+
+  // 准备要渲染的所有元素项
+  const renderItems = useMemo(() => {
+    const items: RenderItem[] = [];
+
+    // 遍历有效字段，展开数组字段为单独的渲染项
+    fields.forEach((field) => {
+      if (field === 'bio') return; // bio field is handled separately
+      const value = getFieldValue(field);
+
+      if (!value) return;
+
+      if (isArray(value)) {
+        // 数组类型字段，每个有效项生成一个渲染元素
+        value.forEach((item, index) => {
+          if (isValidValue(item)) {
+            items.push({
+              field,
+              value: item,
+              key: `${field}-${index}`,
+            });
+          }
+        });
+      } else if (isValidValue(value)) {
+        // 非数组类型字段，生成一个渲染元素
+        items.push({
+          field,
+          value,
+          key: field,
+        });
+      }
+    });
+
+    return items;
+  }, [fields, getFieldValue, isValidValue]);
+
+  if (fields.length === 0) {
+    return null;
+  }
+
+  const renderItem = (item: RenderItem) => {
+    const { field, value, key } = item;
+
+    switch (field) {
+      case 'link':
+        return <LinkField key={key} value={value as string} />;
+      case 'timezone':
+        return <TimeZoneField key={key} value={value as string} />;
+      case 'email':
+        return (
+          <BasicField
+            field={field}
+            value={value as string}
+            // eslint-disable-next-line react/no-children-prop
+            children={
+              <Typography
+                component="a"
+                href={`mailto:${value}`}
+                rel="noopener noreferrer"
+                referrerPolicy="no-referrer"
+                style={{
+                  color: 'inherit',
+                  textDecoration: 'none',
+                  fontSize: 'inherit',
+                }}>
+                {value}
+              </Typography>
+            }
+          />
+        );
+      default:
+        return <BasicField key={key} field={field} value={value as string} />;
+    }
   };
 
   return (
-    <Box mt={1} display="flex" flexDirection="column" gap={1.5}>
-      {user.metadata?.bio && (
-        <LineText variant="body2" color="grey.800">
+    <Box mt={1} display="flex" flexDirection="column" gap={1.5} className="user-card__basic-content">
+      {includeBio && user.metadata?.bio && (
+        <LineText variant="body2" color="grey.800" className="user-card__bio-field">
           {user.metadata.bio}
         </LineText>
       )}
-      <Box display="flex" flexDirection="column" gap={0.5}>
-        {/* 显示第一个链接（如果有） */}
-        {firstLink && (
-          <Box display="flex" alignItems="center" gap={1}>
-            <LinkIcon {...iconSize} />
-            <LineText>
-              <Typography
-                component="a"
-                href={firstLink.url}
-                style={{ textDecoration: 'none' }}
-                target="_blank"
-                variant="body2"
-                color="grey.800"
-                rel="noopener noreferrer">
-                {formatLinkDisplay(firstLink.url)}
-              </Typography>
-            </LineText>
-          </Box>
-        )}
-        {metadata.location && (
-          <Box display="flex" alignItems="center" gap={1}>
-            <LocationIcon {...iconSize} />
-            <LineText variant="body2" color="grey.800">
-              {metadata.location}
-            </LineText>
-          </Box>
-        )}
-
-        {isFull && moreContent()}
-
-        {/* 显示邮箱 */}
-        {(metadata.email || user.email) && (
-          <Box display="flex" alignItems="center" gap={1}>
-            <EmailIcon {...iconSize} />
-            <LineText variant="body2" color="grey.800">
-              {metadata.email || user.email}
-            </LineText>
-          </Box>
-        )}
-      </Box>
+      {/* 其他字段 */}
+      {useDoubleColumn ? (
+        <Grid container spacing={0.5}>
+          {renderItems.map((item) => (
+            <Grid item xs={6} key={item.key}>
+              {renderItem(item)}
+            </Grid>
+          ))}
+        </Grid>
+      ) : (
+        <Box display="flex" flexDirection="column" gap={0.5}>
+          {renderItems.map((item) => renderItem(item))}
+        </Box>
+      )}
     </Box>
   );
 }

package/src/UserCard/Content/clock.tsx

@@ -34,16 +34,17 @@ export default function Clock({ value, ...props }: { value: string; [key: string
   const timeInfo = useClock(value, locale);
 
   return (
-    <Box
-      sx={{
-        whiteSpace: 'nowrap',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-      }}
-      display="flex"
-      alignItems="center"
-      gap={1}>
-      <Typography {...props}>{value}</Typography>
+    <Box display="flex" alignItems="center" gap={1} flex={1} justifyContent="flex-start" overflow="hidden" width="100%">
+      <Typography
+        {...props}
+        noWrap
+        sx={{
+          flex: '0 1 auto',
+          minWidth: 0,
+          ...props.sx,
+        }}>
+        {value}
+      </Typography>
       <Tooltip
         enterDelay={200}
         title={
@@ -53,7 +54,17 @@ export default function Clock({ value, ...props }: { value: string; [key: string
         }
         placement="top"
         arrow>
-        <Typography component="span" fontSize={14}>
+        <Typography
+          component="span"
+          fontSize={14}
+          noWrap
+          sx={{
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            flex: '0 0 auto',
+            maxWidth: '100%',
+          }}>
           ({locale === 'zh' ? `${t(`timezonePhase.${timeInfo.phase}`)} ` : ''}
           {timeInfo.formattedTime})
         </Typography>