@blocklet/ui-react 2.9.82 → 2.9.84
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.
- package/es/BlockletStudio/index.d.ts +25 -0
- package/es/BlockletStudio/index.js +99 -0
- package/es/index.d.ts +1 -0
- package/es/index.js +1 -0
- package/lib/BlockletStudio/index.d.ts +25 -0
- package/lib/BlockletStudio/index.js +99 -0
- package/lib/index.d.ts +1 -0
- package/lib/index.js +8 -0
- package/package.json +4 -4
- package/src/BlockletStudio/README.md +71 -0
- package/src/BlockletStudio/index.tsx +128 -0
- package/src/index.ts +1 -0
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
interface BlockletStudioProps {
|
|
3
|
+
open: boolean;
|
|
4
|
+
setOpen: (open: boolean) => void;
|
|
5
|
+
onOpened?: () => void;
|
|
6
|
+
componentDid: string;
|
|
7
|
+
tenantScope?: string;
|
|
8
|
+
resourcesParams?: Record<string, any>;
|
|
9
|
+
mode?: string;
|
|
10
|
+
title?: string;
|
|
11
|
+
logo?: string;
|
|
12
|
+
description?: string;
|
|
13
|
+
introduction?: string;
|
|
14
|
+
note?: string;
|
|
15
|
+
onUploaded?: (data: unknown) => void;
|
|
16
|
+
onReleased?: (data: unknown) => void;
|
|
17
|
+
onConnected?: (data: unknown) => void;
|
|
18
|
+
components?: Record<string, unknown>[];
|
|
19
|
+
resources?: Record<string, unknown>;
|
|
20
|
+
style?: React.CSSProperties;
|
|
21
|
+
zIndex?: number;
|
|
22
|
+
[key: string]: any;
|
|
23
|
+
}
|
|
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;
|
|
25
|
+
export default BlockletStudio;
|
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useEffect, useRef } from "react";
|
|
3
|
+
import { joinURL } from "ufo";
|
|
4
|
+
const WELL_KNOWN_SERVICE_PATH = "/.well-known/service";
|
|
5
|
+
function parseUrl(uri, params) {
|
|
6
|
+
const url = new URL(uri);
|
|
7
|
+
Object.keys(params).forEach((key) => {
|
|
8
|
+
const value = params[key];
|
|
9
|
+
if (value !== void 0) {
|
|
10
|
+
url.searchParams.set(key, typeof value === "string" ? value : JSON.stringify(value));
|
|
11
|
+
}
|
|
12
|
+
});
|
|
13
|
+
return url.pathname + url.search;
|
|
14
|
+
}
|
|
15
|
+
function BlockletStudio({
|
|
16
|
+
open,
|
|
17
|
+
setOpen,
|
|
18
|
+
onOpened,
|
|
19
|
+
componentDid,
|
|
20
|
+
tenantScope,
|
|
21
|
+
resourcesParams = {},
|
|
22
|
+
mode = "dialog",
|
|
23
|
+
title,
|
|
24
|
+
logo,
|
|
25
|
+
description,
|
|
26
|
+
introduction,
|
|
27
|
+
note,
|
|
28
|
+
onUploaded,
|
|
29
|
+
onReleased,
|
|
30
|
+
onConnected,
|
|
31
|
+
components = [],
|
|
32
|
+
resources = {},
|
|
33
|
+
style = {},
|
|
34
|
+
zIndex = 9999,
|
|
35
|
+
...rest
|
|
36
|
+
}) {
|
|
37
|
+
const didRef = useRef("");
|
|
38
|
+
didRef.current = componentDid;
|
|
39
|
+
const latestFunctionVersionRef = useRef({});
|
|
40
|
+
latestFunctionVersionRef.current["resourceDialog.close"] = () => setOpen(false);
|
|
41
|
+
latestFunctionVersionRef.current["resourceDialog.loaded"] = onOpened;
|
|
42
|
+
latestFunctionVersionRef.current["studioDialog.uploaded"] = onUploaded;
|
|
43
|
+
latestFunctionVersionRef.current["studioDialog.connected"] = onConnected;
|
|
44
|
+
latestFunctionVersionRef.current["studioDialog.released"] = onReleased;
|
|
45
|
+
useEffect(() => {
|
|
46
|
+
const listener = (event) => {
|
|
47
|
+
if (event?.data?.componentDid !== didRef.current) {
|
|
48
|
+
return;
|
|
49
|
+
}
|
|
50
|
+
const fn = latestFunctionVersionRef.current[event?.data?.event];
|
|
51
|
+
if (typeof fn === "function") {
|
|
52
|
+
fn(event?.data?.data);
|
|
53
|
+
}
|
|
54
|
+
};
|
|
55
|
+
window.addEventListener("message", listener);
|
|
56
|
+
return () => {
|
|
57
|
+
window.removeEventListener("message", listener);
|
|
58
|
+
};
|
|
59
|
+
}, []);
|
|
60
|
+
if (!open) {
|
|
61
|
+
return null;
|
|
62
|
+
}
|
|
63
|
+
const src = parseUrl(
|
|
64
|
+
joinURL(window.location.origin, WELL_KNOWN_SERVICE_PATH, "/embed/resources", componentDid, "publish"),
|
|
65
|
+
{
|
|
66
|
+
title,
|
|
67
|
+
logo,
|
|
68
|
+
description,
|
|
69
|
+
introduction,
|
|
70
|
+
note,
|
|
71
|
+
tenantScope,
|
|
72
|
+
mode,
|
|
73
|
+
resourcesParams,
|
|
74
|
+
resources,
|
|
75
|
+
components
|
|
76
|
+
}
|
|
77
|
+
);
|
|
78
|
+
return /* @__PURE__ */ jsx(
|
|
79
|
+
"iframe",
|
|
80
|
+
{
|
|
81
|
+
src,
|
|
82
|
+
title: "Blocklet Studio",
|
|
83
|
+
style: {
|
|
84
|
+
position: "fixed",
|
|
85
|
+
top: 0,
|
|
86
|
+
left: 0,
|
|
87
|
+
width: "100vw",
|
|
88
|
+
height: "100vh",
|
|
89
|
+
zIndex,
|
|
90
|
+
border: 0,
|
|
91
|
+
padding: 0,
|
|
92
|
+
margin: 0,
|
|
93
|
+
...style
|
|
94
|
+
},
|
|
95
|
+
...rest
|
|
96
|
+
}
|
|
97
|
+
);
|
|
98
|
+
}
|
|
99
|
+
export default BlockletStudio;
|
package/es/index.d.ts
CHANGED
|
@@ -3,6 +3,7 @@ export { default as Footer } from './Footer';
|
|
|
3
3
|
export { default as Dashboard } from './Dashboard';
|
|
4
4
|
export { default as Icon } from './Icon';
|
|
5
5
|
export { default as ComponentInstaller } from './ComponentInstaller';
|
|
6
|
+
export { default as BlockletStudio } from './BlockletStudio';
|
|
6
7
|
export { default as useComponentInstaller } from './ComponentInstaller/use-component-installed';
|
|
7
8
|
export * from './UserCenter';
|
|
8
9
|
export * from './UserSessions';
|
package/es/index.js
CHANGED
|
@@ -3,6 +3,7 @@ export { default as Footer } from "./Footer/index.js";
|
|
|
3
3
|
export { default as Dashboard } from "./Dashboard/index.js";
|
|
4
4
|
export { default as Icon } from "./Icon/index.js";
|
|
5
5
|
export { default as ComponentInstaller } from "./ComponentInstaller/index.js";
|
|
6
|
+
export { default as BlockletStudio } from "./BlockletStudio/index.js";
|
|
6
7
|
export { default as useComponentInstaller } from "./ComponentInstaller/use-component-installed.js";
|
|
7
8
|
export * from "./UserCenter/index.js";
|
|
8
9
|
export * from "./UserSessions/index.js";
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
interface BlockletStudioProps {
|
|
3
|
+
open: boolean;
|
|
4
|
+
setOpen: (open: boolean) => void;
|
|
5
|
+
onOpened?: () => void;
|
|
6
|
+
componentDid: string;
|
|
7
|
+
tenantScope?: string;
|
|
8
|
+
resourcesParams?: Record<string, any>;
|
|
9
|
+
mode?: string;
|
|
10
|
+
title?: string;
|
|
11
|
+
logo?: string;
|
|
12
|
+
description?: string;
|
|
13
|
+
introduction?: string;
|
|
14
|
+
note?: string;
|
|
15
|
+
onUploaded?: (data: unknown) => void;
|
|
16
|
+
onReleased?: (data: unknown) => void;
|
|
17
|
+
onConnected?: (data: unknown) => void;
|
|
18
|
+
components?: Record<string, unknown>[];
|
|
19
|
+
resources?: Record<string, unknown>;
|
|
20
|
+
style?: React.CSSProperties;
|
|
21
|
+
zIndex?: number;
|
|
22
|
+
[key: string]: any;
|
|
23
|
+
}
|
|
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;
|
|
25
|
+
export default BlockletStudio;
|
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
|
|
7
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
8
|
+
var _react = require("react");
|
|
9
|
+
var _ufo = require("ufo");
|
|
10
|
+
const WELL_KNOWN_SERVICE_PATH = "/.well-known/service";
|
|
11
|
+
function parseUrl(uri, params) {
|
|
12
|
+
const url = new URL(uri);
|
|
13
|
+
Object.keys(params).forEach(key => {
|
|
14
|
+
const value = params[key];
|
|
15
|
+
if (value !== void 0) {
|
|
16
|
+
url.searchParams.set(key, typeof value === "string" ? value : JSON.stringify(value));
|
|
17
|
+
}
|
|
18
|
+
});
|
|
19
|
+
return url.pathname + url.search;
|
|
20
|
+
}
|
|
21
|
+
function BlockletStudio({
|
|
22
|
+
open,
|
|
23
|
+
setOpen,
|
|
24
|
+
onOpened,
|
|
25
|
+
componentDid,
|
|
26
|
+
tenantScope,
|
|
27
|
+
resourcesParams = {},
|
|
28
|
+
mode = "dialog",
|
|
29
|
+
title,
|
|
30
|
+
logo,
|
|
31
|
+
description,
|
|
32
|
+
introduction,
|
|
33
|
+
note,
|
|
34
|
+
onUploaded,
|
|
35
|
+
onReleased,
|
|
36
|
+
onConnected,
|
|
37
|
+
components = [],
|
|
38
|
+
resources = {},
|
|
39
|
+
style = {},
|
|
40
|
+
zIndex = 9999,
|
|
41
|
+
...rest
|
|
42
|
+
}) {
|
|
43
|
+
const didRef = (0, _react.useRef)("");
|
|
44
|
+
didRef.current = componentDid;
|
|
45
|
+
const latestFunctionVersionRef = (0, _react.useRef)({});
|
|
46
|
+
latestFunctionVersionRef.current["resourceDialog.close"] = () => setOpen(false);
|
|
47
|
+
latestFunctionVersionRef.current["resourceDialog.loaded"] = onOpened;
|
|
48
|
+
latestFunctionVersionRef.current["studioDialog.uploaded"] = onUploaded;
|
|
49
|
+
latestFunctionVersionRef.current["studioDialog.connected"] = onConnected;
|
|
50
|
+
latestFunctionVersionRef.current["studioDialog.released"] = onReleased;
|
|
51
|
+
(0, _react.useEffect)(() => {
|
|
52
|
+
const listener = event => {
|
|
53
|
+
if (event?.data?.componentDid !== didRef.current) {
|
|
54
|
+
return;
|
|
55
|
+
}
|
|
56
|
+
const fn = latestFunctionVersionRef.current[event?.data?.event];
|
|
57
|
+
if (typeof fn === "function") {
|
|
58
|
+
fn(event?.data?.data);
|
|
59
|
+
}
|
|
60
|
+
};
|
|
61
|
+
window.addEventListener("message", listener);
|
|
62
|
+
return () => {
|
|
63
|
+
window.removeEventListener("message", listener);
|
|
64
|
+
};
|
|
65
|
+
}, []);
|
|
66
|
+
if (!open) {
|
|
67
|
+
return null;
|
|
68
|
+
}
|
|
69
|
+
const src = parseUrl((0, _ufo.joinURL)(window.location.origin, WELL_KNOWN_SERVICE_PATH, "/embed/resources", componentDid, "publish"), {
|
|
70
|
+
title,
|
|
71
|
+
logo,
|
|
72
|
+
description,
|
|
73
|
+
introduction,
|
|
74
|
+
note,
|
|
75
|
+
tenantScope,
|
|
76
|
+
mode,
|
|
77
|
+
resourcesParams,
|
|
78
|
+
resources,
|
|
79
|
+
components
|
|
80
|
+
});
|
|
81
|
+
return /* @__PURE__ */(0, _jsxRuntime.jsx)("iframe", {
|
|
82
|
+
src,
|
|
83
|
+
title: "Blocklet Studio",
|
|
84
|
+
style: {
|
|
85
|
+
position: "fixed",
|
|
86
|
+
top: 0,
|
|
87
|
+
left: 0,
|
|
88
|
+
width: "100vw",
|
|
89
|
+
height: "100vh",
|
|
90
|
+
zIndex,
|
|
91
|
+
border: 0,
|
|
92
|
+
padding: 0,
|
|
93
|
+
margin: 0,
|
|
94
|
+
...style
|
|
95
|
+
},
|
|
96
|
+
...rest
|
|
97
|
+
});
|
|
98
|
+
}
|
|
99
|
+
module.exports = BlockletStudio;
|
package/lib/index.d.ts
CHANGED
|
@@ -3,6 +3,7 @@ export { default as Footer } from './Footer';
|
|
|
3
3
|
export { default as Dashboard } from './Dashboard';
|
|
4
4
|
export { default as Icon } from './Icon';
|
|
5
5
|
export { default as ComponentInstaller } from './ComponentInstaller';
|
|
6
|
+
export { default as BlockletStudio } from './BlockletStudio';
|
|
6
7
|
export { default as useComponentInstaller } from './ComponentInstaller/use-component-installed';
|
|
7
8
|
export * from './UserCenter';
|
|
8
9
|
export * from './UserSessions';
|
package/lib/index.js
CHANGED
|
@@ -9,8 +9,15 @@ var _exportNames = {
|
|
|
9
9
|
Dashboard: true,
|
|
10
10
|
Icon: true,
|
|
11
11
|
ComponentInstaller: true,
|
|
12
|
+
BlockletStudio: true,
|
|
12
13
|
useComponentInstaller: true
|
|
13
14
|
};
|
|
15
|
+
Object.defineProperty(exports, "BlockletStudio", {
|
|
16
|
+
enumerable: true,
|
|
17
|
+
get: function () {
|
|
18
|
+
return _BlockletStudio.default;
|
|
19
|
+
}
|
|
20
|
+
});
|
|
14
21
|
Object.defineProperty(exports, "ComponentInstaller", {
|
|
15
22
|
enumerable: true,
|
|
16
23
|
get: function () {
|
|
@@ -52,6 +59,7 @@ var _Footer = _interopRequireDefault(require("./Footer"));
|
|
|
52
59
|
var _Dashboard = _interopRequireDefault(require("./Dashboard"));
|
|
53
60
|
var _Icon = _interopRequireDefault(require("./Icon"));
|
|
54
61
|
var _ComponentInstaller = _interopRequireDefault(require("./ComponentInstaller"));
|
|
62
|
+
var _BlockletStudio = _interopRequireDefault(require("./BlockletStudio"));
|
|
55
63
|
var _useComponentInstalled = _interopRequireDefault(require("./ComponentInstaller/use-component-installed"));
|
|
56
64
|
var _UserCenter = require("./UserCenter");
|
|
57
65
|
Object.keys(_UserCenter).forEach(function (key) {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@blocklet/ui-react",
|
|
3
|
-
"version": "2.9.
|
|
3
|
+
"version": "2.9.84",
|
|
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.84",
|
|
66
|
+
"@arcblock/react-hooks": "^2.9.84",
|
|
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": "d4b772964ded283937e1d333d3e07be4aedcb934"
|
|
112
112
|
}
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
## BlockletStudio Component example
|
|
2
|
+
|
|
3
|
+
因为 iframe 的加载会有过程, 推荐在点击按钮让渲染 loading, 在 onOpened 取消 loading:
|
|
4
|
+
|
|
5
|
+
```tsx
|
|
6
|
+
import { Icon } from '@iconify-icon/react';
|
|
7
|
+
import ArrowUp from '@iconify-icons/tabler/arrow-big-up-line';
|
|
8
|
+
import { Box, IconButton, CircularProgress as Spinner, svgIconClasses } from '@mui/material';
|
|
9
|
+
import { useState } from 'react';
|
|
10
|
+
|
|
11
|
+
import { AI_STUDIO_COMPONENT_DID } from '../../libs/constants';
|
|
12
|
+
import { BlockletStudio } from './blocklet-studio';
|
|
13
|
+
|
|
14
|
+
export default function Exporter() {
|
|
15
|
+
const [showCreateResource, setShowCreateResource] = useState(false);
|
|
16
|
+
const [opening, setOpening] = useState(false);
|
|
17
|
+
const handleShowDialog = () => {
|
|
18
|
+
setOpening(true);
|
|
19
|
+
setShowCreateResource(true);
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
return (
|
|
23
|
+
<>
|
|
24
|
+
<IconButton
|
|
25
|
+
sx={{
|
|
26
|
+
position: 'relative',
|
|
27
|
+
minWidth: 40,
|
|
28
|
+
minHeight: 40,
|
|
29
|
+
borderRadius: '100%',
|
|
30
|
+
[`.${svgIconClasses.root}`]: {
|
|
31
|
+
color: 'text.secondary',
|
|
32
|
+
},
|
|
33
|
+
}}
|
|
34
|
+
onClick={handleShowDialog}>
|
|
35
|
+
{opening ? <Spinner size={16} /> : <Box component={Icon} icon={ArrowUp} style={{ fontSize: 24 }} />}
|
|
36
|
+
</IconButton>
|
|
37
|
+
<BlockletStudio
|
|
38
|
+
mode="dialog"
|
|
39
|
+
tenantScope="test-tenant-scope-id-2"
|
|
40
|
+
title="demo aigne project"
|
|
41
|
+
description={'This is a demo project for "aigne" blocklet.'}
|
|
42
|
+
note='This is a demo project for "aigne" blocklet.'
|
|
43
|
+
introduction="the introduction."
|
|
44
|
+
componentDid={AI_STUDIO_COMPONENT_DID}
|
|
45
|
+
// 透传到 get blocklet resource 的参数
|
|
46
|
+
resourcesParams={{ name: 'test-project', ok: true }}
|
|
47
|
+
open={showCreateResource}
|
|
48
|
+
setOpen={setShowCreateResource}
|
|
49
|
+
onConnected={() => alert('connected')}
|
|
50
|
+
onUploaded={() => alert('uploaded')}
|
|
51
|
+
onReleased={() => alert('released')}
|
|
52
|
+
onOpened={() => setOpening(false)}
|
|
53
|
+
// 默认选中的组件
|
|
54
|
+
components={[
|
|
55
|
+
{ did: 'z8ia3xzq2tMq8CRHfaXj1BTYJyYnEcHbqP8cJ', included: true, required: true },
|
|
56
|
+
{ did: 'z2qZyjnsRffFtn2PDnDwDHTRbAu53RpKqDtFZ', included: true, required: false },
|
|
57
|
+
]}
|
|
58
|
+
// 默认选中的资源
|
|
59
|
+
resources={{
|
|
60
|
+
z8iZpog7mcgcgBZzTiXJCWESvmnRrQmnd3XBB: [
|
|
61
|
+
'template-448698592710885376',
|
|
62
|
+
'template-448696391418511360',
|
|
63
|
+
'template',
|
|
64
|
+
'example-448698592710885376',
|
|
65
|
+
],
|
|
66
|
+
}}
|
|
67
|
+
/>
|
|
68
|
+
</>
|
|
69
|
+
);
|
|
70
|
+
}
|
|
71
|
+
```
|
|
@@ -0,0 +1,128 @@
|
|
|
1
|
+
import { useEffect, useRef } from 'react';
|
|
2
|
+
import { joinURL } from 'ufo';
|
|
3
|
+
|
|
4
|
+
const WELL_KNOWN_SERVICE_PATH = '/.well-known/service';
|
|
5
|
+
|
|
6
|
+
function parseUrl(uri: string, params: Record<string, any>): string {
|
|
7
|
+
const url = new URL(uri);
|
|
8
|
+
Object.keys(params).forEach((key) => {
|
|
9
|
+
const value = params[key];
|
|
10
|
+
if (value !== undefined) {
|
|
11
|
+
url.searchParams.set(key, typeof value === 'string' ? value : JSON.stringify(value));
|
|
12
|
+
}
|
|
13
|
+
});
|
|
14
|
+
return url.pathname + url.search;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
interface BlockletStudioProps {
|
|
18
|
+
open: boolean;
|
|
19
|
+
setOpen: (open: boolean) => void;
|
|
20
|
+
onOpened?: () => void;
|
|
21
|
+
componentDid: string;
|
|
22
|
+
tenantScope?: string;
|
|
23
|
+
resourcesParams?: Record<string, any>;
|
|
24
|
+
mode?: string;
|
|
25
|
+
title?: string;
|
|
26
|
+
logo?: string;
|
|
27
|
+
description?: string;
|
|
28
|
+
introduction?: string;
|
|
29
|
+
note?: string;
|
|
30
|
+
onUploaded?: (data: unknown) => void; // 上传后的回调函数
|
|
31
|
+
onReleased?: (data: unknown) => void; // 发布一个新 release 后的回调函数
|
|
32
|
+
onConnected?: (data: unknown) => void; // 连接后的回调函数
|
|
33
|
+
components?: Record<string, unknown>[]; // 默认组件列表
|
|
34
|
+
resources?: Record<string, unknown>; // 默认资源
|
|
35
|
+
style?: React.CSSProperties;
|
|
36
|
+
zIndex?: number;
|
|
37
|
+
[key: string]: any;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
function BlockletStudio({
|
|
41
|
+
open,
|
|
42
|
+
setOpen,
|
|
43
|
+
onOpened,
|
|
44
|
+
componentDid,
|
|
45
|
+
tenantScope,
|
|
46
|
+
resourcesParams = {},
|
|
47
|
+
mode = 'dialog',
|
|
48
|
+
title,
|
|
49
|
+
logo,
|
|
50
|
+
description,
|
|
51
|
+
introduction,
|
|
52
|
+
note,
|
|
53
|
+
onUploaded,
|
|
54
|
+
onReleased,
|
|
55
|
+
onConnected,
|
|
56
|
+
components = [],
|
|
57
|
+
resources = {},
|
|
58
|
+
style = {},
|
|
59
|
+
zIndex = 9999,
|
|
60
|
+
...rest
|
|
61
|
+
}: BlockletStudioProps) {
|
|
62
|
+
const didRef = useRef('');
|
|
63
|
+
didRef.current = componentDid;
|
|
64
|
+
const latestFunctionVersionRef = useRef<{ [key: string]: undefined | ((data: unknown) => void) }>({});
|
|
65
|
+
latestFunctionVersionRef.current['resourceDialog.close'] = () => setOpen(false);
|
|
66
|
+
latestFunctionVersionRef.current['resourceDialog.loaded'] = onOpened;
|
|
67
|
+
latestFunctionVersionRef.current['studioDialog.uploaded'] = onUploaded;
|
|
68
|
+
latestFunctionVersionRef.current['studioDialog.connected'] = onConnected;
|
|
69
|
+
latestFunctionVersionRef.current['studioDialog.released'] = onReleased;
|
|
70
|
+
|
|
71
|
+
useEffect(() => {
|
|
72
|
+
const listener = (event: MessageEvent) => {
|
|
73
|
+
if (event?.data?.componentDid !== didRef.current) {
|
|
74
|
+
return;
|
|
75
|
+
}
|
|
76
|
+
const fn = latestFunctionVersionRef.current[event?.data?.event];
|
|
77
|
+
if (typeof fn === 'function') {
|
|
78
|
+
fn(event?.data?.data);
|
|
79
|
+
}
|
|
80
|
+
};
|
|
81
|
+
window.addEventListener('message', listener);
|
|
82
|
+
return () => {
|
|
83
|
+
window.removeEventListener('message', listener);
|
|
84
|
+
};
|
|
85
|
+
}, []);
|
|
86
|
+
|
|
87
|
+
if (!open) {
|
|
88
|
+
return null;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
const src = parseUrl(
|
|
92
|
+
joinURL(window.location.origin, WELL_KNOWN_SERVICE_PATH, '/embed/resources', componentDid, 'publish'),
|
|
93
|
+
{
|
|
94
|
+
title,
|
|
95
|
+
logo,
|
|
96
|
+
description,
|
|
97
|
+
introduction,
|
|
98
|
+
note,
|
|
99
|
+
tenantScope,
|
|
100
|
+
mode,
|
|
101
|
+
resourcesParams,
|
|
102
|
+
resources,
|
|
103
|
+
components,
|
|
104
|
+
}
|
|
105
|
+
);
|
|
106
|
+
|
|
107
|
+
return (
|
|
108
|
+
<iframe
|
|
109
|
+
src={src}
|
|
110
|
+
title="Blocklet Studio"
|
|
111
|
+
style={{
|
|
112
|
+
position: 'fixed',
|
|
113
|
+
top: 0,
|
|
114
|
+
left: 0,
|
|
115
|
+
width: '100vw',
|
|
116
|
+
height: '100vh',
|
|
117
|
+
zIndex,
|
|
118
|
+
border: 0,
|
|
119
|
+
padding: 0,
|
|
120
|
+
margin: 0,
|
|
121
|
+
...style,
|
|
122
|
+
}}
|
|
123
|
+
{...rest}
|
|
124
|
+
/>
|
|
125
|
+
);
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
export default BlockletStudio;
|
package/src/index.ts
CHANGED
|
@@ -8,6 +8,7 @@ export { default as Dashboard } from './Dashboard';
|
|
|
8
8
|
export { default as Icon } from './Icon';
|
|
9
9
|
// @ts-ignore
|
|
10
10
|
export { default as ComponentInstaller } from './ComponentInstaller';
|
|
11
|
+
export { default as BlockletStudio } from './BlockletStudio';
|
|
11
12
|
// @ts-ignore
|
|
12
13
|
export { default as useComponentInstaller } from './ComponentInstaller/use-component-installed';
|
|
13
14
|
export * from './UserCenter';
|