@arcblock/ux 2.12.73 → 2.12.75

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -131,10 +131,7 @@ export default function LoggedIn({
131
131
  })
132
132
  }), /*#__PURE__*/_jsx(Popper, {
133
133
  open: currentState.open,
134
- anchorEl: popperAnchorRef.current
135
- // @ts-expect-error
136
- ,
137
- dark: dark,
134
+ anchorEl: popperAnchorRef.current,
138
135
  transition: true,
139
136
  placement: "bottom-end",
140
137
  sx: {
@@ -9,7 +9,8 @@ function AvatarOnlyCard(props) {
9
9
  infoType,
10
10
  avatarSize = 48,
11
11
  shouldShowHoverCard = false,
12
- renderCardContent
12
+ renderCardContent,
13
+ ...rest
13
14
  } = props;
14
15
 
15
16
  // 对于NameOnly类型使用普通Tooltip
@@ -19,7 +20,8 @@ function AvatarOnlyCard(props) {
19
20
  avatarSize: avatarSize,
20
21
  shouldShowHoverCard: false,
21
22
  renderCardContent: renderCardContent,
22
- tooltipTitle: user.fullName || user.email || user.did
23
+ tooltipTitle: user.fullName || user.email || user.did,
24
+ ...rest
23
25
  });
24
26
  }
25
27
 
@@ -28,7 +30,8 @@ function AvatarOnlyCard(props) {
28
30
  user: user,
29
31
  avatarSize: avatarSize,
30
32
  shouldShowHoverCard: shouldShowHoverCard,
31
- renderCardContent: renderCardContent
33
+ renderCardContent: renderCardContent,
34
+ ...rest
32
35
  });
33
36
  }
34
37
  export default AvatarOnlyCard;
@@ -28,7 +28,6 @@ function BasicCard(props) {
28
28
  minWidth: 0
29
29
  },
30
30
  children: [/*#__PURE__*/_jsx(MinimalContent, {
31
- infoType: infoType,
32
31
  user: user,
33
32
  showDid: showDid,
34
33
  didProps: didProps,
@@ -1,8 +1,7 @@
1
1
  import React from 'react';
2
- import { InfoType, User } from '../types';
2
+ import { User } from '../types';
3
3
  interface MinimalContentProps {
4
4
  user: User;
5
- infoType: InfoType;
6
5
  showDid: boolean;
7
6
  avatarSize: number;
8
7
  shouldShowHoverCard: boolean;
@@ -12,4 +11,5 @@ interface MinimalContentProps {
12
11
  topRightMaxWidth: number;
13
12
  }
14
13
  declare function MinimalContent(props: MinimalContentProps): import("react/jsx-runtime").JSX.Element;
15
- export default MinimalContent;
14
+ declare const _default: React.MemoExoticComponent<typeof MinimalContent>;
15
+ export default _default;
@@ -1,8 +1,7 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import React from 'react';
2
+ import React, { memo } from 'react';
3
3
  import { Typography, Box } from '@mui/material';
4
4
  import DID from '../../DID';
5
- import { InfoType } from '../types';
6
5
  import TooltipAvatar from './tooltip-avatar';
7
6
  import { renderTopRight } from '../components';
8
7
  function MinimalContent(props) {
@@ -14,8 +13,7 @@ function MinimalContent(props) {
14
13
  shouldShowHoverCard,
15
14
  renderCardContent,
16
15
  renderTopRightContent,
17
- topRightMaxWidth,
18
- infoType = InfoType.NameOnly
16
+ topRightMaxWidth
19
17
  } = props;
20
18
  return /*#__PURE__*/_jsxs(Box, {
21
19
  display: "flex",
@@ -26,10 +24,8 @@ function MinimalContent(props) {
26
24
  justifyContent: "flex-start",
27
25
  alignItems: "center",
28
26
  gap: 2,
29
- sx: {
30
- flex: 1,
31
- minWidth: 0
32
- },
27
+ flex: 1,
28
+ minWidth: 0,
33
29
  children: [/*#__PURE__*/_jsx(TooltipAvatar, {
34
30
  user: user,
35
31
  avatarSize: avatarSize,
@@ -46,16 +42,19 @@ function MinimalContent(props) {
46
42
  lineHeight: 1.1
47
43
  },
48
44
  children: user.fullName || user.email || user.did
49
- }), showDid && user.did && /*#__PURE__*/_jsx(DID, {
45
+ }), showDid && user.did ? /*#__PURE__*/_jsx(DID, {
50
46
  did: user.did,
51
47
  size: 14,
48
+ copyable: true,
49
+ compact: true,
50
+ locale: "en",
52
51
  sx: {
53
52
  lineHeight: 1.5
54
53
  },
55
- ...didProps
56
- })]
54
+ ...(didProps ?? {})
55
+ }) : null]
57
56
  })]
58
57
  }), renderTopRight(renderTopRightContent, topRightMaxWidth)]
59
58
  });
60
59
  }
61
- export default MinimalContent;
60
+ export default /*#__PURE__*/memo(MinimalContent);
@@ -1,15 +1,16 @@
1
1
  import React from 'react';
2
- import { User } from '../types';
2
+ import { UserCardProps } from '../types';
3
3
  interface TooltipAvatarProps {
4
- user: User;
4
+ user: UserCardProps['user'];
5
5
  avatarSize: number;
6
6
  shouldShowHoverCard: boolean;
7
7
  renderCardContent?: () => React.ReactNode | null;
8
8
  tooltipTitle?: string;
9
+ tooltipProps?: UserCardProps['tooltipProps'];
9
10
  }
10
11
  /**
11
12
  * 统一处理头像的Tooltip显示组件
12
13
  * 根据条件显示普通Tooltip、自定义Tooltip内容或无Tooltip的头像
13
14
  */
14
- declare function TooltipAvatar({ user, avatarSize, shouldShowHoverCard, renderCardContent, tooltipTitle }: TooltipAvatarProps): import("react/jsx-runtime").JSX.Element;
15
+ declare function TooltipAvatar({ user, avatarSize, shouldShowHoverCard, renderCardContent, tooltipTitle, tooltipProps, }: TooltipAvatarProps): import("react/jsx-runtime").JSX.Element;
15
16
  export default TooltipAvatar;
@@ -1,6 +1,7 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import React from 'react';
3
3
  import { Box, Tooltip } from '@mui/material';
4
+ import Zoom from '@mui/material/Zoom';
4
5
  import { renderAvatar } from '../components';
5
6
  /**
6
7
  * 统一处理头像的Tooltip显示组件
@@ -11,7 +12,8 @@ function TooltipAvatar({
11
12
  avatarSize,
12
13
  shouldShowHoverCard,
13
14
  renderCardContent,
14
- tooltipTitle
15
+ tooltipTitle,
16
+ tooltipProps
15
17
  }) {
16
18
  // 使用普通文本Tooltip
17
19
  if (tooltipTitle) {
@@ -19,6 +21,7 @@ function TooltipAvatar({
19
21
  enterDelay: 200,
20
22
  title: tooltipTitle,
21
23
  placement: "bottom",
24
+ ...(tooltipProps ?? {}),
22
25
  children: /*#__PURE__*/_jsx("div", {
23
26
  style: {
24
27
  display: 'inline-block'
@@ -35,6 +38,7 @@ function TooltipAvatar({
35
38
  title: renderCardContent ? renderCardContent() : null,
36
39
  placement: "bottom",
37
40
  arrow: false,
41
+ TransitionComponent: Zoom,
38
42
  PopperProps: {
39
43
  sx: {
40
44
  '& .MuiTooltip-tooltip': {
@@ -45,6 +49,7 @@ function TooltipAvatar({
45
49
  }
46
50
  }
47
51
  },
52
+ ...(tooltipProps ?? {}),
48
53
  children: /*#__PURE__*/_jsx(Box, {
49
54
  display: "inline-block",
50
55
  children: renderAvatar(user, avatarSize)
@@ -28,12 +28,8 @@ export function createNameOnlyAvatar(user) {
28
28
  // UserCard组件入口
29
29
  function UserCard(props) {
30
30
  const {
31
- user,
32
31
  cardType = CardType.Detailed,
33
- showHoverCard,
34
- onFollow,
35
- onUnfollow,
36
- followLoading = false
32
+ showHoverCard
37
33
  } = props;
38
34
 
39
35
  // 计算是否显示悬停卡片
@@ -1,4 +1,5 @@
1
1
  import React from 'react';
2
+ import { TooltipProps } from '@mui/material';
2
3
  import { DIDProps } from '../DID';
3
4
  type UserPublicInfo = {
4
5
  avatar: string;
@@ -96,10 +97,7 @@ export interface UserCardProps {
96
97
  showHoverCard?: boolean;
97
98
  showDid?: boolean;
98
99
  didProps?: DIDProps;
99
- isFollowed?: boolean;
100
- onFollow?: (user: User) => void;
101
- onUnfollow?: (user: User) => void;
102
- followLoading?: boolean;
100
+ tooltipProps?: Omit<TooltipProps, 'title'>;
103
101
  renderTopRightContent?: () => React.ReactNode;
104
102
  topRightMaxWidth?: number;
105
103
  renderCustomContent?: () => React.ReactNode;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@arcblock/ux",
3
- "version": "2.12.73",
3
+ "version": "2.12.75",
4
4
  "description": "Common used react components for arcblock products",
5
5
  "keywords": [
6
6
  "react",
@@ -70,12 +70,12 @@
70
70
  "react": ">=18.2.0",
71
71
  "react-router-dom": ">=6.22.3"
72
72
  },
73
- "gitHead": "74e3edd3e04e1c18ac20951cfad0fa06e0743531",
73
+ "gitHead": "a2b7ed36b7b048e27f4de4e6c7360e14f424c7ca",
74
74
  "dependencies": {
75
75
  "@arcblock/did-motif": "^1.1.13",
76
- "@arcblock/icons": "^2.12.73",
77
- "@arcblock/nft-display": "^2.12.73",
78
- "@arcblock/react-hooks": "^2.12.73",
76
+ "@arcblock/icons": "^2.12.75",
77
+ "@arcblock/nft-display": "^2.12.75",
78
+ "@arcblock/react-hooks": "^2.12.75",
79
79
  "@babel/plugin-syntax-dynamic-import": "^7.8.3",
80
80
  "@fontsource/roboto": "~5.1.1",
81
81
  "@fontsource/ubuntu-mono": "^5.0.18",
@@ -159,8 +159,6 @@ export default function LoggedIn({
159
159
  <Popper
160
160
  open={currentState.open}
161
161
  anchorEl={popperAnchorRef.current}
162
- // @ts-expect-error
163
- dark={dark}
164
162
  transition
165
163
  placement="bottom-end"
166
164
  sx={{ zIndex: 1600 }}>
@@ -9,7 +9,7 @@ interface AvatarOnlyCardProps extends UserCardProps {
9
9
 
10
10
  // AvatarOnly卡片组件,处理仅头像模式的渲染
11
11
  function AvatarOnlyCard(props: AvatarOnlyCardProps) {
12
- const { user, infoType, avatarSize = 48, shouldShowHoverCard = false, renderCardContent } = props;
12
+ const { user, infoType, avatarSize = 48, shouldShowHoverCard = false, renderCardContent, ...rest } = props;
13
13
 
14
14
  // 对于NameOnly类型使用普通Tooltip
15
15
  if (infoType === InfoType.NameOnly) {
@@ -20,6 +20,7 @@ function AvatarOnlyCard(props: AvatarOnlyCardProps) {
20
20
  shouldShowHoverCard={false}
21
21
  renderCardContent={renderCardContent}
22
22
  tooltipTitle={user.fullName || user.email || user.did}
23
+ {...rest}
23
24
  />
24
25
  );
25
26
  }
@@ -31,6 +32,7 @@ function AvatarOnlyCard(props: AvatarOnlyCardProps) {
31
32
  avatarSize={avatarSize}
32
33
  shouldShowHoverCard={shouldShowHoverCard}
33
34
  renderCardContent={renderCardContent}
35
+ {...rest}
34
36
  />
35
37
  );
36
38
  }
@@ -30,7 +30,6 @@ function BasicCard(props: BasicCardProps) {
30
30
  return (
31
31
  <Box display="flex" flexDirection="column" width="100%" sx={{ flex: 1, minWidth: 0 }}>
32
32
  <MinimalContent
33
- infoType={infoType}
34
33
  user={user}
35
34
  showDid={showDid}
36
35
  didProps={didProps}
@@ -1,13 +1,12 @@
1
- import React from 'react';
1
+ import React, { memo } from 'react';
2
2
  import { Typography, Box } from '@mui/material';
3
3
  import DID from '../../DID';
4
- import { InfoType, User } from '../types';
4
+ import { User } from '../types';
5
5
  import TooltipAvatar from './tooltip-avatar';
6
6
  import { renderTopRight } from '../components';
7
7
 
8
8
  interface MinimalContentProps {
9
9
  user: User;
10
- infoType: InfoType;
11
10
  showDid: boolean;
12
11
  avatarSize: number;
13
12
  shouldShowHoverCard: boolean;
@@ -27,12 +26,11 @@ function MinimalContent(props: MinimalContentProps) {
27
26
  renderCardContent,
28
27
  renderTopRightContent,
29
28
  topRightMaxWidth,
30
- infoType = InfoType.NameOnly,
31
29
  } = props;
32
30
 
33
31
  return (
34
32
  <Box display="flex" justifyContent="space-between" alignItems="center">
35
- <Box display="flex" justifyContent="flex-start" alignItems="center" gap={2} sx={{ flex: 1, minWidth: 0 }}>
33
+ <Box display="flex" justifyContent="flex-start" alignItems="center" gap={2} flex={1} minWidth={0}>
36
34
  <TooltipAvatar
37
35
  user={user}
38
36
  avatarSize={avatarSize}
@@ -50,11 +48,13 @@ function MinimalContent(props: MinimalContentProps) {
50
48
  {user.fullName || user.email || user.did}
51
49
  </Typography>
52
50
 
53
- {showDid && user.did && <DID did={user.did} size={14} sx={{ lineHeight: 1.5 }} {...didProps} />}
51
+ {showDid && user.did ? (
52
+ <DID did={user.did} size={14} copyable compact locale="en" sx={{ lineHeight: 1.5 }} {...(didProps ?? {})} />
53
+ ) : null}
54
54
  </Box>
55
55
  </Box>
56
56
  {renderTopRight(renderTopRightContent, topRightMaxWidth)}
57
57
  </Box>
58
58
  );
59
59
  }
60
- export default MinimalContent;
60
+ export default memo(MinimalContent);
@@ -1,25 +1,35 @@
1
1
  import React from 'react';
2
2
  import { Box, Tooltip } from '@mui/material';
3
- import { User } from '../types';
3
+
4
+ import Zoom from '@mui/material/Zoom';
5
+ import { UserCardProps } from '../types';
4
6
  import { renderAvatar } from '../components';
5
7
 
6
8
  interface TooltipAvatarProps {
7
- user: User;
9
+ user: UserCardProps['user'];
8
10
  avatarSize: number;
9
11
  shouldShowHoverCard: boolean;
10
12
  renderCardContent?: () => React.ReactNode | null;
11
13
  tooltipTitle?: string;
14
+ tooltipProps?: UserCardProps['tooltipProps'];
12
15
  }
13
16
 
14
17
  /**
15
18
  * 统一处理头像的Tooltip显示组件
16
19
  * 根据条件显示普通Tooltip、自定义Tooltip内容或无Tooltip的头像
17
20
  */
18
- function TooltipAvatar({ user, avatarSize, shouldShowHoverCard, renderCardContent, tooltipTitle }: TooltipAvatarProps) {
21
+ function TooltipAvatar({
22
+ user,
23
+ avatarSize,
24
+ shouldShowHoverCard,
25
+ renderCardContent,
26
+ tooltipTitle,
27
+ tooltipProps,
28
+ }: TooltipAvatarProps) {
19
29
  // 使用普通文本Tooltip
20
30
  if (tooltipTitle) {
21
31
  return (
22
- <Tooltip enterDelay={200} title={tooltipTitle} placement="bottom">
32
+ <Tooltip enterDelay={200} title={tooltipTitle} placement="bottom" {...(tooltipProps ?? {})}>
23
33
  <div style={{ display: 'inline-block' }}>{renderAvatar(user, avatarSize)}</div>
24
34
  </Tooltip>
25
35
  );
@@ -33,6 +43,7 @@ function TooltipAvatar({ user, avatarSize, shouldShowHoverCard, renderCardConten
33
43
  title={renderCardContent ? renderCardContent() : null}
34
44
  placement="bottom"
35
45
  arrow={false}
46
+ TransitionComponent={Zoom}
36
47
  PopperProps={{
37
48
  sx: {
38
49
  '& .MuiTooltip-tooltip': {
@@ -42,7 +53,8 @@ function TooltipAvatar({ user, avatarSize, shouldShowHoverCard, renderCardConten
42
53
  zIndex: 1000,
43
54
  },
44
55
  },
45
- }}>
56
+ }}
57
+ {...(tooltipProps ?? {})}>
46
58
  <Box display="inline-block">{renderAvatar(user, avatarSize)}</Box>
47
59
  </Tooltip>
48
60
  );
@@ -28,7 +28,7 @@ export function createNameOnlyAvatar(user: User) {
28
28
 
29
29
  // UserCard组件入口
30
30
  function UserCard(props: UserCardProps) {
31
- const { user, cardType = CardType.Detailed, showHoverCard, onFollow, onUnfollow, followLoading = false } = props;
31
+ const { cardType = CardType.Detailed, showHoverCard } = props;
32
32
 
33
33
  // 计算是否显示悬停卡片
34
34
  // 默认规则:AvatarOnly模式下默认显示悬停卡片,Detailed模式下默认不显示
@@ -1,4 +1,5 @@
1
1
  import React from 'react';
2
+ import { TooltipProps } from '@mui/material';
2
3
  import { DIDProps } from '../DID';
3
4
 
4
5
  type UserPublicInfo = {
@@ -114,11 +115,8 @@ export interface UserCardProps {
114
115
  showDid?: boolean;
115
116
  didProps?: DIDProps;
116
117
 
117
- // 关注功能相关属性
118
- isFollowed?: boolean;
119
- onFollow?: (user: User) => void;
120
- onUnfollow?: (user: User) => void;
121
- followLoading?: boolean;
118
+ // 弹出层相关属性
119
+ tooltipProps?: Omit<TooltipProps, 'title'>;
122
120
 
123
121
  // 右上角内容相关属性
124
122
  renderTopRightContent?: () => React.ReactNode;