@arcblock/ux 2.10.37 → 2.10.39
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.
|
@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import React, { isValidElement } from 'react';
|
|
3
3
|
import Download from '@iconify-icons/tabler/cloud-download';
|
|
4
4
|
import { Icon } from '@iconify/react';
|
|
5
|
-
import { Card,
|
|
5
|
+
import { Card, CircularProgress, Stack, Typography } from '@mui/material';
|
|
6
6
|
import Avatar from '../Avatar';
|
|
7
7
|
import Button from '../Button';
|
|
8
8
|
import { useTheme } from '../Theme';
|
|
@@ -62,66 +62,63 @@ export default function BlockletStore(props) {
|
|
|
62
62
|
return /*#__PURE__*/_jsxs(Card, {
|
|
63
63
|
variant: "outlined",
|
|
64
64
|
sx: {
|
|
65
|
+
p: {
|
|
66
|
+
xs: 2,
|
|
67
|
+
md: 3
|
|
68
|
+
},
|
|
65
69
|
borderRadius: 2
|
|
66
70
|
},
|
|
67
71
|
onClick: handleMainClick,
|
|
68
72
|
...rest,
|
|
69
|
-
children: [/*#__PURE__*/
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
73
|
+
children: [/*#__PURE__*/_jsxs(Stack, {
|
|
74
|
+
flex: 1,
|
|
75
|
+
direction: "row",
|
|
76
|
+
gap: 2,
|
|
77
|
+
alignItems: "center",
|
|
78
|
+
overflow: "hidden",
|
|
79
|
+
children: [/*#__PURE__*/_jsx(Avatar, {
|
|
80
|
+
src: cover,
|
|
81
|
+
did: did,
|
|
82
|
+
size: 40,
|
|
83
|
+
variant: "rounded"
|
|
84
|
+
}), /*#__PURE__*/_jsx(Typography, {
|
|
75
85
|
flex: 1,
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
size: "small",
|
|
99
|
-
disabled: buttonDisabled || buttonLoading,
|
|
86
|
+
sx: {
|
|
87
|
+
fontSize: 16,
|
|
88
|
+
fontWeight: 500,
|
|
89
|
+
textOverflow: 'ellipsis',
|
|
90
|
+
whiteSpace: 'nowrap',
|
|
91
|
+
overflow: 'hidden'
|
|
92
|
+
},
|
|
93
|
+
...titleProps
|
|
94
|
+
}), button || onButtonClick && /*#__PURE__*/_jsxs(Button, {
|
|
95
|
+
color: "reverse",
|
|
96
|
+
variant: "outlined",
|
|
97
|
+
size: "small",
|
|
98
|
+
disabled: buttonDisabled || buttonLoading,
|
|
99
|
+
style: {
|
|
100
|
+
borderColor: theme.palette.grey[300],
|
|
101
|
+
borderRadius: 8,
|
|
102
|
+
fontSize: 13,
|
|
103
|
+
fontWeight: 'typography.fontWeightMedium'
|
|
104
|
+
},
|
|
105
|
+
onClick: handleButtonClick,
|
|
106
|
+
children: [buttonLoading && /*#__PURE__*/_jsx(CircularProgress, {
|
|
107
|
+
size: 15,
|
|
100
108
|
style: {
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
marginRight: 3,
|
|
109
|
-
color: 'inherit'
|
|
110
|
-
}
|
|
111
|
-
}), buttonText]
|
|
112
|
-
})]
|
|
113
|
-
})
|
|
114
|
-
}), /*#__PURE__*/_jsx(CardContent, {
|
|
115
|
-
sx: {
|
|
116
|
-
py: 0
|
|
117
|
-
},
|
|
109
|
+
marginRight: 3,
|
|
110
|
+
color: 'inherit'
|
|
111
|
+
}
|
|
112
|
+
}), buttonText]
|
|
113
|
+
})]
|
|
114
|
+
}), /*#__PURE__*/_jsx(Stack, {
|
|
115
|
+
py: 2,
|
|
118
116
|
children: /*#__PURE__*/_jsx(Typography, {
|
|
119
|
-
component: "div",
|
|
120
117
|
variant: "body2",
|
|
121
118
|
color: "text.secondary",
|
|
122
119
|
sx: {
|
|
123
|
-
lineClamp: 2,
|
|
124
120
|
display: '-webkit-box',
|
|
121
|
+
lineClamp: 2,
|
|
125
122
|
WebkitLineClamp: 2,
|
|
126
123
|
WebkitBoxOrient: 'vertical',
|
|
127
124
|
overflow: 'hidden',
|
|
@@ -129,13 +126,11 @@ export default function BlockletStore(props) {
|
|
|
129
126
|
},
|
|
130
127
|
...descriptionProps
|
|
131
128
|
})
|
|
132
|
-
}), /*#__PURE__*/_jsxs(
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
color: 'grey.800'
|
|
138
|
-
},
|
|
129
|
+
}), /*#__PURE__*/_jsxs(Stack, {
|
|
130
|
+
direction: "row",
|
|
131
|
+
alignItems: "center",
|
|
132
|
+
gap: 2,
|
|
133
|
+
color: "text.secondary",
|
|
139
134
|
children: [/*#__PURE__*/_jsx(IconText, {
|
|
140
135
|
icon: /*#__PURE__*/_jsx(Avatar, {
|
|
141
136
|
src: avatar,
|
package/lib/NFTDisplay/index.js
CHANGED
|
@@ -228,6 +228,13 @@ function NFTDisplay({
|
|
|
228
228
|
const renderObject = () => {
|
|
229
229
|
const objectType = state.urlType || 'image/svg+xml';
|
|
230
230
|
const url = getFullContentUrl();
|
|
231
|
+
|
|
232
|
+
// do naive image render
|
|
233
|
+
const pathname = new URL(url).pathname.toLowerCase();
|
|
234
|
+
const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp', '.svg', '.tiff', '.tif', '.ico', '.jfif', '.pjpeg', '.pjp', '.avif'];
|
|
235
|
+
if (imageExtensions.some(ext => pathname.endsWith(ext))) {
|
|
236
|
+
return renderImg();
|
|
237
|
+
}
|
|
231
238
|
return (
|
|
232
239
|
/*#__PURE__*/
|
|
233
240
|
// eslint-disable-next-line jsx-a11y/alt-text
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@arcblock/ux",
|
|
3
|
-
"version": "2.10.
|
|
3
|
+
"version": "2.10.39",
|
|
4
4
|
"description": "Common used react components for arcblock products",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -53,6 +53,7 @@
|
|
|
53
53
|
"jest": "^29.7.0",
|
|
54
54
|
"jest-environment-jsdom": "^29.7.0",
|
|
55
55
|
"moment-timezone": "^0.5.37",
|
|
56
|
+
"prettier": "^3.3.3",
|
|
56
57
|
"typescript": "5.5.4"
|
|
57
58
|
},
|
|
58
59
|
"peerDependencies": {
|
|
@@ -63,12 +64,12 @@
|
|
|
63
64
|
"react": ">=18.2.0",
|
|
64
65
|
"react-router-dom": ">=6.22.3"
|
|
65
66
|
},
|
|
66
|
-
"gitHead": "
|
|
67
|
+
"gitHead": "e9b7ea36bde7edec3bad5db838b9bfc3c03012a4",
|
|
67
68
|
"dependencies": {
|
|
68
69
|
"@arcblock/did-motif": "^1.1.13",
|
|
69
|
-
"@arcblock/icons": "^2.10.
|
|
70
|
-
"@arcblock/nft-display": "^2.10.
|
|
71
|
-
"@arcblock/react-hooks": "^2.10.
|
|
70
|
+
"@arcblock/icons": "^2.10.39",
|
|
71
|
+
"@arcblock/nft-display": "^2.10.39",
|
|
72
|
+
"@arcblock/react-hooks": "^2.10.39",
|
|
72
73
|
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
|
|
73
74
|
"@fontsource/inter": "^5.0.16",
|
|
74
75
|
"@fontsource/ubuntu-mono": "^5.0.18",
|
|
@@ -2,7 +2,7 @@ import React, { isValidElement } from 'react';
|
|
|
2
2
|
|
|
3
3
|
import Download from '@iconify-icons/tabler/cloud-download';
|
|
4
4
|
import { Icon } from '@iconify/react';
|
|
5
|
-
import { Card,
|
|
5
|
+
import { Card, CircularProgress, Stack, Typography } from '@mui/material';
|
|
6
6
|
import Avatar from '../Avatar';
|
|
7
7
|
import Button from '../Button';
|
|
8
8
|
import { useTheme } from '../Theme';
|
|
@@ -77,40 +77,50 @@ export default function BlockletStore(props: IBlockletStore) {
|
|
|
77
77
|
: { title: strippedString(description), dangerouslySetInnerHTML: { __html: description } };
|
|
78
78
|
|
|
79
79
|
return (
|
|
80
|
-
<Card
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
80
|
+
<Card
|
|
81
|
+
variant="outlined"
|
|
82
|
+
sx={{
|
|
83
|
+
p: {
|
|
84
|
+
xs: 2,
|
|
85
|
+
md: 3,
|
|
86
|
+
},
|
|
87
|
+
borderRadius: 2,
|
|
88
|
+
}}
|
|
89
|
+
onClick={handleMainClick}
|
|
90
|
+
{...rest}>
|
|
91
|
+
<Stack flex={1} direction="row" gap={2} alignItems="center" overflow="hidden">
|
|
92
|
+
<Avatar src={cover} did={did} size={40} variant="rounded" />
|
|
93
|
+
<Typography
|
|
94
|
+
flex={1}
|
|
95
|
+
sx={{ fontSize: 16, fontWeight: 500, textOverflow: 'ellipsis', whiteSpace: 'nowrap', overflow: 'hidden' }}
|
|
96
|
+
{...titleProps}
|
|
97
|
+
/>
|
|
98
|
+
{button ||
|
|
99
|
+
(onButtonClick && (
|
|
100
|
+
<Button
|
|
101
|
+
color="reverse"
|
|
102
|
+
variant="outlined"
|
|
103
|
+
size="small"
|
|
104
|
+
disabled={buttonDisabled || buttonLoading}
|
|
105
|
+
style={{
|
|
106
|
+
borderColor: theme.palette.grey[300],
|
|
107
|
+
borderRadius: 8,
|
|
108
|
+
fontSize: 13,
|
|
109
|
+
fontWeight: 'typography.fontWeightMedium',
|
|
110
|
+
}}
|
|
111
|
+
onClick={handleButtonClick}>
|
|
112
|
+
{buttonLoading && <CircularProgress size={15} style={{ marginRight: 3, color: 'inherit' }} />}
|
|
113
|
+
{buttonText}
|
|
114
|
+
</Button>
|
|
115
|
+
))}
|
|
116
|
+
</Stack>
|
|
117
|
+
<Stack py={2}>
|
|
107
118
|
<Typography
|
|
108
|
-
component="div"
|
|
109
119
|
variant="body2"
|
|
110
120
|
color="text.secondary"
|
|
111
121
|
sx={{
|
|
112
|
-
lineClamp: 2,
|
|
113
122
|
display: '-webkit-box',
|
|
123
|
+
lineClamp: 2,
|
|
114
124
|
WebkitLineClamp: 2,
|
|
115
125
|
WebkitBoxOrient: 'vertical',
|
|
116
126
|
overflow: 'hidden',
|
|
@@ -118,13 +128,13 @@ export default function BlockletStore(props: IBlockletStore) {
|
|
|
118
128
|
}}
|
|
119
129
|
{...descriptionProps}
|
|
120
130
|
/>
|
|
121
|
-
</
|
|
122
|
-
<
|
|
131
|
+
</Stack>
|
|
132
|
+
<Stack direction="row" alignItems="center" gap={2} color="text.secondary">
|
|
123
133
|
<IconText icon={<Avatar src={avatar} did={did} size={20} variant="circle" />}>{author}</IconText>
|
|
124
134
|
<IconText icon={<Icon icon={Download} />} title={download}>
|
|
125
135
|
{formatDownloadCount(download)}
|
|
126
136
|
</IconText>
|
|
127
|
-
</
|
|
137
|
+
</Stack>
|
|
128
138
|
</Card>
|
|
129
139
|
);
|
|
130
140
|
}
|
package/src/NFTDisplay/index.js
CHANGED
|
@@ -201,6 +201,29 @@ function NFTDisplay({
|
|
|
201
201
|
const renderObject = () => {
|
|
202
202
|
const objectType = state.urlType || 'image/svg+xml';
|
|
203
203
|
const url = getFullContentUrl();
|
|
204
|
+
|
|
205
|
+
// do naive image render
|
|
206
|
+
const pathname = new URL(url).pathname.toLowerCase();
|
|
207
|
+
const imageExtensions = [
|
|
208
|
+
'.jpg',
|
|
209
|
+
'.jpeg',
|
|
210
|
+
'.png',
|
|
211
|
+
'.gif',
|
|
212
|
+
'.bmp',
|
|
213
|
+
'.webp',
|
|
214
|
+
'.svg',
|
|
215
|
+
'.tiff',
|
|
216
|
+
'.tif',
|
|
217
|
+
'.ico',
|
|
218
|
+
'.jfif',
|
|
219
|
+
'.pjpeg',
|
|
220
|
+
'.pjp',
|
|
221
|
+
'.avif',
|
|
222
|
+
];
|
|
223
|
+
if (imageExtensions.some((ext) => pathname.endsWith(ext))) {
|
|
224
|
+
return renderImg();
|
|
225
|
+
}
|
|
226
|
+
|
|
204
227
|
return (
|
|
205
228
|
// eslint-disable-next-line jsx-a11y/alt-text
|
|
206
229
|
<object
|