@arcblock/ux 2.13.2 → 2.13.3

package/lib/UserCard/Cards/basic-info.d.ts

@@ -4,7 +4,6 @@ interface BasicCardProps extends UserCardProps {
     shouldShowHoverCard: boolean;
     renderCardContent?: () => React.ReactNode | null;
     isFull?: boolean;
-    avatarProps?: UserCardProps['avatarProps'];
 }
 declare function BasicCard(props: BasicCardProps): import("react/jsx-runtime").JSX.Element;
 export default BasicCard;

package/lib/UserCard/Cards/basic-info.js

@@ -9,16 +9,10 @@ function BasicCard(props) {
   const {
     user,
     avatarSize = 40,
-    showDid = false,
-    didProps = {},
-    shouldShowHoverCard,
-    renderCardContent,
-    renderTopRightContent,
-    topRightMaxWidth = 100,
     renderCustomContent,
     isFull = true,
     infoType = InfoType.Minimal,
-    avatarProps
+    ...rest
   } = props;
   return /*#__PURE__*/_jsxs(Box, {
     display: "flex",
@@ -30,14 +24,8 @@ function BasicCard(props) {
     },
     children: [/*#__PURE__*/_jsx(MinimalContent, {
       user: user,
-      showDid: showDid,
-      didProps: didProps,
       avatarSize: avatarSize,
-      avatarProps: avatarProps,
-      shouldShowHoverCard: shouldShowHoverCard,
-      renderCardContent: renderCardContent,
-      renderTopRightContent: renderTopRightContent,
-      topRightMaxWidth: topRightMaxWidth
+      ...rest
     }), infoType === InfoType.Basic && /*#__PURE__*/_jsx(BasicContent, {
       user: user,
       isFull: isFull

package/lib/UserCard/Container/dialog.js

@@ -21,7 +21,7 @@ function DialogContainer({
       maxWidth: 400,
       minWidth: 320,
       display: 'flex'
-    }, sx),
+    }, sx ? sx : null),
     children: children
   });
 }

package/lib/UserCard/Content/basic.js

@@ -44,7 +44,7 @@ function BasicContent({
       gap: 1,
       children: [/*#__PURE__*/_jsx(TimezoneIcon, {
         ...iconSize
-      }), /*#__PURE__*/_jsx(Typography, {
+      }), /*#__PURE__*/_jsx(LineText, {
         variant: "body2",
         color: "grey.800",
         children: /*#__PURE__*/_jsx(Clock, {
@@ -60,17 +60,9 @@ function BasicContent({
     display: "flex",
     flexDirection: "column",
     gap: 1.5,
-    children: [user.metadata?.bio && /*#__PURE__*/_jsx(Typography, {
+    children: [user.metadata?.bio && /*#__PURE__*/_jsx(LineText, {
       variant: "body2",
       color: "grey.800",
-      sx: {
-        lineHeight: 1.5,
-        display: '-webkit-box',
-        WebkitLineClamp: 1,
-        WebkitBoxOrient: 'vertical',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis'
-      },
       children: user.metadata.bio
     }), /*#__PURE__*/_jsxs(Box, {
       display: "flex",
@@ -82,7 +74,7 @@ function BasicContent({
         gap: 1,
         children: [/*#__PURE__*/_jsx(LinkIcon, {
           ...iconSize
-        }), /*#__PURE__*/_jsx(LinkDiv, {
+        }), /*#__PURE__*/_jsx(LineText, {
           children: /*#__PURE__*/_jsx(Typography, {
             component: "a",
             href: firstLink.url,
@@ -102,7 +94,7 @@ function BasicContent({
         gap: 1,
         children: [/*#__PURE__*/_jsx(LocationIcon, {
           ...iconSize
-        }), /*#__PURE__*/_jsx(Typography, {
+        }), /*#__PURE__*/_jsx(LineText, {
           variant: "body2",
           color: "grey.800",
           children: metadata.location
@@ -113,7 +105,7 @@ function BasicContent({
         gap: 1,
         children: [/*#__PURE__*/_jsx(EmailIcon, {
           ...iconSize
-        }), /*#__PURE__*/_jsx(Typography, {
+        }), /*#__PURE__*/_jsx(LineText, {
           variant: "body2",
           color: "grey.800",
           children: metadata.email || user.email
@@ -123,17 +115,13 @@ function BasicContent({
   });
 }
 export default BasicContent;
-const LinkDiv = styled('span')`
+const LineText = styled(Typography)`
   flex: 1;
-  white-space: nowrap;
+  display: -webkit-box;
+  line-height: 1.5;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
-
-  & > * {
-    word-break: break-all;
-  }
-
-  .status {
-    margin-left: 8px;
-  }
+  word-break: break-word;
 `;

package/lib/UserCard/Content/minimal.d.ts

@@ -1,15 +1,12 @@
 import React from 'react';
-import { User, UserCardProps } from '../types';
-interface MinimalContentProps {
-    user: User;
-    showDid: boolean;
+import { UserCardProps } from '../types';
+interface MinimalContentProps extends UserCardProps {
+    user: UserCardProps['user'];
     avatarSize: number;
     shouldShowHoverCard: boolean;
     renderCardContent?: () => React.ReactNode | null;
-    didProps: Record<string, any>;
-    renderTopRightContent?: () => React.ReactNode;
-    topRightMaxWidth: number;
     avatarProps?: UserCardProps['avatarProps'];
+    shortenLabelProps?: UserCardProps['shortenLabelProps'];
 }
 declare function MinimalContent(props: MinimalContentProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof MinimalContent>;

package/lib/UserCard/Content/minimal.js

@@ -4,6 +4,7 @@ import { Typography, Box } from '@mui/material';
 import DID from '../../DID';
 import TooltipAvatar from './tooltip-avatar';
 import { renderTopRight } from '../components';
+import ShortenLabel from './shorten-label';
 function MinimalContent(props) {
   const {
     user,
@@ -14,7 +15,8 @@ function MinimalContent(props) {
     renderCardContent,
     renderTopRightContent,
     topRightMaxWidth,
-    avatarProps
+    avatarProps,
+    shortenLabelProps
   } = props;
   return /*#__PURE__*/_jsxs(Box, {
     display: "flex",
@@ -43,7 +45,10 @@ function MinimalContent(props) {
           sx: {
             lineHeight: 1.1
           },
-          children: user.fullName || user.email || user.did
+          children: /*#__PURE__*/_jsx(ShortenLabel, {
+            ...shortenLabelProps,
+            children: user.fullName || user.email || user.did
+          })
         }), showDid && user.did ? /*#__PURE__*/_jsx(DID, {
           did: user.did,
           size: 14,

package/lib/UserCard/Content/shorten-label.d.ts

@@ -0,0 +1,9 @@
+import { TypographyProps } from '@mui/material';
+export interface ShortenLabelProps {
+    children: string;
+    maxLength?: number;
+    sx?: TypographyProps['sx'];
+    hiddenTip?: boolean;
+}
+declare function ShortenLabel({ children, maxLength, sx, hiddenTip }: ShortenLabelProps): import("react/jsx-runtime").JSX.Element;
+export default ShortenLabel;

package/lib/UserCard/Content/shorten-label.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tooltip, Typography } from '@mui/material';
+import { useMemo } from 'react';
+function shortenString(str, maxLength = 10) {
+  if (!str) return '';
+  if (str.length <= maxLength) return str;
+  return `${str.slice(0, maxLength - 1)}...${str.slice(-2)}`;
+}
+function ShortenLabel({
+  children,
+  maxLength = 10,
+  sx = undefined,
+  hiddenTip = false
+}) {
+  const shortenedText = useMemo(() => shortenString(children, maxLength), [children, maxLength]);
+  if (children?.length <= maxLength) {
+    return /*#__PURE__*/_jsx(Typography, {
+      sx: sx,
+      children: children
+    });
+  }
+  if (hiddenTip) {
+    return /*#__PURE__*/_jsx(Typography, {
+      sx: sx,
+      children: shortenedText
+    });
+  }
+  return /*#__PURE__*/_jsx(Tooltip, {
+    title: children,
+    placement: "top",
+    children: /*#__PURE__*/_jsx(Typography, {
+      sx: sx,
+      children: shortenedText
+    })
+  });
+}
+export default ShortenLabel;

package/lib/UserCard/components.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { UserCardProps } from './types';
 export declare const renderAvatar: (user: UserCardProps["user"], avatarSize?: number, avatarProps?: UserCardProps["avatarProps"]) => import("react/jsx-runtime").JSX.Element;
-export declare const renderTopRight: (renderTopRightContent: (() => React.ReactNode) | undefined, topRightMaxWidth: number) => import("react/jsx-runtime").JSX.Element | null;
+export declare const renderTopRight: (renderTopRightContent: (() => React.ReactNode) | undefined, topRightMaxWidth?: number) => import("react/jsx-runtime").JSX.Element | null;

package/lib/UserCard/components.js

@@ -37,7 +37,7 @@ export const renderAvatar = (user, avatarSize = 48, avatarProps = undefined) =>
 };
 
 // 渲染右上角内容
-export const renderTopRight = (renderTopRightContent, topRightMaxWidth) => {
+export const renderTopRight = (renderTopRightContent, topRightMaxWidth = 120) => {
   if (renderTopRightContent) {
     return /*#__PURE__*/_jsx(Box, {
       sx: {

package/lib/UserCard/index.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { useRef } from 'react';
+import { useRef } from 'react';
 import { CardType } from './types';
 import AvatarOnlyCard from './Cards/avatar-only';
 import DetailedCard from './Cards';
@@ -40,12 +40,14 @@ function UserCard(props) {
   // 渲染卡片内容（用于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,
-        avatarProps: _avatarProps
+        avatarProps: _avatarProps,
+        shortenLabelProps: _shortenLabelProps
       })
     });
   };

package/lib/UserCard/types.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import { SxProps, Theme, TooltipProps } from '@mui/material';
 import { DIDProps } from '../DID';
 import { AvatarProps } from '../Avatar';
+import { ShortenLabelProps } from './Content/shorten-label';
 type UserPublicInfo = {
     avatar: string;
     did: string;
@@ -97,12 +98,14 @@ export interface UserCardProps {
     avatarSize?: number;
     showHoverCard?: boolean;
     showDid?: boolean;
-    didProps?: DIDProps;
+    didProps?: Partial<DIDProps>;
     avatarProps?: Partial<AvatarProps>;
     popupAvatarProps?: Partial<AvatarProps>;
     tooltipProps?: Omit<TooltipProps, 'title'>;
     sx?: SxProps<Theme>;
     popupSx?: SxProps<Theme>;
+    shortenLabelProps?: Partial<ShortenLabelProps>;
+    popupShortenLabelProps?: Partial<ShortenLabelProps>;
     renderTopRightContent?: () => React.ReactNode;
     topRightMaxWidth?: number;
     renderCustomContent?: () => React.ReactNode;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.13.2",
+  "version": "2.13.3",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -70,12 +70,12 @@
     "react": ">=18.2.0",
     "react-router-dom": ">=6.22.3"
   },
-  "gitHead": "20a687d035cac39b37ddcbbc478afc416efe2877",
+  "gitHead": "22439fa4a1d2b412279cbb61eadb1981f62dc7a5",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.13.2",
-    "@arcblock/nft-display": "^2.13.2",
-    "@arcblock/react-hooks": "^2.13.2",
+    "@arcblock/icons": "^2.13.3",
+    "@arcblock/nft-display": "^2.13.3",
+    "@arcblock/react-hooks": "^2.13.3",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@fontsource/roboto": "~5.1.1",
     "@fontsource/ubuntu-mono": "^5.0.18",

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

@@ -1,7 +1,6 @@
 import React from 'react';
 import { Box } from '@mui/material';
 import { InfoType, UserCardProps } from '../types';
-import LeftLayout from '../Content/left-layout';
 import MinimalContent from '../Content/minimal';
 import BasicContent from '../Content/basic';
 
@@ -9,39 +8,15 @@ interface BasicCardProps extends UserCardProps {
   shouldShowHoverCard: boolean;
   renderCardContent?: () => React.ReactNode | null;
   isFull?: boolean;
-  avatarProps?: UserCardProps['avatarProps'];
 }
 
 // 详细卡片模式下的Basic渲染组件
 function BasicCard(props: BasicCardProps) {
-  const {
-    user,
-    avatarSize = 40,
-    showDid = false,
-    didProps = {},
-    shouldShowHoverCard,
-    renderCardContent,
-    renderTopRightContent,
-    topRightMaxWidth = 100,
-    renderCustomContent,
-    isFull = true,
-    infoType = InfoType.Minimal,
-    avatarProps,
-  } = props;
+  const { user, avatarSize = 40, renderCustomContent, isFull = true, infoType = InfoType.Minimal, ...rest } = props;
 
   return (
     <Box display="flex" flexDirection="column" width="100%" sx={{ flex: 1, minWidth: 0 }}>
-      <MinimalContent
-        user={user}
-        showDid={showDid}
-        didProps={didProps}
-        avatarSize={avatarSize}
-        avatarProps={avatarProps}
-        shouldShowHoverCard={shouldShowHoverCard}
-        renderCardContent={renderCardContent}
-        renderTopRightContent={renderTopRightContent}
-        topRightMaxWidth={topRightMaxWidth}
-      />
+      <MinimalContent user={user} avatarSize={avatarSize} {...rest} />
 
       {infoType === InfoType.Basic && <BasicContent user={user} isFull={isFull} />}
       {renderCustomContent && <Box sx={{ mt: 1.5 }}>{renderCustomContent()}</Box>}

package/src/UserCard/Container/dialog.tsx

@@ -27,7 +27,7 @@ function DialogContainer({ children, sx }: DialogContainerProps) {
           minWidth: 320,
           display: 'flex',
         },
-        sx as SxProps
+        sx ? (sx as SxProps) : null
       )}>
       {children}
     </Box>

package/src/UserCard/Content/basic.tsx

@@ -48,9 +48,9 @@ function BasicContent({ user, isFull = false }: BasicContentProps) {
     return metadata.timezone ? (
       <Box display="flex" alignItems="center" gap={1}>
         <TimezoneIcon {...iconSize} />
-        <Typography variant="body2" color="grey.800">
+        <LineText variant="body2" color="grey.800">
           <Clock value={metadata.timezone} variant="body2" color="grey.800" />
-        </Typography>
+        </LineText>
       </Box>
     ) : null;
   };
@@ -58,26 +58,16 @@ function BasicContent({ user, isFull = false }: BasicContentProps) {
   return (
     <Box mt={1} display="flex" flexDirection="column" gap={1.5}>
       {user.metadata?.bio && (
-        <Typography
-          variant="body2"
-          color="grey.800"
-          sx={{
-            lineHeight: 1.5,
-            display: '-webkit-box',
-            WebkitLineClamp: 1,
-            WebkitBoxOrient: 'vertical',
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-          }}>
+        <LineText variant="body2" color="grey.800">
           {user.metadata.bio}
-        </Typography>
+        </LineText>
       )}
       <Box display="flex" flexDirection="column" gap={0.5}>
         {/* 显示第一个链接（如果有） */}
         {firstLink && (
           <Box display="flex" alignItems="center" gap={1}>
             <LinkIcon {...iconSize} />
-            <LinkDiv>
+            <LineText>
               <Typography
                 component="a"
                 href={firstLink.url}
@@ -88,15 +78,15 @@ function BasicContent({ user, isFull = false }: BasicContentProps) {
                 rel="noopener noreferrer">
                 {formatLinkDisplay(firstLink.url)}
               </Typography>
-            </LinkDiv>
+            </LineText>
           </Box>
         )}
         {metadata.location && (
           <Box display="flex" alignItems="center" gap={1}>
             <LocationIcon {...iconSize} />
-            <Typography variant="body2" color="grey.800">
+            <LineText variant="body2" color="grey.800">
               {metadata.location}
-            </Typography>
+            </LineText>
           </Box>
         )}
 
@@ -106,9 +96,9 @@ function BasicContent({ user, isFull = false }: BasicContentProps) {
         {(metadata.email || user.email) && (
           <Box display="flex" alignItems="center" gap={1}>
             <EmailIcon {...iconSize} />
-            <Typography variant="body2" color="grey.800">
+            <LineText variant="body2" color="grey.800">
               {metadata.email || user.email}
-            </Typography>
+            </LineText>
           </Box>
         )}
       </Box>
@@ -118,17 +108,13 @@ function BasicContent({ user, isFull = false }: BasicContentProps) {
 
 export default BasicContent;
 
-const LinkDiv = styled('span')`
+const LineText = styled(Typography)`
   flex: 1;
-  white-space: nowrap;
+  display: -webkit-box;
+  line-height: 1.5;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
-
-  & > * {
-    word-break: break-all;
-  }
-
-  .status {
-    margin-left: 8px;
-  }
+  word-break: break-word;
 `;

package/src/UserCard/Content/minimal.tsx

@@ -1,20 +1,18 @@
 import React, { memo } from 'react';
 import { Typography, Box } from '@mui/material';
 import DID from '../../DID';
-import { User, UserCardProps } from '../types';
+import { UserCardProps } from '../types';
 import TooltipAvatar from './tooltip-avatar';
 import { renderTopRight } from '../components';
+import ShortenLabel from './shorten-label';
 
-interface MinimalContentProps {
-  user: User;
-  showDid: boolean;
+interface MinimalContentProps extends UserCardProps {
+  user: UserCardProps['user'];
   avatarSize: number;
   shouldShowHoverCard: boolean;
   renderCardContent?: () => React.ReactNode | null;
-  didProps: Record<string, any>;
-  renderTopRightContent?: () => React.ReactNode;
-  topRightMaxWidth: number;
   avatarProps?: UserCardProps['avatarProps'];
+  shortenLabelProps?: UserCardProps['shortenLabelProps'];
 }
 
 function MinimalContent(props: MinimalContentProps) {
@@ -28,6 +26,7 @@ function MinimalContent(props: MinimalContentProps) {
     renderTopRightContent,
     topRightMaxWidth,
     avatarProps,
+    shortenLabelProps,
   } = props;
 
   return (
@@ -48,7 +47,7 @@ function MinimalContent(props: MinimalContentProps) {
             fontSize={18}
             noWrap
             sx={{ lineHeight: 1.1 }}>
-            {user.fullName || user.email || user.did}
+            <ShortenLabel {...shortenLabelProps}>{user.fullName || user.email || user.did}</ShortenLabel>
           </Typography>
 
           {showDid && user.did ? (

package/src/UserCard/Content/shorten-label.tsx

@@ -0,0 +1,32 @@
+import { Tooltip, Typography, TypographyProps } from '@mui/material';
+import { useMemo } from 'react';
+
+function shortenString(str: string | undefined, maxLength: number = 10): string {
+  if (!str) return '';
+  if (str.length <= maxLength) return str;
+  return `${str.slice(0, maxLength - 1)}...${str.slice(-2)}`;
+}
+
+export interface ShortenLabelProps {
+  children: string;
+  maxLength?: number;
+  sx?: TypographyProps['sx'];
+  hiddenTip?: boolean;
+}
+
+function ShortenLabel({ children, maxLength = 10, sx = undefined, hiddenTip = false }: ShortenLabelProps) {
+  const shortenedText = useMemo(() => shortenString(children, maxLength), [children, maxLength]);
+  if (children?.length <= maxLength) {
+    return <Typography sx={sx}>{children}</Typography>;
+  }
+  if (hiddenTip) {
+    return <Typography sx={sx}>{shortenedText}</Typography>;
+  }
+  return (
+    <Tooltip title={children} placement="top">
+      <Typography sx={sx}>{shortenedText}</Typography>
+    </Tooltip>
+  );
+}
+
+export default ShortenLabel;

package/src/UserCard/components.tsx

@@ -48,7 +48,7 @@ export const renderAvatar = (
 // 渲染右上角内容
 export const renderTopRight = (
   renderTopRightContent: (() => React.ReactNode) | undefined,
-  topRightMaxWidth: number
+  topRightMaxWidth: number = 120
 ) => {
   if (renderTopRightContent) {
     return <Box sx={{ maxWidth: topRightMaxWidth }}>{renderTopRightContent()}</Box>;

package/src/UserCard/index.tsx

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import { useRef } from 'react';
 import type { User } from './types';
 import { UserCardProps, CardType } from './types';
 import AvatarOnlyCard from './Cards/avatar-only';
@@ -39,9 +39,15 @@ function UserCard(props: UserCardProps) {
   // 渲染卡片内容（用于Tooltip）
   const renderCardContent = () => {
     const _avatarProps = props.popupAvatarProps || props.avatarProps;
+    const _shortenLabelProps = props.popupShortenLabelProps || props.shortenLabelProps;
     return (
       <DialogContainer sx={props.popupSx}>
-        <DetailedCard {...props} shouldShowHoverCard={false} avatarProps={_avatarProps} />
+        <DetailedCard
+          {...props}
+          shouldShowHoverCard={false}
+          avatarProps={_avatarProps}
+          shortenLabelProps={_shortenLabelProps}
+        />
       </DialogContainer>
     );
   };

package/src/UserCard/types.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import { SxProps, Theme, TooltipProps } from '@mui/material';
 import { DIDProps } from '../DID';
 import { AvatarProps } from '../Avatar';
+import { ShortenLabelProps } from './Content/shorten-label';
 
 type UserPublicInfo = {
   avatar: string;
@@ -114,7 +115,7 @@ export interface UserCardProps {
   avatarSize?: number;
   showHoverCard?: boolean;
   showDid?: boolean;
-  didProps?: DIDProps;
+  didProps?: Partial<DIDProps>;
 
   avatarProps?: Partial<AvatarProps>;
   popupAvatarProps?: Partial<AvatarProps>;
@@ -126,6 +127,10 @@ export interface UserCardProps {
   sx?: SxProps<Theme>;
   popupSx?: SxProps<Theme>;
 
+  // fullName 相关属性
+  shortenLabelProps?: Partial<ShortenLabelProps>;
+  popupShortenLabelProps?: Partial<ShortenLabelProps>;
+
   // 右上角内容相关属性
   renderTopRightContent?: () => React.ReactNode;
   topRightMaxWidth?: number;