@vuu-ui/vuu-layout 0.5.15 → 0.5.17
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/LICENSE +201 -0
- package/cjs/index.js +20 -0
- package/cjs/index.js.map +7 -0
- package/esm/index.js +20 -0
- package/esm/index.js.map +7 -0
- package/index.css +2 -0
- package/index.css.map +7 -0
- package/package.json +16 -10
- package/types/Component.d.ts +7 -0
- package/types/DraggableLayout.d.ts +6 -0
- package/types/chest-of-drawers/Chest.d.ts +10 -0
- package/types/chest-of-drawers/Drawer.d.ts +18 -0
- package/{src/chest-of-drawers/index.ts → types/chest-of-drawers/index.d.ts} +0 -0
- package/types/common-types.d.ts +8 -0
- package/types/debug.d.ts +2 -0
- package/types/drag-drop/BoxModel.d.ts +143 -0
- package/types/drag-drop/DragState.d.ts +46 -0
- package/types/drag-drop/Draggable.d.ts +23 -0
- package/types/drag-drop/DropMenu.d.ts +10 -0
- package/types/drag-drop/DropTarget.d.ts +61 -0
- package/types/drag-drop/DropTargetRenderer.d.ts +18 -0
- package/types/drag-drop/dragDropTypes.d.ts +51 -0
- package/{src/drag-drop/index.ts → types/drag-drop/index.d.ts} +0 -1
- package/types/editable-label/EditableLabel.d.ts +9 -0
- package/{src/editable-label/index.ts → types/editable-label/index.d.ts} +0 -0
- package/types/flexbox/Flexbox.d.ts +5 -0
- package/types/flexbox/FlexboxLayout.d.ts +6 -0
- package/types/flexbox/FluidGrid.d.ts +7 -0
- package/types/flexbox/FluidGridLayout.d.ts +6 -0
- package/types/flexbox/Splitter.d.ts +13 -0
- package/types/flexbox/flexbox-utils.d.ts +12 -0
- package/types/flexbox/flexboxTypes.d.ts +51 -0
- package/{src/flexbox/index.ts → types/flexbox/index.d.ts} +0 -1
- package/types/flexbox/useResponsiveSizing.d.ts +10 -0
- package/types/flexbox/useSplitterResizing.d.ts +2 -0
- package/{src/index.ts → types/index.d.ts} +0 -1
- package/types/layout-action.d.ts +21 -0
- package/types/layout-header/ActionButton.d.ts +8 -0
- package/types/layout-header/Header.d.ts +13 -0
- package/{src/layout-header/index.ts → types/layout-header/index.d.ts} +0 -0
- package/types/layout-provider/LayoutProvider.d.ts +14 -0
- package/types/layout-provider/LayoutProviderContext.d.ts +8 -0
- package/{src/layout-provider/index.ts → types/layout-provider/index.d.ts} +0 -1
- package/types/layout-provider/useLayoutDragDrop.d.ts +4 -0
- package/types/layout-reducer/flexUtils.d.ts +22 -0
- package/{src/layout-reducer/index.ts → types/layout-reducer/index.d.ts} +0 -1
- package/types/layout-reducer/insert-layout-element.d.ts +8 -0
- package/types/layout-reducer/layout-reducer.d.ts +3 -0
- package/types/layout-reducer/layoutTypes.d.ts +130 -0
- package/types/layout-reducer/layoutUtils.d.ts +28 -0
- package/types/layout-reducer/remove-layout-element.d.ts +3 -0
- package/types/layout-reducer/replace-layout-element.d.ts +6 -0
- package/types/layout-reducer/resize-flex-children.d.ts +3 -0
- package/types/layout-reducer/wrap-layout-element.d.ts +9 -0
- package/types/layout-view/View.d.ts +5 -0
- package/types/layout-view/ViewContext.d.ts +18 -0
- package/{src/layout-view/index.ts → types/layout-view/index.d.ts} +0 -1
- package/types/layout-view/useView.d.ts +21 -0
- package/types/layout-view/useViewActionDispatcher.d.ts +8 -0
- package/types/layout-view/useViewResize.d.ts +7 -0
- package/types/layout-view/viewTypes.d.ts +18 -0
- package/types/palette/Palette.d.ts +18 -0
- package/types/palette/PaletteSalt.d.ts +14 -0
- package/{src/palette/index.ts → types/palette/index.d.ts} +0 -1
- package/types/placeholder/Placeholder.d.ts +12 -0
- package/{src/placeholder/index.ts → types/placeholder/index.d.ts} +0 -0
- package/types/registry/ComponentRegistry.d.ts +14 -0
- package/{src/registry/index.ts → types/registry/index.d.ts} +0 -0
- package/types/responsive/breakpoints.d.ts +4 -0
- package/{src/responsive/index.ts → types/responsive/index.d.ts} +0 -0
- package/types/responsive/measureMinimumNodeSize.d.ts +1 -0
- package/types/responsive/overflowUtils.d.ts +2 -0
- package/types/responsive/use-breakpoints.d.ts +7 -0
- package/types/responsive/useResizeObserver.d.ts +12 -0
- package/types/responsive/utils.d.ts +6 -0
- package/types/stack/Stack.d.ts +4 -0
- package/types/stack/StackLayout.d.ts +7 -0
- package/{src/stack/index.ts → types/stack/index.d.ts} +0 -1
- package/types/stack/stackTypes.d.ts +20 -0
- package/types/tabs/TabPanel.d.ts +7 -0
- package/{src/tabs/index.ts → types/tabs/index.d.ts} +0 -0
- package/types/tools/config-wrapper/ConfigWrapper.d.ts +2 -0
- package/{src/tools/config-wrapper/index.ts → types/tools/config-wrapper/index.d.ts} +0 -0
- package/types/tools/devtools-box/layout-configurator.d.ts +31 -0
- package/types/tools/devtools-tree/layout-tree-viewer.d.ts +5 -0
- package/{src/tools/index.ts → types/tools/index.d.ts} +0 -1
- package/types/use-persistent-state.d.ts +11 -0
- package/{src/utils/index.ts → types/utils/index.d.ts} +0 -0
- package/types/utils/pathUtils.d.ts +18 -0
- package/types/utils/propUtils.d.ts +5 -0
- package/types/utils/refUtils.d.ts +2 -0
- package/types/utils/styleUtils.d.ts +3 -0
- package/types/utils/typeOf.d.ts +4 -0
- package/src/Component.css +0 -0
- package/src/Component.tsx +0 -20
- package/src/DraggableLayout.css +0 -18
- package/src/DraggableLayout.tsx +0 -26
- package/src/__tests__/flexbox-utils.spec.js +0 -90
- package/src/chest-of-drawers/Chest.css +0 -36
- package/src/chest-of-drawers/Chest.tsx +0 -42
- package/src/chest-of-drawers/Drawer.css +0 -159
- package/src/chest-of-drawers/Drawer.tsx +0 -118
- package/src/common-types.ts +0 -9
- package/src/debug.ts +0 -16
- package/src/drag-drop/BoxModel.ts +0 -551
- package/src/drag-drop/DragState.ts +0 -219
- package/src/drag-drop/Draggable.ts +0 -282
- package/src/drag-drop/DropMenu.css +0 -71
- package/src/drag-drop/DropMenu.tsx +0 -61
- package/src/drag-drop/DropTarget.ts +0 -393
- package/src/drag-drop/DropTargetRenderer.css +0 -40
- package/src/drag-drop/DropTargetRenderer.tsx +0 -277
- package/src/drag-drop/dragDropTypes.ts +0 -47
- package/src/editable-label/EditableLabel.css +0 -28
- package/src/editable-label/EditableLabel.tsx +0 -99
- package/src/flexbox/Flexbox.css +0 -45
- package/src/flexbox/Flexbox.tsx +0 -70
- package/src/flexbox/FlexboxLayout.tsx +0 -28
- package/src/flexbox/FluidGrid.css +0 -134
- package/src/flexbox/FluidGrid.tsx +0 -82
- package/src/flexbox/FluidGridLayout.tsx +0 -9
- package/src/flexbox/Splitter.css +0 -140
- package/src/flexbox/Splitter.tsx +0 -127
- package/src/flexbox/flexbox-utils.ts +0 -128
- package/src/flexbox/flexboxTypes.ts +0 -68
- package/src/flexbox/useResponsiveSizing.ts +0 -82
- package/src/flexbox/useSplitterResizing.ts +0 -270
- package/src/layout-action.ts +0 -21
- package/src/layout-header/ActionButton.tsx +0 -23
- package/src/layout-header/Header.css +0 -8
- package/src/layout-header/Header.tsx +0 -216
- package/src/layout-provider/LayoutProvider.tsx +0 -161
- package/src/layout-provider/LayoutProviderContext.ts +0 -17
- package/src/layout-provider/useLayoutDragDrop.ts +0 -210
- package/src/layout-reducer/flexUtils.ts +0 -276
- package/src/layout-reducer/insert-layout-element.ts +0 -365
- package/src/layout-reducer/layout-reducer.ts +0 -237
- package/src/layout-reducer/layoutTypes.ts +0 -159
- package/src/layout-reducer/layoutUtils.ts +0 -288
- package/src/layout-reducer/remove-layout-element.ts +0 -226
- package/src/layout-reducer/replace-layout-element.ts +0 -113
- package/src/layout-reducer/resize-flex-children.ts +0 -55
- package/src/layout-reducer/wrap-layout-element.ts +0 -307
- package/src/layout-view/View.css +0 -61
- package/src/layout-view/View.tsx +0 -143
- package/src/layout-view/ViewContext.ts +0 -30
- package/src/layout-view/useView.tsx +0 -104
- package/src/layout-view/useViewActionDispatcher.ts +0 -123
- package/src/layout-view/useViewResize.ts +0 -53
- package/src/layout-view/viewTypes.ts +0 -35
- package/src/palette/Palette.css +0 -33
- package/src/palette/Palette.tsx +0 -140
- package/src/palette/PaletteSalt.css +0 -9
- package/src/palette/PaletteSalt.tsx +0 -79
- package/src/placeholder/Placeholder.css +0 -10
- package/src/placeholder/Placeholder.tsx +0 -38
- package/src/registry/ComponentRegistry.ts +0 -44
- package/src/responsive/breakpoints.ts +0 -62
- package/src/responsive/measureMinimumNodeSize.ts +0 -23
- package/src/responsive/overflowUtils.js +0 -14
- package/src/responsive/use-breakpoints.ts +0 -101
- package/src/responsive/useResizeObserver.ts +0 -154
- package/src/responsive/utils.ts +0 -37
- package/src/stack/Stack.css +0 -39
- package/src/stack/Stack.tsx +0 -173
- package/src/stack/StackLayout.tsx +0 -119
- package/src/stack/stackTypes.ts +0 -22
- package/src/tabs/TabPanel.css +0 -12
- package/src/tabs/TabPanel.tsx +0 -17
- package/src/tools/config-wrapper/ConfigWrapper.tsx +0 -55
- package/src/tools/devtools-box/layout-configurator.css +0 -112
- package/src/tools/devtools-box/layout-configurator.jsx +0 -369
- package/src/tools/devtools-tree/layout-tree-viewer.css +0 -15
- package/src/tools/devtools-tree/layout-tree-viewer.jsx +0 -36
- package/src/use-persistent-state.ts +0 -112
- package/src/utils/pathUtils.ts +0 -283
- package/src/utils/propUtils.ts +0 -26
- package/src/utils/refUtils.ts +0 -16
- package/src/utils/styleUtils.ts +0 -13
- package/src/utils/typeOf.ts +0 -25
- package/tsconfig-emit-types.json +0 -11
package/src/utils/pathUtils.ts
DELETED
|
@@ -1,283 +0,0 @@
|
|
|
1
|
-
import React, { ReactElement } from "react";
|
|
2
|
-
import { LayoutModel } from "../layout-reducer";
|
|
3
|
-
import { isContainer } from "../registry/ComponentRegistry";
|
|
4
|
-
import { getProp, getProps } from "./propUtils";
|
|
5
|
-
import { typeOf } from "./typeOf";
|
|
6
|
-
|
|
7
|
-
const removeFinalPathSegment = (path: string) => {
|
|
8
|
-
const pos = path.lastIndexOf(".");
|
|
9
|
-
if (pos === -1) {
|
|
10
|
-
return path;
|
|
11
|
-
} else {
|
|
12
|
-
return path.slice(0, pos);
|
|
13
|
-
}
|
|
14
|
-
};
|
|
15
|
-
|
|
16
|
-
export function followPathToParent(
|
|
17
|
-
source: ReactElement,
|
|
18
|
-
path: string
|
|
19
|
-
): ReactElement | null {
|
|
20
|
-
const { "data-path": dataPath, path: sourcePath = dataPath } =
|
|
21
|
-
getProps(source);
|
|
22
|
-
|
|
23
|
-
if (path === "0") return null;
|
|
24
|
-
if (path === sourcePath) return null;
|
|
25
|
-
|
|
26
|
-
return followPath(source, removeFinalPathSegment(path), true);
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
export function findTarget(
|
|
30
|
-
source: LayoutModel,
|
|
31
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
32
|
-
test: (props: any) => boolean
|
|
33
|
-
): LayoutModel | undefined {
|
|
34
|
-
const { children, ...props } = getProps(source);
|
|
35
|
-
if (test(props)) {
|
|
36
|
-
return source;
|
|
37
|
-
}
|
|
38
|
-
if (React.Children.count(children) > 0) {
|
|
39
|
-
const array = React.isValidElement(children) ? [children] : children;
|
|
40
|
-
for (const child of array) {
|
|
41
|
-
const target = findTarget(child, test);
|
|
42
|
-
if (target) {
|
|
43
|
-
return target;
|
|
44
|
-
}
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
export function containerOf(
|
|
50
|
-
source: LayoutModel,
|
|
51
|
-
target: LayoutModel
|
|
52
|
-
): LayoutModel | null {
|
|
53
|
-
if (target === source) {
|
|
54
|
-
return null;
|
|
55
|
-
}
|
|
56
|
-
const { path: sourcePath, children } = getProps(source);
|
|
57
|
-
const { idx, finalStep } = nextStep(sourcePath, getProp(target, "path"));
|
|
58
|
-
if (finalStep) {
|
|
59
|
-
return source;
|
|
60
|
-
}
|
|
61
|
-
if (children === undefined || children[idx] === undefined) {
|
|
62
|
-
return null;
|
|
63
|
-
}
|
|
64
|
-
return containerOf(children[idx], target);
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
export const getChild = (
|
|
68
|
-
children: ReactElement[],
|
|
69
|
-
idx: number
|
|
70
|
-
): ReactElement | undefined => {
|
|
71
|
-
if (React.isValidElement(children) && idx == 0) {
|
|
72
|
-
return children;
|
|
73
|
-
}
|
|
74
|
-
if (Array.isArray(children)) {
|
|
75
|
-
return children[idx];
|
|
76
|
-
}
|
|
77
|
-
};
|
|
78
|
-
|
|
79
|
-
export function followPathToComponent(component: ReactElement, path: string) {
|
|
80
|
-
const paths = path.split(".");
|
|
81
|
-
let children = [component];
|
|
82
|
-
|
|
83
|
-
const getChildren = (c: ReactElement) =>
|
|
84
|
-
React.isValidElement(c.props.children)
|
|
85
|
-
? [c.props.children]
|
|
86
|
-
: c.props.children;
|
|
87
|
-
|
|
88
|
-
for (let i = 0; i < paths.length; i++) {
|
|
89
|
-
const idx = parseInt(paths[i]);
|
|
90
|
-
const child = children[idx];
|
|
91
|
-
if (i === paths.length - 1) {
|
|
92
|
-
return child;
|
|
93
|
-
}
|
|
94
|
-
children = getChildren(child);
|
|
95
|
-
}
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
export function followPath(
|
|
99
|
-
source: LayoutModel,
|
|
100
|
-
path: string
|
|
101
|
-
): LayoutModel | undefined;
|
|
102
|
-
export function followPath(
|
|
103
|
-
source: ReactElement,
|
|
104
|
-
path: string,
|
|
105
|
-
throwIfNotFound: true
|
|
106
|
-
): ReactElement;
|
|
107
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
108
|
-
export function followPath(source: any, path: any, throwIfNotFound = false) {
|
|
109
|
-
const { "data-path": dataPath, path: sourcePath = dataPath } =
|
|
110
|
-
getProps(source);
|
|
111
|
-
if (path.indexOf(sourcePath) !== 0) {
|
|
112
|
-
throw Error(
|
|
113
|
-
`pathUtils.followPath path ${path} is not within source path ${sourcePath}`
|
|
114
|
-
);
|
|
115
|
-
}
|
|
116
|
-
const route = path.slice(sourcePath.length + 1);
|
|
117
|
-
if (route === "") {
|
|
118
|
-
return source;
|
|
119
|
-
}
|
|
120
|
-
|
|
121
|
-
let target = source;
|
|
122
|
-
const paths = route.split(".");
|
|
123
|
-
|
|
124
|
-
for (let i = 0; i < paths.length; i++) {
|
|
125
|
-
if (React.Children.count(target.props.children) === 0) {
|
|
126
|
-
const message = `element at 0.${paths
|
|
127
|
-
.slice(0, i)
|
|
128
|
-
.join(".")} has no children, so cannot fulfill rest of path ${paths
|
|
129
|
-
.slice(i)
|
|
130
|
-
.join(".")}`;
|
|
131
|
-
|
|
132
|
-
if (throwIfNotFound) {
|
|
133
|
-
throw Error(message);
|
|
134
|
-
} else {
|
|
135
|
-
console.warn(message);
|
|
136
|
-
return;
|
|
137
|
-
}
|
|
138
|
-
}
|
|
139
|
-
|
|
140
|
-
target = getChild(target.props.children, parseInt(paths[i]));
|
|
141
|
-
|
|
142
|
-
if (target === undefined) {
|
|
143
|
-
const message = `model at 0.${paths
|
|
144
|
-
.slice(0, i)
|
|
145
|
-
.join(".")} has no children that fulfill next step of path ${paths
|
|
146
|
-
.slice(i)
|
|
147
|
-
.join(".")}`;
|
|
148
|
-
|
|
149
|
-
if (throwIfNotFound) {
|
|
150
|
-
throw Error(message);
|
|
151
|
-
} else {
|
|
152
|
-
console.warn(message);
|
|
153
|
-
}
|
|
154
|
-
}
|
|
155
|
-
}
|
|
156
|
-
return target;
|
|
157
|
-
}
|
|
158
|
-
|
|
159
|
-
export function nextLeaf(root: ReactElement, path: string) {
|
|
160
|
-
const parent = followPathToParent(root, path);
|
|
161
|
-
let pathIndices = path.split(".").map((idx) => parseInt(idx, 10));
|
|
162
|
-
if (parent) {
|
|
163
|
-
const lastIdx = pathIndices.pop();
|
|
164
|
-
const { children } = parent.props;
|
|
165
|
-
if (children.length - 1 > lastIdx!) {
|
|
166
|
-
return firstLeaf(children[lastIdx! + 1]);
|
|
167
|
-
} else {
|
|
168
|
-
const parentIdx = pathIndices.pop();
|
|
169
|
-
const nextParent = followPathToParent(root, getProp(parent, "path"));
|
|
170
|
-
if (nextParent && typeof parentIdx === "number") {
|
|
171
|
-
pathIndices = nextParent.props.path
|
|
172
|
-
.split(".")
|
|
173
|
-
.map((idx: string) => parseInt(idx, 10));
|
|
174
|
-
if (nextParent.props.children.length - 1 > parentIdx) {
|
|
175
|
-
const nextStep = nextParent.props.children[parentIdx + 1];
|
|
176
|
-
if (isContainer(typeOf(nextStep) as string)) {
|
|
177
|
-
return firstLeaf(nextStep);
|
|
178
|
-
} else {
|
|
179
|
-
return nextStep;
|
|
180
|
-
}
|
|
181
|
-
}
|
|
182
|
-
}
|
|
183
|
-
}
|
|
184
|
-
}
|
|
185
|
-
|
|
186
|
-
return firstLeaf(root);
|
|
187
|
-
}
|
|
188
|
-
|
|
189
|
-
export function previousLeaf(root: ReactElement, path: string) {
|
|
190
|
-
const pathIndices = path.split(".").map((idx) => parseInt(idx, 10));
|
|
191
|
-
let lastIdx = pathIndices.pop();
|
|
192
|
-
let parent = followPathToParent(root, path);
|
|
193
|
-
if (parent != null && typeof lastIdx === "number") {
|
|
194
|
-
const { children } = parent.props;
|
|
195
|
-
if (lastIdx > 0) {
|
|
196
|
-
return lastLeaf(children[lastIdx - 1]);
|
|
197
|
-
} else {
|
|
198
|
-
while (pathIndices.length > 1) {
|
|
199
|
-
lastIdx = pathIndices.pop() as number;
|
|
200
|
-
parent = followPathToParent(
|
|
201
|
-
root,
|
|
202
|
-
getProp(parent, "path")
|
|
203
|
-
) as ReactElement;
|
|
204
|
-
if (lastIdx > 0) {
|
|
205
|
-
const nextStep = parent.props.children[lastIdx - 1];
|
|
206
|
-
if (isContainer(typeOf(nextStep) as string)) {
|
|
207
|
-
return lastLeaf(nextStep);
|
|
208
|
-
}
|
|
209
|
-
return nextStep;
|
|
210
|
-
}
|
|
211
|
-
}
|
|
212
|
-
}
|
|
213
|
-
}
|
|
214
|
-
return lastLeaf(root);
|
|
215
|
-
}
|
|
216
|
-
|
|
217
|
-
function firstLeaf(layoutRoot: ReactElement): ReactElement {
|
|
218
|
-
if (isContainer(typeOf(layoutRoot) as string)) {
|
|
219
|
-
const { children } = layoutRoot.props || layoutRoot;
|
|
220
|
-
return firstLeaf(children[0]);
|
|
221
|
-
}
|
|
222
|
-
return layoutRoot;
|
|
223
|
-
}
|
|
224
|
-
|
|
225
|
-
function lastLeaf(root: ReactElement): ReactElement {
|
|
226
|
-
if (isContainer(typeOf(root) as string)) {
|
|
227
|
-
const { children } = root.props || root;
|
|
228
|
-
return lastLeaf(children[children.length - 1]);
|
|
229
|
-
}
|
|
230
|
-
return root;
|
|
231
|
-
}
|
|
232
|
-
|
|
233
|
-
type NextStepResult = {
|
|
234
|
-
idx: number;
|
|
235
|
-
finalStep: boolean;
|
|
236
|
-
};
|
|
237
|
-
|
|
238
|
-
export function nextStep(
|
|
239
|
-
pathSoFar: string,
|
|
240
|
-
targetPath: string,
|
|
241
|
-
followPathToEnd = false
|
|
242
|
-
): NextStepResult {
|
|
243
|
-
if (pathSoFar === targetPath) {
|
|
244
|
-
return { idx: -1, finalStep: true };
|
|
245
|
-
}
|
|
246
|
-
|
|
247
|
-
const pathVisited = `${pathSoFar}.`;
|
|
248
|
-
if (!targetPath.startsWith(pathVisited)) {
|
|
249
|
-
throw Error("pathUtils nextStep has strayed from the path");
|
|
250
|
-
}
|
|
251
|
-
|
|
252
|
-
const endOfTheLine = followPathToEnd ? 0 : 1;
|
|
253
|
-
const paths = targetPath
|
|
254
|
-
.replace(pathVisited, "")
|
|
255
|
-
.split(".")
|
|
256
|
-
.map((n) => parseInt(n, 10));
|
|
257
|
-
return { idx: paths[0], finalStep: paths.length === endOfTheLine };
|
|
258
|
-
}
|
|
259
|
-
|
|
260
|
-
export function resetPath(
|
|
261
|
-
model: ReactElement,
|
|
262
|
-
path: string,
|
|
263
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
264
|
-
additionalProps?: any
|
|
265
|
-
): ReactElement {
|
|
266
|
-
if (getProp(model, "path") === path) {
|
|
267
|
-
return model;
|
|
268
|
-
}
|
|
269
|
-
const children: ReactElement[] = [];
|
|
270
|
-
React.Children.forEach(model.props.children, (child, i) => {
|
|
271
|
-
if (!getProp(child, "path")) {
|
|
272
|
-
children.push(child);
|
|
273
|
-
} else {
|
|
274
|
-
children.push(resetPath(child, `${path}.${i}`));
|
|
275
|
-
}
|
|
276
|
-
});
|
|
277
|
-
const pathPropName = model.props["data-path"] ? "data-path" : "path";
|
|
278
|
-
return React.cloneElement(
|
|
279
|
-
model,
|
|
280
|
-
{ [pathPropName]: path, ...additionalProps },
|
|
281
|
-
children
|
|
282
|
-
);
|
|
283
|
-
}
|
package/src/utils/propUtils.ts
DELETED
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import { ReactElement } from "react";
|
|
2
|
-
import { LayoutModel } from "../layout-reducer";
|
|
3
|
-
|
|
4
|
-
const NO_PROPS = {};
|
|
5
|
-
export const getProp = (component: LayoutModel, propName: string) => {
|
|
6
|
-
const props = getProps(component);
|
|
7
|
-
return props[propName] ?? props[`data-${propName}`];
|
|
8
|
-
};
|
|
9
|
-
|
|
10
|
-
export const getProps = (component?: LayoutModel) =>
|
|
11
|
-
component?.props || component || NO_PROPS;
|
|
12
|
-
|
|
13
|
-
export const getChildProp = (container: LayoutModel) => {
|
|
14
|
-
const props = getProps(container);
|
|
15
|
-
if (props.children) {
|
|
16
|
-
const {
|
|
17
|
-
children: [target, ...rest],
|
|
18
|
-
} = props;
|
|
19
|
-
if (rest.length > 0) {
|
|
20
|
-
console.warn(
|
|
21
|
-
`getChild expected a single child, found ${rest.length + 1}`
|
|
22
|
-
);
|
|
23
|
-
}
|
|
24
|
-
return target as ReactElement;
|
|
25
|
-
}
|
|
26
|
-
};
|
package/src/utils/refUtils.ts
DELETED
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import { MutableRefObject } from "react";
|
|
2
|
-
|
|
3
|
-
export function setRef<T>(
|
|
4
|
-
ref:
|
|
5
|
-
| MutableRefObject<T | null>
|
|
6
|
-
| ((instance: T | null) => void)
|
|
7
|
-
| null
|
|
8
|
-
| undefined,
|
|
9
|
-
value: T | null
|
|
10
|
-
): void {
|
|
11
|
-
if (typeof ref === "function") {
|
|
12
|
-
ref(value);
|
|
13
|
-
} else if (ref) {
|
|
14
|
-
ref.current = value;
|
|
15
|
-
}
|
|
16
|
-
}
|
package/src/utils/styleUtils.ts
DELETED
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { CSSProperties } from 'react';
|
|
2
|
-
export type CSSFlexProperties = Pick<CSSProperties, 'flexBasis' | 'flexGrow' | 'flexShrink'>;
|
|
3
|
-
|
|
4
|
-
export const expandFlex = (flex: number | CSSFlexProperties): CSSFlexProperties => {
|
|
5
|
-
if (typeof flex !== 'number') {
|
|
6
|
-
throw Error(`"no support yet for flex value ${flex}`);
|
|
7
|
-
}
|
|
8
|
-
return {
|
|
9
|
-
flexBasis: 0,
|
|
10
|
-
flexGrow: 1,
|
|
11
|
-
flexShrink: 1
|
|
12
|
-
};
|
|
13
|
-
};
|
package/src/utils/typeOf.ts
DELETED
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import { ReactElement } from 'react';
|
|
2
|
-
import { LayoutModel, WithType } from '../layout-reducer';
|
|
3
|
-
|
|
4
|
-
export function typeOf(element?: LayoutModel | WithType): string | undefined {
|
|
5
|
-
if (element) {
|
|
6
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
7
|
-
const type = element.type as any;
|
|
8
|
-
if (typeof type === 'function' || typeof type === 'object') {
|
|
9
|
-
const elementName = type.displayName || type.name || type.type?.name;
|
|
10
|
-
if (typeof elementName === 'string') {
|
|
11
|
-
return elementName;
|
|
12
|
-
}
|
|
13
|
-
}
|
|
14
|
-
if (typeof element.type === 'string') {
|
|
15
|
-
return element.type;
|
|
16
|
-
}
|
|
17
|
-
if (element.constructor) {
|
|
18
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
19
|
-
return (element.constructor as any).displayName as string;
|
|
20
|
-
}
|
|
21
|
-
throw Error(`typeOf unable to determine type of element`);
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
export const isTypeOf = (element: ReactElement, type: string) => typeOf(element) === type;
|