From fc5115f7039beb4e6ec0039efccf83f71b9b4a7a Mon Sep 17 00:00:00 2001 From: Peter Ling Date: Mon, 18 Sep 2023 16:33:52 +0100 Subject: [PATCH] Sync with Finos main --- .../vuu-layout/src/drag-drop/Draggable.ts | 3 --- .../vuu-layout/src/drag-drop/DropTarget.ts | 2 +- .../vuu-layout/src/flexbox/Flexbox.tsx | 10 ++++++-- .../vuu-layout/src/flexbox/FlexboxLayout.tsx | 25 +++++++++---------- .../vuu-layout/src/flexbox/flexboxTypes.ts | 2 +- .../src/flexbox/useSplitterResizing.ts | 6 ++--- .../src/layout-reducer/layoutUtils.ts | 5 ++-- .../vuu-layout/src/palette/Palette.tsx | 2 +- 8 files changed, 29 insertions(+), 26 deletions(-) diff --git a/vuu-ui/packages/vuu-layout/src/drag-drop/Draggable.ts b/vuu-ui/packages/vuu-layout/src/drag-drop/Draggable.ts index fca983f5d..7311452e3 100644 --- a/vuu-ui/packages/vuu-layout/src/drag-drop/Draggable.ts +++ b/vuu-ui/packages/vuu-layout/src/drag-drop/Draggable.ts @@ -267,9 +267,6 @@ function dragMouseupHandler() { } function onDragEnd() { - if (!_dragContainer) { - return - } if (_dropTarget) { const dropTarget = _dropTargetRenderer.hoverDropTarget || diff --git a/vuu-ui/packages/vuu-layout/src/drag-drop/DropTarget.ts b/vuu-ui/packages/vuu-layout/src/drag-drop/DropTarget.ts index 220d5390e..e0734ce9e 100644 --- a/vuu-ui/packages/vuu-layout/src/drag-drop/DropTarget.ts +++ b/vuu-ui/packages/vuu-layout/src/drag-drop/DropTarget.ts @@ -7,7 +7,7 @@ import { Measurements, Position, positionValues, - RelativeDropPosition + RelativeDropPosition, } from "./BoxModel"; import { DragDropRect, DropPos, DropPosTab } from "./dragDropTypes"; import { DragState } from "./DragState"; diff --git a/vuu-ui/packages/vuu-layout/src/flexbox/Flexbox.tsx b/vuu-ui/packages/vuu-layout/src/flexbox/Flexbox.tsx index 5598f4e88..09c2cec87 100644 --- a/vuu-ui/packages/vuu-layout/src/flexbox/Flexbox.tsx +++ b/vuu-ui/packages/vuu-layout/src/flexbox/Flexbox.tsx @@ -1,5 +1,6 @@ +import { useForkRef } from "@salt-ds/core"; import cx from "classnames"; -import { CSSProperties, forwardRef } from "react"; +import { CSSProperties, ForwardedRef, forwardRef } from "react"; import { FlexboxProps } from "./flexboxTypes"; import { useSplitterResizing } from "./useSplitterResizing"; @@ -9,10 +10,12 @@ const classBase = "hwFlexbox"; const Flexbox = forwardRef(function Flexbox( props: FlexboxProps, + ref: ForwardedRef ) { const { breakPoints, children, + // cols: colsProp, column, className: classNameProp, flexFill, @@ -28,8 +31,9 @@ const Flexbox = forwardRef(function Flexbox( ...rest } = props; - const { content } = useSplitterResizing({ + const { content, rootRef } = useSplitterResizing({ children, + // cols: colsProp, onSplitterMoved, style, }); @@ -45,8 +49,10 @@ const Flexbox = forwardRef(function Flexbox(
{ dispatch({ - type: "splitter-resize", + type: Action.SPLITTER_RESIZE, path, - sizes - }); + sizes, + } as SplitterResizeAction); }, [dispatch, path] ); return ; }; -FlexboxLayout.displayName = 'Flexbox'; +FlexboxLayout.displayName = "Flexbox"; -registerComponent('Flexbox', FlexboxLayout, 'container'); +registerComponent("Flexbox", FlexboxLayout, "container"); diff --git a/vuu-ui/packages/vuu-layout/src/flexbox/flexboxTypes.ts b/vuu-ui/packages/vuu-layout/src/flexbox/flexboxTypes.ts index fc5cbb938..e976f2373 100644 --- a/vuu-ui/packages/vuu-layout/src/flexbox/flexboxTypes.ts +++ b/vuu-ui/packages/vuu-layout/src/flexbox/flexboxTypes.ts @@ -3,7 +3,7 @@ import { HTMLAttributes, MutableRefObject, ReactElement, - ReactNode + ReactNode, } from "react"; import { SplitterProps } from "./Splitter"; diff --git a/vuu-ui/packages/vuu-layout/src/flexbox/useSplitterResizing.ts b/vuu-ui/packages/vuu-layout/src/flexbox/useSplitterResizing.ts index 9ddf05f79..4f4624eab 100644 --- a/vuu-ui/packages/vuu-layout/src/flexbox/useSplitterResizing.ts +++ b/vuu-ui/packages/vuu-layout/src/flexbox/useSplitterResizing.ts @@ -4,7 +4,7 @@ import React, { useCallback, useMemo, useRef, - useState + useState, } from "react"; import { Placeholder } from "../placeholder"; import { Splitter } from "./Splitter"; @@ -14,14 +14,14 @@ import { gatherChildMeta, identifyResizeParties, PLACEHOLDER, - SPLITTER + SPLITTER, } from "./flexbox-utils"; import { ContentMeta, FlexSize, SplitterFactory, SplitterHookProps, - SplitterHookResult + SplitterHookResult, } from "./flexboxTypes"; const originalContentOnly = (meta: ContentMeta) => diff --git a/vuu-ui/packages/vuu-layout/src/layout-reducer/layoutUtils.ts b/vuu-ui/packages/vuu-layout/src/layout-reducer/layoutUtils.ts index 9ad671751..16edd1ea0 100644 --- a/vuu-ui/packages/vuu-layout/src/layout-reducer/layoutUtils.ts +++ b/vuu-ui/packages/vuu-layout/src/layout-reducer/layoutUtils.ts @@ -6,12 +6,12 @@ import { ComponentWithId, ComponentRegistry, isContainer, - isLayoutComponent + isLayoutComponent, } from "../registry/ComponentRegistry"; import { getPersistentState, hasPersistentState, - setPersistentState + setPersistentState, } from "../use-persistent-state"; import { expandFlex, getProps, typeOf } from "../utils"; import { LayoutJSON, LayoutModel, layoutType } from "./layoutTypes"; @@ -234,6 +234,7 @@ export function layoutFromJson( id, ...props, key: id, + path, }, children ? children.map((child, i) => layoutFromJson(child, `${path}.${i}`)) diff --git a/vuu-ui/packages/vuu-layout/src/palette/Palette.tsx b/vuu-ui/packages/vuu-layout/src/palette/Palette.tsx index 937f1345c..1398397b2 100644 --- a/vuu-ui/packages/vuu-layout/src/palette/Palette.tsx +++ b/vuu-ui/packages/vuu-layout/src/palette/Palette.tsx @@ -6,7 +6,7 @@ import { HTMLAttributes, memo, MouseEvent, - ReactElement + ReactElement, } from "react"; import { useLayoutProviderDispatch } from "../layout-provider"; import { View, ViewProps } from "../layout-view";