@blocklet/ui-react 2.9.29 → 2.9.30

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.
@@ -5,18 +5,20 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  module.exports = WrapComponentInstaller;
7
7
  var _jsxRuntime = require("react/jsx-runtime");
8
- var _material = require("@mui/material");
9
- var _react = require("@iconify/react");
10
- var _Colors = require("@arcblock/ux/lib/Colors");
11
8
  var _Session = require("@arcblock/did-connect/lib/Session");
12
- var _react2 = require("react");
9
+ var _Colors = require("@arcblock/ux/lib/Colors");
10
+ var _context = require("@arcblock/ux/lib/Locale/context");
11
+ var _util = require("@arcblock/ux/lib/Locale/util");
13
12
  var _SessionPermission = _interopRequireDefault(require("@arcblock/ux/lib/SessionPermission"));
14
- var _propTypes = _interopRequireDefault(require("prop-types"));
13
+ var _react = require("@iconify/react");
14
+ var _Close = _interopRequireDefault(require("@mui/icons-material/Close"));
15
+ var _material = require("@mui/material");
15
16
  var _ahooks = require("ahooks");
16
- var _util = require("@arcblock/ux/lib/Locale/util");
17
- var _context = require("@arcblock/ux/lib/Locale/context");
18
- var _useComponentInstalled = _interopRequireDefault(require("./use-component-installed"));
17
+ var _propTypes = _interopRequireDefault(require("prop-types"));
18
+ var _react2 = require("react");
19
+ var _installerItem = _interopRequireDefault(require("./installer-item"));
19
20
  var _locales = _interopRequireDefault(require("./locales"));
21
+ var _useComponentInstalled = _interopRequireDefault(require("./use-component-installed"));
20
22
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
21
23
  function ComponentInstaller({
22
24
  warnIcon,
@@ -39,11 +41,8 @@ function ComponentInstaller({
39
41
  });
40
42
  const {
41
43
  installed,
42
- optionalComponent,
43
- installUrl,
44
- storeUrl,
44
+ optComponents,
45
45
  installStatus,
46
- installStatusDone,
47
46
  definedInBlockletYML
48
47
  } = (0, _useComponentInstalled.default)({
49
48
  did,
@@ -51,19 +50,9 @@ function ComponentInstaller({
51
50
  onError
52
51
  });
53
52
  const sessionCtx = (0, _react2.useContext)(_Session.SessionContext);
54
- const handleInstall = () => {
55
- window.open(installUrl, "_blank");
56
- };
57
53
  const handleClose = () => {
58
54
  onClose?.(false);
59
55
  };
60
- const handleOpenStore = () => {
61
- window.open(storeUrl, "_blank");
62
- };
63
- const handleRefresh = () => {
64
- window.location.reload();
65
- };
66
- const size = 60;
67
56
  if (disabled) {
68
57
  return children;
69
58
  }
@@ -83,11 +72,8 @@ function ComponentInstaller({
83
72
  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
84
73
  children: [fallback, children({
85
74
  hasPermission,
86
- optionalComponent,
87
- installStatus,
88
- handleOpenStore,
89
- handleInstall,
90
- handleRefresh
75
+ optComponents,
76
+ installStatus
91
77
  })]
92
78
  });
93
79
  }
@@ -112,7 +98,7 @@ function ComponentInstaller({
112
98
  zIndex: 3e3,
113
99
  borderRadius: 3,
114
100
  width: 400,
115
- maxWidth: 400,
101
+ maxWidth: "90vw",
116
102
  borderColor: _Colors.temp.lineStep,
117
103
  border: "0 !important",
118
104
  fontSize: "14px",
@@ -129,6 +115,7 @@ function ComponentInstaller({
129
115
  padding: "20px 24px",
130
116
  marginLeft: 0,
131
117
  display: "flex",
118
+ alignItems: "center",
132
119
  flexDirection: "row",
133
120
  justifyContent: "flex-start"
134
121
  },
@@ -145,7 +132,16 @@ function ComponentInstaller({
145
132
  fontWeight: "bold"
146
133
  },
147
134
  children: t("componentInstallerTitle")
148
- })]
135
+ }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
136
+ sx: {
137
+ flex: 1
138
+ }
139
+ }), onClose ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.IconButton, {
140
+ variant: "outlined",
141
+ className: "button",
142
+ onClick: handleClose,
143
+ children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_Close.default, {})
144
+ }) : null]
149
145
  }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
150
146
  sx: {
151
147
  width: "100%",
@@ -158,19 +154,6 @@ function ComponentInstaller({
158
154
  marginTop: 0
159
155
  },
160
156
  children: [t("componentInstallerNoDefinedInBlockletYML"), ": ", did]
161
- }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
162
- sx: {
163
- padding: "0px 24px"
164
- },
165
- children: onClose ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
166
- sx: {
167
- marginBottom: 2
168
- },
169
- variant: "outlined",
170
- className: "button",
171
- onClick: handleClose,
172
- children: t("componentInstallerClose")
173
- }) : null
174
157
  })]
175
158
  }) : /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
176
159
  sx: {
@@ -183,6 +166,7 @@ function ComponentInstaller({
183
166
  marginLeft: 0,
184
167
  display: "flex",
185
168
  flexDirection: "row",
169
+ alignItems: "center",
186
170
  justifyContent: "flex-start"
187
171
  },
188
172
  children: [warnIcon || /* @__PURE__ */(0, _jsxRuntime.jsx)(_react.Icon, {
@@ -198,132 +182,36 @@ function ComponentInstaller({
198
182
  fontWeight: "bold"
199
183
  },
200
184
  children: t("componentInstallerTitle")
201
- })]
185
+ }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
186
+ sx: {
187
+ flex: 1
188
+ }
189
+ }), onClose ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.IconButton, {
190
+ variant: "outlined",
191
+ className: "button",
192
+ onClick: handleClose,
193
+ children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_Close.default, {})
194
+ }) : null]
202
195
  }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
203
196
  sx: {
204
197
  width: "100%",
205
198
  height: "1px",
206
199
  backgroundColor: _Colors.temp.gray6
207
200
  }
208
- }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
201
+ }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
209
202
  sx: {
210
- padding: "20px 24px",
211
- paddingTop: 0.5,
212
- marginTop: 2,
213
- display: "flex",
214
- flexDirection: "row",
215
- justifyContent: "start",
216
- alignItems: "flex-start"
203
+ maxHeight: "70vh",
204
+ overflowY: "auto"
217
205
  },
218
- children: [/* @__PURE__ */(0, _jsxRuntime.jsx)("img", {
219
- style: {
220
- width: size,
221
- height: size,
222
- minWidth: size,
223
- minHeight: size
224
- },
225
- src: optionalComponent.logoUrl,
226
- alt: optionalComponent.meta.title
227
- }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
228
- sx: {
229
- display: "flex",
230
- flexDirection: "column",
231
- justifyContent: "start",
232
- alignItems: "start",
233
- marginLeft: 2
234
- },
235
- children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
236
- sx: {
237
- fontSize: "16px",
238
- fontWeight: "bold",
239
- cursor: "pointer",
240
- ".link-icon": {
241
- opacity: 0
242
- },
243
- ":hover .link-icon": {
244
- opacity: 1
245
- }
246
- },
247
- onClick: handleOpenStore,
248
- children: [optionalComponent.meta.title, /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
249
- sx: {
250
- paddingLeft: 1,
251
- fontSize: "13px",
252
- fontWeight: "400"
253
- },
254
- component: "span",
255
- children: [optionalComponent.meta.version, /* @__PURE__ */(0, _jsxRuntime.jsx)(_react.Icon, {
256
- className: "link-icon",
257
- icon: "fluent:open-20-filled",
258
- style: {
259
- color: _Colors.temp.primaryBase,
260
- fontSize: 16,
261
- transform: "translate(6px, 3px)",
262
- transition: "all 0.3s"
263
- }
264
- })]
265
- })]
266
- }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
267
- sx: {
268
- marginTop: 0,
269
- opacity: 0.7
270
- },
271
- children: optionalComponent.meta.description
272
- }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
273
- sx: {
274
- display: hasPermission ? "flex" : "none",
275
- flexDirection: "row",
276
- gap: 1
277
- },
278
- children: [installStatus ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
279
- sx: {
280
- marginTop: 2,
281
- opacity: 0.7
282
- },
283
- children: installStatusDone ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
284
- variant: "contained",
285
- onClick: handleRefresh,
286
- children: t("componentInstallerRefresh")
287
- }, "refresh") : /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
288
- disabled: true,
289
- sx: {
290
- color: "#333"
291
- },
292
- startIcon: /* @__PURE__ */(0, _jsxRuntime.jsx)(_react.Icon, {
293
- icon: "line-md:loading-loop",
294
- style: {
295
- color: "#333",
296
- fontSize: 16
297
- }
298
- }),
299
- variant: "contained",
300
- children: installStatus
301
- }, "status")
302
- }) : /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
303
- sx: {
304
- marginTop: 2
305
- },
306
- variant: "contained",
307
- className: "button",
308
- onClick: handleInstall,
309
- children: t("componentInstallerInstall")
310
- }, "install"), onClose ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
311
- sx: {
312
- marginTop: 2
313
- },
314
- variant: "outlined",
315
- className: "button",
316
- onClick: handleClose,
317
- children: t("componentInstallerClose")
318
- }) : null]
319
- }), installStatusDone ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
320
- sx: {
321
- marginTop: 2,
322
- opacity: 0.7
323
- },
324
- children: t("componentInstallerSuccessInstalled")
325
- }) : null]
326
- })]
206
+ children: optComponents.map((optionalComponent, index) => {
207
+ return /* @__PURE__ */(0, _jsxRuntime.jsx)(_installerItem.default, {
208
+ t,
209
+ hasPermission,
210
+ index,
211
+ optionalComponent,
212
+ installStatus: installStatus[optionalComponent.meta?.did]
213
+ }, optionalComponent.meta?.did || index);
214
+ })
327
215
  }), hasPermission ? null : /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
328
216
  children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
329
217
  sx: {
@@ -331,25 +219,16 @@ function ComponentInstaller({
331
219
  height: "1px",
332
220
  backgroundColor: _Colors.temp.gray6
333
221
  }
334
- }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
222
+ }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
335
223
  sx: {
336
224
  padding: "20px 24px"
337
225
  },
338
- children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
226
+ children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
339
227
  sx: {
340
228
  opacity: 1
341
229
  },
342
230
  children: t("componentInstallerSuggestions")
343
- }), onClose ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
344
- sx: {
345
- marginTop: 2,
346
- alignSelf: "flex-start"
347
- },
348
- variant: "outlined",
349
- className: "button",
350
- onClick: handleClose,
351
- children: t("componentInstallerClose")
352
- }) : null]
231
+ })
353
232
  })]
354
233
  })]
355
234
  })
@@ -363,7 +242,7 @@ function ComponentInstaller({
363
242
  ComponentInstaller.propTypes = {
364
243
  disabled: _propTypes.default.bool,
365
244
  warnIcon: _propTypes.default.node,
366
- did: _propTypes.default.string.isRequired,
245
+ did: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]).isRequired,
367
246
  noPermissionMute: _propTypes.default.bool,
368
247
  onInstalled: _propTypes.default.func,
369
248
  onError: _propTypes.default.func,
@@ -393,5 +272,9 @@ function WrapComponentInstaller(props) {
393
272
  return props.children;
394
273
  }
395
274
  WrapComponentInstaller.propTypes = {
275
+ ...ComponentInstaller.propTypes,
396
276
  children: _propTypes.default.any.isRequired
277
+ };
278
+ WrapComponentInstaller.defaultProps = {
279
+ ...ComponentInstaller.defaultProps
397
280
  };
@@ -0,0 +1,21 @@
1
+ declare function InstallerItem({ optionalComponent, index, installStatus, hasPermission, t }: {
2
+ optionalComponent: any;
3
+ index: any;
4
+ installStatus: any;
5
+ hasPermission: any;
6
+ t: any;
7
+ }): import("react").JSX.Element;
8
+ declare namespace InstallerItem {
9
+ namespace propTypes {
10
+ let t: any;
11
+ let optionalComponent: any;
12
+ let index: any;
13
+ let installStatus: any;
14
+ let hasPermission: any;
15
+ }
16
+ namespace defaultProps {
17
+ let installStatus_1: string;
18
+ export { installStatus_1 as installStatus };
19
+ }
20
+ }
21
+ export default InstallerItem;
@@ -0,0 +1,161 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ module.exports = InstallerItem;
7
+ var _jsxRuntime = require("react/jsx-runtime");
8
+ var _Colors = require("@arcblock/ux/lib/Colors");
9
+ var _react = require("@iconify/react");
10
+ var _material = require("@mui/material");
11
+ var _propTypes = _interopRequireDefault(require("prop-types"));
12
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13
+ function InstallerItem({
14
+ optionalComponent,
15
+ index,
16
+ installStatus,
17
+ hasPermission,
18
+ t
19
+ }) {
20
+ const handleInstall = () => {
21
+ window.open(optionalComponent?.installUrl, "_blank");
22
+ };
23
+ const handleOpenStore = () => {
24
+ window.open(optionalComponent?.storeUrl, "_blank");
25
+ };
26
+ const handleRefresh = () => {
27
+ window.location.reload();
28
+ };
29
+ const installStatusDone = installStatus === "stopped" || installStatus === "running";
30
+ const size = 60;
31
+ return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
32
+ children: [index === 0 ? null : /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
33
+ sx: {
34
+ width: "100%",
35
+ height: "1px",
36
+ backgroundColor: _Colors.temp.gray6
37
+ }
38
+ }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
39
+ sx: {
40
+ padding: "20px 24px",
41
+ paddingTop: 0.5,
42
+ marginTop: 2,
43
+ display: "flex",
44
+ flexDirection: "row",
45
+ justifyContent: "start",
46
+ alignItems: "flex-start"
47
+ },
48
+ children: [/* @__PURE__ */(0, _jsxRuntime.jsx)("img", {
49
+ style: {
50
+ width: size,
51
+ height: size,
52
+ minWidth: size,
53
+ minHeight: size
54
+ },
55
+ src: optionalComponent.logoUrl,
56
+ alt: optionalComponent.meta.title
57
+ }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
58
+ sx: {
59
+ display: "flex",
60
+ flexDirection: "column",
61
+ justifyContent: "start",
62
+ alignItems: "start",
63
+ marginLeft: 2
64
+ },
65
+ children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
66
+ sx: {
67
+ fontSize: "16px",
68
+ fontWeight: "bold",
69
+ cursor: "pointer",
70
+ ".link-icon": {
71
+ opacity: 0
72
+ },
73
+ ":hover .link-icon": {
74
+ opacity: 1
75
+ }
76
+ },
77
+ onClick: () => handleOpenStore(optionalComponent.meta?.did),
78
+ children: [optionalComponent.meta.title, /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
79
+ sx: {
80
+ paddingLeft: 1,
81
+ fontSize: "13px",
82
+ fontWeight: "400"
83
+ },
84
+ component: "span",
85
+ children: [optionalComponent.meta.version, /* @__PURE__ */(0, _jsxRuntime.jsx)(_react.Icon, {
86
+ className: "link-icon",
87
+ icon: "fluent:open-20-filled",
88
+ style: {
89
+ color: _Colors.temp.primaryBase,
90
+ fontSize: 16,
91
+ transform: "translate(6px, 3px)",
92
+ transition: "all 0.3s"
93
+ }
94
+ })]
95
+ })]
96
+ }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
97
+ sx: {
98
+ marginTop: 0,
99
+ opacity: 0.7
100
+ },
101
+ children: optionalComponent.meta.description
102
+ }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
103
+ sx: {
104
+ display: hasPermission ? "flex" : "none",
105
+ flexDirection: "row",
106
+ gap: 1
107
+ },
108
+ children: installStatus ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
109
+ sx: {
110
+ marginTop: 2,
111
+ opacity: 0.7
112
+ },
113
+ children: installStatusDone ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
114
+ variant: "contained",
115
+ onClick: handleRefresh,
116
+ children: t("componentInstallerRefresh")
117
+ }, "refresh") : /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
118
+ disabled: true,
119
+ sx: {
120
+ color: "#333"
121
+ },
122
+ startIcon: /* @__PURE__ */(0, _jsxRuntime.jsx)(_react.Icon, {
123
+ icon: "line-md:loading-loop",
124
+ style: {
125
+ color: "#333",
126
+ fontSize: 16
127
+ }
128
+ }),
129
+ variant: "contained",
130
+ children: installStatus
131
+ }, "status")
132
+ }) : /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
133
+ sx: {
134
+ marginTop: 2
135
+ },
136
+ variant: "contained",
137
+ className: "button",
138
+ onClick: () => handleInstall(optionalComponent.meta?.did),
139
+ children: t("componentInstallerInstall")
140
+ }, "install")
141
+ }), installStatusDone ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
142
+ sx: {
143
+ marginTop: 2,
144
+ opacity: 0.7
145
+ },
146
+ children: t("componentInstallerSuccessInstalled")
147
+ }) : null]
148
+ })]
149
+ })]
150
+ });
151
+ }
152
+ InstallerItem.propTypes = {
153
+ t: _propTypes.default.func.isRequired,
154
+ optionalComponent: _propTypes.default.object.isRequired,
155
+ index: _propTypes.default.number.isRequired,
156
+ installStatus: _propTypes.default.string,
157
+ hasPermission: _propTypes.default.bool.isRequired
158
+ };
159
+ InstallerItem.defaultProps = {
160
+ installStatus: ""
161
+ };
@@ -4,12 +4,9 @@ declare function useComponentInstalled({ did, onInstalled, onError }: {
4
4
  onInstalled: any;
5
5
  onError: any;
6
6
  }): {
7
- optionalComponent: any;
7
+ optComponents: any;
8
8
  installed: any;
9
- installUrl: any;
10
- storeUrl: any;
11
- installStatus: string;
12
- setInstallStatus: import("react").Dispatch<import("react").SetStateAction<string>>;
13
- installStatusDone: boolean;
9
+ installStatus: {};
10
+ setInstallStatus: import("react").Dispatch<import("react").SetStateAction<{}>>;
14
11
  definedInBlockletYML: any;
15
12
  };
@@ -8,12 +8,19 @@ var _constant = require("@arcblock/did-connect/lib/constant");
8
8
  var _react = require("react");
9
9
  var _urlJoin = _interopRequireDefault(require("url-join"));
10
10
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
11
+ const parseDidToSet = did => {
12
+ if (typeof did === 'string') {
13
+ return new Set(did.split(';;'));
14
+ }
15
+ return new Set(did);
16
+ };
11
17
  function useComponentInstalled({
12
18
  did,
13
19
  onInstalled,
14
20
  onError
15
21
  }) {
16
- const [installStatus, setInstallStatus] = (0, _react.useState)('');
22
+ const didKeys = Array.isArray(did) ? did.join(';;') : did;
23
+ const [installStatus, setInstallStatus] = (0, _react.useState)({});
17
24
  const onInstalledRef = (0, _react.useRef)({
18
25
  onInstalled,
19
26
  onError
@@ -26,22 +33,26 @@ function useComponentInstalled({
26
33
  optionalComponents,
27
34
  componentMountPoints
28
35
  } = window.blocklet;
29
- const optionalComponent = (0, _react.useMemo)(() => {
36
+ const optComponents = (0, _react.useMemo)(() => {
30
37
  if (!optionalComponents || !optionalComponents.length) {
31
38
  return null;
32
39
  }
33
- const component = optionalComponents.find(c => c.meta.did === did);
34
- (component ? onInstalledRef.current.onError : onInstalledRef.current.onInstalled)?.(component);
35
- return component;
36
- }, [did, optionalComponents]);
40
+ const didSet = parseDidToSet(didKeys);
41
+ const components = optionalComponents.filter(c => didSet.has(c.meta.did));
42
+ (components ? onInstalledRef.current.onError : onInstalledRef.current.onInstalled)?.(components);
43
+ return components;
44
+ }, [didKeys, optionalComponents]);
37
45
  const definedInBlockletYML = (0, _react.useMemo)(() => {
38
- if (optionalComponent) {
46
+ if (optComponents.length) {
39
47
  return true;
40
48
  }
41
- return (componentMountPoints || []).find(item => item.did === did);
42
- }, [optionalComponent, componentMountPoints, did]);
43
- const installUrl = (0, _urlJoin.default)(window.blocklet.appUrl, _constant.AUTH_SERVICE_PREFIX, `/admin/components?install-component=${did}`);
44
- const storeUrl = optionalComponent ? (0, _urlJoin.default)(optionalComponent.meta.homepage, 'blocklets', did) : '';
49
+ const didSet = parseDidToSet(didKeys);
50
+ return (componentMountPoints || []).find(item => didSet.has(item.did));
51
+ }, [optComponents, componentMountPoints, didKeys]);
52
+ optComponents.forEach(item => {
53
+ item.storeUrl = (0, _urlJoin.default)(item.meta.homepage, 'blocklets', item.meta.did);
54
+ item.installUrl = (0, _urlJoin.default)(window.blocklet.appUrl, _constant.AUTH_SERVICE_PREFIX, `/admin/components?install-component=${item.meta.did}`);
55
+ });
45
56
  (0, _react.useEffect)(() => {
46
57
  const handle = event => {
47
58
  if (event.origin !== window.blocklet.appUrl) {
@@ -49,14 +60,20 @@ function useComponentInstalled({
49
60
  }
50
61
  if (event.data?.kind === 'component-installer' && event.data?.blocklet?.children) {
51
62
  let hasChild = false;
63
+ const didSet = parseDidToSet(didKeys);
52
64
  event.data?.blocklet?.children.forEach(item => {
53
- if (item.meta?.did === did) {
65
+ if (didSet.has(item.meta?.did)) {
54
66
  hasChild = true;
55
- setInstallStatus(item.status || 'waiting');
67
+ setInstallStatus(value => {
68
+ return {
69
+ ...value,
70
+ [item.meta?.did]: item.status || 'waiting'
71
+ };
72
+ });
56
73
  }
57
74
  });
58
75
  if (!hasChild) {
59
- setInstallStatus('');
76
+ setInstallStatus({});
60
77
  }
61
78
  }
62
79
  };
@@ -64,16 +81,12 @@ function useComponentInstalled({
64
81
  return () => {
65
82
  window.removeEventListener('message', handle);
66
83
  };
67
- }, [did]);
68
- const installStatusDone = installStatus === 'stopped' || installStatus === 'running';
84
+ }, [didKeys]);
69
85
  return {
70
- optionalComponent,
71
- installed: !optionalComponent && definedInBlockletYML,
72
- installUrl,
73
- storeUrl,
86
+ optComponents,
87
+ installed: !optComponents.length && definedInBlockletYML,
74
88
  installStatus,
75
89
  setInstallStatus,
76
- installStatusDone,
77
90
  definedInBlockletYML
78
91
  };
79
92
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blocklet/ui-react",
3
- "version": "2.9.29",
3
+ "version": "2.9.30",
4
4
  "description": "Some useful front-end web components that can be used in Blocklets.",
5
5
  "keywords": [
6
6
  "react",
@@ -63,8 +63,8 @@
63
63
  },
64
64
  "dependencies": {
65
65
  "@abtnode/constant": "1.16.23",
66
- "@arcblock/did-connect": "^2.9.29",
67
- "@arcblock/ux": "^2.9.29",
66
+ "@arcblock/did-connect": "^2.9.30",
67
+ "@arcblock/ux": "^2.9.30",
68
68
  "@blocklet/js-sdk": "1.16.23",
69
69
  "@emotion/react": "^11.10.4",
70
70
  "@emotion/styled": "^11.10.4",
@@ -99,5 +99,5 @@
99
99
  "jest": "^28.1.3",
100
100
  "unbuild": "^2.0.0"
101
101
  },
102
- "gitHead": "fff3168d6a3c902a39818dfa8eb42544b88225e9"
102
+ "gitHead": "646e8a5d3af47fedb96f0fab9632de11143840f2"
103
103
  }