-
-
Notifications
You must be signed in to change notification settings - Fork 41
/
Lumino.tsx
56 lines (51 loc) 路 1.23 KB
/
Lumino.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
/*
* Copyright (c) 2022-2023 Datalayer Inc. All rights reserved.
*
* MIT License
*/
import { useRef, useEffect } from 'react';
import { unmountComponentAtNode } from 'react-dom';
import { Widget } from '@lumino/widgets';
type LuminoProps = {
id?: string;
height?: string | number;
children: Widget;
}
export const Lumino = (props: LuminoProps) => {
const ref = useRef<HTMLDivElement>(null);
const { children, id, height } = props;
useEffect(() => {
if (ref && ref.current) {
try {
Widget.attach(children, ref.current);
} catch(e) {
console.warn('Exception while attaching Lumino widget.', e);
}
return () => {
try {
unmountComponentAtNode(children.node);
if (children.isAttached || children.node.isConnected) {
children.dispose();
Widget.detach(children);
}
} catch(e) {
// no-op.
// console.debug('Exception while detaching Lumino widget.', e);
}
}
}
}, [ref, children]);
return (
<div
ref={ref}
id={id}
style={{ height: height, minHeight: height }}
>
</div>
)
}
Lumino.defaultProps = {
id: "lumino-id",
height: "100%",
}
export default Lumino;