@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 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Header.js","sources":["../../../../packages/vuu-layout/src/layout-header/Header.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { EditableLabel, IconButton } from \"@vuu-ui/vuu-ui-controls\";\nimport cx from \"clsx\";\nimport { HTMLAttributes, MouseEvent, ReactElement, cloneElement } from \"react\";\nimport { Contribution } from \"../layout-view/viewTypes\";\nimport { useHeader } from \"./useHeader\";\n\nimport headerCss from \"./Header.css\";\n\nexport interface HeaderProps extends HTMLAttributes<HTMLDivElement> {\n allowRename?: boolean;\n collapsed?: boolean;\n contributions?: Contribution[];\n expanded?: boolean;\n closeable?: boolean;\n onCollapse?: () => void;\n onEditTitle?: (value: string) => void;\n onExpand?: () => void;\n orientation?: \"horizontal\" | \"vertical\";\n tearOut?: boolean;\n}\n\nconst classBase = \"vuuHeader\";\n\nexport const Header = ({\n allowRename = false,\n className: classNameProp,\n contributions,\n collapsed,\n closeable,\n onCollapse,\n onEditTitle,\n onExpand,\n orientation: orientationProp = \"horizontal\",\n style,\n title = \"Untitled\",\n}: HeaderProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-header\",\n css: headerCss,\n window: targetWindow,\n });\n\n const {\n editing,\n focusTitle,\n labelFieldRef,\n onClickEdit,\n onClose,\n onExitEditMode,\n onMouseDown,\n onTitleKeyDown,\n onToggleCollapse,\n onToggleExpand,\n setValue,\n value,\n } = useHeader({\n onCollapse,\n onEditTitle,\n onExpand,\n title,\n });\n\n const handleButtonMouseDown = (evt: MouseEvent) => {\n // do not allow drag to be initiated\n evt.stopPropagation();\n };\n\n const orientation = collapsed || orientationProp;\n\n const className = cx(classBase, classNameProp, `${classBase}-${orientation}`);\n\n const toolbarItems: ReactElement[] = [];\n const postTitleContributedItems: ReactElement[] = [];\n const actionButtons: ReactElement[] = [];\n const allowCollapse =\n typeof collapsed === \"boolean\" || typeof collapsed === \"string\";\n\n contributions?.forEach((contribution, i) => {\n switch (contribution.location) {\n case \"pre-title\":\n toolbarItems.push(cloneElement(contribution.content, { key: i }));\n break;\n default:\n postTitleContributedItems.push(\n cloneElement(contribution.content, { key: i }),\n );\n }\n });\n\n allowCollapse &&\n toolbarItems.push(\n <IconButton\n className={cx(`${classBase}-toggle`, {\n [`${classBase}-collapsed`]: collapsed,\n })}\n data-embedded\n icon={collapsed ? \"chevron-open\" : \"chevron-down\"}\n key=\"collapse-button\"\n onClick={collapsed ? onToggleExpand : onToggleCollapse}\n size={20}\n tabIndex={0}\n appearance=\"transparent\"\n sentiment=\"neutral\"\n />,\n );\n\n title &&\n toolbarItems.push(\n <EditableLabel\n className={`${classBase}-title`}\n editing={editing}\n key=\"title\"\n value={value}\n onChange={setValue}\n onMouseDownCapture={focusTitle}\n onExitEditMode={onExitEditMode}\n onKeyDown={onTitleKeyDown}\n ref={labelFieldRef}\n />,\n );\n\n allowRename &&\n toolbarItems.push(\n <IconButton\n className={`${classBase}-edit`}\n data-embedded\n icon=\"edit\"\n key=\"edit-button\"\n onClick={onClickEdit}\n onMouseDown={handleButtonMouseDown}\n tabIndex={0}\n variant=\"secondary\"\n />,\n );\n\n closeable &&\n actionButtons.push(\n <IconButton\n appearance=\"transparent\"\n data-embedded\n icon=\"close\"\n key=\"close\"\n onClick={onClose}\n onMouseDown={handleButtonMouseDown}\n sentiment=\"neutral\"\n />,\n );\n\n postTitleContributedItems.length > 0 &&\n toolbarItems.push(\n <div data-align=\"end\" key=\"contributions\">\n {postTitleContributedItems}\n </div>,\n );\n\n actionButtons.length > 0 &&\n toolbarItems.push(\n <div data-align=\"end\" key=\"actions\">\n {actionButtons}\n </div>,\n );\n\n return (\n <div\n className={cx(\"vuuToolbarProxy\", className)}\n style={style}\n onMouseDown={onMouseDown}\n >\n {toolbarItems}\n </div>\n );\n};\n"],"names":["useWindow","useComponentCssInjection","headerCss","useHeader","cloneElement","jsx","IconButton","EditableLabel"],"mappings":"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"}
|
|
@@ -1,85 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var React = require('react');
|
|
4
|
-
var ViewContext = require('../layout-view-actions/ViewContext.js');
|
|
5
|
-
var vuuUtils = require('@vuu-ui/vuu-utils');
|
|
6
|
-
|
|
7
|
-
const useHeader = ({
|
|
8
|
-
onCollapse,
|
|
9
|
-
onEditTitle,
|
|
10
|
-
onExpand,
|
|
11
|
-
title
|
|
12
|
-
}) => {
|
|
13
|
-
const [editing, setEditing] = React.useState(false);
|
|
14
|
-
const [value, setValue] = React.useState(title);
|
|
15
|
-
const labelFieldRef = React.useRef(null);
|
|
16
|
-
const viewDispatch = ViewContext.useViewDispatch();
|
|
17
|
-
const handleClose = React.useCallback(
|
|
18
|
-
(evt) => viewDispatch?.({ type: "remove" }, evt),
|
|
19
|
-
[viewDispatch]
|
|
20
|
-
);
|
|
21
|
-
const focusTitle = React.useCallback(() => {
|
|
22
|
-
labelFieldRef.current?.focus();
|
|
23
|
-
}, []);
|
|
24
|
-
const handleClickEdit = React.useCallback(() => {
|
|
25
|
-
focusTitle();
|
|
26
|
-
setEditing((isEditing) => !isEditing);
|
|
27
|
-
}, [focusTitle]);
|
|
28
|
-
const handleTitleKeyDown = (evt) => {
|
|
29
|
-
if (evt.key === "Enter") {
|
|
30
|
-
setEditing(true);
|
|
31
|
-
}
|
|
32
|
-
};
|
|
33
|
-
const handleMouseDown = React.useCallback(
|
|
34
|
-
(e) => {
|
|
35
|
-
const button = vuuUtils.queryClosest(e.target, ".saltButton");
|
|
36
|
-
if (button === null) {
|
|
37
|
-
viewDispatch?.({ type: "mousedown" }, e);
|
|
38
|
-
}
|
|
39
|
-
},
|
|
40
|
-
[viewDispatch]
|
|
41
|
-
);
|
|
42
|
-
const handleExitEditMode = (originalValue = "", finalValue = "", allowDeactivation = true, editCancelled = false) => {
|
|
43
|
-
setEditing(false);
|
|
44
|
-
if (editCancelled) {
|
|
45
|
-
setValue(originalValue);
|
|
46
|
-
} else if (finalValue !== originalValue) {
|
|
47
|
-
setValue(finalValue);
|
|
48
|
-
onEditTitle?.(finalValue);
|
|
49
|
-
}
|
|
50
|
-
if (allowDeactivation === false) {
|
|
51
|
-
labelFieldRef.current?.focus();
|
|
52
|
-
}
|
|
53
|
-
};
|
|
54
|
-
const handleToggleCollapse = React.useCallback(
|
|
55
|
-
(e) => {
|
|
56
|
-
viewDispatch?.({ type: "collapse" }, e);
|
|
57
|
-
onCollapse?.();
|
|
58
|
-
},
|
|
59
|
-
[onCollapse, viewDispatch]
|
|
60
|
-
);
|
|
61
|
-
const handleToggleExpand = React.useCallback(
|
|
62
|
-
(e) => {
|
|
63
|
-
viewDispatch?.({ type: "expand" }, e);
|
|
64
|
-
onExpand?.();
|
|
65
|
-
},
|
|
66
|
-
[onExpand, viewDispatch]
|
|
67
|
-
);
|
|
68
|
-
return {
|
|
69
|
-
editing,
|
|
70
|
-
focusTitle,
|
|
71
|
-
labelFieldRef,
|
|
72
|
-
onClickEdit: handleClickEdit,
|
|
73
|
-
onClose: handleClose,
|
|
74
|
-
onExitEditMode: handleExitEditMode,
|
|
75
|
-
onMouseDown: handleMouseDown,
|
|
76
|
-
onToggleCollapse: handleToggleCollapse,
|
|
77
|
-
onToggleExpand: handleToggleExpand,
|
|
78
|
-
onTitleKeyDown: handleTitleKeyDown,
|
|
79
|
-
setValue,
|
|
80
|
-
value
|
|
81
|
-
};
|
|
82
|
-
};
|
|
83
|
-
|
|
84
|
-
exports.useHeader = useHeader;
|
|
85
|
-
//# sourceMappingURL=useHeader.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useHeader.js","sources":["../../../../packages/vuu-layout/src/layout-header/useHeader.ts"],"sourcesContent":["import {\n KeyboardEvent,\n MouseEventHandler,\n useCallback,\n useRef,\n useState,\n} from \"react\";\nimport type { HeaderProps } from \"./Header\";\nimport { useViewDispatch } from \"../layout-view-actions/ViewContext\";\nimport { queryClosest } from \"@vuu-ui/vuu-utils\";\n\nexport interface HeaderHookProps\n extends Pick<HeaderProps, \"onCollapse\" | \"onEditTitle\" | \"onExpand\"> {\n debugString?: string;\n title: string;\n}\n\nexport const useHeader = ({\n onCollapse,\n onEditTitle,\n onExpand,\n title,\n}: HeaderHookProps) => {\n const [editing, setEditing] = useState<boolean>(false);\n const [value, setValue] = useState<string>(title);\n const labelFieldRef = useRef<HTMLDivElement>(null);\n\n const viewDispatch = useViewDispatch();\n const handleClose = useCallback<MouseEventHandler>(\n (evt) => viewDispatch?.({ type: \"remove\" }, evt),\n [viewDispatch],\n );\n\n const focusTitle = useCallback(() => {\n labelFieldRef.current?.focus();\n }, []);\n\n const handleClickEdit = useCallback(() => {\n focusTitle();\n setEditing((isEditing) => !isEditing);\n }, [focusTitle]);\n\n const handleTitleKeyDown = (evt: KeyboardEvent<HTMLDivElement>) => {\n if (evt.key === \"Enter\") {\n setEditing(true);\n }\n };\n\n const handleMouseDown = useCallback<MouseEventHandler>(\n (e) => {\n const button = queryClosest(e.target, \".saltButton\");\n if (button === null) {\n // This is for drag start detection.\n viewDispatch?.({ type: \"mousedown\" }, e);\n }\n },\n [viewDispatch],\n );\n\n const handleExitEditMode = (\n originalValue = \"\",\n finalValue = \"\",\n allowDeactivation = true,\n editCancelled = false,\n ) => {\n setEditing(false);\n if (editCancelled) {\n setValue(originalValue);\n } else if (finalValue !== originalValue) {\n setValue(finalValue);\n onEditTitle?.(finalValue);\n }\n if (allowDeactivation === false) {\n labelFieldRef.current?.focus();\n }\n };\n\n const handleToggleCollapse = useCallback<MouseEventHandler>(\n (e) => {\n viewDispatch?.({ type: \"collapse\" }, e);\n onCollapse?.();\n },\n [onCollapse, viewDispatch],\n );\n\n const handleToggleExpand = useCallback<MouseEventHandler>(\n (e) => {\n viewDispatch?.({ type: \"expand\" }, e);\n onExpand?.();\n },\n [onExpand, viewDispatch],\n );\n\n return {\n editing,\n focusTitle,\n labelFieldRef,\n onClickEdit: handleClickEdit,\n onClose: handleClose,\n onExitEditMode: handleExitEditMode,\n onMouseDown: handleMouseDown,\n onToggleCollapse: handleToggleCollapse,\n onToggleExpand: handleToggleExpand,\n onTitleKeyDown: handleTitleKeyDown,\n setValue,\n value,\n };\n};\n"],"names":["useState","useRef","useViewDispatch","useCallback","queryClosest"],"mappings":"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"}
|
|
@@ -1,304 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var vuuUtils = require('@vuu-ui/vuu-utils');
|
|
5
|
-
var React = require('react');
|
|
6
|
-
var pathUtils = require('../utils/pathUtils.js');
|
|
7
|
-
var propUtils = require('../utils/propUtils.js');
|
|
8
|
-
var typeOf = require('../utils/typeOf.js');
|
|
9
|
-
var layoutReducer = require('../layout-reducer/layout-reducer.js');
|
|
10
|
-
var layoutTypes = require('../layout-reducer/layoutTypes.js');
|
|
11
|
-
var layoutUtils = require('../layout-reducer/layoutUtils.js');
|
|
12
|
-
var LayoutProviderContext = require('./LayoutProviderContext.js');
|
|
13
|
-
var useLayoutDragDrop = require('./useLayoutDragDrop.js');
|
|
14
|
-
|
|
15
|
-
const isWorkspaceContainer = (props) => props.id === vuuUtils.VuuShellLocation.WorkspaceContainer;
|
|
16
|
-
const isMultiWorkspaceContainer = (props) => props.id === vuuUtils.VuuShellLocation.MultiWorkspaceContainer;
|
|
17
|
-
const shouldSave = (action) => [
|
|
18
|
-
"add",
|
|
19
|
-
"drag-drop",
|
|
20
|
-
"remove",
|
|
21
|
-
"set-title",
|
|
22
|
-
"splitter-resize",
|
|
23
|
-
"switch-tab"
|
|
24
|
-
].includes(action.type);
|
|
25
|
-
const getLayoutChangeReason = (action) => {
|
|
26
|
-
switch (action.type) {
|
|
27
|
-
case "switch-tab":
|
|
28
|
-
if (action.id === vuuUtils.VuuShellLocation.Workspace) {
|
|
29
|
-
return "switch-active-layout";
|
|
30
|
-
} else {
|
|
31
|
-
return "switch-active-tab";
|
|
32
|
-
}
|
|
33
|
-
case "save":
|
|
34
|
-
return "save-feature-props";
|
|
35
|
-
case "drag-drop":
|
|
36
|
-
return "drag-drop-operation";
|
|
37
|
-
case "add":
|
|
38
|
-
return "add-component";
|
|
39
|
-
case "remove":
|
|
40
|
-
return "remove-component";
|
|
41
|
-
case "splitter-resize":
|
|
42
|
-
return "resize-component";
|
|
43
|
-
case "set-title":
|
|
44
|
-
return "edit-feature-title";
|
|
45
|
-
default:
|
|
46
|
-
throw Error("unknown layout action");
|
|
47
|
-
}
|
|
48
|
-
};
|
|
49
|
-
const LayoutProviderVersion = () => {
|
|
50
|
-
const version = useLayoutProviderVersion();
|
|
51
|
-
return /* @__PURE__ */ jsxRuntime.jsx("div", { children: `Context: ${version} ` });
|
|
52
|
-
};
|
|
53
|
-
const pathToDropTarget = `#${vuuUtils.VuuShellLocation.Workspace}.ACTIVE_CHILD`;
|
|
54
|
-
const LayoutProvider = (props) => {
|
|
55
|
-
const { children, createNewChild, workspaceJSON, onLayoutChange } = props;
|
|
56
|
-
const state = React.useRef(void 0);
|
|
57
|
-
const childrenRef = React.useRef(children);
|
|
58
|
-
const [, forceRefresh] = React.useState(null);
|
|
59
|
-
const serializeState = React.useCallback(
|
|
60
|
-
(source, layoutChangeReason) => {
|
|
61
|
-
if (onLayoutChange) {
|
|
62
|
-
const workspaceContainer = pathUtils.findTarget(source, isWorkspaceContainer) || state.current;
|
|
63
|
-
const isLayoutContainer = typeOf.typeOf(workspaceContainer) === "LayoutContainer";
|
|
64
|
-
const target = isLayoutContainer ? propUtils.getProps(workspaceContainer).children[0] : workspaceContainer;
|
|
65
|
-
const serializedModel = layoutUtils.layoutToJSON(target);
|
|
66
|
-
onLayoutChange(serializedModel, layoutChangeReason);
|
|
67
|
-
}
|
|
68
|
-
},
|
|
69
|
-
[onLayoutChange]
|
|
70
|
-
);
|
|
71
|
-
const dispatchLayoutAction = React.useCallback(
|
|
72
|
-
(action, suppressSave = false) => {
|
|
73
|
-
const nextState = layoutReducer.layoutReducer(state.current, action);
|
|
74
|
-
if (nextState !== state.current) {
|
|
75
|
-
state.current = nextState;
|
|
76
|
-
forceRefresh({});
|
|
77
|
-
if (!suppressSave && shouldSave(action)) {
|
|
78
|
-
serializeState(nextState, getLayoutChangeReason(action));
|
|
79
|
-
}
|
|
80
|
-
}
|
|
81
|
-
},
|
|
82
|
-
[forceRefresh, serializeState]
|
|
83
|
-
);
|
|
84
|
-
const addComponentToWorkspace = React.useCallback(
|
|
85
|
-
(component) => {
|
|
86
|
-
dispatchLayoutAction({
|
|
87
|
-
type: "add",
|
|
88
|
-
path: `#${vuuUtils.VuuShellLocation.Workspace}`,
|
|
89
|
-
component
|
|
90
|
-
});
|
|
91
|
-
},
|
|
92
|
-
[dispatchLayoutAction]
|
|
93
|
-
);
|
|
94
|
-
const switchWorkspace = React.useCallback(
|
|
95
|
-
(idx) => {
|
|
96
|
-
dispatchLayoutAction({
|
|
97
|
-
type: "switch-tab",
|
|
98
|
-
nextIdx: idx,
|
|
99
|
-
path: `#${vuuUtils.VuuShellLocation.MultiWorkspaceContainer}`
|
|
100
|
-
});
|
|
101
|
-
},
|
|
102
|
-
[dispatchLayoutAction]
|
|
103
|
-
);
|
|
104
|
-
const showComponentInContextPanel = React.useCallback(
|
|
105
|
-
(component, title, onContextPanelClose) => {
|
|
106
|
-
dispatchLayoutAction({
|
|
107
|
-
type: "set-props",
|
|
108
|
-
path: `#${vuuUtils.VuuShellLocation.ContextPanel}`,
|
|
109
|
-
props: {
|
|
110
|
-
expanded: true,
|
|
111
|
-
content: component,
|
|
112
|
-
onClose: onContextPanelClose,
|
|
113
|
-
title
|
|
114
|
-
}
|
|
115
|
-
});
|
|
116
|
-
},
|
|
117
|
-
[dispatchLayoutAction]
|
|
118
|
-
);
|
|
119
|
-
const layoutActionDispatcher = React.useCallback(
|
|
120
|
-
(action) => {
|
|
121
|
-
switch (action.type) {
|
|
122
|
-
case "drag-start": {
|
|
123
|
-
prepareToDragLayout(action);
|
|
124
|
-
break;
|
|
125
|
-
}
|
|
126
|
-
case "save": {
|
|
127
|
-
if (state.current) {
|
|
128
|
-
serializeState(state.current, getLayoutChangeReason(action));
|
|
129
|
-
}
|
|
130
|
-
break;
|
|
131
|
-
}
|
|
132
|
-
case "query":
|
|
133
|
-
if (action.query === "PARENT_CONTAINER") {
|
|
134
|
-
return layoutUtils.layoutQuery(action.query, action.path, state.current);
|
|
135
|
-
}
|
|
136
|
-
break;
|
|
137
|
-
default: {
|
|
138
|
-
dispatchLayoutAction(action);
|
|
139
|
-
break;
|
|
140
|
-
}
|
|
141
|
-
}
|
|
142
|
-
},
|
|
143
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
144
|
-
[dispatchLayoutAction, serializeState]
|
|
145
|
-
);
|
|
146
|
-
const prepareToDragLayout = useLayoutDragDrop.useLayoutDragDrop(
|
|
147
|
-
state,
|
|
148
|
-
layoutActionDispatcher,
|
|
149
|
-
pathToDropTarget
|
|
150
|
-
);
|
|
151
|
-
React.useEffect(() => {
|
|
152
|
-
if (workspaceJSON) {
|
|
153
|
-
if (Array.isArray(workspaceJSON)) {
|
|
154
|
-
const targetContainer = pathUtils.findTarget(
|
|
155
|
-
state.current,
|
|
156
|
-
isMultiWorkspaceContainer
|
|
157
|
-
);
|
|
158
|
-
if (targetContainer) {
|
|
159
|
-
const { path: targetContainerPath } = targetContainer.props;
|
|
160
|
-
const target = propUtils.getChildProp(targetContainer);
|
|
161
|
-
const newLayouts = workspaceJSON.map(
|
|
162
|
-
(ws, i) => layoutUtils.layoutFromJson(ws, `${targetContainerPath}.${i}`)
|
|
163
|
-
);
|
|
164
|
-
const action = target ? {
|
|
165
|
-
type: layoutTypes.LayoutActionType.REPLACE,
|
|
166
|
-
target,
|
|
167
|
-
replacement: newLayouts
|
|
168
|
-
} : {
|
|
169
|
-
type: layoutTypes.LayoutActionType.ADD,
|
|
170
|
-
path: targetContainerPath,
|
|
171
|
-
component: newLayouts
|
|
172
|
-
};
|
|
173
|
-
dispatchLayoutAction(action, true);
|
|
174
|
-
}
|
|
175
|
-
} else {
|
|
176
|
-
const targetContainer = pathUtils.findTarget(
|
|
177
|
-
state.current,
|
|
178
|
-
isWorkspaceContainer
|
|
179
|
-
);
|
|
180
|
-
if (targetContainer) {
|
|
181
|
-
const { path: targetContainerPath } = targetContainer.props;
|
|
182
|
-
const target = propUtils.getChildProp(targetContainer);
|
|
183
|
-
const newLayout = layoutUtils.layoutFromJson(
|
|
184
|
-
workspaceJSON,
|
|
185
|
-
`${targetContainerPath}.0`
|
|
186
|
-
);
|
|
187
|
-
const action = target ? {
|
|
188
|
-
type: layoutTypes.LayoutActionType.REPLACE,
|
|
189
|
-
target,
|
|
190
|
-
replacement: newLayout
|
|
191
|
-
} : {
|
|
192
|
-
type: layoutTypes.LayoutActionType.ADD,
|
|
193
|
-
path: targetContainerPath,
|
|
194
|
-
component: newLayout
|
|
195
|
-
};
|
|
196
|
-
dispatchLayoutAction(action, true);
|
|
197
|
-
} else if (workspaceJSON.id === propUtils.getProp(state.current, "id")) {
|
|
198
|
-
const newLayout = layoutUtils.layoutFromJson(workspaceJSON, "0");
|
|
199
|
-
const action = {
|
|
200
|
-
type: layoutTypes.LayoutActionType.REPLACE,
|
|
201
|
-
target: state.current,
|
|
202
|
-
replacement: newLayout
|
|
203
|
-
};
|
|
204
|
-
dispatchLayoutAction(action, true);
|
|
205
|
-
} else {
|
|
206
|
-
throw Error(
|
|
207
|
-
`LayoutProvider unable to render new workspaceJson, no valid target container. Use a valid Shell Layout Template or include a container with the standard workspace id '${vuuUtils.VuuShellLocation.Workspace}' `
|
|
208
|
-
);
|
|
209
|
-
}
|
|
210
|
-
}
|
|
211
|
-
}
|
|
212
|
-
}, [dispatchLayoutAction, workspaceJSON]);
|
|
213
|
-
if (state.current === void 0) {
|
|
214
|
-
state.current = layoutUtils.cloneElementAddLayoutProps(children);
|
|
215
|
-
} else if (children !== childrenRef.current) {
|
|
216
|
-
state.current = layoutUtils.cloneElementAddLayoutProps(children, state.current);
|
|
217
|
-
childrenRef.current = children;
|
|
218
|
-
}
|
|
219
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
220
|
-
LayoutProviderContext.LayoutProviderContext.Provider,
|
|
221
|
-
{
|
|
222
|
-
value: {
|
|
223
|
-
addComponentToWorkspace,
|
|
224
|
-
createNewChild,
|
|
225
|
-
dispatchLayoutProvider: layoutActionDispatcher,
|
|
226
|
-
showComponentInContextPanel,
|
|
227
|
-
switchWorkspace,
|
|
228
|
-
version: 0
|
|
229
|
-
},
|
|
230
|
-
children: state.current
|
|
231
|
-
}
|
|
232
|
-
);
|
|
233
|
-
};
|
|
234
|
-
const useLayoutProviderDispatch = () => {
|
|
235
|
-
const { dispatchLayoutProvider } = React.useContext(LayoutProviderContext.LayoutProviderContext);
|
|
236
|
-
return dispatchLayoutProvider;
|
|
237
|
-
};
|
|
238
|
-
const useLayoutOperation = () => {
|
|
239
|
-
const {
|
|
240
|
-
addComponentToWorkspace,
|
|
241
|
-
showComponentInContextPanel,
|
|
242
|
-
switchWorkspace
|
|
243
|
-
} = React.useContext(LayoutProviderContext.LayoutProviderContext);
|
|
244
|
-
return {
|
|
245
|
-
addComponentToWorkspace,
|
|
246
|
-
showComponentInContextPanel,
|
|
247
|
-
switchWorkspace
|
|
248
|
-
};
|
|
249
|
-
};
|
|
250
|
-
const useLayoutCreateNewChild = () => {
|
|
251
|
-
const layoutPlaceholderJSON = vuuUtils.usePlaceholderJSON();
|
|
252
|
-
const { createNewChild } = React.useContext(LayoutProviderContext.LayoutProviderContext);
|
|
253
|
-
const defaultCreateNewChild = React.useMemo(
|
|
254
|
-
() => function createNewChild2() {
|
|
255
|
-
if (layoutPlaceholderJSON) {
|
|
256
|
-
const { props } = layoutPlaceholderJSON;
|
|
257
|
-
return layoutUtils.layoutFromJson(
|
|
258
|
-
{
|
|
259
|
-
...layoutPlaceholderJSON,
|
|
260
|
-
props: {
|
|
261
|
-
...props,
|
|
262
|
-
resizeable: true,
|
|
263
|
-
style: {
|
|
264
|
-
...props?.style,
|
|
265
|
-
flexGrow: 1,
|
|
266
|
-
flexShrink: 0,
|
|
267
|
-
flexBasis: 0
|
|
268
|
-
}
|
|
269
|
-
}
|
|
270
|
-
},
|
|
271
|
-
"0"
|
|
272
|
-
);
|
|
273
|
-
}
|
|
274
|
-
return layoutUtils.layoutFromJson(
|
|
275
|
-
{
|
|
276
|
-
type: "Placeholder",
|
|
277
|
-
props: {
|
|
278
|
-
resizeable: true,
|
|
279
|
-
style: {
|
|
280
|
-
flexGrow: 1,
|
|
281
|
-
flexShrink: 0,
|
|
282
|
-
flexBasis: 0
|
|
283
|
-
}
|
|
284
|
-
}
|
|
285
|
-
},
|
|
286
|
-
"0"
|
|
287
|
-
);
|
|
288
|
-
},
|
|
289
|
-
[layoutPlaceholderJSON]
|
|
290
|
-
);
|
|
291
|
-
return createNewChild ?? defaultCreateNewChild;
|
|
292
|
-
};
|
|
293
|
-
const useLayoutProviderVersion = () => {
|
|
294
|
-
const { version } = React.useContext(LayoutProviderContext.LayoutProviderContext);
|
|
295
|
-
return version;
|
|
296
|
-
};
|
|
297
|
-
|
|
298
|
-
exports.LayoutProvider = LayoutProvider;
|
|
299
|
-
exports.LayoutProviderVersion = LayoutProviderVersion;
|
|
300
|
-
exports.useLayoutCreateNewChild = useLayoutCreateNewChild;
|
|
301
|
-
exports.useLayoutOperation = useLayoutOperation;
|
|
302
|
-
exports.useLayoutProviderDispatch = useLayoutProviderDispatch;
|
|
303
|
-
exports.useLayoutProviderVersion = useLayoutProviderVersion;
|
|
304
|
-
//# sourceMappingURL=LayoutProvider.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"LayoutProvider.js","sources":["../../../../packages/vuu-layout/src/layout-provider/LayoutProvider.tsx"],"sourcesContent":["import {\n VuuShellLocation,\n usePlaceholderJSON,\n type LayoutJSON,\n} from \"@vuu-ui/vuu-utils\";\nimport {\n RefObject,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n type ReactElement,\n} from \"react\";\nimport {\n LayoutActionType,\n LayoutProps,\n cloneElementAddLayoutProps,\n layoutFromJson,\n layoutQuery,\n layoutReducer,\n layoutToJSON,\n type LayoutChangeHandler,\n type LayoutChangeReason,\n type LayoutReducerAction,\n} from \"../layout-reducer\";\nimport { findTarget, getChildProp, getProp, getProps, typeOf } from \"../utils\";\nimport {\n LayoutProviderContext,\n LayoutProviderDispatch,\n} from \"./LayoutProviderContext\";\nimport { useLayoutDragDrop } from \"./useLayoutDragDrop\";\nimport { SaveAction } from \"../layout-view/viewTypes\";\n\nconst isWorkspaceContainer = (props: LayoutProps) =>\n props.id === VuuShellLocation.WorkspaceContainer;\n\nconst isMultiWorkspaceContainer = (props: LayoutProps) =>\n props.id === VuuShellLocation.MultiWorkspaceContainer;\n\nconst shouldSave = (action: LayoutReducerAction) =>\n [\n \"add\",\n \"drag-drop\",\n \"remove\",\n \"set-title\",\n \"splitter-resize\",\n \"switch-tab\",\n ].includes(action.type);\n\nconst getLayoutChangeReason = (\n action: LayoutReducerAction | SaveAction,\n): LayoutChangeReason => {\n switch (action.type) {\n case \"switch-tab\":\n if (action.id === VuuShellLocation.Workspace) {\n return \"switch-active-layout\";\n } else {\n return \"switch-active-tab\";\n }\n case \"save\":\n return \"save-feature-props\";\n case \"drag-drop\":\n return \"drag-drop-operation\";\n case \"add\":\n return \"add-component\";\n case \"remove\":\n return \"remove-component\";\n case \"splitter-resize\":\n return \"resize-component\";\n case \"set-title\":\n return \"edit-feature-title\";\n default:\n throw Error(\"unknown layout action\");\n }\n};\n\nexport interface LayoutProviderProps {\n children: ReactElement;\n createNewChild?: (index?: number) => ReactElement;\n workspaceJSON?: LayoutJSON | LayoutJSON[];\n onLayoutChange?: LayoutChangeHandler;\n}\n\nexport const LayoutProviderVersion = () => {\n const version = useLayoutProviderVersion();\n return <div>{`Context: ${version} `}</div>;\n};\n\nconst pathToDropTarget = `#${VuuShellLocation.Workspace}.ACTIVE_CHILD`;\n\nexport const LayoutProvider = (props: LayoutProviderProps): ReactElement => {\n const { children, createNewChild, workspaceJSON, onLayoutChange } = props;\n const state = useRef<ReactElement | undefined>(undefined);\n const childrenRef = useRef<ReactElement>(children);\n\n const [, forceRefresh] = useState<unknown>(null);\n\n const serializeState = useCallback(\n (source: ReactElement, layoutChangeReason: LayoutChangeReason) => {\n if (onLayoutChange) {\n const workspaceContainer =\n findTarget(source, isWorkspaceContainer) || state.current;\n const isLayoutContainer =\n typeOf(workspaceContainer) === \"LayoutContainer\";\n const target = isLayoutContainer\n ? getProps(workspaceContainer).children[0]\n : workspaceContainer;\n const serializedModel = layoutToJSON(target);\n onLayoutChange(serializedModel, layoutChangeReason);\n }\n },\n [onLayoutChange],\n );\n\n const dispatchLayoutAction = useCallback(\n (action: LayoutReducerAction, suppressSave = false) => {\n const nextState = layoutReducer(state.current as ReactElement, action);\n if (nextState !== state.current) {\n state.current = nextState;\n forceRefresh({});\n if (!suppressSave && shouldSave(action)) {\n serializeState(nextState, getLayoutChangeReason(action));\n }\n }\n },\n [forceRefresh, serializeState],\n );\n\n const addComponentToWorkspace = useCallback(\n (component: ReactElement) => {\n dispatchLayoutAction({\n type: \"add\",\n path: `#${VuuShellLocation.Workspace}`,\n component,\n });\n },\n [dispatchLayoutAction],\n );\n\n const switchWorkspace = useCallback(\n (idx: number) => {\n dispatchLayoutAction({\n type: \"switch-tab\",\n nextIdx: idx,\n path: `#${VuuShellLocation.MultiWorkspaceContainer}`,\n });\n },\n [dispatchLayoutAction],\n );\n\n const showComponentInContextPanel = useCallback(\n (\n component: ReactElement | LayoutJSON,\n title?: string,\n onContextPanelClose?: () => void,\n ) => {\n dispatchLayoutAction({\n type: \"set-props\",\n path: `#${VuuShellLocation.ContextPanel}`,\n props: {\n expanded: true,\n content: component,\n onClose: onContextPanelClose,\n title,\n },\n });\n },\n [dispatchLayoutAction],\n );\n\n const layoutActionDispatcher = useCallback<LayoutProviderDispatch>(\n (action) => {\n switch (action.type) {\n case \"drag-start\": {\n prepareToDragLayout(action);\n break;\n }\n case \"save\": {\n if (state.current) {\n serializeState(state.current, getLayoutChangeReason(action));\n }\n break;\n }\n case \"query\":\n if (action.query === \"PARENT_CONTAINER\") {\n return layoutQuery(action.query, action.path, state.current);\n }\n break;\n\n default: {\n dispatchLayoutAction(action);\n break;\n }\n }\n },\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [dispatchLayoutAction, serializeState],\n );\n\n const prepareToDragLayout = useLayoutDragDrop(\n state as RefObject<ReactElement>,\n layoutActionDispatcher,\n pathToDropTarget,\n );\n\n useEffect(() => {\n if (workspaceJSON) {\n if (Array.isArray(workspaceJSON)) {\n const targetContainer = findTarget(\n state.current,\n isMultiWorkspaceContainer,\n ) as ReactElement;\n if (targetContainer) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const { path: targetContainerPath } = targetContainer.props as any;\n const target = getChildProp(targetContainer);\n const newLayouts = workspaceJSON.map((ws, i) =>\n layoutFromJson(ws, `${targetContainerPath}.${i}`),\n );\n const action = target\n ? {\n type: LayoutActionType.REPLACE,\n target,\n replacement: newLayouts,\n }\n : {\n type: LayoutActionType.ADD,\n path: targetContainerPath,\n component: newLayouts,\n };\n dispatchLayoutAction(action, true);\n }\n } else {\n const targetContainer = findTarget(\n state.current,\n isWorkspaceContainer,\n ) as ReactElement;\n if (targetContainer) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const { path: targetContainerPath } = targetContainer.props as any;\n const target = getChildProp(targetContainer);\n const newLayout = layoutFromJson(\n workspaceJSON,\n `${targetContainerPath}.0`,\n );\n const action = target\n ? {\n type: LayoutActionType.REPLACE,\n target,\n replacement: newLayout,\n }\n : {\n type: LayoutActionType.ADD,\n path: targetContainerPath,\n component: newLayout,\n };\n dispatchLayoutAction(action, true);\n } else if (workspaceJSON.id === getProp(state.current, \"id\")) {\n const newLayout = layoutFromJson(workspaceJSON, \"0\");\n const action = {\n type: LayoutActionType.REPLACE,\n target: state.current,\n replacement: newLayout,\n };\n dispatchLayoutAction(action, true);\n } else {\n throw Error(\n `LayoutProvider unable to render new workspaceJson, no valid target container. Use a valid Shell Layout Template or include a container with the standard workspace id '${VuuShellLocation.Workspace}' `,\n );\n }\n }\n }\n }, [dispatchLayoutAction, workspaceJSON]);\n\n if (state.current === undefined) {\n state.current = cloneElementAddLayoutProps(children);\n } else if (children !== childrenRef.current) {\n state.current = cloneElementAddLayoutProps(children, state.current);\n childrenRef.current = children;\n }\n\n return (\n <LayoutProviderContext.Provider\n value={{\n addComponentToWorkspace,\n createNewChild,\n dispatchLayoutProvider: layoutActionDispatcher,\n showComponentInContextPanel,\n switchWorkspace,\n version: 0,\n }}\n >\n {state.current}\n </LayoutProviderContext.Provider>\n );\n};\n\nexport const useLayoutProviderDispatch = () => {\n const { dispatchLayoutProvider } = useContext(LayoutProviderContext);\n return dispatchLayoutProvider;\n};\n\nexport const useLayoutOperation = () => {\n const {\n addComponentToWorkspace,\n showComponentInContextPanel,\n switchWorkspace,\n } = useContext(LayoutProviderContext);\n return {\n addComponentToWorkspace,\n showComponentInContextPanel,\n switchWorkspace,\n };\n};\n\nexport const useLayoutCreateNewChild = () => {\n const layoutPlaceholderJSON = usePlaceholderJSON();\n const { createNewChild } = useContext(LayoutProviderContext);\n\n const defaultCreateNewChild = useMemo(\n () =>\n function createNewChild() {\n if (layoutPlaceholderJSON) {\n const { props } = layoutPlaceholderJSON;\n return layoutFromJson(\n {\n ...layoutPlaceholderJSON,\n props: {\n ...props,\n resizeable: true,\n style: {\n ...props?.style,\n flexGrow: 1,\n flexShrink: 0,\n flexBasis: 0,\n },\n },\n },\n \"0\",\n );\n }\n return layoutFromJson(\n {\n type: \"Placeholder\",\n props: {\n resizeable: true,\n style: {\n flexGrow: 1,\n flexShrink: 0,\n flexBasis: 0,\n },\n },\n },\n \"0\",\n );\n },\n [layoutPlaceholderJSON],\n );\n\n return createNewChild ?? defaultCreateNewChild;\n};\n\nexport const useLayoutProviderVersion = () => {\n const { version } = useContext(LayoutProviderContext);\n return version;\n};\n"],"names":["VuuShellLocation","jsx","useRef","useState","useCallback","findTarget","typeOf","getProps","layoutToJSON","layoutReducer","layoutQuery","useLayoutDragDrop","useEffect","getChildProp","layoutFromJson","LayoutActionType","getProp","cloneElementAddLayoutProps","LayoutProviderContext","useContext","usePlaceholderJSON","useMemo","createNewChild"],"mappings":"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"}
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var React = require('react');
|
|
4
|
-
|
|
5
|
-
const unconfiguredLayoutProviderDispatch = (action) => console.log(
|
|
6
|
-
`dispatch ${action.type}, have you forgotten to provide a LayoutProvider ?`
|
|
7
|
-
);
|
|
8
|
-
const unconfiguredService = (message) => () => console.log(`${message}, have you forgotten to provide a LayoutProvider ?`);
|
|
9
|
-
const MissingLayoutContextPanel = unconfiguredService(
|
|
10
|
-
"showComponentInContextPanel"
|
|
11
|
-
);
|
|
12
|
-
const isUnconfiguredProperty = (property) => property === MissingLayoutContextPanel;
|
|
13
|
-
const LayoutProviderContext = React.createContext({
|
|
14
|
-
addComponentToWorkspace: unconfiguredService("addComponentToWorkspace"),
|
|
15
|
-
dispatchLayoutProvider: unconfiguredLayoutProviderDispatch,
|
|
16
|
-
showComponentInContextPanel: MissingLayoutContextPanel,
|
|
17
|
-
switchWorkspace: unconfiguredService("switchWorkspace"),
|
|
18
|
-
version: -1
|
|
19
|
-
});
|
|
20
|
-
|
|
21
|
-
exports.LayoutProviderContext = LayoutProviderContext;
|
|
22
|
-
exports.isUnconfiguredProperty = isUnconfiguredProperty;
|
|
23
|
-
//# sourceMappingURL=LayoutProviderContext.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"LayoutProviderContext.js","sources":["../../../../packages/vuu-layout/src/layout-provider/LayoutProviderContext.ts"],"sourcesContent":["import { createContext, Dispatch, ReactElement } from \"react\";\nimport {\n DragStartAction,\n LayoutReducerAction,\n QueryAction,\n} from \"../layout-reducer\";\nimport { LayoutJSON } from \"@vuu-ui/vuu-utils\";\nimport { SaveAction } from \"../layout-view/viewTypes\";\n\nconst unconfiguredLayoutProviderDispatch: LayoutProviderDispatch = (action) =>\n console.log(\n `dispatch ${action.type}, have you forgotten to provide a LayoutProvider ?`,\n );\n\nconst unconfiguredService = (message: string) => () =>\n console.log(`${message}, have you forgotten to provide a LayoutProvider ?`);\n\nconst MissingLayoutContextPanel = unconfiguredService(\n \"showComponentInContextPanel\",\n);\n\nexport const isUnconfiguredProperty = (property: unknown): boolean =>\n property === MissingLayoutContextPanel;\n\nexport type LayoutProviderDispatch = Dispatch<\n LayoutReducerAction | SaveAction | DragStartAction | QueryAction\n>;\n\nexport interface LayoutProviderContextProps {\n addComponentToWorkspace: (component: ReactElement) => void;\n createNewChild?: (index?: number) => ReactElement;\n dispatchLayoutProvider: LayoutProviderDispatch;\n showComponentInContextPanel: (\n component: ReactElement | LayoutJSON,\n title?: string,\n onContextPanelClose?: () => void,\n ) => void;\n switchWorkspace: (idx: number) => void;\n version: number;\n}\n\nexport const LayoutProviderContext = createContext<LayoutProviderContextProps>({\n addComponentToWorkspace: unconfiguredService(\"addComponentToWorkspace\"),\n dispatchLayoutProvider: unconfiguredLayoutProviderDispatch,\n showComponentInContextPanel: MissingLayoutContextPanel,\n switchWorkspace: unconfiguredService(\"switchWorkspace\"),\n version: -1,\n});\n"],"names":["createContext"],"mappings":";;;;AASA,MAAM,kCAAA,GAA6D,CAAC,MAAA,KAClE,OAAQ,CAAA,GAAA;AAAA,EACN,CAAA,SAAA,EAAY,OAAO,IAAI,CAAA,kDAAA;AACzB,CAAA;AAEF,MAAM,mBAAA,GAAsB,CAAC,OAAoB,KAAA,MAC/C,QAAQ,GAAI,CAAA,CAAA,EAAG,OAAO,CAAoD,kDAAA,CAAA,CAAA;AAE5E,MAAM,yBAA4B,GAAA,mBAAA;AAAA,EAChC;AACF,CAAA;AAEa,MAAA,sBAAA,GAAyB,CAAC,QAAA,KACrC,QAAa,KAAA;AAmBR,MAAM,wBAAwBA,mBAA0C,CAAA;AAAA,EAC7E,uBAAA,EAAyB,oBAAoB,yBAAyB,CAAA;AAAA,EACtE,sBAAwB,EAAA,kCAAA;AAAA,EACxB,2BAA6B,EAAA,yBAAA;AAAA,EAC7B,eAAA,EAAiB,oBAAoB,iBAAiB,CAAA;AAAA,EACtD,OAAS,EAAA,CAAA;AACX,CAAC;;;;;"}
|
|
@@ -1,177 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var React = require('react');
|
|
4
|
-
var Draggable = require('../drag-drop/Draggable.js');
|
|
5
|
-
var pathUtils = require('../utils/pathUtils.js');
|
|
6
|
-
require('../drag-drop/BoxModel.js');
|
|
7
|
-
var flexUtils = require('../layout-reducer/flexUtils.js');
|
|
8
|
-
|
|
9
|
-
const NO_INSTRUCTIONS = {};
|
|
10
|
-
const NO_OFFSETS = [0, 0];
|
|
11
|
-
const getDragElement = (rect, id, dragElement) => {
|
|
12
|
-
const wrapper = document.createElement("div");
|
|
13
|
-
wrapper.className = "vuuSimpleDraggableWrapper";
|
|
14
|
-
wrapper.classList.add(
|
|
15
|
-
"vuuSimpleDraggableWrapper",
|
|
16
|
-
"salt-theme",
|
|
17
|
-
"salt-density-medium"
|
|
18
|
-
);
|
|
19
|
-
wrapper.dataset.dragging = "true";
|
|
20
|
-
const div = dragElement ?? document.createElement("div");
|
|
21
|
-
div.id = id;
|
|
22
|
-
wrapper.appendChild(div);
|
|
23
|
-
document.body.appendChild(wrapper);
|
|
24
|
-
const cssText = `top:${rect.top}px;left:${rect.left}px;width:${rect.width}px;height:${rect.height}px;`;
|
|
25
|
-
return [wrapper, cssText, rect.left, rect.top];
|
|
26
|
-
};
|
|
27
|
-
const determineDragOffsets = (draggedElement) => {
|
|
28
|
-
const { offsetParent } = draggedElement;
|
|
29
|
-
if (offsetParent === null) {
|
|
30
|
-
return NO_OFFSETS;
|
|
31
|
-
} else {
|
|
32
|
-
const { left: offsetLeft, top: offsetTop } = offsetParent.getBoundingClientRect();
|
|
33
|
-
return [offsetLeft, offsetTop];
|
|
34
|
-
}
|
|
35
|
-
};
|
|
36
|
-
const useLayoutDragDrop = (rootLayoutRef, dispatch, pathToDropTarget) => {
|
|
37
|
-
const dragActionRef = React.useRef(void 0);
|
|
38
|
-
const dragOperationRef = React.useRef(void 0);
|
|
39
|
-
const draggableHTMLElementRef = React.useRef(void 0);
|
|
40
|
-
const handleDrag = React.useCallback((x, y) => {
|
|
41
|
-
if (dragOperationRef.current && draggableHTMLElementRef.current) {
|
|
42
|
-
const {
|
|
43
|
-
dragOffsets: [offsetX, offsetY],
|
|
44
|
-
targetPosition
|
|
45
|
-
} = dragOperationRef.current;
|
|
46
|
-
const left = typeof x === "number" ? x - offsetX : targetPosition.left;
|
|
47
|
-
const top = typeof y === "number" ? y - offsetY : targetPosition.top;
|
|
48
|
-
if (left !== targetPosition.left || top !== targetPosition.top) {
|
|
49
|
-
dragOperationRef.current.targetPosition.left = left;
|
|
50
|
-
dragOperationRef.current.targetPosition.top = top;
|
|
51
|
-
draggableHTMLElementRef.current.style.top = top + "px";
|
|
52
|
-
draggableHTMLElementRef.current.style.left = left + "px";
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
}, []);
|
|
56
|
-
const handleDrop = React.useCallback(
|
|
57
|
-
(dropTarget) => {
|
|
58
|
-
if (dragOperationRef.current) {
|
|
59
|
-
const {
|
|
60
|
-
dragInstructions,
|
|
61
|
-
payload: draggedReactElement,
|
|
62
|
-
originalCSS
|
|
63
|
-
} = dragOperationRef.current;
|
|
64
|
-
if (dropTarget) {
|
|
65
|
-
dispatch({
|
|
66
|
-
type: "drag-drop",
|
|
67
|
-
draggedReactElement,
|
|
68
|
-
dragInstructions,
|
|
69
|
-
dropTarget
|
|
70
|
-
});
|
|
71
|
-
}
|
|
72
|
-
if (draggableHTMLElementRef.current) {
|
|
73
|
-
if (!dropTarget && dragInstructions.DriftHomeIfNoDropTarget) {
|
|
74
|
-
console.log("drift back to start");
|
|
75
|
-
document.body.removeChild(draggableHTMLElementRef.current);
|
|
76
|
-
} else if (dragInstructions.RemoveDraggableOnDragEnd) {
|
|
77
|
-
document.body.removeChild(draggableHTMLElementRef.current);
|
|
78
|
-
} else {
|
|
79
|
-
draggableHTMLElementRef.current.style.cssText = originalCSS;
|
|
80
|
-
delete draggableHTMLElementRef.current.dataset.dragging;
|
|
81
|
-
}
|
|
82
|
-
}
|
|
83
|
-
dragActionRef.current = void 0;
|
|
84
|
-
dragOperationRef.current = void 0;
|
|
85
|
-
draggableHTMLElementRef.current = void 0;
|
|
86
|
-
}
|
|
87
|
-
},
|
|
88
|
-
[dispatch]
|
|
89
|
-
);
|
|
90
|
-
const handleDragStart = React.useCallback(
|
|
91
|
-
(evt) => {
|
|
92
|
-
if (dragActionRef.current) {
|
|
93
|
-
const {
|
|
94
|
-
payload: component,
|
|
95
|
-
dragContainerPath,
|
|
96
|
-
dragElement,
|
|
97
|
-
dragRect,
|
|
98
|
-
instructions = NO_INSTRUCTIONS,
|
|
99
|
-
path
|
|
100
|
-
} = dragActionRef.current;
|
|
101
|
-
const { current: rootLayout } = rootLayoutRef;
|
|
102
|
-
const dragPos = { x: evt.clientX, y: evt.clientY };
|
|
103
|
-
const dragPayload = component ?? pathUtils.followPath(rootLayout, path, true);
|
|
104
|
-
const { id: dragPayloadId } = dragPayload.props;
|
|
105
|
-
const intrinsicSize = flexUtils.getIntrinsicSize(dragPayload);
|
|
106
|
-
let originalCSS = "", dragCSS = "", dragTransform = "";
|
|
107
|
-
let dragStartLeft = -1;
|
|
108
|
-
let dragStartTop = -1;
|
|
109
|
-
let dragOffsets = NO_OFFSETS;
|
|
110
|
-
let element = document.getElementById(dragPayloadId);
|
|
111
|
-
if (element === null) {
|
|
112
|
-
[element, dragCSS, dragStartLeft, dragStartTop] = getDragElement(
|
|
113
|
-
dragRect,
|
|
114
|
-
dragPayloadId,
|
|
115
|
-
dragElement
|
|
116
|
-
);
|
|
117
|
-
} else {
|
|
118
|
-
dragOffsets = determineDragOffsets(element);
|
|
119
|
-
const [offsetLeft, offsetTop] = dragOffsets;
|
|
120
|
-
const { width, height, left, top } = element.getBoundingClientRect();
|
|
121
|
-
dragStartLeft = left - offsetLeft;
|
|
122
|
-
dragStartTop = top - offsetTop;
|
|
123
|
-
dragCSS = `width:${width}px;height:${height}px;left:${dragStartLeft}px;top:${dragStartTop}px;z-index: 100;background-color:#ccc;opacity: 0.6;`;
|
|
124
|
-
element.dataset.dragging = "true";
|
|
125
|
-
originalCSS = element.style.cssText;
|
|
126
|
-
}
|
|
127
|
-
dragTransform = Draggable.Draggable.initDrag(
|
|
128
|
-
rootLayoutRef.current,
|
|
129
|
-
dragContainerPath,
|
|
130
|
-
dragRect,
|
|
131
|
-
dragPos,
|
|
132
|
-
{
|
|
133
|
-
drag: handleDrag,
|
|
134
|
-
drop: handleDrop
|
|
135
|
-
},
|
|
136
|
-
intrinsicSize
|
|
137
|
-
// dropTargets
|
|
138
|
-
);
|
|
139
|
-
element.style.cssText = dragCSS + dragTransform;
|
|
140
|
-
draggableHTMLElementRef.current = element;
|
|
141
|
-
dragOperationRef.current = {
|
|
142
|
-
payload: dragPayload,
|
|
143
|
-
originalCSS,
|
|
144
|
-
dragRect,
|
|
145
|
-
dragOffsets,
|
|
146
|
-
dragInstructions: instructions,
|
|
147
|
-
targetPosition: { left: dragStartLeft, top: dragStartTop }
|
|
148
|
-
};
|
|
149
|
-
}
|
|
150
|
-
},
|
|
151
|
-
[handleDrag, handleDrop, rootLayoutRef]
|
|
152
|
-
);
|
|
153
|
-
const prepareToDrag = React.useCallback(
|
|
154
|
-
(action) => {
|
|
155
|
-
const { evt, ...options } = action;
|
|
156
|
-
try {
|
|
157
|
-
dragActionRef.current = {
|
|
158
|
-
...options,
|
|
159
|
-
dragContainerPath: pathUtils.resolvePath(
|
|
160
|
-
rootLayoutRef.current,
|
|
161
|
-
pathToDropTarget
|
|
162
|
-
)
|
|
163
|
-
};
|
|
164
|
-
Draggable.Draggable.handleMousedown(evt, handleDragStart, options.instructions);
|
|
165
|
-
} catch (err) {
|
|
166
|
-
console.warn(
|
|
167
|
-
`[useLayoutDragDrop] path ${pathToDropTarget} not resolved, the application layout does not have the required elements to support drag drop`
|
|
168
|
-
);
|
|
169
|
-
}
|
|
170
|
-
},
|
|
171
|
-
[handleDragStart, pathToDropTarget, rootLayoutRef]
|
|
172
|
-
);
|
|
173
|
-
return prepareToDrag;
|
|
174
|
-
};
|
|
175
|
-
|
|
176
|
-
exports.useLayoutDragDrop = useLayoutDragDrop;
|
|
177
|
-
//# sourceMappingURL=useLayoutDragDrop.js.map
|