@vuu-ui/vuu-layout 2.1.18 → 2.1.19-beta.2
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/package.json +15 -18
- package/src/Component.js +14 -0
- package/src/LayoutContainer.css.js +24 -0
- package/src/LayoutContainer.js +26 -0
- package/src/debug.js +16 -0
- package/src/dock-layout/DockLayout.css.js +36 -0
- package/src/dock-layout/DockLayout.js +43 -0
- package/src/dock-layout/Drawer.css.js +150 -0
- package/src/dock-layout/Drawer.js +82 -0
- package/src/dock-layout/index.js +2 -0
- package/src/drag-drop/BoxModel.js +337 -0
- package/src/drag-drop/DragState.js +119 -0
- package/src/drag-drop/Draggable.js +140 -0
- package/src/drag-drop/DropTarget.js +286 -0
- package/src/drag-drop/DropTargetRenderer.js +275 -0
- package/src/drag-drop/dragDropTypes.js +0 -0
- package/src/drag-drop/index.js +3 -0
- package/src/flexbox/Flexbox.css.js +45 -0
- package/src/flexbox/Flexbox.js +45 -0
- package/src/flexbox/FlexboxLayout.js +27 -0
- package/src/flexbox/Splitter.css.js +57 -0
- package/src/flexbox/Splitter.js +112 -0
- package/src/flexbox/flexbox-utils.js +92 -0
- package/src/flexbox/flexboxTypes.js +0 -0
- package/src/flexbox/index.js +2 -0
- package/src/flexbox/useSplitterResizing.js +181 -0
- package/src/index.js +20 -0
- package/src/layout-action.js +20 -0
- package/src/layout-header/ActionButton.js +15 -0
- package/src/layout-header/Header.css.js +32 -0
- package/src/layout-header/Header.js +99 -0
- package/src/layout-header/index.js +1 -0
- package/src/layout-header/useHeader.js +76 -0
- package/src/layout-provider/LayoutProvider.js +242 -0
- package/src/layout-provider/LayoutProviderContext.js +13 -0
- package/src/layout-provider/index.js +2 -0
- package/src/layout-provider/useLayoutDragDrop.js +147 -0
- package/src/layout-reducer/flexUtils.js +186 -0
- package/src/layout-reducer/index.js +4 -0
- package/src/layout-reducer/insert-layout-element.js +179 -0
- package/src/layout-reducer/layout-reducer.js +121 -0
- package/src/layout-reducer/layoutTypes.js +34 -0
- package/src/layout-reducer/layoutUtils.js +178 -0
- package/src/layout-reducer/move-layout-element.js +18 -0
- package/src/layout-reducer/remove-layout-element.js +161 -0
- package/src/layout-reducer/replace-layout-element.js +70 -0
- package/src/layout-reducer/resize-flex-children.js +48 -0
- package/src/layout-reducer/wrap-layout-element.js +134 -0
- package/src/layout-view/View.css.js +76 -0
- package/src/layout-view/View.js +116 -0
- package/src/layout-view/useView.js +69 -0
- package/src/layout-view/useViewBroadcastChannel.js +29 -0
- package/src/layout-view/useViewResize.js +27 -0
- package/src/layout-view/viewTypes.js +0 -0
- package/src/layout-view-actions/ViewContext.js +11 -0
- package/src/layout-view-actions/useViewActionDispatcher.js +116 -0
- package/src/layout-view-actions/useViewContributions.js +31 -0
- package/src/palette/Palette.css.js +31 -0
- package/src/palette/Palette.js +85 -0
- package/src/palette/index.js +1 -0
- package/src/placeholder/LayoutStartPanel.css.js +35 -0
- package/src/placeholder/LayoutStartPanel.js +57 -0
- package/src/placeholder/Placeholder.css.js +20 -0
- package/src/placeholder/Placeholder.js +33 -0
- package/src/placeholder/index.js +1 -0
- package/src/responsive/index.js +2 -0
- package/src/responsive/measureMinimumNodeSize.js +24 -0
- package/src/responsive/useResizeObserver.js +109 -0
- package/src/responsive/utils.js +27 -0
- package/src/stack/Stack.css.js +44 -0
- package/src/stack/Stack.js +98 -0
- package/src/stack/StackLayout.js +116 -0
- package/src/stack/index.js +3 -0
- package/src/stack/stackTypes.js +0 -0
- package/src/tabs/TabPanel.css.js +17 -0
- package/src/tabs/TabPanel.js +11 -0
- package/src/tabs/index.js +1 -0
- package/src/tools/config-wrapper/ConfigWrapper.js +55 -0
- package/src/tools/config-wrapper/index.js +1 -0
- package/src/tools/devtools-box/layout-configurator.css.js +113 -0
- package/src/tools/devtools-tree/layout-tree-viewer.css.js +17 -0
- package/src/tools/index.js +3 -0
- package/src/use-persistent-state.js +43 -0
- package/src/utils/index.js +5 -0
- package/src/utils/pathUtils.js +212 -0
- package/src/utils/propUtils.js +15 -0
- package/src/utils/refUtils.js +5 -0
- package/src/utils/styleUtils.js +9 -0
- package/src/utils/typeOf.js +15 -0
- package/types/dock-layout/DockLayout.d.ts +4 -4
- package/types/dock-layout/Drawer.d.ts +4 -4
- package/types/drag-drop/BoxModel.d.ts +7 -7
- package/types/flexbox/FlexboxLayout.d.ts +4 -4
- package/types/flexbox/Splitter.d.ts +1 -1
- package/types/layout-reducer/layoutUtils.d.ts +1 -1
- package/types/layout-reducer/remove-layout-element.d.ts +1 -1
- package/types/layout-reducer/replace-layout-element.d.ts +2 -2
- package/types/layout-reducer/resize-flex-children.d.ts +2 -2
- package/types/layout-view/useView.d.ts +1 -1
- package/types/placeholder/Placeholder.d.ts +4 -4
- package/types/responsive/overflowUtils.d.ts +2 -2
- package/types/stack/StackLayout.d.ts +4 -4
- package/types/tools/devtools-box/layout-configurator.d.ts +26 -26
- package/types/tools/devtools-tree/layout-tree-viewer.d.ts +2 -2
- package/types/utils/pathUtils.d.ts +1 -1
- package/cjs/Component.js +0 -14
- package/cjs/Component.js.map +0 -1
- package/cjs/LayoutContainer.css.js +0 -6
- package/cjs/LayoutContainer.css.js.map +0 -1
- package/cjs/LayoutContainer.js +0 -33
- package/cjs/LayoutContainer.js.map +0 -1
- package/cjs/dock-layout/DockLayout.css.js +0 -6
- package/cjs/dock-layout/DockLayout.css.js.map +0 -1
- package/cjs/dock-layout/DockLayout.js +0 -41
- package/cjs/dock-layout/DockLayout.js.map +0 -1
- package/cjs/dock-layout/Drawer.css.js +0 -6
- package/cjs/dock-layout/Drawer.css.js.map +0 -1
- package/cjs/dock-layout/Drawer.js +0 -95
- package/cjs/dock-layout/Drawer.js.map +0 -1
- package/cjs/drag-drop/BoxModel.js +0 -416
- package/cjs/drag-drop/BoxModel.js.map +0 -1
- package/cjs/drag-drop/DragState.js +0 -161
- package/cjs/drag-drop/DragState.js.map +0 -1
- package/cjs/drag-drop/Draggable.js +0 -192
- package/cjs/drag-drop/Draggable.js.map +0 -1
- package/cjs/drag-drop/DropTarget.js +0 -257
- package/cjs/drag-drop/DropTarget.js.map +0 -1
- package/cjs/drag-drop/DropTargetRenderer.js +0 -218
- package/cjs/drag-drop/DropTargetRenderer.js.map +0 -1
- package/cjs/flexbox/Flexbox.css.js +0 -6
- package/cjs/flexbox/Flexbox.css.js.map +0 -1
- package/cjs/flexbox/Flexbox.js +0 -69
- package/cjs/flexbox/Flexbox.js.map +0 -1
- package/cjs/flexbox/FlexboxLayout.js +0 -30
- package/cjs/flexbox/FlexboxLayout.js.map +0 -1
- package/cjs/flexbox/Splitter.css.js +0 -6
- package/cjs/flexbox/Splitter.css.js.map +0 -1
- package/cjs/flexbox/Splitter.js +0 -122
- package/cjs/flexbox/Splitter.js.map +0 -1
- package/cjs/flexbox/flexbox-utils.js +0 -95
- package/cjs/flexbox/flexbox-utils.js.map +0 -1
- package/cjs/flexbox/useSplitterResizing.js +0 -197
- package/cjs/flexbox/useSplitterResizing.js.map +0 -1
- package/cjs/index.js +0 -122
- package/cjs/index.js.map +0 -1
- package/cjs/layout-action.js +0 -24
- package/cjs/layout-action.js.map +0 -1
- package/cjs/layout-header/Header.css.js +0 -6
- package/cjs/layout-header/Header.css.js.map +0 -1
- package/cjs/layout-header/Header.js +0 -152
- package/cjs/layout-header/Header.js.map +0 -1
- package/cjs/layout-header/useHeader.js +0 -85
- package/cjs/layout-header/useHeader.js.map +0 -1
- package/cjs/layout-provider/LayoutProvider.js +0 -304
- package/cjs/layout-provider/LayoutProvider.js.map +0 -1
- package/cjs/layout-provider/LayoutProviderContext.js +0 -23
- package/cjs/layout-provider/LayoutProviderContext.js.map +0 -1
- package/cjs/layout-provider/useLayoutDragDrop.js +0 -177
- package/cjs/layout-provider/useLayoutDragDrop.js.map +0 -1
- package/cjs/layout-reducer/flexUtils.js +0 -227
- package/cjs/layout-reducer/flexUtils.js.map +0 -1
- package/cjs/layout-reducer/insert-layout-element.js +0 -286
- package/cjs/layout-reducer/insert-layout-element.js.map +0 -1
- package/cjs/layout-reducer/layout-reducer.js +0 -202
- package/cjs/layout-reducer/layout-reducer.js.map +0 -1
- package/cjs/layout-reducer/layoutTypes.js +0 -40
- package/cjs/layout-reducer/layoutTypes.js.map +0 -1
- package/cjs/layout-reducer/layoutUtils.js +0 -237
- package/cjs/layout-reducer/layoutUtils.js.map +0 -1
- package/cjs/layout-reducer/move-layout-element.js +0 -31
- package/cjs/layout-reducer/move-layout-element.js.map +0 -1
- package/cjs/layout-reducer/remove-layout-element.js +0 -237
- package/cjs/layout-reducer/remove-layout-element.js.map +0 -1
- package/cjs/layout-reducer/replace-layout-element.js +0 -96
- package/cjs/layout-reducer/replace-layout-element.js.map +0 -1
- package/cjs/layout-reducer/resize-flex-children.js +0 -62
- package/cjs/layout-reducer/resize-flex-children.js.map +0 -1
- package/cjs/layout-reducer/wrap-layout-element.js +0 -211
- package/cjs/layout-reducer/wrap-layout-element.js.map +0 -1
- package/cjs/layout-view/View.css.js +0 -6
- package/cjs/layout-view/View.css.js.map +0 -1
- package/cjs/layout-view/View.js +0 -160
- package/cjs/layout-view/View.js.map +0 -1
- package/cjs/layout-view/useView.js +0 -75
- package/cjs/layout-view/useView.js.map +0 -1
- package/cjs/layout-view/useViewBroadcastChannel.js +0 -35
- package/cjs/layout-view/useViewBroadcastChannel.js.map +0 -1
- package/cjs/layout-view/useViewResize.js +0 -42
- package/cjs/layout-view/useViewResize.js.map +0 -1
- package/cjs/layout-view-actions/ViewContext.js +0 -16
- package/cjs/layout-view-actions/ViewContext.js.map +0 -1
- package/cjs/layout-view-actions/useViewActionDispatcher.js +0 -112
- package/cjs/layout-view-actions/useViewActionDispatcher.js.map +0 -1
- package/cjs/layout-view-actions/useViewContributions.js +0 -33
- package/cjs/layout-view-actions/useViewContributions.js.map +0 -1
- package/cjs/palette/Palette.css.js +0 -6
- package/cjs/palette/Palette.css.js.map +0 -1
- package/cjs/palette/Palette.js +0 -115
- package/cjs/palette/Palette.js.map +0 -1
- package/cjs/placeholder/LayoutStartPanel.css.js +0 -6
- package/cjs/placeholder/LayoutStartPanel.css.js.map +0 -1
- package/cjs/placeholder/LayoutStartPanel.js +0 -56
- package/cjs/placeholder/LayoutStartPanel.js.map +0 -1
- package/cjs/placeholder/Placeholder.css.js +0 -6
- package/cjs/placeholder/Placeholder.css.js.map +0 -1
- package/cjs/placeholder/Placeholder.js +0 -34
- package/cjs/placeholder/Placeholder.js.map +0 -1
- package/cjs/responsive/useResizeObserver.js +0 -118
- package/cjs/responsive/useResizeObserver.js.map +0 -1
- package/cjs/responsive/utils.js +0 -34
- package/cjs/responsive/utils.js.map +0 -1
- package/cjs/stack/Stack.css.js +0 -6
- package/cjs/stack/Stack.css.js.map +0 -1
- package/cjs/stack/Stack.js +0 -150
- package/cjs/stack/Stack.js.map +0 -1
- package/cjs/stack/StackLayout.js +0 -116
- package/cjs/stack/StackLayout.js.map +0 -1
- package/cjs/use-persistent-state.js +0 -63
- package/cjs/use-persistent-state.js.map +0 -1
- package/cjs/utils/pathUtils.js +0 -293
- package/cjs/utils/pathUtils.js.map +0 -1
- package/cjs/utils/propUtils.js +0 -27
- package/cjs/utils/propUtils.js.map +0 -1
- package/cjs/utils/refUtils.js +0 -12
- package/cjs/utils/refUtils.js.map +0 -1
- package/cjs/utils/styleUtils.js +0 -15
- package/cjs/utils/styleUtils.js.map +0 -1
- package/cjs/utils/typeOf.js +0 -27
- package/cjs/utils/typeOf.js.map +0 -1
- package/esm/Component.js +0 -12
- package/esm/Component.js.map +0 -1
- package/esm/LayoutContainer.css.js +0 -4
- package/esm/LayoutContainer.css.js.map +0 -1
- package/esm/LayoutContainer.js +0 -31
- package/esm/LayoutContainer.js.map +0 -1
- package/esm/dock-layout/DockLayout.css.js +0 -4
- package/esm/dock-layout/DockLayout.css.js.map +0 -1
- package/esm/dock-layout/DockLayout.js +0 -39
- package/esm/dock-layout/DockLayout.js.map +0 -1
- package/esm/dock-layout/Drawer.css.js +0 -4
- package/esm/dock-layout/Drawer.css.js.map +0 -1
- package/esm/dock-layout/Drawer.js +0 -93
- package/esm/dock-layout/Drawer.js.map +0 -1
- package/esm/drag-drop/BoxModel.js +0 -409
- package/esm/drag-drop/BoxModel.js.map +0 -1
- package/esm/drag-drop/DragState.js +0 -159
- package/esm/drag-drop/DragState.js.map +0 -1
- package/esm/drag-drop/Draggable.js +0 -190
- package/esm/drag-drop/Draggable.js.map +0 -1
- package/esm/drag-drop/DropTarget.js +0 -253
- package/esm/drag-drop/DropTarget.js.map +0 -1
- package/esm/drag-drop/DropTargetRenderer.js +0 -216
- package/esm/drag-drop/DropTargetRenderer.js.map +0 -1
- package/esm/flexbox/Flexbox.css.js +0 -4
- package/esm/flexbox/Flexbox.css.js.map +0 -1
- package/esm/flexbox/Flexbox.js +0 -67
- package/esm/flexbox/Flexbox.js.map +0 -1
- package/esm/flexbox/FlexboxLayout.js +0 -28
- package/esm/flexbox/FlexboxLayout.js.map +0 -1
- package/esm/flexbox/Splitter.css.js +0 -4
- package/esm/flexbox/Splitter.css.js.map +0 -1
- package/esm/flexbox/Splitter.js +0 -120
- package/esm/flexbox/Splitter.js.map +0 -1
- package/esm/flexbox/flexbox-utils.js +0 -89
- package/esm/flexbox/flexbox-utils.js.map +0 -1
- package/esm/flexbox/useSplitterResizing.js +0 -195
- package/esm/flexbox/useSplitterResizing.js.map +0 -1
- package/esm/index.js +0 -33
- package/esm/index.js.map +0 -1
- package/esm/layout-action.js +0 -22
- package/esm/layout-action.js.map +0 -1
- package/esm/layout-header/Header.css.js +0 -4
- package/esm/layout-header/Header.css.js.map +0 -1
- package/esm/layout-header/Header.js +0 -150
- package/esm/layout-header/Header.js.map +0 -1
- package/esm/layout-header/useHeader.js +0 -83
- package/esm/layout-header/useHeader.js.map +0 -1
- package/esm/layout-provider/LayoutProvider.js +0 -297
- package/esm/layout-provider/LayoutProvider.js.map +0 -1
- package/esm/layout-provider/LayoutProviderContext.js +0 -20
- package/esm/layout-provider/LayoutProviderContext.js.map +0 -1
- package/esm/layout-provider/useLayoutDragDrop.js +0 -175
- package/esm/layout-provider/useLayoutDragDrop.js.map +0 -1
- package/esm/layout-reducer/flexUtils.js +0 -218
- package/esm/layout-reducer/flexUtils.js.map +0 -1
- package/esm/layout-reducer/insert-layout-element.js +0 -282
- package/esm/layout-reducer/insert-layout-element.js.map +0 -1
- package/esm/layout-reducer/layout-reducer.js +0 -200
- package/esm/layout-reducer/layout-reducer.js.map +0 -1
- package/esm/layout-reducer/layoutTypes.js +0 -36
- package/esm/layout-reducer/layoutTypes.js.map +0 -1
- package/esm/layout-reducer/layoutUtils.js +0 -226
- package/esm/layout-reducer/layoutUtils.js.map +0 -1
- package/esm/layout-reducer/move-layout-element.js +0 -29
- package/esm/layout-reducer/move-layout-element.js.map +0 -1
- package/esm/layout-reducer/remove-layout-element.js +0 -235
- package/esm/layout-reducer/remove-layout-element.js.map +0 -1
- package/esm/layout-reducer/replace-layout-element.js +0 -92
- package/esm/layout-reducer/replace-layout-element.js.map +0 -1
- package/esm/layout-reducer/resize-flex-children.js +0 -59
- package/esm/layout-reducer/resize-flex-children.js.map +0 -1
- package/esm/layout-reducer/wrap-layout-element.js +0 -209
- package/esm/layout-reducer/wrap-layout-element.js.map +0 -1
- package/esm/layout-view/View.css.js +0 -4
- package/esm/layout-view/View.css.js.map +0 -1
- package/esm/layout-view/View.js +0 -158
- package/esm/layout-view/View.js.map +0 -1
- package/esm/layout-view/useView.js +0 -73
- package/esm/layout-view/useView.js.map +0 -1
- package/esm/layout-view/useViewBroadcastChannel.js +0 -33
- package/esm/layout-view/useViewBroadcastChannel.js.map +0 -1
- package/esm/layout-view/useViewResize.js +0 -40
- package/esm/layout-view/useViewResize.js.map +0 -1
- package/esm/layout-view-actions/ViewContext.js +0 -12
- package/esm/layout-view-actions/ViewContext.js.map +0 -1
- package/esm/layout-view-actions/useViewActionDispatcher.js +0 -110
- package/esm/layout-view-actions/useViewActionDispatcher.js.map +0 -1
- package/esm/layout-view-actions/useViewContributions.js +0 -31
- package/esm/layout-view-actions/useViewContributions.js.map +0 -1
- package/esm/palette/Palette.css.js +0 -4
- package/esm/palette/Palette.css.js.map +0 -1
- package/esm/palette/Palette.js +0 -112
- package/esm/palette/Palette.js.map +0 -1
- package/esm/placeholder/LayoutStartPanel.css.js +0 -4
- package/esm/placeholder/LayoutStartPanel.css.js.map +0 -1
- package/esm/placeholder/LayoutStartPanel.js +0 -54
- package/esm/placeholder/LayoutStartPanel.js.map +0 -1
- package/esm/placeholder/Placeholder.css.js +0 -4
- package/esm/placeholder/Placeholder.css.js.map +0 -1
- package/esm/placeholder/Placeholder.js +0 -32
- package/esm/placeholder/Placeholder.js.map +0 -1
- package/esm/responsive/useResizeObserver.js +0 -112
- package/esm/responsive/useResizeObserver.js.map +0 -1
- package/esm/responsive/utils.js +0 -31
- package/esm/responsive/utils.js.map +0 -1
- package/esm/stack/Stack.css.js +0 -4
- package/esm/stack/Stack.css.js.map +0 -1
- package/esm/stack/Stack.js +0 -148
- package/esm/stack/Stack.js.map +0 -1
- package/esm/stack/StackLayout.js +0 -114
- package/esm/stack/StackLayout.js.map +0 -1
- package/esm/use-persistent-state.js +0 -58
- package/esm/use-persistent-state.js.map +0 -1
- package/esm/utils/pathUtils.js +0 -280
- package/esm/utils/pathUtils.js.map +0 -1
- package/esm/utils/propUtils.js +0 -23
- package/esm/utils/propUtils.js.map +0 -1
- package/esm/utils/refUtils.js +0 -10
- package/esm/utils/refUtils.js.map +0 -1
- package/esm/utils/styleUtils.js +0 -13
- package/esm/utils/styleUtils.js.map +0 -1
- package/esm/utils/typeOf.js +0 -23
- package/esm/utils/typeOf.js.map +0 -1
|
@@ -1,226 +0,0 @@
|
|
|
1
|
-
import { isContainer, getLayoutComponent, uuid, isLayoutComponent } from '@vuu-ui/vuu-utils';
|
|
2
|
-
import React, { cloneElement } from 'react';
|
|
3
|
-
import { setPersistentState, hasPersistentState, getPersistentState } from '../use-persistent-state.js';
|
|
4
|
-
import { followPathToParent } from '../utils/pathUtils.js';
|
|
5
|
-
import { getProps } from '../utils/propUtils.js';
|
|
6
|
-
import { expandFlex } from '../utils/styleUtils.js';
|
|
7
|
-
import { typeOf } from '../utils/typeOf.js';
|
|
8
|
-
|
|
9
|
-
const getManagedDimension = (style) => style.flexDirection === "column" ? ["height", "width"] : ["width", "height"];
|
|
10
|
-
const theKidHasNoStyle = {};
|
|
11
|
-
const applyLayoutProps = (component, path = "0") => {
|
|
12
|
-
const [layoutProps, children] = getChildLayoutProps(
|
|
13
|
-
typeOf(component),
|
|
14
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
15
|
-
component.props,
|
|
16
|
-
path
|
|
17
|
-
);
|
|
18
|
-
return React.cloneElement(component, layoutProps, children);
|
|
19
|
-
};
|
|
20
|
-
const cloneElementAddLayoutProps = (layoutElement, previousLayout) => {
|
|
21
|
-
const type = typeOf(layoutElement);
|
|
22
|
-
const [layoutProps, children] = getChildLayoutProps(
|
|
23
|
-
type,
|
|
24
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
25
|
-
layoutElement.props,
|
|
26
|
-
"0",
|
|
27
|
-
void 0,
|
|
28
|
-
previousLayout
|
|
29
|
-
);
|
|
30
|
-
return cloneElement(layoutElement, layoutProps, children);
|
|
31
|
-
};
|
|
32
|
-
const applyLayout = (type, props, previousLayout) => {
|
|
33
|
-
const [layoutProps, children] = getChildLayoutProps(
|
|
34
|
-
type,
|
|
35
|
-
props,
|
|
36
|
-
"0",
|
|
37
|
-
void 0,
|
|
38
|
-
previousLayout
|
|
39
|
-
);
|
|
40
|
-
return {
|
|
41
|
-
...props,
|
|
42
|
-
...layoutProps,
|
|
43
|
-
type,
|
|
44
|
-
children
|
|
45
|
-
};
|
|
46
|
-
};
|
|
47
|
-
function getLayoutProps(type, props, path = "0", parentType = null, previousLayout) {
|
|
48
|
-
const {
|
|
49
|
-
active: prevActive = 0,
|
|
50
|
-
"data-path": dataPath,
|
|
51
|
-
path: prevPath = dataPath,
|
|
52
|
-
id: prevId,
|
|
53
|
-
style: prevStyle
|
|
54
|
-
} = getProps(previousLayout);
|
|
55
|
-
const prevMatch = typeOf(previousLayout) === type && path === prevPath;
|
|
56
|
-
const id = prevMatch ? prevId : props.id ?? uuid();
|
|
57
|
-
const active = type === "Stack" ? props.active ?? prevActive : void 0;
|
|
58
|
-
const key = id;
|
|
59
|
-
const style = prevMatch ? prevStyle : getStyle(type, props, parentType);
|
|
60
|
-
return isLayoutComponent(type) ? { id, key, path, style, type, active } : { id, key, style, "data-path": path };
|
|
61
|
-
}
|
|
62
|
-
function getChildLayoutProps(type, props, path, parentType = null, previousLayout) {
|
|
63
|
-
const layoutProps = getLayoutProps(
|
|
64
|
-
type,
|
|
65
|
-
props,
|
|
66
|
-
path,
|
|
67
|
-
parentType,
|
|
68
|
-
previousLayout
|
|
69
|
-
);
|
|
70
|
-
if (props.layout && !previousLayout) {
|
|
71
|
-
return [layoutProps, [layoutFromJson(props.layout, `${path}.0`)]];
|
|
72
|
-
}
|
|
73
|
-
const previousChildren = (
|
|
74
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
75
|
-
previousLayout?.children ?? // eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
76
|
-
previousLayout?.props?.children
|
|
77
|
-
);
|
|
78
|
-
const hasDynamicChildren = props.dropTarget && previousChildren;
|
|
79
|
-
const children = hasDynamicChildren ? previousChildren : getLayoutChildren(type, props.children, path, previousChildren);
|
|
80
|
-
return [layoutProps, children];
|
|
81
|
-
}
|
|
82
|
-
function getLayoutChildren(type, children, path = "0", previousChildren) {
|
|
83
|
-
const kids = Array.isArray(children) ? children : React.isValidElement(children) ? [children] : [];
|
|
84
|
-
return isContainer(type) ? kids.map((child, i) => {
|
|
85
|
-
const childType = typeOf(child);
|
|
86
|
-
const previousType = typeOf(previousChildren?.[i]);
|
|
87
|
-
if (!previousType || childType === previousType) {
|
|
88
|
-
const [layoutProps, children2] = getChildLayoutProps(
|
|
89
|
-
childType,
|
|
90
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
91
|
-
child.props,
|
|
92
|
-
`${path}.${i}`,
|
|
93
|
-
type,
|
|
94
|
-
previousChildren?.[i]
|
|
95
|
-
);
|
|
96
|
-
return React.cloneElement(child, layoutProps, children2);
|
|
97
|
-
}
|
|
98
|
-
return previousChildren?.[i];
|
|
99
|
-
}) : children;
|
|
100
|
-
}
|
|
101
|
-
const getStyle = (type, props, parentType) => {
|
|
102
|
-
let { style = theKidHasNoStyle } = props;
|
|
103
|
-
if (type === "Flexbox") {
|
|
104
|
-
style = {
|
|
105
|
-
flexDirection: props.column ? "column" : "row",
|
|
106
|
-
...style,
|
|
107
|
-
display: "flex"
|
|
108
|
-
};
|
|
109
|
-
}
|
|
110
|
-
if (style.flex) {
|
|
111
|
-
const { flex, ...otherStyles } = style;
|
|
112
|
-
style = {
|
|
113
|
-
...otherStyles,
|
|
114
|
-
...expandFlex(typeof flex === "number" ? flex : 0)
|
|
115
|
-
};
|
|
116
|
-
} else if (parentType === "Stack") {
|
|
117
|
-
style = {
|
|
118
|
-
...style,
|
|
119
|
-
...expandFlex(1)
|
|
120
|
-
};
|
|
121
|
-
} else if (parentType === "Flexbox" && (style.width || style.height) && style.flexBasis === void 0) {
|
|
122
|
-
style = {
|
|
123
|
-
...style,
|
|
124
|
-
flexBasis: "auto",
|
|
125
|
-
flexGrow: 0,
|
|
126
|
-
flexShrink: 0
|
|
127
|
-
};
|
|
128
|
-
}
|
|
129
|
-
return style;
|
|
130
|
-
};
|
|
131
|
-
function layoutFromJson({ active, id = uuid(), type, children, props, state }, path) {
|
|
132
|
-
const componentType = type.match(/^[a-z]/) ? type : getLayoutComponent(type);
|
|
133
|
-
if (componentType === void 0) {
|
|
134
|
-
throw Error(
|
|
135
|
-
`layoutUtils unable to create component from JSON, unknown type ${type}`
|
|
136
|
-
);
|
|
137
|
-
}
|
|
138
|
-
if (state) {
|
|
139
|
-
setPersistentState(id, state);
|
|
140
|
-
}
|
|
141
|
-
return React.createElement(
|
|
142
|
-
componentType,
|
|
143
|
-
{
|
|
144
|
-
active,
|
|
145
|
-
id,
|
|
146
|
-
...props,
|
|
147
|
-
key: id,
|
|
148
|
-
path
|
|
149
|
-
},
|
|
150
|
-
children ? children.map((child, i) => layoutFromJson(child, `${path}.${i}`)) : void 0
|
|
151
|
-
);
|
|
152
|
-
}
|
|
153
|
-
function layoutToJSON(component) {
|
|
154
|
-
return componentToJson(component);
|
|
155
|
-
}
|
|
156
|
-
function componentToJson(component) {
|
|
157
|
-
const type = typeOf(component);
|
|
158
|
-
const { id, children, type: _omit, ...props } = getProps(component);
|
|
159
|
-
const state = hasPersistentState(id) ? getPersistentState(id) : void 0;
|
|
160
|
-
return {
|
|
161
|
-
id,
|
|
162
|
-
type,
|
|
163
|
-
props: serializeProps(props),
|
|
164
|
-
state,
|
|
165
|
-
children: React.Children.map(children, componentToJson)
|
|
166
|
-
};
|
|
167
|
-
}
|
|
168
|
-
function serializeProps(props) {
|
|
169
|
-
if (props) {
|
|
170
|
-
const { path, ...otherProps } = props;
|
|
171
|
-
const result = {};
|
|
172
|
-
for (const [key, value] of Object.entries(otherProps)) {
|
|
173
|
-
result[key] = serializeValue(value);
|
|
174
|
-
}
|
|
175
|
-
return result;
|
|
176
|
-
}
|
|
177
|
-
}
|
|
178
|
-
function serializeValue(value) {
|
|
179
|
-
if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
|
|
180
|
-
return value;
|
|
181
|
-
} else if (Array.isArray(value)) {
|
|
182
|
-
return value.map(serializeValue);
|
|
183
|
-
} else if (typeof value === "object" && value !== null) {
|
|
184
|
-
const result = {};
|
|
185
|
-
for (const [k, v] of Object.entries(value)) {
|
|
186
|
-
result[k] = serializeValue(v);
|
|
187
|
-
}
|
|
188
|
-
return result;
|
|
189
|
-
}
|
|
190
|
-
}
|
|
191
|
-
const layoutQuery = (query, path, layoutRoot) => {
|
|
192
|
-
if (path && layoutRoot) {
|
|
193
|
-
const parentElement = followPathToParent(layoutRoot, path);
|
|
194
|
-
if (parentElement) {
|
|
195
|
-
const { id: parentContainerId } = getProps(parentElement);
|
|
196
|
-
const parentContainerType = typeOf(parentElement);
|
|
197
|
-
return {
|
|
198
|
-
parentContainerId,
|
|
199
|
-
parentContainerType
|
|
200
|
-
};
|
|
201
|
-
}
|
|
202
|
-
return {
|
|
203
|
-
parentContainerType: "Stack",
|
|
204
|
-
parentContainerId: "blah"
|
|
205
|
-
};
|
|
206
|
-
}
|
|
207
|
-
};
|
|
208
|
-
const getDefaultTabLabel = (component, tabIndex, existingLabels = []) => {
|
|
209
|
-
let label = (
|
|
210
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
211
|
-
component.props?.title ?? // eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
212
|
-
component.props?.["data-tab-title"] ?? existingLabels[tabIndex]
|
|
213
|
-
);
|
|
214
|
-
if (label) {
|
|
215
|
-
return label;
|
|
216
|
-
} else {
|
|
217
|
-
let count = tabIndex;
|
|
218
|
-
do {
|
|
219
|
-
label = `Tab ${++count}`;
|
|
220
|
-
} while (existingLabels.includes(label));
|
|
221
|
-
return label;
|
|
222
|
-
}
|
|
223
|
-
};
|
|
224
|
-
|
|
225
|
-
export { applyLayout, applyLayoutProps, cloneElementAddLayoutProps, componentToJson, getDefaultTabLabel, getManagedDimension, layoutFromJson, layoutQuery, layoutToJSON, serializeProps };
|
|
226
|
-
//# sourceMappingURL=layoutUtils.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"layoutUtils.js","sources":["../../../../packages/vuu-layout/src/layout-reducer/layoutUtils.ts"],"sourcesContent":["import {\n LayoutJSON,\n LayoutModel,\n dimension,\n getLayoutComponent,\n isContainer,\n isLayoutComponent,\n uuid,\n} from \"@vuu-ui/vuu-utils\";\nimport React, { CSSProperties, ReactElement, cloneElement } from \"react\";\nimport { TabLabelFactory } from \"../stack\";\nimport {\n getPersistentState,\n hasPersistentState,\n setPersistentState,\n} from \"../use-persistent-state\";\nimport { expandFlex, followPathToParent, getProps, typeOf } from \"../utils\";\nimport { layoutType } from \"./layoutTypes\";\n\ninterface ComponentWithId {\n id: string;\n [key: string]: unknown;\n}\n\nexport const getManagedDimension = (\n style: CSSProperties,\n): [dimension, dimension] =>\n style.flexDirection === \"column\" ? [\"height\", \"width\"] : [\"width\", \"height\"];\n\nconst theKidHasNoStyle: CSSProperties = {};\n\nexport const applyLayoutProps = (component: ReactElement, path = \"0\") => {\n const [layoutProps, children] = getChildLayoutProps(\n typeOf(component) as string,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n component.props as any,\n path,\n );\n return React.cloneElement(component, layoutProps, children);\n};\n\nexport interface LayoutProps extends ComponentWithId {\n active?: number;\n \"data-path\"?: string;\n children?: ReactElement[];\n column?: boolean;\n dropTarget?: boolean;\n key: string;\n layout?: LayoutJSON;\n path?: string;\n resizeable?: boolean;\n style: CSSProperties;\n type?: string;\n version?: number;\n}\n\n/**\n * parse the declarative JSX and clone adding layout attributes\n */\nexport const cloneElementAddLayoutProps = (\n layoutElement: ReactElement,\n previousLayout?: ReactElement,\n): ReactElement => {\n const type = typeOf(layoutElement) as string;\n const [layoutProps, children] = getChildLayoutProps(\n type,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n layoutElement.props as any,\n \"0\",\n undefined,\n previousLayout,\n );\n return cloneElement(layoutElement, layoutProps, children);\n};\n\nexport const applyLayout = (\n type: layoutType,\n props: LayoutProps,\n previousLayout?: LayoutModel,\n): LayoutModel => {\n const [layoutProps, children] = getChildLayoutProps(\n type,\n props,\n \"0\",\n undefined,\n previousLayout,\n );\n return {\n ...props,\n ...layoutProps,\n type,\n children,\n };\n};\n\nfunction getLayoutProps(\n type: string,\n props: LayoutProps,\n path = \"0\",\n parentType: string | null = null,\n previousLayout?: LayoutModel,\n): LayoutProps {\n const {\n active: prevActive = 0,\n \"data-path\": dataPath,\n path: prevPath = dataPath,\n id: prevId,\n style: prevStyle,\n } = getProps(previousLayout);\n\n const prevMatch = typeOf(previousLayout) === type && path === prevPath;\n const id = prevMatch ? prevId : (props.id ?? uuid());\n const active = type === \"Stack\" ? (props.active ?? prevActive) : undefined;\n\n const key = id;\n const style = prevMatch ? prevStyle : getStyle(type, props, parentType);\n return isLayoutComponent(type)\n ? { id, key, path, style, type, active }\n : { id, key, style, \"data-path\": path };\n}\n\nfunction getChildLayoutProps(\n type: string,\n props: LayoutProps,\n path: string,\n parentType: string | null = null,\n previousLayout?: LayoutModel,\n): [LayoutProps, ReactElement[]] {\n const layoutProps = getLayoutProps(\n type,\n props,\n path,\n parentType,\n previousLayout,\n );\n\n if (props.layout && !previousLayout) {\n return [layoutProps, [layoutFromJson(props.layout, `${path}.0`)]];\n }\n\n const previousChildren =\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n (previousLayout as any)?.children ??\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n (previousLayout as any)?.props?.children;\n const hasDynamicChildren = props.dropTarget && previousChildren;\n const children = hasDynamicChildren\n ? previousChildren\n : getLayoutChildren(type, props.children, path, previousChildren);\n return [layoutProps, children];\n}\n\nfunction getLayoutChildren(\n type: string,\n children?: ReactElement[],\n path = \"0\",\n previousChildren?: ReactElement[],\n) {\n const kids = Array.isArray(children)\n ? children\n : React.isValidElement(children)\n ? [children]\n : [];\n return isContainer(type)\n ? kids.map((child, i) => {\n const childType = typeOf(child) as string;\n const previousType = typeOf(previousChildren?.[i]);\n\n if (!previousType || childType === previousType) {\n const [layoutProps, children] = getChildLayoutProps(\n childType,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n child.props as any,\n `${path}.${i}`,\n type,\n previousChildren?.[i],\n );\n return React.cloneElement(child, layoutProps, children);\n }\n\n return previousChildren?.[i];\n })\n : children;\n}\n\nconst getStyle = (\n type: string,\n props: LayoutProps,\n parentType?: string | null,\n) => {\n let { style = theKidHasNoStyle } = props;\n if (type === \"Flexbox\") {\n style = {\n flexDirection: props.column ? \"column\" : \"row\",\n ...style,\n display: \"flex\",\n };\n }\n\n if (style.flex) {\n const { flex, ...otherStyles } = style;\n style = {\n ...otherStyles,\n ...expandFlex(typeof flex === \"number\" ? flex : 0),\n };\n } else if (parentType === \"Stack\") {\n style = {\n ...style,\n ...expandFlex(1),\n };\n } else if (\n parentType === \"Flexbox\" &&\n (style.width || style.height) &&\n style.flexBasis === undefined\n ) {\n style = {\n ...style,\n flexBasis: \"auto\",\n flexGrow: 0,\n flexShrink: 0,\n };\n }\n\n return style;\n};\n\nexport function layoutFromJson(\n { active, id = uuid(), type, children, props, state }: LayoutJSON,\n path: string,\n): ReactElement {\n const componentType = type.match(/^[a-z]/) ? type : getLayoutComponent(type);\n\n if (componentType === undefined) {\n throw Error(\n `layoutUtils unable to create component from JSON, unknown type ${type}`,\n );\n }\n\n if (state) {\n setPersistentState(id, state);\n }\n\n return React.createElement(\n componentType,\n {\n active,\n id,\n ...props,\n key: id,\n path,\n },\n children\n ? children.map((child, i) => layoutFromJson(child, `${path}.${i}`))\n : undefined,\n );\n}\n\nexport function layoutToJSON(component: ReactElement) {\n return componentToJson(component);\n}\n\nexport function componentToJson(component: ReactElement): LayoutJSON {\n const type = typeOf(component) as string;\n const { id, children, type: _omit, ...props } = getProps(component);\n\n const state = hasPersistentState(id) ? getPersistentState(id) : undefined;\n\n return {\n id,\n type,\n props: serializeProps(props as LayoutProps),\n state,\n children: React.Children.map(children, componentToJson),\n };\n}\n\nexport function serializeProps(props?: LayoutProps) {\n if (props) {\n const { path, ...otherProps } = props;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const result: { [key: string]: any } = {};\n for (const [key, value] of Object.entries(otherProps)) {\n result[key] = serializeValue(value);\n }\n return result;\n }\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nfunction serializeValue(value: unknown): any {\n if (\n typeof value === \"string\" ||\n typeof value === \"number\" ||\n typeof value === \"boolean\"\n ) {\n return value;\n } else if (Array.isArray(value)) {\n return value.map(serializeValue);\n } else if (typeof value === \"object\" && value !== null) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const result: { [key: string]: any } = {};\n for (const [k, v] of Object.entries(value)) {\n result[k] = serializeValue(v);\n }\n return result;\n }\n}\n\n// This is experimental and the only query we support to start off with is\n// PARENT_CONTAINER\nexport type LayoutQuery = \"PARENT_CONTAINER\";\n\nexport const layoutQuery = (\n query: LayoutQuery,\n path?: string,\n layoutRoot?: ReactElement,\n) => {\n if (path && layoutRoot) {\n const parentElement = followPathToParent(layoutRoot, path);\n if (parentElement) {\n const { id: parentContainerId } = getProps(parentElement);\n const parentContainerType = typeOf(parentElement);\n return {\n parentContainerId,\n parentContainerType,\n };\n }\n return {\n parentContainerType: \"Stack\",\n parentContainerId: \"blah\",\n };\n }\n};\n\nexport const getDefaultTabLabel: TabLabelFactory = (\n component,\n tabIndex,\n existingLabels = [],\n): string => {\n let label =\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n (component.props as any)?.title ??\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n (component.props as any)?.[\"data-tab-title\"] ??\n existingLabels[tabIndex];\n if (label) {\n return label;\n } else {\n let count = tabIndex;\n do {\n label = `Tab ${++count}`;\n } while (existingLabels.includes(label));\n return label;\n }\n};\n"],"names":["children"],"mappings":"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"}
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
import { cloneElement } from 'react';
|
|
2
|
-
import { followPath } from '../utils/pathUtils.js';
|
|
3
|
-
import { getProps } from '../utils/propUtils.js';
|
|
4
|
-
import { swapChild } from './replace-layout-element.js';
|
|
5
|
-
|
|
6
|
-
function moveChild(layoutRoot, { fromIndex, path, toIndex }) {
|
|
7
|
-
const target = followPath(layoutRoot, path, true);
|
|
8
|
-
const { children } = getProps(target);
|
|
9
|
-
const replacementChildren = moveChildWithinChildren(
|
|
10
|
-
children,
|
|
11
|
-
fromIndex,
|
|
12
|
-
toIndex
|
|
13
|
-
);
|
|
14
|
-
const replacement = cloneElement(target, void 0, replacementChildren);
|
|
15
|
-
return swapChild(layoutRoot, target, replacement);
|
|
16
|
-
}
|
|
17
|
-
function moveChildWithinChildren(children, fromIndex, toIndex) {
|
|
18
|
-
const newChildren = children.slice();
|
|
19
|
-
const [child] = newChildren.splice(fromIndex, 1);
|
|
20
|
-
if (toIndex === -1) {
|
|
21
|
-
return newChildren.concat(child);
|
|
22
|
-
} else {
|
|
23
|
-
newChildren.splice(toIndex, 0, child);
|
|
24
|
-
return newChildren;
|
|
25
|
-
}
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
export { moveChild };
|
|
29
|
-
//# sourceMappingURL=move-layout-element.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"move-layout-element.js","sources":["../../../../packages/vuu-layout/src/layout-reducer/move-layout-element.ts"],"sourcesContent":["import { cloneElement, ReactElement } from \"react\";\nimport { followPath, getProps } from \"../utils\";\nimport { MoveChildAction } from \"./layoutTypes\";\nimport { swapChild } from \"./replace-layout-element\";\n\nexport function moveChild(\n layoutRoot: ReactElement,\n { fromIndex, path, toIndex }: MoveChildAction\n) {\n const target = followPath(layoutRoot, path, true);\n const { children } = getProps(target);\n const replacementChildren = moveChildWithinChildren(\n children,\n fromIndex,\n toIndex\n );\n const replacement = cloneElement(target, undefined, replacementChildren);\n return swapChild(layoutRoot, target, replacement);\n}\n\nfunction moveChildWithinChildren(\n children: ReactElement[],\n fromIndex: number,\n toIndex: number\n) {\n const newChildren = children.slice();\n const [child] = newChildren.splice(fromIndex, 1);\n if (toIndex === -1) {\n return newChildren.concat(child);\n } else {\n newChildren.splice(toIndex, 0, child);\n return newChildren;\n }\n}\n"],"names":[],"mappings":";;;;;AAKO,SAAS,UACd,UACA,EAAA,EAAE,SAAW,EAAA,IAAA,EAAM,SACnB,EAAA;AACA,EAAA,MAAM,MAAS,GAAA,UAAA,CAAW,UAAY,EAAA,IAAA,EAAM,IAAI,CAAA;AAChD,EAAA,MAAM,EAAE,QAAA,EAAa,GAAA,QAAA,CAAS,MAAM,CAAA;AACpC,EAAA,MAAM,mBAAsB,GAAA,uBAAA;AAAA,IAC1B,QAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,GACF;AACA,EAAA,MAAM,WAAc,GAAA,YAAA,CAAa,MAAQ,EAAA,KAAA,CAAA,EAAW,mBAAmB,CAAA;AACvE,EAAO,OAAA,SAAA,CAAU,UAAY,EAAA,MAAA,EAAQ,WAAW,CAAA;AAClD;AAEA,SAAS,uBAAA,CACP,QACA,EAAA,SAAA,EACA,OACA,EAAA;AACA,EAAM,MAAA,WAAA,GAAc,SAAS,KAAM,EAAA;AACnC,EAAA,MAAM,CAAC,KAAK,CAAA,GAAI,WAAY,CAAA,MAAA,CAAO,WAAW,CAAC,CAAA;AAC/C,EAAA,IAAI,YAAY,CAAI,CAAA,EAAA;AAClB,IAAO,OAAA,WAAA,CAAY,OAAO,KAAK,CAAA;AAAA,GAC1B,MAAA;AACL,IAAY,WAAA,CAAA,MAAA,CAAO,OAAS,EAAA,CAAA,EAAG,KAAK,CAAA;AACpC,IAAO,OAAA,WAAA;AAAA;AAEX;;;;"}
|
|
@@ -1,235 +0,0 @@
|
|
|
1
|
-
import { VuuShellLocation } from '@vuu-ui/vuu-utils';
|
|
2
|
-
import React from 'react';
|
|
3
|
-
import { followPath, followPathToParent, nextStep, resetPath } from '../utils/pathUtils.js';
|
|
4
|
-
import { getProps, getProp } from '../utils/propUtils.js';
|
|
5
|
-
import { typeOf } from '../utils/typeOf.js';
|
|
6
|
-
import { createPlaceHolder } from './flexUtils.js';
|
|
7
|
-
import { layoutFromJson } from './layoutUtils.js';
|
|
8
|
-
import { swapChild } from './replace-layout-element.js';
|
|
9
|
-
|
|
10
|
-
function removeChild(layoutRoot, { path }) {
|
|
11
|
-
const target = followPath(layoutRoot, path);
|
|
12
|
-
let targetParent = followPathToParent(layoutRoot, path);
|
|
13
|
-
if (targetParent === null) {
|
|
14
|
-
return layoutRoot;
|
|
15
|
-
}
|
|
16
|
-
const { children } = getProps(targetParent);
|
|
17
|
-
if (
|
|
18
|
-
// this is very specific to explicitly sized components
|
|
19
|
-
children.length > 1 && typeOf(targetParent) !== "Stack" && allOtherChildrenArePlaceholders(children, path)
|
|
20
|
-
) {
|
|
21
|
-
const {
|
|
22
|
-
style: { flexBasis, display, flexDirection, ...style }
|
|
23
|
-
} = getProps(targetParent);
|
|
24
|
-
let containerPath = getProp(targetParent, "path");
|
|
25
|
-
let newLayout = swapChild(
|
|
26
|
-
layoutRoot,
|
|
27
|
-
targetParent,
|
|
28
|
-
createPlaceHolder(containerPath, flexBasis, style)
|
|
29
|
-
);
|
|
30
|
-
while (targetParent = followPathToParent(newLayout, containerPath)) {
|
|
31
|
-
if (getProp(targetParent, "path") === "0") {
|
|
32
|
-
break;
|
|
33
|
-
}
|
|
34
|
-
const { children: children2 } = getProps(targetParent);
|
|
35
|
-
if (allOtherChildrenArePlaceholders(children2)) {
|
|
36
|
-
containerPath = getProp(targetParent, "path");
|
|
37
|
-
const {
|
|
38
|
-
style: { flexBasis: flexBasis2, display: display2, flexDirection: flexDirection2, ...style2 }
|
|
39
|
-
} = getProps(targetParent);
|
|
40
|
-
newLayout = swapChild(
|
|
41
|
-
layoutRoot,
|
|
42
|
-
targetParent,
|
|
43
|
-
createPlaceHolder(containerPath, flexBasis2, style2)
|
|
44
|
-
);
|
|
45
|
-
} else if (hasAdjacentPlaceholders(children2)) {
|
|
46
|
-
newLayout = collapsePlaceholders(
|
|
47
|
-
layoutRoot,
|
|
48
|
-
targetParent
|
|
49
|
-
);
|
|
50
|
-
} else {
|
|
51
|
-
break;
|
|
52
|
-
}
|
|
53
|
-
}
|
|
54
|
-
return newLayout;
|
|
55
|
-
}
|
|
56
|
-
return _removeChild(layoutRoot, target);
|
|
57
|
-
}
|
|
58
|
-
function _removeChild(container, child) {
|
|
59
|
-
const props = getProps(container);
|
|
60
|
-
const { children: componentChildren, path, preserve } = props;
|
|
61
|
-
let { active, id: containerId } = props;
|
|
62
|
-
const { idx, finalStep } = nextStep(path, getProp(child, "path"));
|
|
63
|
-
const type = typeOf(container);
|
|
64
|
-
let children = componentChildren.slice();
|
|
65
|
-
if (finalStep) {
|
|
66
|
-
children.splice(idx, 1);
|
|
67
|
-
if (active !== void 0 && active >= idx) {
|
|
68
|
-
active = Math.max(0, active - 1);
|
|
69
|
-
}
|
|
70
|
-
if (children.length === 0 && preserve && type === "Stack") {
|
|
71
|
-
const {
|
|
72
|
-
path: path2,
|
|
73
|
-
style: { flexBasis }
|
|
74
|
-
} = getProps(child);
|
|
75
|
-
const placeHolder = containerId === VuuShellLocation.Workspace ? layoutFromJson(
|
|
76
|
-
{
|
|
77
|
-
props: {
|
|
78
|
-
style: { flexGrow: 1, flexShrink: 1, flexBasis },
|
|
79
|
-
title: "Tab 1"
|
|
80
|
-
},
|
|
81
|
-
type: "Placeholder"
|
|
82
|
-
},
|
|
83
|
-
path2
|
|
84
|
-
) : createPlaceHolder(path2, flexBasis);
|
|
85
|
-
children.push(placeHolder);
|
|
86
|
-
} else if (children.length === 1 && !preserve && path !== "0" && type.match(/Flexbox|Stack/)) {
|
|
87
|
-
return unwrap(container, children[0]);
|
|
88
|
-
}
|
|
89
|
-
if (!children.some(isFlexible) && children.some(canBeMadeFlexible)) {
|
|
90
|
-
children = makeFlexible(children);
|
|
91
|
-
}
|
|
92
|
-
} else {
|
|
93
|
-
children[idx] = _removeChild(children[idx], child);
|
|
94
|
-
}
|
|
95
|
-
children = children.map((child2, i) => resetPath(child2, `${path}.${i}`));
|
|
96
|
-
return React.cloneElement(container, { active }, children);
|
|
97
|
-
}
|
|
98
|
-
function unwrap(container, child) {
|
|
99
|
-
const type = typeOf(container);
|
|
100
|
-
const {
|
|
101
|
-
path,
|
|
102
|
-
style: { flexBasis, flexGrow, flexShrink, width, height }
|
|
103
|
-
} = getProps(container);
|
|
104
|
-
let unwrappedChild = resetPath(child, path);
|
|
105
|
-
if (path === "0") {
|
|
106
|
-
unwrappedChild = React.cloneElement(unwrappedChild, {
|
|
107
|
-
style: {
|
|
108
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
109
|
-
...child.props.style,
|
|
110
|
-
width,
|
|
111
|
-
height
|
|
112
|
-
}
|
|
113
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
114
|
-
});
|
|
115
|
-
} else if (type === "Flexbox") {
|
|
116
|
-
const dim = (
|
|
117
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
118
|
-
container.props.style.flexDirection === "column" ? "height" : "width"
|
|
119
|
-
);
|
|
120
|
-
const {
|
|
121
|
-
style: { [dim]: size, ...style }
|
|
122
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
123
|
-
} = unwrappedChild.props;
|
|
124
|
-
unwrappedChild = React.cloneElement(unwrappedChild, {
|
|
125
|
-
flexFill: void 0,
|
|
126
|
-
style: {
|
|
127
|
-
...style,
|
|
128
|
-
flexGrow,
|
|
129
|
-
flexShrink,
|
|
130
|
-
flexBasis,
|
|
131
|
-
width,
|
|
132
|
-
height
|
|
133
|
-
}
|
|
134
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
135
|
-
});
|
|
136
|
-
}
|
|
137
|
-
return unwrappedChild;
|
|
138
|
-
}
|
|
139
|
-
const isFlexible = (element) => {
|
|
140
|
-
return element.props.style?.flexGrow > 0;
|
|
141
|
-
};
|
|
142
|
-
const canBeMadeFlexible = (element) => {
|
|
143
|
-
if (element.props.style) {
|
|
144
|
-
const { width, height, flexGrow } = element.props.style;
|
|
145
|
-
return flexGrow === 0 && typeof width !== "number" && typeof height !== "number";
|
|
146
|
-
} else {
|
|
147
|
-
return false;
|
|
148
|
-
}
|
|
149
|
-
};
|
|
150
|
-
const makeFlexible = (children) => {
|
|
151
|
-
return children.map(
|
|
152
|
-
(child) => canBeMadeFlexible(child) ? React.cloneElement(child, {
|
|
153
|
-
style: {
|
|
154
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
155
|
-
...child.props.style,
|
|
156
|
-
flexGrow: 1
|
|
157
|
-
}
|
|
158
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
159
|
-
}) : child
|
|
160
|
-
);
|
|
161
|
-
};
|
|
162
|
-
const hasAdjacentPlaceholders = (children) => {
|
|
163
|
-
if (children && children.length > 0) {
|
|
164
|
-
let wasPlaceholder = getProp(children[0], "placeholder");
|
|
165
|
-
let isPlaceholder = false;
|
|
166
|
-
for (let i = 1; i < children.length; i++) {
|
|
167
|
-
isPlaceholder = getProp(children[i], "placeholder");
|
|
168
|
-
if (wasPlaceholder && isPlaceholder) {
|
|
169
|
-
return true;
|
|
170
|
-
}
|
|
171
|
-
wasPlaceholder = isPlaceholder;
|
|
172
|
-
}
|
|
173
|
-
}
|
|
174
|
-
};
|
|
175
|
-
const collapsePlaceholders = (container, target) => {
|
|
176
|
-
const { children: componentChildren, path } = getProps(container);
|
|
177
|
-
const { idx, finalStep } = nextStep(path, getProp(target, "path"));
|
|
178
|
-
let children = componentChildren.slice();
|
|
179
|
-
if (finalStep) {
|
|
180
|
-
children[idx] = _collapsePlaceHolders(target);
|
|
181
|
-
} else {
|
|
182
|
-
children[idx] = collapsePlaceholders(children[idx], target);
|
|
183
|
-
}
|
|
184
|
-
children = children.map((child, i) => resetPath(child, `${path}.${i}`));
|
|
185
|
-
return React.cloneElement(container, void 0, children);
|
|
186
|
-
};
|
|
187
|
-
const _collapsePlaceHolders = (container) => {
|
|
188
|
-
const { children } = getProps(container);
|
|
189
|
-
const newChildren = [];
|
|
190
|
-
const placeholders = [];
|
|
191
|
-
for (let i = 0; i < children.length; i++) {
|
|
192
|
-
if (getProp(children[i], "placeholder")) {
|
|
193
|
-
placeholders.push(children[i]);
|
|
194
|
-
} else {
|
|
195
|
-
if (placeholders.length === 1) {
|
|
196
|
-
newChildren.push(placeholders.pop());
|
|
197
|
-
} else if (placeholders.length > 0) {
|
|
198
|
-
newChildren.push(mergePlaceholders(placeholders));
|
|
199
|
-
placeholders.length = 0;
|
|
200
|
-
}
|
|
201
|
-
newChildren.push(children[i]);
|
|
202
|
-
}
|
|
203
|
-
}
|
|
204
|
-
if (placeholders.length === 1) {
|
|
205
|
-
newChildren.push(placeholders.pop());
|
|
206
|
-
} else if (placeholders.length > 0) {
|
|
207
|
-
newChildren.push(mergePlaceholders(placeholders));
|
|
208
|
-
}
|
|
209
|
-
const containerPath = getProp(container, "path");
|
|
210
|
-
return React.cloneElement(
|
|
211
|
-
container,
|
|
212
|
-
void 0,
|
|
213
|
-
newChildren.map((child, i) => resetPath(child, `${containerPath}.${i}`))
|
|
214
|
-
);
|
|
215
|
-
};
|
|
216
|
-
const mergePlaceholders = ([placeholder, ...placeholders]) => {
|
|
217
|
-
const targetStyle = getProp(placeholder, "style");
|
|
218
|
-
let { flexBasis, flexGrow, flexShrink } = targetStyle;
|
|
219
|
-
for (const placeholder2 of placeholders) {
|
|
220
|
-
const { style } = placeholder2.props;
|
|
221
|
-
flexBasis += style.flexBasis;
|
|
222
|
-
flexGrow = Math.max(flexGrow, style.flexGrow);
|
|
223
|
-
flexShrink = Math.max(flexShrink, style.flexShrink);
|
|
224
|
-
}
|
|
225
|
-
return React.cloneElement(placeholder, {
|
|
226
|
-
style: { ...targetStyle, flexBasis, flexGrow, flexShrink }
|
|
227
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
228
|
-
});
|
|
229
|
-
};
|
|
230
|
-
const allOtherChildrenArePlaceholders = (children, path) => children.every(
|
|
231
|
-
(child) => getProp(child, "placeholder") || path && getProp(child, "path") === path
|
|
232
|
-
);
|
|
233
|
-
|
|
234
|
-
export { removeChild };
|
|
235
|
-
//# sourceMappingURL=remove-layout-element.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"remove-layout-element.js","sources":["../../../../packages/vuu-layout/src/layout-reducer/remove-layout-element.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-non-null-assertion */\nimport { VuuShellLocation } from \"@vuu-ui/vuu-utils\";\nimport React, { ReactElement } from \"react\";\nimport {\n followPath,\n followPathToParent,\n getProp,\n getProps,\n nextStep,\n resetPath,\n typeOf,\n} from \"../utils\";\nimport { createPlaceHolder } from \"./flexUtils\";\nimport { RemoveAction } from \"./layoutTypes\";\nimport { layoutFromJson } from \"./layoutUtils\";\nimport { swapChild } from \"./replace-layout-element\";\n\nexport function removeChild(layoutRoot: ReactElement, { path }: RemoveAction) {\n const target = followPath(layoutRoot, path!) as ReactElement;\n let targetParent = followPathToParent(layoutRoot, path!);\n if (targetParent === null) {\n return layoutRoot;\n }\n const { children } = getProps(targetParent);\n if (\n // this is very specific to explicitly sized components\n children.length > 1 &&\n typeOf(targetParent) !== \"Stack\" &&\n allOtherChildrenArePlaceholders(children, path)\n ) {\n const {\n style: { flexBasis, display, flexDirection, ...style },\n } = getProps(targetParent);\n let containerPath = getProp(targetParent, \"path\");\n let newLayout = swapChild(\n layoutRoot,\n targetParent,\n createPlaceHolder(containerPath, flexBasis, style),\n );\n while ((targetParent = followPathToParent(newLayout, containerPath))) {\n if (getProp(targetParent, \"path\") === \"0\") {\n break;\n }\n const { children } = getProps(targetParent);\n if (allOtherChildrenArePlaceholders(children)) {\n containerPath = getProp(targetParent, \"path\");\n const {\n style: { flexBasis, display, flexDirection, ...style },\n } = getProps(targetParent);\n newLayout = swapChild(\n layoutRoot,\n targetParent,\n createPlaceHolder(containerPath, flexBasis, style),\n );\n } else if (hasAdjacentPlaceholders(children)) {\n newLayout = collapsePlaceholders(\n layoutRoot,\n targetParent as ReactElement,\n );\n } else {\n break;\n }\n }\n return newLayout;\n }\n return _removeChild(layoutRoot, target);\n}\n\nfunction _removeChild(\n container: ReactElement,\n child: ReactElement,\n): ReactElement {\n const props = getProps(container);\n const { children: componentChildren, path, preserve } = props;\n let { active, id: containerId } = props;\n const { idx, finalStep } = nextStep(path, getProp(child, \"path\"));\n const type = typeOf(container) as string;\n let children = componentChildren.slice() as ReactElement[];\n\n if (finalStep) {\n children.splice(idx, 1);\n\n if (active !== undefined && active >= idx) {\n active = Math.max(0, active - 1);\n }\n\n if (children.length === 0 && preserve && type === \"Stack\") {\n const {\n path,\n style: { flexBasis },\n } = getProps(child);\n const placeHolder =\n containerId === VuuShellLocation.Workspace\n ? layoutFromJson(\n {\n props: {\n style: { flexGrow: 1, flexShrink: 1, flexBasis },\n title: \"Tab 1\",\n },\n type: \"Placeholder\",\n },\n path,\n )\n : createPlaceHolder(path, flexBasis);\n children.push(placeHolder);\n } else if (\n children.length === 1 &&\n !preserve &&\n path !== \"0\" &&\n type.match(/Flexbox|Stack/)\n ) {\n return unwrap(container, children[0]);\n }\n\n if (!children.some(isFlexible) && children.some(canBeMadeFlexible)) {\n children = makeFlexible(children);\n }\n } else {\n children[idx] = _removeChild(children[idx], child) as ReactElement;\n }\n\n children = children.map((child, i) => resetPath(child, `${path}.${i}`));\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n return React.cloneElement(container, { active } as any, children);\n}\n\nfunction unwrap(container: ReactElement, child: ReactElement) {\n const type = typeOf(container);\n const {\n path,\n style: { flexBasis, flexGrow, flexShrink, width, height },\n } = getProps(container);\n\n let unwrappedChild = resetPath(child, path);\n if (path === \"0\") {\n unwrappedChild = React.cloneElement(unwrappedChild, {\n style: {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n ...(child.props as any).style,\n width,\n height,\n },\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n } as any);\n } else if (type === \"Flexbox\") {\n const dim =\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n (container.props as any).style.flexDirection === \"column\"\n ? \"height\"\n : \"width\";\n const {\n style: { [dim]: size, ...style },\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n } = unwrappedChild.props as any;\n unwrappedChild = React.cloneElement(unwrappedChild, {\n flexFill: undefined,\n style: {\n ...style,\n flexGrow,\n flexShrink,\n flexBasis,\n width,\n height,\n },\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n } as any);\n }\n return unwrappedChild;\n}\n\nconst isFlexible = (element: ReactElement) => {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n return (element.props as any).style?.flexGrow > 0;\n};\n\nconst canBeMadeFlexible = (element: ReactElement) => {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if ((element.props as any).style) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const { width, height, flexGrow } = (element.props as any).style;\n return (\n flexGrow === 0 && typeof width !== \"number\" && typeof height !== \"number\"\n );\n } else {\n return false;\n }\n};\n\nconst makeFlexible = (children: ReactElement[]) => {\n return children.map((child) =>\n canBeMadeFlexible(child)\n ? React.cloneElement(child, {\n style: {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n ...(child.props as any).style,\n flexGrow: 1,\n },\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n } as any)\n : child,\n );\n};\n\nconst hasAdjacentPlaceholders = (children: ReactElement[]) => {\n if (children && children.length > 0) {\n let wasPlaceholder = getProp(children[0], \"placeholder\");\n let isPlaceholder = false;\n for (let i = 1; i < children.length; i++) {\n isPlaceholder = getProp(children[i], \"placeholder\");\n if (wasPlaceholder && isPlaceholder) {\n return true;\n }\n wasPlaceholder = isPlaceholder;\n }\n }\n};\n\nconst collapsePlaceholders = (\n container: ReactElement,\n target: ReactElement,\n) => {\n const { children: componentChildren, path } = getProps(container);\n const { idx, finalStep } = nextStep(path, getProp(target, \"path\"));\n let children = componentChildren.slice() as ReactElement[];\n if (finalStep) {\n children[idx] = _collapsePlaceHolders(target);\n } else {\n children[idx] = collapsePlaceholders(children[idx], target) as ReactElement;\n }\n\n children = children.map((child, i) => resetPath(child, `${path}.${i}`));\n return React.cloneElement(container, undefined, children);\n};\n\nconst _collapsePlaceHolders = (container: ReactElement) => {\n const { children } = getProps(container);\n const newChildren = [];\n const placeholders: ReactElement[] = [];\n\n for (let i = 0; i < children.length; i++) {\n if (getProp(children[i], \"placeholder\")) {\n placeholders.push(children[i]);\n } else {\n if (placeholders.length === 1) {\n newChildren.push(placeholders.pop());\n } else if (placeholders.length > 0) {\n newChildren.push(mergePlaceholders(placeholders));\n placeholders.length = 0;\n }\n newChildren.push(children[i]);\n }\n }\n\n if (placeholders.length === 1) {\n newChildren.push(placeholders.pop());\n } else if (placeholders.length > 0) {\n newChildren.push(mergePlaceholders(placeholders));\n }\n\n const containerPath = getProp(container, \"path\");\n return React.cloneElement(\n container,\n undefined,\n newChildren.map((child, i) => resetPath(child, `${containerPath}.${i}`)),\n );\n};\n\nconst mergePlaceholders = ([placeholder, ...placeholders]: ReactElement[]) => {\n const targetStyle = getProp(placeholder, \"style\");\n let { flexBasis, flexGrow, flexShrink } = targetStyle;\n for (const placeholder of placeholders) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const { style } = placeholder.props as any;\n flexBasis += style.flexBasis;\n flexGrow = Math.max(flexGrow, style.flexGrow);\n flexShrink = Math.max(flexShrink, style.flexShrink);\n }\n return React.cloneElement(placeholder, {\n style: { ...targetStyle, flexBasis, flexGrow, flexShrink },\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n } as any);\n};\n\nconst allOtherChildrenArePlaceholders = (\n children: ReactElement[],\n path?: string,\n) =>\n children.every(\n (child) =>\n getProp(child, \"placeholder\") ||\n (path && getProp(child, \"path\") === path),\n );\n"],"names":["children","flexBasis","display","flexDirection","style","path","child","placeholder"],"mappings":"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"}
|
|
@@ -1,92 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { nextStep } from '../utils/pathUtils.js';
|
|
3
|
-
import { getProp, getProps } from '../utils/propUtils.js';
|
|
4
|
-
import { applyLayoutProps } from './layoutUtils.js';
|
|
5
|
-
|
|
6
|
-
function replaceChild(model, { target, replacement }) {
|
|
7
|
-
return _replaceChild(model, target, replacement);
|
|
8
|
-
}
|
|
9
|
-
function _replaceChild(model, child, replacement) {
|
|
10
|
-
const path = getProp(child, "path");
|
|
11
|
-
const resizeable = getProp(child, "resizeable");
|
|
12
|
-
const { style } = getProps(child);
|
|
13
|
-
const newChild = applyLayoutProps(
|
|
14
|
-
React.cloneElement(replacement, {
|
|
15
|
-
resizeable,
|
|
16
|
-
style: {
|
|
17
|
-
...style,
|
|
18
|
-
...replacement.props.style
|
|
19
|
-
}
|
|
20
|
-
}),
|
|
21
|
-
path
|
|
22
|
-
);
|
|
23
|
-
return swapChild(model, child, newChild);
|
|
24
|
-
}
|
|
25
|
-
function swapChild(model, child, replacement, op) {
|
|
26
|
-
if (model === child) {
|
|
27
|
-
return replacement;
|
|
28
|
-
}
|
|
29
|
-
const { idx, finalStep } = nextStep(
|
|
30
|
-
getProp(model, "path"),
|
|
31
|
-
getProp(child, "path")
|
|
32
|
-
);
|
|
33
|
-
const modelChildren = model.props.children;
|
|
34
|
-
const children = modelChildren.slice();
|
|
35
|
-
if (finalStep) {
|
|
36
|
-
if (!op) {
|
|
37
|
-
children[idx] = replacement;
|
|
38
|
-
} else if (op === "collapse") {
|
|
39
|
-
children[idx] = collapse(model, children[idx]);
|
|
40
|
-
} else if (op === "expand") {
|
|
41
|
-
children[idx] = expand(children[idx]);
|
|
42
|
-
}
|
|
43
|
-
} else {
|
|
44
|
-
children[idx] = swapChild(children[idx], child, replacement, op);
|
|
45
|
-
}
|
|
46
|
-
return React.cloneElement(model, void 0, children);
|
|
47
|
-
}
|
|
48
|
-
function collapse(parent, child) {
|
|
49
|
-
const { style: parentStyle } = getProps(parent);
|
|
50
|
-
const { style: childStyle } = getProps(child);
|
|
51
|
-
const { width, height, flexBasis, flexShrink, flexGrow, ...rest } = childStyle;
|
|
52
|
-
const restoreStyle = {
|
|
53
|
-
width,
|
|
54
|
-
height,
|
|
55
|
-
flexBasis,
|
|
56
|
-
flexShrink,
|
|
57
|
-
flexGrow
|
|
58
|
-
};
|
|
59
|
-
const style = {
|
|
60
|
-
...rest,
|
|
61
|
-
flexBasis: 0,
|
|
62
|
-
flexGrow: 0,
|
|
63
|
-
flexShrink: 0
|
|
64
|
-
};
|
|
65
|
-
const collapsed = parentStyle.flexDirection === "row" ? "vertical" : parentStyle.flexDirection === "column" ? "horizontal" : false;
|
|
66
|
-
if (collapsed) {
|
|
67
|
-
return React.cloneElement(child, {
|
|
68
|
-
collapsed,
|
|
69
|
-
restoreStyle,
|
|
70
|
-
style
|
|
71
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
72
|
-
});
|
|
73
|
-
}
|
|
74
|
-
return child;
|
|
75
|
-
}
|
|
76
|
-
function expand(child) {
|
|
77
|
-
const { style: childStyle, restoreStyle } = getProps(child);
|
|
78
|
-
const { flexBasis, flexShrink, flexGrow, ...rest } = childStyle;
|
|
79
|
-
const style = {
|
|
80
|
-
...rest,
|
|
81
|
-
...restoreStyle
|
|
82
|
-
};
|
|
83
|
-
return React.cloneElement(child, {
|
|
84
|
-
collapsed: false,
|
|
85
|
-
style,
|
|
86
|
-
restoreStyle: void 0
|
|
87
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
88
|
-
});
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
export { _replaceChild, replaceChild, swapChild };
|
|
92
|
-
//# sourceMappingURL=replace-layout-element.js.map
|