@blocklet/ui-react 2.9.29 → 2.9.31

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,6 +2,36 @@ declare function WrapComponentInstaller(props: any): any;
2
2
  declare namespace WrapComponentInstaller {
3
3
  namespace propTypes {
4
4
  let children: any;
5
+ let disabled: any;
6
+ let warnIcon: any;
7
+ let did: any;
8
+ let noPermissionMute: any;
9
+ let onInstalled: any;
10
+ let onError: any;
11
+ let closeByOutSize: any;
12
+ let onClose: any;
13
+ let fallback: any;
14
+ let roles: any;
15
+ }
16
+ namespace defaultProps {
17
+ let disabled_1: boolean;
18
+ export { disabled_1 as disabled };
19
+ let warnIcon_1: null;
20
+ export { warnIcon_1 as warnIcon };
21
+ let noPermissionMute_1: boolean;
22
+ export { noPermissionMute_1 as noPermissionMute };
23
+ let onInstalled_1: null;
24
+ export { onInstalled_1 as onInstalled };
25
+ let onError_1: null;
26
+ export { onError_1 as onError };
27
+ let closeByOutSize_1: boolean;
28
+ export { closeByOutSize_1 as closeByOutSize };
29
+ let onClose_1: null;
30
+ export { onClose_1 as onClose };
31
+ let fallback_1: null;
32
+ export { fallback_1 as fallback };
33
+ let roles_1: string[];
34
+ export { roles_1 as roles };
5
35
  }
6
36
  }
7
37
  export default WrapComponentInstaller;
@@ -1,16 +1,18 @@
1
1
  import { Fragment, jsx, jsxs } from "react/jsx-runtime";
2
- import { Button, Box, ClickAwayListener, Fade, Paper } from "@mui/material";
3
- import { Icon } from "@iconify/react";
4
- import { temp as colors } from "@arcblock/ux/lib/Colors";
5
2
  import { SessionContext } from "@arcblock/did-connect/lib/Session";
6
- import { useContext } from "react";
3
+ import { temp as colors } from "@arcblock/ux/lib/Colors";
4
+ import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
5
+ import { translate } from "@arcblock/ux/lib/Locale/util";
7
6
  import SessionPermission from "@arcblock/ux/lib/SessionPermission";
8
- import PropTypes from "prop-types";
7
+ import { Icon } from "@iconify/react";
8
+ import CloseIcon from "@mui/icons-material/Close";
9
+ import { Box, ClickAwayListener, Fade, IconButton, Paper } from "@mui/material";
9
10
  import { useMemoizedFn } from "ahooks";
10
- import { translate } from "@arcblock/ux/lib/Locale/util";
11
- import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
12
- import useComponentInstalled from "./use-component-installed.js";
11
+ import PropTypes from "prop-types";
12
+ import { useContext } from "react";
13
+ import InstallerItem from "./installer-item.js";
13
14
  import translations from "./locales.js";
15
+ import useComponentInstalled from "./use-component-installed.js";
14
16
  function ComponentInstaller({
15
17
  warnIcon,
16
18
  did,
@@ -28,25 +30,15 @@ function ComponentInstaller({
28
30
  const t = useMemoizedFn((key, data = {}) => {
29
31
  return translate(translations, key, locale, "en", data);
30
32
  });
31
- const { installed, optionalComponent, installUrl, storeUrl, installStatus, installStatusDone, definedInBlockletYML } = useComponentInstalled({
33
+ const { installed, optComponents, installStatus, definedInBlockletYML } = useComponentInstalled({
32
34
  did,
33
35
  onInstalled,
34
36
  onError
35
37
  });
36
38
  const sessionCtx = useContext(SessionContext);
37
- const handleInstall = () => {
38
- window.open(installUrl, "_blank");
39
- };
40
39
  const handleClose = () => {
41
40
  onClose?.(false);
42
41
  };
43
- const handleOpenStore = () => {
44
- window.open(storeUrl, "_blank");
45
- };
46
- const handleRefresh = () => {
47
- window.location.reload();
48
- };
49
- const size = 60;
50
42
  if (disabled) {
51
43
  return children;
52
44
  }
@@ -62,11 +54,8 @@ function ComponentInstaller({
62
54
  fallback,
63
55
  children({
64
56
  hasPermission,
65
- optionalComponent,
66
- installStatus,
67
- handleOpenStore,
68
- handleInstall,
69
- handleRefresh
57
+ optComponents,
58
+ installStatus
70
59
  })
71
60
  ] });
72
61
  }
@@ -93,7 +82,7 @@ function ComponentInstaller({
93
82
  zIndex: 3e3,
94
83
  borderRadius: 3,
95
84
  width: 400,
96
- maxWidth: 400,
85
+ maxWidth: "90vw",
97
86
  borderColor: colors.lineStep,
98
87
  border: "0 !important",
99
88
  fontSize: "14px",
@@ -108,12 +97,15 @@ function ComponentInstaller({
108
97
  padding: "20px 24px",
109
98
  marginLeft: 0,
110
99
  display: "flex",
100
+ alignItems: "center",
111
101
  flexDirection: "row",
112
102
  justifyContent: "flex-start"
113
103
  },
114
104
  children: [
115
105
  warnIcon || /* @__PURE__ */ jsx(Icon, { icon: "mdi:warning-box", style: { color: "yellowgreen", fontSize: 24 } }),
116
- /* @__PURE__ */ jsx(Box, { sx: { marginLeft: 1, fontSize: "16px", fontWeight: "bold" }, children: t("componentInstallerTitle") })
106
+ /* @__PURE__ */ jsx(Box, { sx: { marginLeft: 1, fontSize: "16px", fontWeight: "bold" }, children: t("componentInstallerTitle") }),
107
+ /* @__PURE__ */ jsx(Box, { sx: { flex: 1 } }),
108
+ onClose ? /* @__PURE__ */ jsx(IconButton, { variant: "outlined", className: "button", onClick: handleClose, children: /* @__PURE__ */ jsx(CloseIcon, {}) }) : null
117
109
  ]
118
110
  }
119
111
  ),
@@ -122,8 +114,7 @@ function ComponentInstaller({
122
114
  t("componentInstallerNoDefinedInBlockletYML"),
123
115
  ": ",
124
116
  did
125
- ] }),
126
- /* @__PURE__ */ jsx(Box, { sx: { padding: "0px 24px" }, children: onClose ? /* @__PURE__ */ jsx(Button, { sx: { marginBottom: 2 }, variant: "outlined", className: "button", onClick: handleClose, children: t("componentInstallerClose") }) : null })
117
+ ] })
127
118
  ] }) : /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column" }, children: [
128
119
  /* @__PURE__ */ jsxs(
129
120
  Box,
@@ -133,141 +124,34 @@ function ComponentInstaller({
133
124
  marginLeft: 0,
134
125
  display: "flex",
135
126
  flexDirection: "row",
127
+ alignItems: "center",
136
128
  justifyContent: "flex-start"
137
129
  },
138
130
  children: [
139
131
  warnIcon || /* @__PURE__ */ jsx(Icon, { icon: "mdi:warning-box", style: { color: "yellowgreen", fontSize: 24 } }),
140
- /* @__PURE__ */ jsx(Box, { sx: { marginLeft: 1, fontSize: "16px", fontWeight: "bold" }, children: t("componentInstallerTitle") })
132
+ /* @__PURE__ */ jsx(Box, { sx: { marginLeft: 1, fontSize: "16px", fontWeight: "bold" }, children: t("componentInstallerTitle") }),
133
+ /* @__PURE__ */ jsx(Box, { sx: { flex: 1 } }),
134
+ onClose ? /* @__PURE__ */ jsx(IconButton, { variant: "outlined", className: "button", onClick: handleClose, children: /* @__PURE__ */ jsx(CloseIcon, {}) }) : null
141
135
  ]
142
136
  }
143
137
  ),
144
138
  /* @__PURE__ */ jsx(Box, { sx: { width: "100%", height: "1px", backgroundColor: colors.gray6 } }),
145
- /* @__PURE__ */ jsxs(
146
- Box,
147
- {
148
- sx: {
149
- padding: "20px 24px",
150
- paddingTop: 0.5,
151
- marginTop: 2,
152
- display: "flex",
153
- flexDirection: "row",
154
- justifyContent: "start",
155
- alignItems: "flex-start"
139
+ /* @__PURE__ */ jsx(Box, { sx: { maxHeight: "70vh", overflowY: "auto" }, children: optComponents.map((optionalComponent, index) => {
140
+ return /* @__PURE__ */ jsx(
141
+ InstallerItem,
142
+ {
143
+ t,
144
+ hasPermission,
145
+ index,
146
+ optionalComponent,
147
+ installStatus: installStatus[optionalComponent.meta?.did]
156
148
  },
157
- children: [
158
- /* @__PURE__ */ jsx(
159
- "img",
160
- {
161
- style: { width: size, height: size, minWidth: size, minHeight: size },
162
- src: optionalComponent.logoUrl,
163
- alt: optionalComponent.meta.title
164
- }
165
- ),
166
- /* @__PURE__ */ jsxs(
167
- Box,
168
- {
169
- sx: {
170
- display: "flex",
171
- flexDirection: "column",
172
- justifyContent: "start",
173
- alignItems: "start",
174
- marginLeft: 2
175
- },
176
- children: [
177
- /* @__PURE__ */ jsxs(
178
- Box,
179
- {
180
- sx: {
181
- fontSize: "16px",
182
- fontWeight: "bold",
183
- cursor: "pointer",
184
- ".link-icon": {
185
- opacity: 0
186
- },
187
- ":hover .link-icon": {
188
- opacity: 1
189
- }
190
- },
191
- onClick: handleOpenStore,
192
- children: [
193
- optionalComponent.meta.title,
194
- /* @__PURE__ */ jsxs(
195
- Box,
196
- {
197
- sx: {
198
- paddingLeft: 1,
199
- fontSize: "13px",
200
- fontWeight: "400"
201
- },
202
- component: "span",
203
- children: [
204
- optionalComponent.meta.version,
205
- /* @__PURE__ */ jsx(
206
- Icon,
207
- {
208
- className: "link-icon",
209
- icon: "fluent:open-20-filled",
210
- style: {
211
- color: colors.primaryBase,
212
- fontSize: 16,
213
- transform: "translate(6px, 3px)",
214
- transition: "all 0.3s"
215
- }
216
- }
217
- )
218
- ]
219
- }
220
- )
221
- ]
222
- }
223
- ),
224
- /* @__PURE__ */ jsx(Box, { sx: { marginTop: 0, opacity: 0.7 }, children: optionalComponent.meta.description }),
225
- /* @__PURE__ */ jsxs(Box, { sx: { display: hasPermission ? "flex" : "none", flexDirection: "row", gap: 1 }, children: [
226
- installStatus ? /* @__PURE__ */ jsx(Box, { sx: { marginTop: 2, opacity: 0.7 }, children: installStatusDone ? /* @__PURE__ */ jsx(Button, { variant: "contained", onClick: handleRefresh, children: t("componentInstallerRefresh") }, "refresh") : /* @__PURE__ */ jsx(
227
- Button,
228
- {
229
- disabled: true,
230
- sx: { color: "#333" },
231
- startIcon: /* @__PURE__ */ jsx(Icon, { icon: "line-md:loading-loop", style: { color: "#333", fontSize: 16 } }),
232
- variant: "contained",
233
- children: installStatus
234
- },
235
- "status"
236
- ) }) : /* @__PURE__ */ jsx(
237
- Button,
238
- {
239
- sx: { marginTop: 2 },
240
- variant: "contained",
241
- className: "button",
242
- onClick: handleInstall,
243
- children: t("componentInstallerInstall")
244
- },
245
- "install"
246
- ),
247
- onClose ? /* @__PURE__ */ jsx(Button, { sx: { marginTop: 2 }, variant: "outlined", className: "button", onClick: handleClose, children: t("componentInstallerClose") }) : null
248
- ] }),
249
- installStatusDone ? /* @__PURE__ */ jsx(Box, { sx: { marginTop: 2, opacity: 0.7 }, children: t("componentInstallerSuccessInstalled") }) : null
250
- ]
251
- }
252
- )
253
- ]
254
- }
255
- ),
149
+ optionalComponent.meta?.did || index
150
+ );
151
+ }) }),
256
152
  hasPermission ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
257
153
  /* @__PURE__ */ jsx(Box, { sx: { width: "100%", height: "1px", backgroundColor: colors.gray6 } }),
258
- /* @__PURE__ */ jsxs(Box, { sx: { padding: "20px 24px" }, children: [
259
- /* @__PURE__ */ jsx(Box, { sx: { opacity: 1 }, children: t("componentInstallerSuggestions") }),
260
- onClose ? /* @__PURE__ */ jsx(
261
- Button,
262
- {
263
- sx: { marginTop: 2, alignSelf: "flex-start" },
264
- variant: "outlined",
265
- className: "button",
266
- onClick: handleClose,
267
- children: t("componentInstallerClose")
268
- }
269
- ) : null
270
- ] })
154
+ /* @__PURE__ */ jsx(Box, { sx: { padding: "20px 24px" }, children: /* @__PURE__ */ jsx(Box, { sx: { opacity: 1 }, children: t("componentInstallerSuggestions") }) })
271
155
  ] })
272
156
  ] })
273
157
  }
@@ -280,7 +164,7 @@ function ComponentInstaller({
280
164
  ComponentInstaller.propTypes = {
281
165
  disabled: PropTypes.bool,
282
166
  warnIcon: PropTypes.node,
283
- did: PropTypes.string.isRequired,
167
+ did: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]).isRequired,
284
168
  noPermissionMute: PropTypes.bool,
285
169
  onInstalled: PropTypes.func,
286
170
  onError: PropTypes.func,
@@ -308,5 +192,9 @@ export default function WrapComponentInstaller(props) {
308
192
  return props.children;
309
193
  }
310
194
  WrapComponentInstaller.propTypes = {
195
+ ...ComponentInstaller.propTypes,
311
196
  children: PropTypes.any.isRequired
312
197
  };
198
+ WrapComponentInstaller.defaultProps = {
199
+ ...ComponentInstaller.defaultProps
200
+ };
@@ -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,139 @@
1
+ import { jsx, jsxs } from "react/jsx-runtime";
2
+ import { temp as colors } from "@arcblock/ux/lib/Colors";
3
+ import { Icon } from "@iconify/react";
4
+ import { Box, Button } from "@mui/material";
5
+ import PropTypes from "prop-types";
6
+ export default function InstallerItem({ optionalComponent, index, installStatus, hasPermission, t }) {
7
+ const handleInstall = () => {
8
+ window.open(optionalComponent?.installUrl, "_blank");
9
+ };
10
+ const handleOpenStore = () => {
11
+ window.open(optionalComponent?.storeUrl, "_blank");
12
+ };
13
+ const handleRefresh = () => {
14
+ window.location.reload();
15
+ };
16
+ const installStatusDone = installStatus === "stopped" || installStatus === "running";
17
+ const size = 60;
18
+ return /* @__PURE__ */ jsxs(Box, { children: [
19
+ index === 0 ? null : /* @__PURE__ */ jsx(Box, { sx: { width: "100%", height: "1px", backgroundColor: colors.gray6 } }),
20
+ /* @__PURE__ */ jsxs(
21
+ Box,
22
+ {
23
+ sx: {
24
+ padding: "20px 24px",
25
+ paddingTop: 0.5,
26
+ marginTop: 2,
27
+ display: "flex",
28
+ flexDirection: "row",
29
+ justifyContent: "start",
30
+ alignItems: "flex-start"
31
+ },
32
+ children: [
33
+ /* @__PURE__ */ jsx(
34
+ "img",
35
+ {
36
+ style: { width: size, height: size, minWidth: size, minHeight: size },
37
+ src: optionalComponent.logoUrl,
38
+ alt: optionalComponent.meta.title
39
+ }
40
+ ),
41
+ /* @__PURE__ */ jsxs(
42
+ Box,
43
+ {
44
+ sx: {
45
+ display: "flex",
46
+ flexDirection: "column",
47
+ justifyContent: "start",
48
+ alignItems: "start",
49
+ marginLeft: 2
50
+ },
51
+ children: [
52
+ /* @__PURE__ */ jsxs(
53
+ Box,
54
+ {
55
+ sx: {
56
+ fontSize: "16px",
57
+ fontWeight: "bold",
58
+ cursor: "pointer",
59
+ ".link-icon": {
60
+ opacity: 0
61
+ },
62
+ ":hover .link-icon": {
63
+ opacity: 1
64
+ }
65
+ },
66
+ onClick: () => handleOpenStore(optionalComponent.meta?.did),
67
+ children: [
68
+ optionalComponent.meta.title,
69
+ /* @__PURE__ */ jsxs(
70
+ Box,
71
+ {
72
+ sx: {
73
+ paddingLeft: 1,
74
+ fontSize: "13px",
75
+ fontWeight: "400"
76
+ },
77
+ component: "span",
78
+ children: [
79
+ optionalComponent.meta.version,
80
+ /* @__PURE__ */ jsx(
81
+ Icon,
82
+ {
83
+ className: "link-icon",
84
+ icon: "fluent:open-20-filled",
85
+ style: {
86
+ color: colors.primaryBase,
87
+ fontSize: 16,
88
+ transform: "translate(6px, 3px)",
89
+ transition: "all 0.3s"
90
+ }
91
+ }
92
+ )
93
+ ]
94
+ }
95
+ )
96
+ ]
97
+ }
98
+ ),
99
+ /* @__PURE__ */ jsx(Box, { sx: { marginTop: 0, opacity: 0.7 }, children: optionalComponent.meta.description }),
100
+ /* @__PURE__ */ jsx(Box, { sx: { display: hasPermission ? "flex" : "none", flexDirection: "row", gap: 1 }, children: installStatus ? /* @__PURE__ */ jsx(Box, { sx: { marginTop: 2, opacity: 0.7 }, children: installStatusDone ? /* @__PURE__ */ jsx(Button, { variant: "contained", onClick: handleRefresh, children: t("componentInstallerRefresh") }, "refresh") : /* @__PURE__ */ jsx(
101
+ Button,
102
+ {
103
+ disabled: true,
104
+ sx: { color: "#333" },
105
+ startIcon: /* @__PURE__ */ jsx(Icon, { icon: "line-md:loading-loop", style: { color: "#333", fontSize: 16 } }),
106
+ variant: "contained",
107
+ children: installStatus
108
+ },
109
+ "status"
110
+ ) }) : /* @__PURE__ */ jsx(
111
+ Button,
112
+ {
113
+ sx: { marginTop: 2 },
114
+ variant: "contained",
115
+ className: "button",
116
+ onClick: () => handleInstall(optionalComponent.meta?.did),
117
+ children: t("componentInstallerInstall")
118
+ },
119
+ "install"
120
+ ) }),
121
+ installStatusDone ? /* @__PURE__ */ jsx(Box, { sx: { marginTop: 2, opacity: 0.7 }, children: t("componentInstallerSuccessInstalled") }) : null
122
+ ]
123
+ }
124
+ )
125
+ ]
126
+ }
127
+ )
128
+ ] });
129
+ }
130
+ InstallerItem.propTypes = {
131
+ t: PropTypes.func.isRequired,
132
+ optionalComponent: PropTypes.object.isRequired,
133
+ index: PropTypes.number.isRequired,
134
+ installStatus: PropTypes.string,
135
+ hasPermission: PropTypes.bool.isRequired
136
+ };
137
+ InstallerItem.defaultProps = {
138
+ installStatus: ""
139
+ };
@@ -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
  };
@@ -1,32 +1,48 @@
1
1
  import { AUTH_SERVICE_PREFIX } from '@arcblock/did-connect/lib/constant';
2
- import { useMemo, useRef, useState, useEffect } from 'react';
2
+ import { useEffect, useMemo, useRef, useState } from 'react';
3
3
  import urlJoin from 'url-join';
4
4
 
5
+ const parseDidToSet = (did) => {
6
+ if (typeof did === 'string') {
7
+ return new Set(did.split(';;'));
8
+ }
9
+ return new Set(did);
10
+ };
11
+
5
12
  function useComponentInstalled({ did, onInstalled, onError }) {
6
- const [installStatus, setInstallStatus] = useState('');
13
+ const didKeys = Array.isArray(did) ? did.join(';;') : did;
14
+ const [installStatus, setInstallStatus] = useState({});
7
15
  const onInstalledRef = useRef({ onInstalled, onError });
8
16
  onInstalledRef.current = { onInstalled, onError };
9
17
 
10
18
  const { optionalComponents, componentMountPoints } = window.blocklet;
11
19
 
12
- const optionalComponent = useMemo(() => {
20
+ const optComponents = useMemo(() => {
13
21
  if (!optionalComponents || !optionalComponents.length) {
14
22
  return null;
15
23
  }
16
- const component = optionalComponents.find((c) => c.meta.did === did);
17
- (component ? onInstalledRef.current.onError : onInstalledRef.current.onInstalled)?.(component);
18
- return component;
19
- }, [did, optionalComponents]);
24
+ const didSet = parseDidToSet(didKeys);
25
+ const components = optionalComponents.filter((c) => didSet.has(c.meta.did));
26
+ (components ? onInstalledRef.current.onError : onInstalledRef.current.onInstalled)?.(components);
27
+ return components;
28
+ }, [didKeys, optionalComponents]);
20
29
 
21
30
  const definedInBlockletYML = useMemo(() => {
22
- if (optionalComponent) {
31
+ if (optComponents.length) {
23
32
  return true;
24
33
  }
25
- return (componentMountPoints || []).find((item) => item.did === did);
26
- }, [optionalComponent, componentMountPoints, did]);
34
+ const didSet = parseDidToSet(didKeys);
35
+ return (componentMountPoints || []).find((item) => didSet.has(item.did));
36
+ }, [optComponents, componentMountPoints, didKeys]);
27
37
 
28
- const installUrl = urlJoin(window.blocklet.appUrl, AUTH_SERVICE_PREFIX, `/admin/components?install-component=${did}`);
29
- const storeUrl = optionalComponent ? urlJoin(optionalComponent.meta.homepage, 'blocklets', did) : '';
38
+ optComponents.forEach((item) => {
39
+ item.storeUrl = urlJoin(item.meta.homepage, 'blocklets', item.meta.did);
40
+ item.installUrl = urlJoin(
41
+ window.blocklet.appUrl,
42
+ AUTH_SERVICE_PREFIX,
43
+ `/admin/components?install-component=${item.meta.did}`
44
+ );
45
+ });
30
46
 
31
47
  useEffect(() => {
32
48
  const handle = (event) => {
@@ -36,33 +52,35 @@ function useComponentInstalled({ did, onInstalled, onError }) {
36
52
 
37
53
  if (event.data?.kind === 'component-installer' && event.data?.blocklet?.children) {
38
54
  let hasChild = false;
55
+ const didSet = parseDidToSet(didKeys);
39
56
  event.data?.blocklet?.children.forEach((item) => {
40
- if (item.meta?.did === did) {
57
+ if (didSet.has(item.meta?.did)) {
41
58
  hasChild = true;
42
- setInstallStatus(item.status || 'waiting');
59
+ setInstallStatus((value) => {
60
+ return {
61
+ ...value,
62
+ [item.meta?.did]: item.status || 'waiting',
63
+ };
64
+ });
43
65
  }
44
66
  });
45
67
  if (!hasChild) {
46
- setInstallStatus('');
68
+ setInstallStatus({});
47
69
  }
48
70
  }
49
71
  };
72
+
50
73
  window.addEventListener('message', handle);
51
74
  return () => {
52
75
  window.removeEventListener('message', handle);
53
76
  };
54
- }, [did]);
55
-
56
- const installStatusDone = installStatus === 'stopped' || installStatus === 'running';
77
+ }, [didKeys]);
57
78
 
58
79
  return {
59
- optionalComponent,
60
- installed: !optionalComponent && definedInBlockletYML,
61
- installUrl,
62
- storeUrl,
80
+ optComponents,
81
+ installed: !optComponents.length && definedInBlockletYML,
63
82
  installStatus,
64
83
  setInstallStatus,
65
- installStatusDone,
66
84
  definedInBlockletYML,
67
85
  };
68
86
  }
@@ -172,7 +172,7 @@ export default function UserCenter({
172
172
  const formatError = {
173
173
  message: errorMessage
174
174
  };
175
- return /* @__PURE__ */ jsx(ErrorFallback, { error: formatError });
175
+ return /* @__PURE__ */ jsx(Box, { sx: { width: "100%" }, children: /* @__PURE__ */ jsx(ErrorFallback, { error: formatError }) });
176
176
  }
177
177
  return /* @__PURE__ */ jsxs(Fragment, { children: [
178
178
  /* @__PURE__ */ jsxs(Box, { sx: { flex: 1 }, children: [
@@ -2,6 +2,36 @@ declare function WrapComponentInstaller(props: any): any;
2
2
  declare namespace WrapComponentInstaller {
3
3
  namespace propTypes {
4
4
  let children: any;
5
+ let disabled: any;
6
+ let warnIcon: any;
7
+ let did: any;
8
+ let noPermissionMute: any;
9
+ let onInstalled: any;
10
+ let onError: any;
11
+ let closeByOutSize: any;
12
+ let onClose: any;
13
+ let fallback: any;
14
+ let roles: any;
15
+ }
16
+ namespace defaultProps {
17
+ let disabled_1: boolean;
18
+ export { disabled_1 as disabled };
19
+ let warnIcon_1: null;
20
+ export { warnIcon_1 as warnIcon };
21
+ let noPermissionMute_1: boolean;
22
+ export { noPermissionMute_1 as noPermissionMute };
23
+ let onInstalled_1: null;
24
+ export { onInstalled_1 as onInstalled };
25
+ let onError_1: null;
26
+ export { onError_1 as onError };
27
+ let closeByOutSize_1: boolean;
28
+ export { closeByOutSize_1 as closeByOutSize };
29
+ let onClose_1: null;
30
+ export { onClose_1 as onClose };
31
+ let fallback_1: null;
32
+ export { fallback_1 as fallback };
33
+ let roles_1: string[];
34
+ export { roles_1 as roles };
5
35
  }
6
36
  }
7
37
  export default WrapComponentInstaller;