@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.
- package/lib/SessionUser/components/logged-in.js +1 -4
- package/lib/UserCard/Cards/avatar-only.js +6 -3
- package/lib/UserCard/Cards/basic-info.js +0 -1
- package/lib/UserCard/Content/minimal.d.ts +3 -3
- package/lib/UserCard/Content/minimal.js +11 -12
- package/lib/UserCard/Content/tooltip-avatar.d.ts +4 -3
- package/lib/UserCard/Content/tooltip-avatar.js +6 -1
- package/lib/UserCard/index.js +1 -5
- package/lib/UserCard/types.d.ts +2 -4
- package/package.json +5 -5
- package/src/SessionUser/components/logged-in.tsx +0 -2
- package/src/UserCard/Cards/avatar-only.tsx +3 -1
- package/src/UserCard/Cards/basic-info.tsx +0 -1
- package/src/UserCard/Content/minimal.tsx +7 -7
- package/src/UserCard/Content/tooltip-avatar.tsx +17 -5
- package/src/UserCard/index.tsx +1 -1
- package/src/UserCard/types.ts +3 -5
@@ -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;
|
@@ -1,8 +1,7 @@
|
|
1
1
|
import React from 'react';
|
2
|
-
import {
|
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
|
-
|
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
|
-
|
30
|
-
|
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
|
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 {
|
2
|
+
import { UserCardProps } from '../types';
|
3
3
|
interface TooltipAvatarProps {
|
4
|
-
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)
|
package/lib/UserCard/index.js
CHANGED
@@ -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
|
// 计算是否显示悬停卡片
|
package/lib/UserCard/types.d.ts
CHANGED
@@ -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
|
-
|
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.
|
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": "
|
73
|
+
"gitHead": "a2b7ed36b7b048e27f4de4e6c7360e14f424c7ca",
|
74
74
|
"dependencies": {
|
75
75
|
"@arcblock/did-motif": "^1.1.13",
|
76
|
-
"@arcblock/icons": "^2.12.
|
77
|
-
"@arcblock/nft-display": "^2.12.
|
78
|
-
"@arcblock/react-hooks": "^2.12.
|
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",
|
@@ -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
|
}
|
@@ -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 {
|
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}
|
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
|
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
|
-
|
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:
|
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({
|
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
|
);
|
package/src/UserCard/index.tsx
CHANGED
@@ -28,7 +28,7 @@ export function createNameOnlyAvatar(user: User) {
|
|
28
28
|
|
29
29
|
// UserCard组件入口
|
30
30
|
function UserCard(props: UserCardProps) {
|
31
|
-
const {
|
31
|
+
const { cardType = CardType.Detailed, showHoverCard } = props;
|
32
32
|
|
33
33
|
// 计算是否显示悬停卡片
|
34
34
|
// 默认规则:AvatarOnly模式下默认显示悬停卡片,Detailed模式下默认不显示
|
package/src/UserCard/types.ts
CHANGED
@@ -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
|
-
|
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;
|