-
Notifications
You must be signed in to change notification settings - Fork 0
/
Subdivide.tsx
101 lines (89 loc) · 2.4 KB
/
Subdivide.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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
import React from 'react';
import { TinyEmitter } from 'tiny-emitter';
import Container from './Container';
import Divider from './Divider';
import { Emitter, Component } from '../types';
import Layout from '../layout';
import Overlay from './Overlay';
import Config from '../contexts/Config';
import { addId } from '../utils/Id';
interface PropTypes {
component: Component;
width?: number;
height?: number;
top?: number;
left?: number;
selfPosition?: boolean;
}
const Subdivide: React.FC<PropTypes> = (props) => {
const { component, width, height, top, left, selfPosition = true } = props;
const emitter = React.useMemo(() => new TinyEmitter() as Emitter, []);
const { onLayoutChange, initialState, classNames } = Config.useConfig();
const [layoutRef, actions] = Layout.useLayout(emitter, {
onLayoutChange,
initialState,
size: {
width,
height,
},
position: {
top,
left,
},
});
const { dividers, containers, overlay, layout } = layoutRef.current;
const overlayElement = overlay.show ? <Overlay {...overlay} /> : null;
React.useEffect(() => {
if (initialState) {
Object.keys(initialState.containers).forEach((id) => {
addId(Number(id));
});
}
}, []);
const style: React.CSSProperties = {
width: layout.width || '100%',
height: layout.height || '100%',
position: 'absolute',
};
if (selfPosition) {
style.top = layout.top;
style.left = layout.left;
}
const setContainerState = React.useCallback(
(id: number, state: unknown) => {
actions.update({
id,
state,
});
},
[actions],
);
return (
<div style={style} className={classNames.layout}>
{Object.keys(containers).reduce<React.ReactNode[]>(
(elements, id: string) => {
const container = containers[id];
if (container.isGroup) {
return elements;
}
return elements.concat(
<Container
key={id}
setState={setContainerState}
emitter={emitter}
component={component}
{...container}
/>,
);
},
[],
)}
{Object.keys(dividers).map((id) => {
const divider = dividers[id];
return <Divider {...divider} emitter={emitter} key={divider.id} />;
})}
{overlayElement}
</div>
);
};
export default Subdivide;