@vuu-ui/vuu-layout 0.5.4 → 0.5.6

package/src/layout-reducer/flexUtils.ts

@@ -1,281 +0,0 @@
-import React from "react";
-import { CSSProperties, ReactElement, ReactNode } from "react";
-import { uuid } from "@vuu-ui/vuu-utils";
-import { ComponentRegistry } from "../registry/ComponentRegistry";
-import { getProps, resetPath } from "../utils";
-import { dimension, rect, rectTuple } from "../common-types";
-import { DropPos } from "../drag-drop/dragDropTypes";
-const placeHolderProps = { "data-placeholder": true, "data-resizeable": true };
-
-const NO_STYLE = {};
-const auto = "auto";
-const defaultFlexStyle = {
-  flexBasis: 0,
-  flexGrow: 1,
-  flexShrink: 1,
-  height: auto,
-  width: auto,
-};
-
-const CROSS_DIMENSION = {
-  height: "width",
-  width: "height",
-};
-
-export type flexDirection = "row" | "column";
-
-type contraDimension = dimension;
-type flexDimensionTuple = [dimension, contraDimension, flexDirection];
-export type position = {
-  height?: number;
-  width?: number;
-};
-
-export const getFlexDimensions = (flexDirection: flexDirection = "row") => {
-  if (flexDirection === "row") {
-    return ["width", "height", "column"] as flexDimensionTuple;
-  } else {
-    return ["height", "width", "row"] as flexDimensionTuple;
-  }
-};
-
-const isPercentageSize = (value: string | number) =>
-  typeof value === "string" && value.endsWith("%");
-
-export const getIntrinsicSize = (
-  component: ReactElement
-): { height?: number; width?: number } | undefined => {
-  const { style: { width = auto, height = auto } = NO_STYLE } = component.props;
-
-  // Eliminate 'auto' and percentage sizes
-  const numHeight = typeof height === "number";
-  const numWidth = typeof width === "number";
-
-  if (numHeight && numWidth) {
-    return { height, width };
-  } else if (numHeight) {
-    return { height };
-  } else if (numWidth) {
-    return { width };
-  } else {
-    return undefined;
-  }
-};
-
-export function getFlexStyle(
-  component: ReactElement,
-  dimension: dimension,
-  pos?: DropPos
-) {
-  const crossDimension = CROSS_DIMENSION[dimension];
-  const {
-    style: {
-      [crossDimension]: intrinsicCrossSize = auto,
-      ...intrinsicStyles
-    } = NO_STYLE,
-  } = component.props;
-
-  if (pos && pos[dimension]) {
-    return {
-      ...intrinsicStyles,
-      ...defaultFlexStyle,
-      flexBasis: pos[dimension],
-      flexGrow: 0,
-      flexShrink: 0,
-    };
-  } else {
-    return {
-      ...intrinsicStyles,
-      ...defaultFlexStyle,
-      [crossDimension]: intrinsicCrossSize,
-    };
-  }
-}
-
-//TODO this is not comprehensive
-export function hasUnboundedFlexStyle(component: ReactElement) {
-  const { style: { flex, flexGrow, flexShrink, flexBasis } = NO_STYLE } =
-    component.props;
-  // console.log(`flex ${flex}, flexBasis ${flexBasis}, flexShrink ${flexShrink}, flexGrow ${flexGrow}`)
-  if (typeof flex === "number") {
-    return true;
-  } else if (flexBasis === 0 && flexGrow === 1 && flexShrink === 1) {
-    return true;
-  } else if (typeof flexBasis === "number") {
-    return false;
-  } else {
-    return true;
-  }
-}
-
-export function getFlexOrIntrinsicStyle(
-  component: ReactElement,
-  dimension: dimension,
-  pos: position
-) {
-  const crossDimension = CROSS_DIMENSION[dimension];
-  const {
-    style: {
-      [dimension]: intrinsicSize = auto,
-      [crossDimension]: intrinsicCrossSize = auto,
-      ...intrinsicStyles
-    } = NO_STYLE,
-  } = component.props;
-
-  if (intrinsicSize !== auto) {
-    if (isPercentageSize(intrinsicSize)) {
-      return {
-        // Is this right? discrad the percenbtage size ?
-        flexBasis: 0,
-        flexGrow: 1,
-        flexShrink: 1,
-        [dimension]: undefined,
-        [crossDimension]: intrinsicCrossSize,
-      };
-    } else {
-      return {
-        // or should we leave this as auto until user resizes ?
-        flexBasis: intrinsicSize,
-        flexGrow: 0,
-        flexShrink: 0,
-        [dimension]: intrinsicSize,
-        [crossDimension]: intrinsicCrossSize,
-      };
-    }
-  } else if (pos && pos[dimension]) {
-    return {
-      ...intrinsicStyles,
-      ...defaultFlexStyle,
-      flexBasis: pos[dimension],
-      flexGrow: 0,
-      flexShrink: 0,
-    };
-  } else {
-    return {
-      ...intrinsicStyles,
-      // ...defaultFlexStyle,
-      [crossDimension]: intrinsicCrossSize,
-    };
-  }
-}
-
-export function wrapIntrinsicSizeComponentWithFlexbox(
-  component: ReactElement,
-  flexDirection: flexDirection,
-  path: string,
-  clientRect?: rect,
-  dropRect?: rectTuple
-) {
-  const wrappedChildren = [];
-  let pathIndex = 0;
-  let endPlaceholder;
-
-  if (clientRect && dropRect) {
-    let startPlaceholder;
-    const [dropLeft, dropTop, dropRight, dropBottom] = dropRect;
-    [startPlaceholder, endPlaceholder] =
-      flexDirection === "column"
-        ? [dropTop - clientRect.top, clientRect.bottom - dropBottom]
-        : [dropLeft - clientRect.left, clientRect.right - dropRight];
-
-    if (startPlaceholder) {
-      wrappedChildren.push(
-        createPlaceHolder(`${path}.${pathIndex++}`, startPlaceholder, {
-          flexGrow: 0,
-          flexShrink: 0,
-        })
-      );
-    }
-  } else {
-    // If we don't pass the rect values, we are wrapping an existing child, this is always a trailing placeholder
-    endPlaceholder = true;
-  }
-
-  const { version = 0, style } = getProps(component);
-
-  wrappedChildren.push(
-    resetPath(component, `${path}.${pathIndex++}`, {
-      version: version + 1,
-      style: {
-        ...style,
-        flexBasis: "auto",
-        flexGrow: 0,
-        flexShrink: 0,
-      },
-    })
-  );
-
-  if (endPlaceholder) {
-    wrappedChildren.push(
-      createPlaceHolder(`${path}.${pathIndex++}`, 0, undefined, {
-        [`data-${flexDirection}-placeholder`]: true,
-      })
-    );
-  }
-
-  return createFlexbox(
-    flexDirection,
-    { resizeable: false, style: { flexBasis: "auto" } },
-    wrappedChildren,
-    path
-  );
-}
-
-const getFlexValue = (flexBasis: number, flexFill: boolean) => {
-  if (flexFill) {
-    return undefined;
-  } else if (flexBasis === 0) {
-    return 1;
-  } else {
-    return 0;
-  }
-};
-
-export function createFlexbox(
-  flexDirection: flexDirection,
-  props: any,
-  children: ReactNode,
-  path: string
-) {
-  const id = uuid();
-  const { flexFill, style, resizeable = true } = props;
-  const { flexBasis = flexFill ? undefined : "auto" } = style;
-  const flex = getFlexValue(flexBasis, flexFill);
-  return React.createElement<any>(
-    ComponentRegistry.Flexbox,
-    {
-      id,
-      key: id,
-      path,
-      flexFill,
-      style: {
-        ...style,
-        flexDirection,
-        flexBasis,
-        flexGrow: flex,
-        flexShrink: flex,
-      },
-      resizeable,
-    },
-    children
-  );
-}
-
-const baseStyle = { flexGrow: 1, flexShrink: 1 };
-
-export function createPlaceHolder(
-  path: string,
-  size: number,
-  style?: CSSProperties,
-  props?: any
-) {
-  const id = uuid();
-  return React.createElement("div", {
-    ...placeHolderProps,
-    ...props,
-    "data-path": path,
-    id,
-    key: id,
-    style: { ...baseStyle, ...style, flexBasis: size },
-  });
-}

package/src/layout-reducer/index.ts

@@ -1,4 +0,0 @@
-export * from './layout-reducer';
-export * from './layoutTypes';
-export * from './layoutUtils';
-export * from './flexUtils';

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

@@ -1,365 +0,0 @@
-import React, { ReactElement } from "react";
-import { uuid } from "@vuu-ui/vuu-utils";
-import { getManagedDimension, LayoutProps } from "./layoutUtils";
-import { getProp, getProps, nextStep, resetPath, typeOf } from "../utils";
-import {
-  createPlaceHolder,
-  flexDirection,
-  getFlexDimensions,
-  getFlexOrIntrinsicStyle,
-  getIntrinsicSize,
-  wrapIntrinsicSizeComponentWithFlexbox,
-} from "./flexUtils";
-import { LayoutModel, LayoutRoot } from "./layoutTypes";
-import { DropPos } from "../drag-drop";
-import { DropTarget } from "../drag-drop/DropTarget";
-import { rectTuple } from "../common-types";
-
-type insertionPosition = "before" | "after";
-
-export function getInsertTabBeforeAfter(stack: LayoutModel, pos: DropPos) {
-  const tabs = stack.props.children;
-  const tabCount = tabs.length;
-  const { index = -1, positionRelativeToTab = "after" } = pos.tab || {};
-  return index === -1 || index >= tabCount
-    ? [tabs[tabCount - 1], "after"]
-    : [tabs[index] ?? null, positionRelativeToTab];
-}
-
-export function insertIntoContainer(
-  container: ReactElement,
-  targetContainer: ReactElement,
-  newComponent: ReactElement
-): ReactElement {
-  const {
-    active: containerActive,
-    children: containerChildren = [],
-    path: containerPath,
-  } = getProps(container) as LayoutProps;
-
-  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
-              ) as ReactElement)
-            : child
-        ),
-      ];
-  const active =
-    typeOf(container) === "Stack"
-      ? Array.isArray(insertedIdx)
-        ? (insertedIdx[0] as number)
-        : insertedIdx
-      : containerActive;
-
-  return React.cloneElement(container, { active }, children);
-}
-function insertIntoChildren(
-  container: LayoutModel,
-  containerChildren: ReactElement[],
-  newComponent: ReactElement
-): [number, ReactElement[]] {
-  const containerPath = getProp(container, "path");
-  const count = containerChildren?.length;
-  const { id = uuid() } = getProps(newComponent);
-
-  if (count) {
-    return [
-      count,
-      containerChildren.concat(
-        resetPath(newComponent, `${containerPath}.${count}`, { id, key: id })
-      ),
-    ];
-  } else {
-    return [0, [resetPath(newComponent, `${containerPath}.0`, { id })]];
-  }
-}
-
-export function insertBesideChild(
-  container: ReactElement,
-  existingComponent: any,
-  newComponent: any,
-  insertionPosition: insertionPosition,
-  pos?: DropPos,
-  clientRect?: any,
-  dropRect?: any
-): ReactElement {
-  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: ReactElement, index: number) =>
-          index === idx
-            ? insertBesideChild(
-                child,
-                existingComponent,
-                newComponent,
-                insertionPosition,
-                pos,
-                clientRect,
-                dropRect
-              )
-            : child
-        ),
-      ];
-
-  const active = typeOf(container) === "Stack" ? insertedIdx : containerActive;
-  return React.cloneElement(container, { active }, children);
-}
-
-function updateChildren(
-  container: LayoutModel,
-  containerChildren: ReactElement[],
-  idx: number,
-  newComponent: ReactElement,
-  insertionPosition: insertionPosition,
-  pos: DropPos,
-  clientRect: DropTarget["clientRect"],
-  dropRect: DropTarget["dropRect"]
-) {
-  const intrinsicSize = getIntrinsicSize(newComponent);
-  if (intrinsicSize?.width && intrinsicSize?.height) {
-    return insertIntrinsicSizedComponent(
-      container,
-      containerChildren,
-      idx,
-      newComponent,
-      insertionPosition,
-      clientRect,
-      dropRect!
-    );
-  } else {
-    return insertFlexComponent(
-      container,
-      containerChildren,
-      idx,
-      newComponent,
-      insertionPosition,
-      pos?.width || pos?.height,
-      clientRect
-    );
-  }
-}
-
-const getLeadingPlaceholderSize = (
-  flexDirection: flexDirection,
-  insertionPosition: insertionPosition,
-  { top, right, bottom, left }: DropTarget["clientRect"],
-  [rectLeft, rectTop, rectRight, rectBottom]: rectTuple
-) => {
-  if (flexDirection === "column" && insertionPosition === "before") {
-    return rectTop - top;
-  } else if (flexDirection === "column") {
-    return bottom - rectBottom;
-  } else if (flexDirection === "row" && insertionPosition === "before") {
-    return rectLeft - left;
-  } else if (flexDirection === "row") {
-    return right - rectRight;
-  }
-};
-
-function insertIntrinsicSizedComponent(
-  container: LayoutModel,
-  containerChildren: ReactElement[],
-  idx: number,
-  newComponent: ReactElement,
-  insertionPosition: insertionPosition,
-  clientRect: DropTarget["clientRect"],
-  dropRect: rectTuple
-) {
-  const {
-    style: { flexDirection },
-  } = getProps(container);
-  const [dimension, crossDimension, contraDirection] =
-    getFlexDimensions(flexDirection);
-  const { [crossDimension]: intrinsicCrossSize, [dimension]: intrinsicSize } =
-    getIntrinsicSize(newComponent) as { height: number; width: number };
-  const path = getProp(containerChildren[idx], "path");
-
-  // If we are introducing a new item into a row/column, but it is not flush against existing child, we will insert
-  // a leading placeholder ...
-  const placeholderSize = getLeadingPlaceholderSize(
-    flexDirection,
-    insertionPosition,
-    clientRect,
-    dropRect
-  );
-
-  const [itemToInsert, size] =
-    intrinsicCrossSize < clientRect[crossDimension]
-      ? [
-          wrapIntrinsicSizeComponentWithFlexbox(
-            newComponent,
-            contraDirection,
-            path,
-            clientRect,
-            dropRect
-          ),
-          intrinsicSize,
-        ]
-      : [newComponent, undefined];
-
-  const placeholder = placeholderSize
-    ? createPlaceHolder(path, placeholderSize, { flexGrow: 0, flexShrink: 0 })
-    : undefined;
-
-  if (intrinsicCrossSize > clientRect[crossDimension]) {
-    containerChildren = containerChildren.map((child) => {
-      if (getProp(child, "placeholder")) {
-        return child;
-      } else {
-        const { [crossDimension]: intrinsicCrossChildSize } = getIntrinsicSize(
-          child
-        ) as {
-          height: number;
-          width: number;
-        };
-        if (
-          intrinsicCrossChildSize &&
-          intrinsicCrossChildSize < intrinsicCrossSize
-        ) {
-          return wrapIntrinsicSizeComponentWithFlexbox(
-            child,
-            contraDirection,
-            getProp(child, "path")
-          );
-        } else {
-          return child;
-        }
-      }
-    });
-  }
-
-  return insertFlexComponent(
-    container,
-    containerChildren,
-    idx,
-    itemToInsert,
-    insertionPosition,
-    size,
-    clientRect,
-    placeholder
-  );
-}
-
-function insertFlexComponent(
-  container: LayoutModel,
-  containerChildren: ReactElement[],
-  idx: number,
-  newComponent: ReactElement,
-  insertionPosition: "before" | "after",
-  size: number | undefined,
-  targetRect: DropTarget["clientRect"],
-  placeholder?: ReactElement
-) {
-  const containerPath = getProp(container, "path");
-  let insertedIdx = 0;
-  const children =
-    !containerChildren || containerChildren.length === 0
-      ? [newComponent]
-      : containerChildren
-          .reduce<ReactElement[]>((arr, child, i) => {
-            if (idx === i) {
-              const [existingComponent, insertedComponent] =
-                getStyledComponents(container, child, newComponent, targetRect);
-              if (insertionPosition === "before") {
-                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}`)
-          );
-
-  return [insertedIdx, children];
-}
-
-function getStyledComponents(
-  container: LayoutModel,
-  existingComponent: ReactElement,
-  newComponent: ReactElement,
-  targetRect: DropTarget["clientRect"]
-): [ReactElement, ReactElement] {
-  let { id = uuid(), version = 0 } = getProps(newComponent);
-  version += 1;
-  if (typeOf(container) === "Flexbox") {
-    const [dim] = getManagedDimension(container.props.style);
-    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,
-      }),
-    ];
-  } else {
-    const {
-      style: { left: _1, top: _2, flex: _3, ...style } = {
-        left: undefined,
-        top: undefined,
-        flex: undefined,
-      },
-    } = getProps(newComponent);
-    // TODO why would we strip out width, height if resizeable
-    // we might need these if in a Stack, for example
-    // const dimensions = source.props.resizeable ? {} : { width, height };
-    return [
-      existingComponent,
-      React.cloneElement(newComponent, { id, version, style }),
-    ];
-  }
-}