@blocklet/ui-react 2.9.85 → 2.9.87
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.
|
@@ -17,9 +17,12 @@ interface BlockletStudioProps {
|
|
|
17
17
|
onConnected?: (data: unknown) => void;
|
|
18
18
|
components?: Record<string, unknown>[];
|
|
19
19
|
resources?: Record<string, unknown>;
|
|
20
|
+
componentsTitle?: string;
|
|
21
|
+
resourcesTitle?: string;
|
|
20
22
|
style?: React.CSSProperties;
|
|
21
23
|
zIndex?: number;
|
|
24
|
+
dependentComponentsMode?: 'auto' | 'readonly';
|
|
22
25
|
[key: string]: any;
|
|
23
26
|
}
|
|
24
|
-
declare function BlockletStudio({ open, setOpen, onOpened, componentDid, tenantScope, resourcesParams, mode, title, logo, description, introduction, note, onUploaded, onReleased, onConnected, components, resources, style, zIndex, ...rest }: BlockletStudioProps): import("react").JSX.Element | null;
|
|
27
|
+
declare function BlockletStudio({ open, setOpen, onOpened, componentDid, tenantScope, resourcesParams, mode, title, logo, description, introduction, note, componentsTitle, resourcesTitle, onUploaded, onReleased, onConnected, components, resources, style, zIndex, dependentComponentsMode, ...rest }: BlockletStudioProps): import("react").JSX.Element | null;
|
|
25
28
|
export default BlockletStudio;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
|
-
import { useEffect, useRef } from "react";
|
|
2
|
+
import { useEffect, useRef, useState } from "react";
|
|
3
3
|
import { joinURL } from "ufo";
|
|
4
4
|
const WELL_KNOWN_SERVICE_PATH = "/.well-known/service";
|
|
5
5
|
function parseUrl(uri, params) {
|
|
@@ -25,6 +25,8 @@ function BlockletStudio({
|
|
|
25
25
|
description,
|
|
26
26
|
introduction,
|
|
27
27
|
note,
|
|
28
|
+
componentsTitle,
|
|
29
|
+
resourcesTitle,
|
|
28
30
|
onUploaded,
|
|
29
31
|
onReleased,
|
|
30
32
|
onConnected,
|
|
@@ -32,13 +34,21 @@ function BlockletStudio({
|
|
|
32
34
|
resources = {},
|
|
33
35
|
style = {},
|
|
34
36
|
zIndex = 9999,
|
|
37
|
+
dependentComponentsMode,
|
|
35
38
|
...rest
|
|
36
39
|
}) {
|
|
40
|
+
const [opened, setOpened] = useState(false);
|
|
37
41
|
const didRef = useRef("");
|
|
38
42
|
didRef.current = componentDid;
|
|
39
43
|
const latestFunctionVersionRef = useRef({});
|
|
40
|
-
latestFunctionVersionRef.current["resourceDialog.close"] = () =>
|
|
41
|
-
|
|
44
|
+
latestFunctionVersionRef.current["resourceDialog.close"] = () => {
|
|
45
|
+
setOpened(false);
|
|
46
|
+
setOpen(false);
|
|
47
|
+
};
|
|
48
|
+
latestFunctionVersionRef.current["resourceDialog.loaded"] = () => {
|
|
49
|
+
setOpened(true);
|
|
50
|
+
onOpened?.();
|
|
51
|
+
};
|
|
42
52
|
latestFunctionVersionRef.current["studioDialog.uploaded"] = onUploaded;
|
|
43
53
|
latestFunctionVersionRef.current["studioDialog.connected"] = onConnected;
|
|
44
54
|
latestFunctionVersionRef.current["studioDialog.released"] = onReleased;
|
|
@@ -72,7 +82,10 @@ function BlockletStudio({
|
|
|
72
82
|
mode,
|
|
73
83
|
resourcesParams,
|
|
74
84
|
resources,
|
|
75
|
-
components
|
|
85
|
+
components,
|
|
86
|
+
resourcesTitle,
|
|
87
|
+
componentsTitle,
|
|
88
|
+
dependentComponentsMode
|
|
76
89
|
}
|
|
77
90
|
);
|
|
78
91
|
return /* @__PURE__ */ jsx(
|
|
@@ -90,6 +103,8 @@ function BlockletStudio({
|
|
|
90
103
|
border: 0,
|
|
91
104
|
padding: 0,
|
|
92
105
|
margin: 0,
|
|
106
|
+
pointerEvents: opened ? "auto" : "none",
|
|
107
|
+
opacity: opened ? 1 : 0.5,
|
|
93
108
|
...style
|
|
94
109
|
},
|
|
95
110
|
...rest
|
|
@@ -17,9 +17,12 @@ interface BlockletStudioProps {
|
|
|
17
17
|
onConnected?: (data: unknown) => void;
|
|
18
18
|
components?: Record<string, unknown>[];
|
|
19
19
|
resources?: Record<string, unknown>;
|
|
20
|
+
componentsTitle?: string;
|
|
21
|
+
resourcesTitle?: string;
|
|
20
22
|
style?: React.CSSProperties;
|
|
21
23
|
zIndex?: number;
|
|
24
|
+
dependentComponentsMode?: 'auto' | 'readonly';
|
|
22
25
|
[key: string]: any;
|
|
23
26
|
}
|
|
24
|
-
declare function BlockletStudio({ open, setOpen, onOpened, componentDid, tenantScope, resourcesParams, mode, title, logo, description, introduction, note, onUploaded, onReleased, onConnected, components, resources, style, zIndex, ...rest }: BlockletStudioProps): import("react").JSX.Element | null;
|
|
27
|
+
declare function BlockletStudio({ open, setOpen, onOpened, componentDid, tenantScope, resourcesParams, mode, title, logo, description, introduction, note, componentsTitle, resourcesTitle, onUploaded, onReleased, onConnected, components, resources, style, zIndex, dependentComponentsMode, ...rest }: BlockletStudioProps): import("react").JSX.Element | null;
|
|
25
28
|
export default BlockletStudio;
|
|
@@ -31,6 +31,8 @@ function BlockletStudio({
|
|
|
31
31
|
description,
|
|
32
32
|
introduction,
|
|
33
33
|
note,
|
|
34
|
+
componentsTitle,
|
|
35
|
+
resourcesTitle,
|
|
34
36
|
onUploaded,
|
|
35
37
|
onReleased,
|
|
36
38
|
onConnected,
|
|
@@ -38,13 +40,21 @@ function BlockletStudio({
|
|
|
38
40
|
resources = {},
|
|
39
41
|
style = {},
|
|
40
42
|
zIndex = 9999,
|
|
43
|
+
dependentComponentsMode,
|
|
41
44
|
...rest
|
|
42
45
|
}) {
|
|
46
|
+
const [opened, setOpened] = (0, _react.useState)(false);
|
|
43
47
|
const didRef = (0, _react.useRef)("");
|
|
44
48
|
didRef.current = componentDid;
|
|
45
49
|
const latestFunctionVersionRef = (0, _react.useRef)({});
|
|
46
|
-
latestFunctionVersionRef.current["resourceDialog.close"] = () =>
|
|
47
|
-
|
|
50
|
+
latestFunctionVersionRef.current["resourceDialog.close"] = () => {
|
|
51
|
+
setOpened(false);
|
|
52
|
+
setOpen(false);
|
|
53
|
+
};
|
|
54
|
+
latestFunctionVersionRef.current["resourceDialog.loaded"] = () => {
|
|
55
|
+
setOpened(true);
|
|
56
|
+
onOpened?.();
|
|
57
|
+
};
|
|
48
58
|
latestFunctionVersionRef.current["studioDialog.uploaded"] = onUploaded;
|
|
49
59
|
latestFunctionVersionRef.current["studioDialog.connected"] = onConnected;
|
|
50
60
|
latestFunctionVersionRef.current["studioDialog.released"] = onReleased;
|
|
@@ -76,7 +86,10 @@ function BlockletStudio({
|
|
|
76
86
|
mode,
|
|
77
87
|
resourcesParams,
|
|
78
88
|
resources,
|
|
79
|
-
components
|
|
89
|
+
components,
|
|
90
|
+
resourcesTitle,
|
|
91
|
+
componentsTitle,
|
|
92
|
+
dependentComponentsMode
|
|
80
93
|
});
|
|
81
94
|
return /* @__PURE__ */(0, _jsxRuntime.jsx)("iframe", {
|
|
82
95
|
src,
|
|
@@ -91,6 +104,8 @@ function BlockletStudio({
|
|
|
91
104
|
border: 0,
|
|
92
105
|
padding: 0,
|
|
93
106
|
margin: 0,
|
|
107
|
+
pointerEvents: opened ? "auto" : "none",
|
|
108
|
+
opacity: opened ? 1 : 0.5,
|
|
94
109
|
...style
|
|
95
110
|
},
|
|
96
111
|
...rest
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@blocklet/ui-react",
|
|
3
|
-
"version": "2.9.
|
|
3
|
+
"version": "2.9.87",
|
|
4
4
|
"description": "Some useful front-end web components that can be used in Blocklets.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -62,8 +62,8 @@
|
|
|
62
62
|
}
|
|
63
63
|
},
|
|
64
64
|
"dependencies": {
|
|
65
|
-
"@arcblock/bridge": "^2.9.
|
|
66
|
-
"@arcblock/react-hooks": "^2.9.
|
|
65
|
+
"@arcblock/bridge": "^2.9.87",
|
|
66
|
+
"@arcblock/react-hooks": "^2.9.87",
|
|
67
67
|
"@blocklet/js-sdk": "1.16.27-beta-c450492a",
|
|
68
68
|
"@iconify-icons/logos": "^1.2.36",
|
|
69
69
|
"@iconify-icons/material-symbols": "^1.2.58",
|
|
@@ -108,5 +108,5 @@
|
|
|
108
108
|
"jest": "^28.1.3",
|
|
109
109
|
"unbuild": "^2.0.0"
|
|
110
110
|
},
|
|
111
|
-
"gitHead": "
|
|
111
|
+
"gitHead": "2c766afe9708ba370cb35fcec6e0d5c767d48c51"
|
|
112
112
|
}
|
|
@@ -1,3 +1,44 @@
|
|
|
1
|
+
## Blocklet export api 改动
|
|
2
|
+
|
|
3
|
+
新约定， 如果 blocklet 的 export api 返回数据中，包含了 `dependentComponents`, 在用户选中了这个资源时， 会自动选中这些依赖的组件。
|
|
4
|
+
|
|
5
|
+
example：
|
|
6
|
+
|
|
7
|
+
```js
|
|
8
|
+
res.json({
|
|
9
|
+
resources: [
|
|
10
|
+
...list.map((x) => ({
|
|
11
|
+
...x,
|
|
12
|
+
id: `application-${x._id}`,
|
|
13
|
+
name: `${x.name} (as Application)`,
|
|
14
|
+
dependentComponents: [
|
|
15
|
+
'error-did',
|
|
16
|
+
'z8ia1mAXo8ZE7ytGF36L5uBf9kD2kenhqFGp9',
|
|
17
|
+
'z2qZyjnsRffFtn2PDnDwDHTRbAu53RpKqDtFZ',
|
|
18
|
+
'z2qaCNvKMv5GjouKdcDWexv6WqtHbpNPQDnAk',
|
|
19
|
+
],
|
|
20
|
+
})),
|
|
21
|
+
...list.map((x) => ({
|
|
22
|
+
...x,
|
|
23
|
+
id: `tool-${x._id}`,
|
|
24
|
+
name: `${x.name} (as Tool)`,
|
|
25
|
+
dependentComponents: ['error-did', 'z2qaCNvKMv5GjouKdcDWexv6WqtHbpNPQDnAk'],
|
|
26
|
+
})),
|
|
27
|
+
...list.map((x) => ({
|
|
28
|
+
...x,
|
|
29
|
+
id: `template-${x._id}`,
|
|
30
|
+
name: `${x.name} (as Template)`,
|
|
31
|
+
})),
|
|
32
|
+
...list.map((x) => ({
|
|
33
|
+
...x,
|
|
34
|
+
id: `example-${x._id}`,
|
|
35
|
+
name: `${x.name} (as Example)`,
|
|
36
|
+
})),
|
|
37
|
+
],
|
|
38
|
+
});
|
|
39
|
+
return;
|
|
40
|
+
```
|
|
41
|
+
|
|
1
42
|
## BlockletStudio Component example
|
|
2
43
|
|
|
3
44
|
因为 iframe 的加载会有过程, 推荐在点击按钮让渲染 loading, 在 onOpened 取消 loading:
|
|
@@ -42,6 +83,10 @@ export default function Exporter() {
|
|
|
42
83
|
note='This is a demo project for "aigne" blocklet.'
|
|
43
84
|
introduction="the introduction."
|
|
44
85
|
componentDid={AI_STUDIO_COMPONENT_DID}
|
|
86
|
+
// 新增的参数，用于禁用选择组件
|
|
87
|
+
dependentComponentsMode="readonly"
|
|
88
|
+
componentsTitle="Components"
|
|
89
|
+
resourcesTitle="Add Files"
|
|
45
90
|
// 透传到 get blocklet resource 的参数
|
|
46
91
|
resourcesParams={{ name: 'test-project', ok: true }}
|
|
47
92
|
open={showCreateResource}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { useEffect, useRef } from 'react';
|
|
1
|
+
import { useEffect, useRef, useState } from 'react';
|
|
2
2
|
import { joinURL } from 'ufo';
|
|
3
3
|
|
|
4
4
|
const WELL_KNOWN_SERVICE_PATH = '/.well-known/service';
|
|
@@ -32,8 +32,11 @@ interface BlockletStudioProps {
|
|
|
32
32
|
onConnected?: (data: unknown) => void; // 连接后的回调函数
|
|
33
33
|
components?: Record<string, unknown>[]; // 默认组件列表
|
|
34
34
|
resources?: Record<string, unknown>; // 默认资源
|
|
35
|
+
componentsTitle?: string;
|
|
36
|
+
resourcesTitle?: string;
|
|
35
37
|
style?: React.CSSProperties;
|
|
36
38
|
zIndex?: number;
|
|
39
|
+
dependentComponentsMode?: 'auto' | 'readonly'; // 禁用选择组件
|
|
37
40
|
[key: string]: any;
|
|
38
41
|
}
|
|
39
42
|
|
|
@@ -50,6 +53,8 @@ function BlockletStudio({
|
|
|
50
53
|
description,
|
|
51
54
|
introduction,
|
|
52
55
|
note,
|
|
56
|
+
componentsTitle,
|
|
57
|
+
resourcesTitle,
|
|
53
58
|
onUploaded,
|
|
54
59
|
onReleased,
|
|
55
60
|
onConnected,
|
|
@@ -57,13 +62,21 @@ function BlockletStudio({
|
|
|
57
62
|
resources = {},
|
|
58
63
|
style = {},
|
|
59
64
|
zIndex = 9999,
|
|
65
|
+
dependentComponentsMode,
|
|
60
66
|
...rest
|
|
61
67
|
}: BlockletStudioProps) {
|
|
68
|
+
const [opened, setOpened] = useState(false);
|
|
62
69
|
const didRef = useRef('');
|
|
63
70
|
didRef.current = componentDid;
|
|
64
71
|
const latestFunctionVersionRef = useRef<{ [key: string]: undefined | ((data: unknown) => void) }>({});
|
|
65
|
-
latestFunctionVersionRef.current['resourceDialog.close'] = () =>
|
|
66
|
-
|
|
72
|
+
latestFunctionVersionRef.current['resourceDialog.close'] = () => {
|
|
73
|
+
setOpened(false);
|
|
74
|
+
setOpen(false);
|
|
75
|
+
};
|
|
76
|
+
latestFunctionVersionRef.current['resourceDialog.loaded'] = () => {
|
|
77
|
+
setOpened(true);
|
|
78
|
+
onOpened?.();
|
|
79
|
+
};
|
|
67
80
|
latestFunctionVersionRef.current['studioDialog.uploaded'] = onUploaded;
|
|
68
81
|
latestFunctionVersionRef.current['studioDialog.connected'] = onConnected;
|
|
69
82
|
latestFunctionVersionRef.current['studioDialog.released'] = onReleased;
|
|
@@ -101,6 +114,9 @@ function BlockletStudio({
|
|
|
101
114
|
resourcesParams,
|
|
102
115
|
resources,
|
|
103
116
|
components,
|
|
117
|
+
resourcesTitle,
|
|
118
|
+
componentsTitle,
|
|
119
|
+
dependentComponentsMode,
|
|
104
120
|
}
|
|
105
121
|
);
|
|
106
122
|
|
|
@@ -118,6 +134,8 @@ function BlockletStudio({
|
|
|
118
134
|
border: 0,
|
|
119
135
|
padding: 0,
|
|
120
136
|
margin: 0,
|
|
137
|
+
pointerEvents: opened ? 'auto' : 'none',
|
|
138
|
+
opacity: opened ? 1 : 0.5,
|
|
121
139
|
...style,
|
|
122
140
|
}}
|
|
123
141
|
{...rest}
|