@foxglove/embed-react 0.1.6 → 0.1.8
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/dist/cjs/FoxgloveViewer.d.ts +10 -2
- package/dist/cjs/FoxgloveViewer.d.ts.map +1 -1
- package/dist/cjs/FoxgloveViewer.js +8 -3
- package/dist/cjs/FoxgloveViewer.js.map +1 -1
- package/dist/esm/FoxgloveViewer.d.ts +10 -2
- package/dist/esm/FoxgloveViewer.d.ts.map +1 -1
- package/dist/esm/FoxgloveViewer.js +8 -3
- package/dist/esm/FoxgloveViewer.js.map +1 -1
- package/package.json +2 -2
- package/src/FoxgloveViewer.tsx +131 -109
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import type { ReactNode } from "react";
|
|
2
1
|
import { type DataSource, type OpaqueLayoutData, type SelectLayoutParams } from "@foxglove/embed";
|
|
3
2
|
type Props = {
|
|
4
3
|
/** The URL where the Foxglove app is hosted. Defaults to `https://embed.foxglove.dev/`. */
|
|
@@ -38,12 +37,21 @@ type Props = {
|
|
|
38
37
|
* */
|
|
39
38
|
onError?: (errorMsg: string) => void;
|
|
40
39
|
};
|
|
40
|
+
export interface FoxgloveViewerInterface {
|
|
41
|
+
/**
|
|
42
|
+
* Retrieve the currently configured layout from the embedded viewer.
|
|
43
|
+
*
|
|
44
|
+
* @returns A Promise that resolves with an opaque JavaScript object representing the current
|
|
45
|
+
* layout. This can be used as the `opaqueLayout` property of `SelectLayoutParams`.
|
|
46
|
+
*/
|
|
47
|
+
getLayout(): Promise<OpaqueLayoutData>;
|
|
48
|
+
}
|
|
41
49
|
/**
|
|
42
50
|
* A component that renders an iframe with the Foxglove app.
|
|
43
51
|
*
|
|
44
52
|
* This component is a wrapper around the `FoxgloveViewer` class that provides a more
|
|
45
53
|
* convenient API for embedding the Foxglove app in a React application.
|
|
46
54
|
*/
|
|
47
|
-
export declare
|
|
55
|
+
export declare const FoxgloveViewer: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<FoxgloveViewerInterface>>;
|
|
48
56
|
export {};
|
|
49
57
|
//# sourceMappingURL=FoxgloveViewer.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FoxgloveViewer.d.ts","sourceRoot":"","sources":["../../src/FoxgloveViewer.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"FoxgloveViewer.d.ts","sourceRoot":"","sources":["../../src/FoxgloveViewer.tsx"],"names":[],"mappings":"AAKA,OAAO,EACL,KAAK,UAAU,EAEf,KAAK,gBAAgB,EACrB,KAAK,kBAAkB,EACxB,MAAM,iBAAiB,CAAC;AAIzB,KAAK,KAAK,GAAG;IACX,2FAA2F;IAC3F,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,wDAAwD;IACxD,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;;;OAIG;IACH,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,6CAA6C;IAC7C,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B;;;;OAIG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAClC,4FAA4F;IAC5F,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;IACxC,2CAA2C;IAC3C,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yEAAyE;IACzE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;SAGK;IACL,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC,CAAC;AAEF,MAAM,WAAW,uBAAuB;IACtC;;;;;OAKG;IACH,SAAS,IAAI,OAAO,CAAC,gBAAgB,CAAC,CAAC;CACxC;AAED;;;;;GAKG;AACH,eAAO,MAAM,cAAc,2GA6H1B,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.FoxgloveViewer =
|
|
3
|
+
exports.FoxgloveViewer = void 0;
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
5
|
const react_1 = require("react");
|
|
6
6
|
const embed_1 = require("@foxglove/embed");
|
|
@@ -11,7 +11,7 @@ const useShouldNotChangeOften_1 = require("./useShouldNotChangeOften");
|
|
|
11
11
|
* This component is a wrapper around the `FoxgloveViewer` class that provides a more
|
|
12
12
|
* convenient API for embedding the Foxglove app in a React application.
|
|
13
13
|
*/
|
|
14
|
-
function FoxgloveViewer(props) {
|
|
14
|
+
exports.FoxgloveViewer = (0, react_1.forwardRef)(function FoxgloveViewer(props, ref) {
|
|
15
15
|
const { src, orgSlug, className, style, data, layoutData, layout, extensions, colorScheme } = props;
|
|
16
16
|
// eslint-disable-next-line no-restricted-syntax
|
|
17
17
|
const elem = (0, react_1.useRef)(null);
|
|
@@ -92,6 +92,11 @@ function FoxgloveViewer(props) {
|
|
|
92
92
|
}
|
|
93
93
|
frame.current.setColorScheme(colorScheme);
|
|
94
94
|
}, [colorScheme]);
|
|
95
|
+
(0, react_1.useImperativeHandle)(ref, () => ({
|
|
96
|
+
async getLayout() {
|
|
97
|
+
return await frame.current?.getLayout();
|
|
98
|
+
},
|
|
99
|
+
}), []);
|
|
95
100
|
return (0, jsx_runtime_1.jsx)("div", { ref: elem, style: style, className: className });
|
|
96
|
-
}
|
|
101
|
+
});
|
|
97
102
|
//# sourceMappingURL=FoxgloveViewer.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FoxgloveViewer.js","sourceRoot":"","sources":["../../src/FoxgloveViewer.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"FoxgloveViewer.js","sourceRoot":"","sources":["../../src/FoxgloveViewer.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import type { ReactNode } from "react";
|
|
2
1
|
import { type DataSource, type OpaqueLayoutData, type SelectLayoutParams } from "@foxglove/embed";
|
|
3
2
|
type Props = {
|
|
4
3
|
/** The URL where the Foxglove app is hosted. Defaults to `https://embed.foxglove.dev/`. */
|
|
@@ -38,12 +37,21 @@ type Props = {
|
|
|
38
37
|
* */
|
|
39
38
|
onError?: (errorMsg: string) => void;
|
|
40
39
|
};
|
|
40
|
+
export interface FoxgloveViewerInterface {
|
|
41
|
+
/**
|
|
42
|
+
* Retrieve the currently configured layout from the embedded viewer.
|
|
43
|
+
*
|
|
44
|
+
* @returns A Promise that resolves with an opaque JavaScript object representing the current
|
|
45
|
+
* layout. This can be used as the `opaqueLayout` property of `SelectLayoutParams`.
|
|
46
|
+
*/
|
|
47
|
+
getLayout(): Promise<OpaqueLayoutData>;
|
|
48
|
+
}
|
|
41
49
|
/**
|
|
42
50
|
* A component that renders an iframe with the Foxglove app.
|
|
43
51
|
*
|
|
44
52
|
* This component is a wrapper around the `FoxgloveViewer` class that provides a more
|
|
45
53
|
* convenient API for embedding the Foxglove app in a React application.
|
|
46
54
|
*/
|
|
47
|
-
export declare
|
|
55
|
+
export declare const FoxgloveViewer: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<FoxgloveViewerInterface>>;
|
|
48
56
|
export {};
|
|
49
57
|
//# sourceMappingURL=FoxgloveViewer.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FoxgloveViewer.d.ts","sourceRoot":"","sources":["../../src/FoxgloveViewer.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"FoxgloveViewer.d.ts","sourceRoot":"","sources":["../../src/FoxgloveViewer.tsx"],"names":[],"mappings":"AAKA,OAAO,EACL,KAAK,UAAU,EAEf,KAAK,gBAAgB,EACrB,KAAK,kBAAkB,EACxB,MAAM,iBAAiB,CAAC;AAIzB,KAAK,KAAK,GAAG;IACX,2FAA2F;IAC3F,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,wDAAwD;IACxD,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;;;OAIG;IACH,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,6CAA6C;IAC7C,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B;;;;OAIG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAClC,4FAA4F;IAC5F,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;IACxC,2CAA2C;IAC3C,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yEAAyE;IACzE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;SAGK;IACL,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC,CAAC;AAEF,MAAM,WAAW,uBAAuB;IACtC;;;;;OAKG;IACH,SAAS,IAAI,OAAO,CAAC,gBAAgB,CAAC,CAAC;CACxC;AAED;;;;;GAKG;AACH,eAAO,MAAM,cAAc,2GA6H1B,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { useEffect, useRef } from "react";
|
|
2
|
+
import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
|
|
3
3
|
import { FoxgloveViewer as FoxgloveViewerClass, } from "@foxglove/embed";
|
|
4
4
|
import { useShouldNotChangeOften } from "./useShouldNotChangeOften";
|
|
5
5
|
/**
|
|
@@ -8,7 +8,7 @@ import { useShouldNotChangeOften } from "./useShouldNotChangeOften";
|
|
|
8
8
|
* This component is a wrapper around the `FoxgloveViewer` class that provides a more
|
|
9
9
|
* convenient API for embedding the Foxglove app in a React application.
|
|
10
10
|
*/
|
|
11
|
-
export function FoxgloveViewer(props) {
|
|
11
|
+
export const FoxgloveViewer = forwardRef(function FoxgloveViewer(props, ref) {
|
|
12
12
|
const { src, orgSlug, className, style, data, layoutData, layout, extensions, colorScheme } = props;
|
|
13
13
|
// eslint-disable-next-line no-restricted-syntax
|
|
14
14
|
const elem = useRef(null);
|
|
@@ -89,6 +89,11 @@ export function FoxgloveViewer(props) {
|
|
|
89
89
|
}
|
|
90
90
|
frame.current.setColorScheme(colorScheme);
|
|
91
91
|
}, [colorScheme]);
|
|
92
|
+
useImperativeHandle(ref, () => ({
|
|
93
|
+
async getLayout() {
|
|
94
|
+
return await frame.current?.getLayout();
|
|
95
|
+
},
|
|
96
|
+
}), []);
|
|
92
97
|
return _jsx("div", { ref: elem, style: style, className: className });
|
|
93
|
-
}
|
|
98
|
+
});
|
|
94
99
|
//# sourceMappingURL=FoxgloveViewer.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FoxgloveViewer.js","sourceRoot":"","sources":["../../src/FoxgloveViewer.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"FoxgloveViewer.js","sourceRoot":"","sources":["../../src/FoxgloveViewer.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@foxglove/embed-react",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.8",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": {
|
|
6
6
|
"name": "Foxglove Technologies",
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
"build": "yarn workspace @foxglove/embed build && tsc -b tsconfig.build.json tsconfig.build.cjs.json"
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@foxglove/embed": "0.1.
|
|
29
|
+
"@foxglove/embed": "0.1.8",
|
|
30
30
|
"tslib": "2.8.1"
|
|
31
31
|
},
|
|
32
32
|
"peerDependencies": {
|
package/src/FoxgloveViewer.tsx
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
// foxglove-depcheck-used: tslib
|
|
2
2
|
|
|
3
3
|
import type { ReactNode } from "react";
|
|
4
|
-
import { useEffect, useRef } from "react";
|
|
4
|
+
import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
|
|
5
5
|
|
|
6
6
|
import {
|
|
7
7
|
type DataSource,
|
|
@@ -51,123 +51,145 @@ type Props = {
|
|
|
51
51
|
onError?: (errorMsg: string) => void;
|
|
52
52
|
};
|
|
53
53
|
|
|
54
|
+
export interface FoxgloveViewerInterface {
|
|
55
|
+
/**
|
|
56
|
+
* Retrieve the currently configured layout from the embedded viewer.
|
|
57
|
+
*
|
|
58
|
+
* @returns A Promise that resolves with an opaque JavaScript object representing the current
|
|
59
|
+
* layout. This can be used as the `opaqueLayout` property of `SelectLayoutParams`.
|
|
60
|
+
*/
|
|
61
|
+
getLayout(): Promise<OpaqueLayoutData>;
|
|
62
|
+
}
|
|
63
|
+
|
|
54
64
|
/**
|
|
55
65
|
* A component that renders an iframe with the Foxglove app.
|
|
56
66
|
*
|
|
57
67
|
* This component is a wrapper around the `FoxgloveViewer` class that provides a more
|
|
58
68
|
* convenient API for embedding the Foxglove app in a React application.
|
|
59
69
|
*/
|
|
60
|
-
export
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
70
|
+
export const FoxgloveViewer = forwardRef<FoxgloveViewerInterface, Props>(
|
|
71
|
+
function FoxgloveViewer(props, ref): ReactNode {
|
|
72
|
+
const { src, orgSlug, className, style, data, layoutData, layout, extensions, colorScheme } =
|
|
73
|
+
props;
|
|
74
|
+
|
|
75
|
+
// eslint-disable-next-line no-restricted-syntax
|
|
76
|
+
const elem = useRef<HTMLIFrameElement | null>(null);
|
|
77
|
+
const frame = useRef<FoxgloveViewerClass>();
|
|
78
|
+
|
|
79
|
+
// Store the callbacks in refs to avoid re-rendering the component when the callbacks change.
|
|
80
|
+
const onReady = useRef<(() => void) | undefined>(props.onReady ?? undefined);
|
|
81
|
+
const onError = useRef<((errorMsg: string) => void) | undefined>(props.onError ?? undefined);
|
|
82
|
+
|
|
83
|
+
useShouldNotChangeOften(data, () => {
|
|
84
|
+
console.warn(
|
|
85
|
+
`[FoxgloveViewer] "data" is changing too frequently. This may cause performance issues, consider memoizing this value.`,
|
|
86
|
+
);
|
|
87
|
+
});
|
|
67
88
|
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
89
|
+
useShouldNotChangeOften(layoutData, () => {
|
|
90
|
+
console.warn(
|
|
91
|
+
`[FoxgloveViewer] "layoutData" is changing too frequently. This may cause performance issues, consider memoizing this value.`,
|
|
92
|
+
);
|
|
93
|
+
});
|
|
71
94
|
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
95
|
+
useShouldNotChangeOften(layout, () => {
|
|
96
|
+
console.warn(
|
|
97
|
+
`[FoxgloveViewer] "layout" is changing too frequently. This may cause performance issues, consider memoizing this value.`,
|
|
98
|
+
);
|
|
99
|
+
});
|
|
77
100
|
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
101
|
+
useShouldNotChangeOften(extensions, () => {
|
|
102
|
+
console.warn(
|
|
103
|
+
`[FoxgloveViewer] "extensions" is changing too frequently. This may cause performance issues, consider memoizing this value.`,
|
|
104
|
+
);
|
|
105
|
+
});
|
|
83
106
|
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
107
|
+
// Update onReady and onError refs when the props change.
|
|
108
|
+
useEffect(() => {
|
|
109
|
+
onReady.current = props.onReady;
|
|
110
|
+
}, [props.onReady]);
|
|
111
|
+
useEffect(() => {
|
|
112
|
+
onError.current = props.onError;
|
|
113
|
+
}, [props.onError]);
|
|
114
|
+
|
|
115
|
+
useEffect(() => {
|
|
116
|
+
if (!elem.current) {
|
|
117
|
+
return;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
const handleReady = () => {
|
|
121
|
+
onReady.current?.();
|
|
122
|
+
};
|
|
123
|
+
const handleError = (errorMsg: CustomEvent<string>) => {
|
|
124
|
+
onError.current?.(errorMsg.detail);
|
|
125
|
+
};
|
|
126
|
+
|
|
127
|
+
frame.current = new FoxgloveViewerClass({
|
|
128
|
+
parent: elem.current,
|
|
129
|
+
src,
|
|
130
|
+
orgSlug,
|
|
131
|
+
});
|
|
132
|
+
frame.current.addEventListener("ready", handleReady);
|
|
133
|
+
frame.current.addEventListener("error", handleError);
|
|
134
|
+
|
|
135
|
+
return () => {
|
|
136
|
+
frame.current?.removeEventListener("ready", handleReady);
|
|
137
|
+
frame.current?.removeEventListener("error", handleError);
|
|
138
|
+
frame.current?.destroy();
|
|
139
|
+
};
|
|
140
|
+
}, [src, orgSlug]);
|
|
141
|
+
|
|
142
|
+
useEffect(() => {
|
|
143
|
+
if (data == undefined || frame.current == undefined) {
|
|
144
|
+
return;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
frame.current.setDataSource(data);
|
|
148
|
+
}, [data]);
|
|
149
|
+
|
|
150
|
+
useEffect(() => {
|
|
151
|
+
// Favor layout over layoutData.
|
|
152
|
+
if (layout || layoutData == undefined || frame.current == undefined) {
|
|
153
|
+
return;
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
frame.current.setLayoutData(layoutData);
|
|
157
|
+
}, [layoutData, layout]);
|
|
158
|
+
|
|
159
|
+
useEffect(() => {
|
|
160
|
+
if (layout == undefined || frame.current == undefined) {
|
|
161
|
+
return;
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
frame.current.selectLayout(layout);
|
|
165
|
+
}, [layout]);
|
|
166
|
+
|
|
167
|
+
useEffect(() => {
|
|
168
|
+
if (extensions == undefined || frame.current == undefined) {
|
|
169
|
+
return;
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
frame.current.installExtensions(extensions);
|
|
173
|
+
}, [extensions]);
|
|
174
|
+
|
|
175
|
+
useEffect(() => {
|
|
176
|
+
if (colorScheme == undefined || frame.current == undefined) {
|
|
177
|
+
return;
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
frame.current.setColorScheme(colorScheme);
|
|
181
|
+
}, [colorScheme]);
|
|
182
|
+
|
|
183
|
+
useImperativeHandle(
|
|
184
|
+
ref,
|
|
185
|
+
(): FoxgloveViewerInterface => ({
|
|
186
|
+
async getLayout() {
|
|
187
|
+
return await frame.current?.getLayout();
|
|
188
|
+
},
|
|
189
|
+
}),
|
|
190
|
+
[],
|
|
87
191
|
);
|
|
88
|
-
});
|
|
89
192
|
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
);
|
|
94
|
-
});
|
|
95
|
-
|
|
96
|
-
// Update onReady and onError refs when the props change.
|
|
97
|
-
useEffect(() => {
|
|
98
|
-
onReady.current = props.onReady;
|
|
99
|
-
}, [props.onReady]);
|
|
100
|
-
useEffect(() => {
|
|
101
|
-
onError.current = props.onError;
|
|
102
|
-
}, [props.onError]);
|
|
103
|
-
|
|
104
|
-
useEffect(() => {
|
|
105
|
-
if (!elem.current) {
|
|
106
|
-
return;
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
const handleReady = () => {
|
|
110
|
-
onReady.current?.();
|
|
111
|
-
};
|
|
112
|
-
const handleError = (errorMsg: CustomEvent<string>) => {
|
|
113
|
-
onError.current?.(errorMsg.detail);
|
|
114
|
-
};
|
|
115
|
-
|
|
116
|
-
frame.current = new FoxgloveViewerClass({
|
|
117
|
-
parent: elem.current,
|
|
118
|
-
src,
|
|
119
|
-
orgSlug,
|
|
120
|
-
});
|
|
121
|
-
frame.current.addEventListener("ready", handleReady);
|
|
122
|
-
frame.current.addEventListener("error", handleError);
|
|
123
|
-
|
|
124
|
-
return () => {
|
|
125
|
-
frame.current?.removeEventListener("ready", handleReady);
|
|
126
|
-
frame.current?.removeEventListener("error", handleError);
|
|
127
|
-
frame.current?.destroy();
|
|
128
|
-
};
|
|
129
|
-
}, [src, orgSlug]);
|
|
130
|
-
|
|
131
|
-
useEffect(() => {
|
|
132
|
-
if (data == undefined || frame.current == undefined) {
|
|
133
|
-
return;
|
|
134
|
-
}
|
|
135
|
-
|
|
136
|
-
frame.current.setDataSource(data);
|
|
137
|
-
}, [data]);
|
|
138
|
-
|
|
139
|
-
useEffect(() => {
|
|
140
|
-
// Favor layout over layoutData.
|
|
141
|
-
if (layout || layoutData == undefined || frame.current == undefined) {
|
|
142
|
-
return;
|
|
143
|
-
}
|
|
144
|
-
|
|
145
|
-
frame.current.setLayoutData(layoutData);
|
|
146
|
-
}, [layoutData, layout]);
|
|
147
|
-
|
|
148
|
-
useEffect(() => {
|
|
149
|
-
if (layout == undefined || frame.current == undefined) {
|
|
150
|
-
return;
|
|
151
|
-
}
|
|
152
|
-
|
|
153
|
-
frame.current.selectLayout(layout);
|
|
154
|
-
}, [layout]);
|
|
155
|
-
|
|
156
|
-
useEffect(() => {
|
|
157
|
-
if (extensions == undefined || frame.current == undefined) {
|
|
158
|
-
return;
|
|
159
|
-
}
|
|
160
|
-
|
|
161
|
-
frame.current.installExtensions(extensions);
|
|
162
|
-
}, [extensions]);
|
|
163
|
-
|
|
164
|
-
useEffect(() => {
|
|
165
|
-
if (colorScheme == undefined || frame.current == undefined) {
|
|
166
|
-
return;
|
|
167
|
-
}
|
|
168
|
-
|
|
169
|
-
frame.current.setColorScheme(colorScheme);
|
|
170
|
-
}, [colorScheme]);
|
|
171
|
-
|
|
172
|
-
return <div ref={elem} style={style} className={className} />;
|
|
173
|
-
}
|
|
193
|
+
return <div ref={elem} style={style} className={className} />;
|
|
194
|
+
},
|
|
195
|
+
);
|