@arcblock/ux 2.11.5 → 2.11.6

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.
Files changed (6) hide show
  1. package/lib/BlockletV2/blocklet.d.ts +15 -0
  2. package/lib/BlockletV2/blocklet.js +35 -4
  3. package/lib/BlockletV2/components/icon-text.js +1 -1
  4. package/package.json +5 -5
  5. package/src/BlockletV2/blocklet.tsx +46 -0
  6. package/src/BlockletV2/components/icon-text.tsx +1 -1
package/lib/BlockletV2/blocklet.d.ts CHANGED
@@ -20,5 +20,20 @@ export interface IBlockletStore extends CardProps {
20
20
  onButtonClick?: Function;
21
21
  onMainClick?: Function;
22
22
  className?: string;
23
+ status?: {
24
+ key: string;
25
+ icon: React.ReactNode;
26
+ text: string;
27
+ title?: string;
28
+ maxWidth?: number;
29
+ color?: string;
30
+ align?: 'left' | 'right';
31
+ }[];
32
+ icons?: {
33
+ key: string;
34
+ icon: string | React.ReactElement;
35
+ title: string;
36
+ color?: string;
37
+ }[];
23
38
  }
24
39
  export default function BlockletStore(props: IBlockletStore): import("react/jsx-runtime").JSX.Element;
package/lib/BlockletV2/blocklet.js CHANGED
@@ -28,6 +28,8 @@ export default function BlockletStore(props) {
28
28
  onMainClick,
29
29
  className,
30
30
  ref,
31
+ icons,
32
+ status,
31
33
  ...rest
32
34
  } = props;
33
35
  const theme = useTheme();
@@ -108,13 +110,13 @@ export default function BlockletStore(props) {
108
110
  }
109
111
  },
110
112
  ...titleProps
111
- }), /*#__PURE__*/_jsx(Box, {
113
+ }), /*#__PURE__*/_jsxs(Box, {
112
114
  flex: 1,
113
115
  display: "flex",
114
116
  alignItems: "center",
115
117
  justifyContent: "flex-start",
116
118
  gap: 1,
117
- children: official && /*#__PURE__*/_jsx(TooltipIcon, {
119
+ children: [official && /*#__PURE__*/_jsx(TooltipIcon, {
118
120
  title: official.tooltip,
119
121
  children: /*#__PURE__*/_jsx(VerifiedIcon, {
120
122
  sx: {
@@ -122,7 +124,15 @@ export default function BlockletStore(props) {
122
124
  fontSize: official.size || 18
123
125
  }
124
126
  })
125
- })
127
+ }), icons?.map(item => /*#__PURE__*/_jsx(TooltipIcon, {
128
+ title: item.title,
129
+ children: typeof item.icon === 'string' ? /*#__PURE__*/_jsx(Icon, {
130
+ icon: item.icon,
131
+ style: {
132
+ color: item.color
133
+ }
134
+ }) : item.icon
135
+ }, item.key))]
126
136
  }), button || onButtonClick && /*#__PURE__*/_jsxs(Button, {
127
137
  color: "reverse",
128
138
  variant: "outlined",
@@ -179,7 +189,28 @@ export default function BlockletStore(props) {
179
189
  }),
180
190
  title: download,
181
191
  children: formatDownloadCount(download)
182
- })]
192
+ }), status?.filter(item => item.align !== 'right').map(item => /*#__PURE__*/_jsx(IconText, {
193
+ icon: typeof item.icon === 'string' ? /*#__PURE__*/_jsx(Icon, {
194
+ icon: item.icon
195
+ }) : item.icon,
196
+ title: item.title,
197
+ maxWidth: item.maxWidth,
198
+ children: item.text
199
+ }, item.key)), /*#__PURE__*/_jsx(Box, {
200
+ sx: {
201
+ flex: 1
202
+ }
203
+ }), status?.filter(item => item.align === 'right').map(item => /*#__PURE__*/_jsx(IconText, {
204
+ icon: typeof item.icon === 'string' ? /*#__PURE__*/_jsx(Icon, {
205
+ icon: item.icon
206
+ }) : item.icon,
207
+ title: item.title,
208
+ maxWidth: item.maxWidth,
209
+ sx: {
210
+ color: item.color
211
+ },
212
+ children: item.text
213
+ }, item.key))]
183
214
  })]
184
215
  });
185
216
  }
package/lib/BlockletV2/components/icon-text.js CHANGED
@@ -11,7 +11,7 @@ export default function IconText({
11
11
  return (children === 0 || children) && /*#__PURE__*/_jsxs(Stack, {
12
12
  direction: "row",
13
13
  alignItems: "center",
14
- gap: 1,
14
+ gap: 0.5,
15
15
  sx: [{
16
16
  maxWidth,
17
17
  overflow: 'hidden'
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@arcblock/ux",
3
- "version": "2.11.5",
3
+ "version": "2.11.6",
4
4
  "description": "Common used react components for arcblock products",
5
5
  "keywords": [
6
6
  "react",
@@ -68,12 +68,12 @@
68
68
  "react": ">=18.2.0",
69
69
  "react-router-dom": ">=6.22.3"
70
70
  },
71
- "gitHead": "ad0f1851be1f8ee0f655131ad3734fceb807f9de",
71
+ "gitHead": "ad7d69b1e27a68f7a238a77503afb4581eeb71a8",
72
72
  "dependencies": {
73
73
  "@arcblock/did-motif": "^1.1.13",
74
- "@arcblock/icons": "^2.11.5",
75
- "@arcblock/nft-display": "^2.11.5",
76
- "@arcblock/react-hooks": "^2.11.5",
74
+ "@arcblock/icons": "^2.11.6",
75
+ "@arcblock/nft-display": "^2.11.6",
76
+ "@arcblock/react-hooks": "^2.11.6",
77
77
  "@babel/plugin-syntax-dynamic-import": "^7.8.3",
78
78
  "@fontsource/inter": "^5.0.16",
79
79
  "@fontsource/ubuntu-mono": "^5.0.18",
package/src/BlockletV2/blocklet.tsx CHANGED
@@ -31,6 +31,21 @@ export interface IBlockletStore extends CardProps {
31
31
  onButtonClick?: Function;
32
32
  onMainClick?: Function;
33
33
  className?: string;
34
+ status?: {
35
+ key: string;
36
+ icon: React.ReactNode;
37
+ text: string;
38
+ title?: string;
39
+ maxWidth?: number;
40
+ color?: string;
41
+ align?: 'left' | 'right';
42
+ }[];
43
+ icons?: {
44
+ key: string;
45
+ icon: string | React.ReactElement;
46
+ title: string;
47
+ color?: string;
48
+ }[];
34
49
  }
35
50
 
36
51
  export default function BlockletStore(props: IBlockletStore) {
@@ -51,6 +66,8 @@ export default function BlockletStore(props: IBlockletStore) {
51
66
  onMainClick,
52
67
  className,
53
68
  ref,
69
+ icons,
70
+ status,
54
71
  ...rest
55
72
  } = props;
56
73
 
@@ -110,6 +127,11 @@ export default function BlockletStore(props: IBlockletStore) {
110
127
  <VerifiedIcon sx={{ color: official.color || '#D97706', fontSize: official.size || 18 }} />
111
128
  </TooltipIcon>
112
129
  )}
130
+ {icons?.map((item) => (
131
+ <TooltipIcon key={item.key} title={item.title}>
132
+ {typeof item.icon === 'string' ? <Icon icon={item.icon} style={{ color: item.color }} /> : item.icon}
133
+ </TooltipIcon>
134
+ ))}
113
135
  </Box>
114
136
  {button ||
115
137
  (onButtonClick && (
@@ -153,6 +175,30 @@ export default function BlockletStore(props: IBlockletStore) {
153
175
  <IconText icon={<Icon icon={Download} />} title={download}>
154
176
  {formatDownloadCount(download)}
155
177
  </IconText>
178
+ {status
179
+ ?.filter((item) => item.align !== 'right')
180
+ .map((item) => (
181
+ <IconText
182
+ key={item.key}
183
+ icon={typeof item.icon === 'string' ? <Icon icon={item.icon} /> : item.icon}
184
+ title={item.title}
185
+ maxWidth={item.maxWidth}>
186
+ {item.text}
187
+ </IconText>
188
+ ))}
189
+ <Box sx={{ flex: 1 }} />
190
+ {status
191
+ ?.filter((item) => item.align === 'right')
192
+ .map((item) => (
193
+ <IconText
194
+ key={item.key}
195
+ icon={typeof item.icon === 'string' ? <Icon icon={item.icon} /> : item.icon}
196
+ title={item.title}
197
+ maxWidth={item.maxWidth}
198
+ sx={{ color: item.color }}>
199
+ {item.text}
200
+ </IconText>
201
+ ))}
156
202
  </Stack>
157
203
  </Card>
158
204
  );
package/src/BlockletV2/components/icon-text.tsx CHANGED
@@ -19,7 +19,7 @@ export default function IconText({
19
19
  <Stack
20
20
  direction="row"
21
21
  alignItems="center"
22
- gap={1}
22
+ gap={0.5}
23
23
  sx={[{ maxWidth, overflow: 'hidden' }, ...(Array.isArray(sx) ? sx : [sx])]}>
24
24
  {icon}
25
25
  <Typography