@vuu-ui/vuu-layout 2.1.19-beta.2 → 2.1.19-beta.3

package/src/layout-reducer/insert-layout-element.js

@@ -1,179 +0,0 @@
-import { uuid } from "@vuu-ui/vuu-utils";
-import react from "react";
-import { getProp, getProps, nextStep, resetPath, typeOf } from "../utils/index.js";
-import { createPlaceHolder, getFlexDimensions, getFlexOrIntrinsicStyle, getIntrinsicSize, wrapIntrinsicSizeComponentWithFlexbox } from "./flexUtils.js";
-import { getDefaultTabLabel, getManagedDimension } from "./layoutUtils.js";
-function getInsertTabBeforeAfter(stack, pos) {
-    const { children: tabs } = stack.props;
-    const tabCount = tabs.length;
-    const { index = -1, positionRelativeToTab = "after" } = pos.tab || {};
-    return -1 === index || index >= tabCount ? [
-        tabs[tabCount - 1],
-        "after"
-    ] : [
-        tabs[index] ?? null,
-        positionRelativeToTab
-    ];
-}
-function insertIntoContainer(container, targetContainer, newComponent) {
-    const { active: containerActive, children: containerChildren = [], path: containerPath } = getProps(container);
-    const existingComponentPath = getProp(targetContainer, "path");
-    const { idx, finalStep } = nextStep(containerPath, existingComponentPath, true);
-    const [insertedIdx, children] = finalStep ? insertIntoChildren(container, containerChildren, newComponent) : [
-        containerActive,
-        containerChildren?.map((child, index)=>index === idx ? insertIntoContainer(child, targetContainer, newComponent) : child)
-    ];
-    const active = "Stack" === typeOf(container) ? Array.isArray(insertedIdx) ? insertedIdx[0] : insertedIdx : containerActive;
-    return react.cloneElement(container, {
-        active
-    }, children);
-}
-const getDefaultTitle = (containerType, component, index, existingLabels)=>"Stack" === containerType ? getDefaultTabLabel(component, index, existingLabels) : void 0;
-const getChildrenTitles = (children)=>children.map((child)=>child.props.title);
-function insertIntoChildren(container, containerChildren, newComponent) {
-    if (Array.isArray(newComponent)) {
-        const [firstChild, ...rest] = newComponent;
-        let [idx, children] = insertIntoChildren(container, containerChildren, firstChild);
-        for (const child of rest)[, children] = insertIntoChildren(container, children, child);
-        return [
-            idx,
-            children
-        ];
-    }
-    const containerPath = getProp(container, "path");
-    const count = containerChildren?.length;
-    const { id = uuid(), title = getDefaultTitle(typeOf(container), newComponent, count ?? 0, getChildrenTitles(containerChildren)) } = getProps(newComponent);
-    if (count) return [
-        count,
-        containerChildren.concat(resetPath(newComponent, `${containerPath}.${count}`, {
-            id,
-            key: id,
-            title
-        }))
-    ];
-    return [
-        0,
-        [
-            resetPath(newComponent, `${containerPath}.0`, {
-                id,
-                title
-            })
-        ]
-    ];
-}
-function insertBesideChild(container, existingComponent, newComponent, insertionPosition, pos, clientRect, dropRect) {
-    const { active: containerActive, children: containerChildren, path: containerPath } = getProps(container);
-    const existingComponentPath = getProp(existingComponent, "path");
-    const { idx, finalStep } = nextStep(containerPath, existingComponentPath);
-    const [insertedIdx, children] = finalStep ? updateChildren(container, containerChildren, idx, newComponent, insertionPosition, pos, clientRect, dropRect) : [
-        containerActive,
-        containerChildren.map((child, index)=>index === idx ? insertBesideChild(child, existingComponent, newComponent, insertionPosition, pos, clientRect, dropRect) : child)
-    ];
-    const active = "Stack" === typeOf(container) ? insertedIdx : containerActive;
-    return react.cloneElement(container, {
-        active
-    }, children);
-}
-function updateChildren(container, containerChildren, idx, newComponent, insertionPosition, pos, clientRect, dropRect) {
-    const intrinsicSize = getIntrinsicSize(newComponent);
-    if (intrinsicSize?.width && intrinsicSize?.height) return insertIntrinsicSizedComponent(container, containerChildren, idx, newComponent, insertionPosition, clientRect, dropRect);
-    return insertFlexComponent(container, containerChildren, idx, newComponent, insertionPosition, pos?.width || pos?.height, clientRect);
-}
-const getLeadingPlaceholderSize = (flexDirection, insertionPosition, { top, right, bottom, left }, [rectLeft, rectTop, rectRight, rectBottom])=>{
-    if ("column" === flexDirection && "before" === insertionPosition) return rectTop - top;
-    if ("column" === flexDirection) return bottom - rectBottom;
-    if ("row" === flexDirection && "before" === insertionPosition) return rectLeft - left;
-    if ("row" === flexDirection) return right - rectRight;
-};
-function insertIntrinsicSizedComponent(container, containerChildren, idx, newComponent, insertionPosition, clientRect, dropRect) {
-    const { style: { flexDirection } } = getProps(container);
-    const [dimension, crossDimension, contraDirection] = getFlexDimensions(flexDirection);
-    const { [crossDimension]: intrinsicCrossSize, [dimension]: intrinsicSize } = getIntrinsicSize(newComponent);
-    const path = getProp(containerChildren[idx], "path");
-    const placeholderSize = getLeadingPlaceholderSize(flexDirection, insertionPosition, clientRect, dropRect);
-    const [itemToInsert, size] = intrinsicCrossSize < clientRect[crossDimension] ? [
-        wrapIntrinsicSizeComponentWithFlexbox(newComponent, contraDirection, path, clientRect, dropRect),
-        intrinsicSize
-    ] : [
-        newComponent,
-        void 0
-    ];
-    const placeholder = placeholderSize ? createPlaceHolder(path, placeholderSize, {
-        flexGrow: 0,
-        flexShrink: 0
-    }) : void 0;
-    if (intrinsicCrossSize > clientRect[crossDimension]) containerChildren = containerChildren.map((child)=>{
-        if (getProp(child, "placeholder")) return child;
-        {
-            const { [crossDimension]: intrinsicCrossChildSize } = getIntrinsicSize(child);
-            if (intrinsicCrossChildSize && intrinsicCrossChildSize < intrinsicCrossSize) return wrapIntrinsicSizeComponentWithFlexbox(child, contraDirection, getProp(child, "path"));
-            return child;
-        }
-    });
-    return insertFlexComponent(container, containerChildren, idx, itemToInsert, insertionPosition, size, clientRect, placeholder);
-}
-function insertFlexComponent(container, containerChildren, idx, newComponent, insertionPosition, size, targetRect, placeholder) {
-    const containerPath = getProp(container, "path");
-    let insertedIdx = 0;
-    const children = containerChildren && 0 !== containerChildren.length ? containerChildren.reduce((arr, child, i)=>{
-        if (idx === i) {
-            const [existingComponent, insertedComponent] = getStyledComponents(container, child, newComponent, targetRect);
-            if ("before" === insertionPosition) if (placeholder) arr.push(placeholder, insertedComponent, existingComponent);
-            else arr.push(insertedComponent, existingComponent);
-            else if (placeholder) arr.push(existingComponent, insertedComponent, placeholder);
-            else arr.push(existingComponent, insertedComponent);
-            insertedIdx = arr.indexOf(insertedComponent);
-        } else arr.push(child);
-        return arr;
-    }, []).map((child, i)=>i < insertedIdx ? child : resetPath(child, `${containerPath}.${i}`)) : [
-        newComponent
-    ];
-    return [
-        insertedIdx,
-        children
-    ];
-}
-function getStyledComponents(container, existingComponent, newComponent, targetRect) {
-    const id = uuid();
-    let { version = 0 } = getProps(newComponent);
-    version += 1;
-    if ("Flexbox" === typeOf(container)) {
-        const { style: containerStyle } = container.props;
-        const [dim] = getManagedDimension(containerStyle);
-        const splitterSize = 6;
-        const size = {
-            [dim]: (targetRect[dim] - splitterSize) / 2
-        };
-        const existingComponentStyle = getFlexOrIntrinsicStyle(existingComponent, dim, size);
-        const newComponentStyle = getFlexOrIntrinsicStyle(newComponent, dim, size);
-        return [
-            react.cloneElement(existingComponent, {
-                style: existingComponentStyle
-            }),
-            react.cloneElement(newComponent, {
-                id,
-                version,
-                style: newComponentStyle
-            })
-        ];
-    }
-    {
-        const { style: { left: _1, top: _2, flex: _3, ...style } = {
-            left: void 0,
-            top: void 0,
-            flex: void 0
-        } } = getProps(newComponent);
-        return [
-            existingComponent,
-            react.cloneElement(newComponent, {
-                id,
-                version,
-                style: {
-                    ...style,
-                    flex: "1 1 0px"
-                }
-            })
-        ];
-    }
-}
-export { getInsertTabBeforeAfter, insertBesideChild, insertIntoContainer };

package/src/layout-reducer/layout-reducer.js

@@ -1,121 +0,0 @@
-import { isContainer } from "@vuu-ui/vuu-utils";
-import react from "react";
-import { findTarget, followPath, followPathToParent, getProp, getProps, typeOf } from "../utils/index.js";
-import { getIntrinsicSize } from "./flexUtils.js";
-import { getInsertTabBeforeAfter, insertBesideChild, insertIntoContainer } from "./insert-layout-element.js";
-import { moveChild } from "./move-layout-element.js";
-import { LayoutActionType } from "./layoutTypes.js";
-import { removeChild } from "./remove-layout-element.js";
-import { _replaceChild, replaceChild, swapChild } from "./replace-layout-element.js";
-import { resizeFlexChild, resizeFlexChildren } from "./resize-flex-children.js";
-import { wrap } from "./wrap-layout-element.js";
-const layoutReducer = (state, action)=>{
-    switch(action.type){
-        case LayoutActionType.ADD:
-            return addChild(state, action);
-        case LayoutActionType.DRAG_DROP:
-            return dragDrop(state, action);
-        case "collapse":
-        case "expand":
-            return setChildProps(state, action);
-        case LayoutActionType.REMOVE:
-            return removeChild(state, action);
-        case LayoutActionType.REPLACE:
-            return replaceChild(state, action);
-        case LayoutActionType.SET_PROP:
-            return setProp(state, action);
-        case LayoutActionType.SET_PROPS:
-            return setProps(state, action);
-        case LayoutActionType.SET_TITLE:
-            return setProp(state, {
-                type: "set-prop",
-                path: action.path,
-                propName: "title",
-                propValue: action.title
-            });
-        case LayoutActionType.SPLITTER_RESIZE:
-            return resizeFlexChildren(state, action);
-        case LayoutActionType.LAYOUT_RESIZE:
-            return resizeFlexChild(state, action);
-        case LayoutActionType.SWITCH_TAB:
-            return switchTab(state, action);
-        case LayoutActionType.MOVE_CHILD:
-            return moveChild(state, action);
-        default:
-            return state;
-    }
-};
-const switchTab = (state, { path, nextIdx })=>{
-    const target = followPath(state, path, true);
-    const replacement = react.cloneElement(target, {
-        active: nextIdx
-    });
-    return swapChild(state, target, replacement);
-};
-const setProp = (state, { path, propName, propValue })=>{
-    const target = followPath(state, path, true);
-    const replacement = react.cloneElement(target, {
-        [propName]: propValue
-    });
-    return swapChild(state, target, replacement);
-};
-const setProps = (state, { path, props })=>{
-    const target = followPath(state, path, true);
-    const replacement = react.cloneElement(target, props);
-    return swapChild(state, target, replacement);
-};
-const setChildProps = (state, { path, type })=>{
-    if (!path) return state;
-    {
-        const target = followPath(state, path, true);
-        return swapChild(state, target, target, type);
-    }
-};
-const dragDrop = (layoutRoot, action)=>{
-    const { draggedReactElement: newComponent, dragInstructions, dropTarget } = action;
-    const existingComponent = dropTarget.component;
-    const { pos } = dropTarget;
-    const destinationTabstrip = pos?.position?.Header && "Stack" === typeOf(existingComponent);
-    const { id, version } = getProps(newComponent);
-    const intrinsicSize = getIntrinsicSize(newComponent);
-    let newLayoutRoot;
-    if (destinationTabstrip) {
-        const [targetTab, insertionPosition] = getInsertTabBeforeAfter(existingComponent, pos);
-        newLayoutRoot = void 0 === targetTab ? insertIntoContainer(layoutRoot, existingComponent, newComponent) : insertBesideChild(layoutRoot, targetTab, newComponent, insertionPosition);
-    } else newLayoutRoot = !intrinsicSize && pos?.position?.Centre ? _replaceChild(layoutRoot, existingComponent, newComponent) : dropLayoutIntoContainer(layoutRoot, dropTarget, newComponent);
-    if (dragInstructions.DoNotRemove) return newLayoutRoot;
-    const finalTarget = findTarget(newLayoutRoot, (props)=>props.id === id && props.version === version);
-    const finalPath = getProp(finalTarget, "path");
-    return removeChild(newLayoutRoot, {
-        path: finalPath,
-        type: "remove"
-    });
-};
-const addChild = (layoutRoot, { path: containerPath, component })=>insertIntoContainer(layoutRoot, followPath(layoutRoot, containerPath), component);
-const dropLayoutIntoContainer = (layoutRoot, dropTarget, newComponent)=>{
-    const { component, pos, clientRect, dropRect } = dropTarget;
-    const existingComponent = component;
-    const existingComponentPath = getProp(existingComponent, "path");
-    if ("0.0" === existingComponentPath) return wrap(layoutRoot, existingComponent, newComponent, pos);
-    const targetContainer = followPathToParent(layoutRoot, existingComponentPath);
-    if (withTheGrain(pos, targetContainer)) {
-        const insertionPosition = pos.position.SouthOrEast ? "after" : "before";
-        return insertBesideChild(layoutRoot, existingComponent, newComponent, insertionPosition, pos, clientRect, dropRect);
-    }
-    if (!withTheGrain(pos, targetContainer)) return wrap(layoutRoot, existingComponent, newComponent, pos, clientRect, dropRect);
-    if (isContainer(typeOf(targetContainer))) return wrap(layoutRoot, existingComponent, newComponent, pos);
-    throw Error(`no support right now for position = ${pos.position}`);
-};
-const withTheGrain = (pos, container)=>{
-    if (pos.position.Centre) return isTerrace(container) || isTower(container);
-    return pos.position.NorthOrSouth ? isTower(container) : pos.position.EastOrWest ? isTerrace(container) : false;
-};
-const isTower = (container)=>{
-    const { style } = container.props;
-    return "Flexbox" === typeOf(container) && "column" === style.flexDirection;
-};
-const isTerrace = (container)=>{
-    const { style } = container.props;
-    return "Flexbox" === typeOf(container) && "column" !== style.flexDirection;
-};
-export { layoutReducer };

package/src/layout-reducer/layoutTypes.js

@@ -1,34 +0,0 @@
-const LayoutActionType = {
-    ADD: "add",
-    DRAG_START: "drag-start",
-    DRAG_DROP: "drag-drop",
-    LAYOUT_RESIZE: "layout-resize",
-    MAXIMIZE: "maximize",
-    MINIMIZE: "minimize",
-    MOVE_CHILD: "move-child",
-    QUERY: "query",
-    REMOVE: "remove",
-    REPLACE: "replace",
-    RESTORE: "restore",
-    SET_PROP: "set-prop",
-    SET_PROPS: "set-props",
-    SET_TITLE: "set-title",
-    SPLITTER_RESIZE: "splitter-resize",
-    SWITCH_TAB: "switch-tab",
-    TEAROUT: "tearout"
-};
-const isApplicationLevelChange = (layoutChangeReason)=>[
-        "switch-active-layout",
-        "open-layout",
-        "close-layout",
-        "rename-layout"
-    ].includes(layoutChangeReason);
-const isLayoutLevelChange = (layoutChangeReason)=>[
-        "switch-active-tab",
-        "edit-feature-title",
-        "save-feature-props",
-        "remove-component",
-        "resize-component",
-        "drag-drop-operation"
-    ].includes(layoutChangeReason);
-export { LayoutActionType, isApplicationLevelChange, isLayoutLevelChange };

package/src/layout-reducer/layoutUtils.js

@@ -1,178 +0,0 @@
-import { getLayoutComponent, isContainer, isLayoutComponent, uuid } from "@vuu-ui/vuu-utils";
-import react, { cloneElement } from "react";
-import { getPersistentState, hasPersistentState, setPersistentState } from "../use-persistent-state.js";
-import { expandFlex, followPathToParent, getProps, typeOf } from "../utils/index.js";
-const getManagedDimension = (style)=>"column" === style.flexDirection ? [
-        "height",
-        "width"
-    ] : [
-        "width",
-        "height"
-    ];
-const theKidHasNoStyle = {};
-const applyLayoutProps = (component, path = "0")=>{
-    const [layoutProps, children] = getChildLayoutProps(typeOf(component), component.props, path);
-    return react.cloneElement(component, layoutProps, children);
-};
-const cloneElementAddLayoutProps = (layoutElement, previousLayout)=>{
-    const type = typeOf(layoutElement);
-    const [layoutProps, children] = getChildLayoutProps(type, layoutElement.props, "0", void 0, previousLayout);
-    return cloneElement(layoutElement, layoutProps, children);
-};
-const applyLayout = (type, props, previousLayout)=>{
-    const [layoutProps, children] = getChildLayoutProps(type, props, "0", void 0, previousLayout);
-    return {
-        ...props,
-        ...layoutProps,
-        type,
-        children
-    };
-};
-function getLayoutProps(type, props, path = "0", parentType = null, previousLayout) {
-    const { active: prevActive = 0, "data-path": dataPath, path: prevPath = dataPath, id: prevId, style: prevStyle } = getProps(previousLayout);
-    const prevMatch = typeOf(previousLayout) === type && path === prevPath;
-    const id = prevMatch ? prevId : props.id ?? uuid();
-    const active = "Stack" === type ? props.active ?? prevActive : void 0;
-    const key = id;
-    const style = prevMatch ? prevStyle : getStyle(type, props, parentType);
-    return isLayoutComponent(type) ? {
-        id,
-        key,
-        path,
-        style,
-        type,
-        active
-    } : {
-        id,
-        key,
-        style,
-        "data-path": path
-    };
-}
-function getChildLayoutProps(type, props, path, parentType = null, previousLayout) {
-    const layoutProps = getLayoutProps(type, props, path, parentType, previousLayout);
-    if (props.layout && !previousLayout) return [
-        layoutProps,
-        [
-            layoutFromJson(props.layout, `${path}.0`)
-        ]
-    ];
-    const previousChildren = previousLayout?.children ?? previousLayout?.props?.children;
-    const hasDynamicChildren = props.dropTarget && previousChildren;
-    const children = hasDynamicChildren ? previousChildren : getLayoutChildren(type, props.children, path, previousChildren);
-    return [
-        layoutProps,
-        children
-    ];
-}
-function getLayoutChildren(type, children, path = "0", previousChildren) {
-    const kids = Array.isArray(children) ? children : react.isValidElement(children) ? [
-        children
-    ] : [];
-    return isContainer(type) ? kids.map((child, i)=>{
-        const childType = typeOf(child);
-        const previousType = typeOf(previousChildren?.[i]);
-        if (!previousType || childType === previousType) {
-            const [layoutProps, children] = getChildLayoutProps(childType, child.props, `${path}.${i}`, type, previousChildren?.[i]);
-            return react.cloneElement(child, layoutProps, children);
-        }
-        return previousChildren?.[i];
-    }) : children;
-}
-const getStyle = (type, props, parentType)=>{
-    let { style = theKidHasNoStyle } = props;
-    if ("Flexbox" === type) style = {
-        flexDirection: props.column ? "column" : "row",
-        ...style,
-        display: "flex"
-    };
-    if (style.flex) {
-        const { flex, ...otherStyles } = style;
-        style = {
-            ...otherStyles,
-            ...expandFlex("number" == typeof flex ? flex : 0)
-        };
-    } else if ("Stack" === parentType) style = {
-        ...style,
-        ...expandFlex(1)
-    };
-    else if ("Flexbox" === parentType && (style.width || style.height) && void 0 === style.flexBasis) style = {
-        ...style,
-        flexBasis: "auto",
-        flexGrow: 0,
-        flexShrink: 0
-    };
-    return style;
-};
-function layoutFromJson({ active, id = uuid(), type, children, props, state }, path) {
-    const componentType = type.match(/^[a-z]/) ? type : getLayoutComponent(type);
-    if (void 0 === componentType) throw Error(`layoutUtils unable to create component from JSON, unknown type ${type}`);
-    if (state) setPersistentState(id, state);
-    return react.createElement(componentType, {
-        active,
-        id,
-        ...props,
-        key: id,
-        path
-    }, children ? children.map((child, i)=>layoutFromJson(child, `${path}.${i}`)) : void 0);
-}
-function layoutToJSON(component) {
-    return componentToJson(component);
-}
-function componentToJson(component) {
-    const type = typeOf(component);
-    const { id, children, type: _omit, ...props } = getProps(component);
-    const state = hasPersistentState(id) ? getPersistentState(id) : void 0;
-    return {
-        id,
-        type,
-        props: serializeProps(props),
-        state,
-        children: react.Children.map(children, componentToJson)
-    };
-}
-function serializeProps(props) {
-    if (props) {
-        const { path, ...otherProps } = props;
-        const result = {};
-        for (const [key, value] of Object.entries(otherProps))result[key] = serializeValue(value);
-        return result;
-    }
-}
-function serializeValue(value) {
-    if ("string" == typeof value || "number" == typeof value || "boolean" == typeof value) return value;
-    if (Array.isArray(value)) return value.map(serializeValue);
-    if ("object" == typeof value && null !== value) {
-        const result = {};
-        for (const [k, v] of Object.entries(value))result[k] = serializeValue(v);
-        return result;
-    }
-}
-const layoutQuery = (query, path, layoutRoot)=>{
-    if (path && layoutRoot) {
-        const parentElement = followPathToParent(layoutRoot, path);
-        if (parentElement) {
-            const { id: parentContainerId } = getProps(parentElement);
-            const parentContainerType = typeOf(parentElement);
-            return {
-                parentContainerId,
-                parentContainerType
-            };
-        }
-        return {
-            parentContainerType: "Stack",
-            parentContainerId: "blah"
-        };
-    }
-};
-const getDefaultTabLabel = (component, tabIndex, existingLabels = [])=>{
-    let label = component.props?.title ?? component.props?.["data-tab-title"] ?? existingLabels[tabIndex];
-    if (label) return label;
-    {
-        let count = tabIndex;
-        do label = `Tab ${++count}`;
-        while (existingLabels.includes(label))
-        return label;
-    }
-};
-export { applyLayout, applyLayoutProps, cloneElementAddLayoutProps, componentToJson, getDefaultTabLabel, getManagedDimension, layoutFromJson, layoutQuery, layoutToJSON, serializeProps };

package/src/layout-reducer/move-layout-element.js

@@ -1,18 +0,0 @@
-import { cloneElement } from "react";
-import { followPath, getProps } from "../utils/index.js";
-import { swapChild } from "./replace-layout-element.js";
-function moveChild(layoutRoot, { fromIndex, path, toIndex }) {
-    const target = followPath(layoutRoot, path, true);
-    const { children } = getProps(target);
-    const replacementChildren = moveChildWithinChildren(children, fromIndex, toIndex);
-    const replacement = cloneElement(target, void 0, replacementChildren);
-    return swapChild(layoutRoot, target, replacement);
-}
-function moveChildWithinChildren(children, fromIndex, toIndex) {
-    const newChildren = children.slice();
-    const [child] = newChildren.splice(fromIndex, 1);
-    if (-1 === toIndex) return newChildren.concat(child);
-    newChildren.splice(toIndex, 0, child);
-    return newChildren;
-}
-export { moveChild };