@arcblock/ux 2.13.10 → 2.13.11

package/lib/UserCard/Content/minimal.js

@@ -17,6 +17,7 @@ function MinimalContent(props) {
     topRightMaxWidth,
     avatarProps,
     shortenLabelProps,
+    renderName,
     ...rest
   } = props;
   return /*#__PURE__*/_jsxs(Box, {
@@ -49,7 +50,10 @@ function MinimalContent(props) {
           sx: {
             lineHeight: 1.1
           },
-          children: /*#__PURE__*/_jsx(ShortenLabel, {
+          children: renderName ? renderName(user) : /*#__PURE__*/_jsx(ShortenLabel, {
+            sx: {
+              fontWeight: 500
+            },
             ...shortenLabelProps,
             children: user.fullName || user.email || user.did
           })

package/lib/UserCard/index.js

@@ -38,7 +38,7 @@ function UserCard(props) {
   // 默认规则：AvatarOnly模式下默认显示悬停卡片，Detailed模式下默认不显示
   const shouldShowHoverCard = showHoverCard !== undefined ? showHoverCard : cardType === CardType.AvatarOnly;
   const containerRef = useRef(null);
-  const [user, setUser] = useState(null);
+  const [user, setUser] = useState(() => props.user || null);
   useEffect(() => {
     let isSubscribed = true;
     if (props.user) {
@@ -67,17 +67,16 @@ function UserCard(props) {
   // user 存在，则使用 user 渲染头像
   // 渲染卡片内容（用于Tooltip）
   const renderCardContent = () => {
-    const _avatarProps = props.popupAvatarProps || props.avatarProps;
-    const _shortenLabelProps = props.popupShortenLabelProps || props.shortenLabelProps;
     return /*#__PURE__*/_jsx(DialogContainer, {
       sx: props.popupSx,
       children: /*#__PURE__*/_jsx(DetailedCard, {
         ...props,
         shouldShowHoverCard: false,
         user: user,
-        avatarProps: _avatarProps,
-        shortenLabelProps: _shortenLabelProps,
-        renderFields: props.popupRenderFields
+        avatarProps: props.popupAvatarProps,
+        shortenLabelProps: props.popupShortenLabelProps,
+        renderFields: props.popupRenderFields,
+        renderName: props.popupRenderName
       })
     });
   };

package/lib/UserCard/types.d.ts

@@ -106,6 +106,8 @@ export interface UserCardProps {
     popupSx?: SxProps<Theme>;
     shortenLabelProps?: Partial<ShortenLabelProps>;
     popupShortenLabelProps?: Partial<ShortenLabelProps>;
+    renderName?: (user: User) => React.ReactNode;
+    popupRenderName?: (user: User) => React.ReactNode;
     renderFields?: string[];
     popupRenderFields?: string[];
     renderTopRightContent?: () => React.ReactNode;

package/package.json

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

package/src/UserCard/Content/minimal.tsx

@@ -27,6 +27,7 @@ function MinimalContent(props: MinimalContentProps) {
     topRightMaxWidth,
     avatarProps,
     shortenLabelProps,
+    renderName,
     ...rest
   } = props;
 
@@ -50,7 +51,13 @@ function MinimalContent(props: MinimalContentProps) {
             fontSize={18}
             noWrap
             sx={{ lineHeight: 1.1 }}>
-            <ShortenLabel {...shortenLabelProps}>{user.fullName || user.email || user.did}</ShortenLabel>
+            {renderName ? (
+              renderName(user)
+            ) : (
+              <ShortenLabel sx={{ fontWeight: 500 }} {...shortenLabelProps}>
+                {user.fullName || user.email || user.did}
+              </ShortenLabel>
+            )}
           </Typography>
 
           {showDid && user.did ? (

package/src/UserCard/index.tsx

@@ -38,7 +38,7 @@ function UserCard(props: UserCardProps) {
   const shouldShowHoverCard = showHoverCard !== undefined ? showHoverCard : cardType === CardType.AvatarOnly;
 
   const containerRef = useRef<HTMLDivElement>(null);
-  const [user, setUser] = useState<User | null>(null);
+  const [user, setUser] = useState<User | null>(() => props.user || null);
 
   useEffect(() => {
     let isSubscribed = true;
@@ -64,17 +64,16 @@ function UserCard(props: UserCardProps) {
   // user 存在，则使用 user 渲染头像
   // 渲染卡片内容（用于Tooltip）
   const renderCardContent = () => {
-    const _avatarProps = props.popupAvatarProps || props.avatarProps;
-    const _shortenLabelProps = props.popupShortenLabelProps || props.shortenLabelProps;
     return (
       <DialogContainer sx={props.popupSx}>
         <DetailedCard
           {...props}
           shouldShowHoverCard={false}
           user={user!}
-          avatarProps={_avatarProps}
-          shortenLabelProps={_shortenLabelProps}
+          avatarProps={props.popupAvatarProps}
+          shortenLabelProps={props.popupShortenLabelProps}
           renderFields={props.popupRenderFields}
+          renderName={props.popupRenderName}
         />
       </DialogContainer>
     );

package/src/UserCard/types.ts

@@ -131,6 +131,11 @@ export interface UserCardProps {
   shortenLabelProps?: Partial<ShortenLabelProps>;
   popupShortenLabelProps?: Partial<ShortenLabelProps>;
 
+  // 自定义渲染 name
+  // 如果设置了 renderName，shortenLabelProps 无效
+  renderName?: (user: User) => React.ReactNode;
+  popupRenderName?: (user: User) => React.ReactNode;
+
   // 自定义渲染字段
   renderFields?: string[];
   popupRenderFields?: string[];