@vuu-ui/vuu-layout 0.5.10 → 0.5.11

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

@@ -1,237 +0,0 @@
-import React, { ReactElement } from "react";
-import { DropPos } from "../drag-drop/dragDropTypes";
-import { DropTarget } from "../drag-drop/DropTarget";
-import { isContainer } from "../registry/ComponentRegistry";
-import {
-  findTarget,
-  followPath,
-  followPathToParent,
-  getProp,
-  getProps,
-  typeOf
-} from "../utils";
-import { getIntrinsicSize } from "./flexUtils";
-import {
-  getInsertTabBeforeAfter,
-  insertBesideChild,
-  insertIntoContainer
-} from "./insert-layout-element";
-import {
-  AddAction,
-  DragDropAction, LayoutActionType, LayoutReducerAction, MaximizeAction, SetTitleAction,
-  SwitchTabAction
-} from "./layoutTypes";
-import { LayoutProps } from "./layoutUtils";
-import { removeChild } from "./remove-layout-element";
-import {
-  replaceChild,
-  swapChild,
-  _replaceChild
-} from "./replace-layout-element";
-import { resizeFlexChildren } from "./resize-flex-children";
-import { wrap } from "./wrap-layout-element";
-
-export const layoutReducer = (
-  state: ReactElement,
-  action: LayoutReducerAction
-): ReactElement => {
-  switch (action.type) {
-    case LayoutActionType.ADD:
-      return addChild(state, action);
-    case LayoutActionType.DRAG_DROP:
-      return dragDrop(state, action);
-    case LayoutActionType.MAXIMIZE:
-      return setChildProps(state, action);
-    case LayoutActionType.REMOVE:
-      return removeChild(state, action);
-    case LayoutActionType.REPLACE:
-      return replaceChild(state, action);
-    case LayoutActionType.SET_TITLE:
-      return setTitle(state, action);
-    case LayoutActionType.SPLITTER_RESIZE:
-      return resizeFlexChildren(state, action);
-    case LayoutActionType.SWITCH_TAB:
-      return switchTab(state, action);
-    default:
-      return state;
-  }
-};
-
-const switchTab = (state: ReactElement, { path, nextIdx }: SwitchTabAction) => {
-  const target = followPath(state, path, true);
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const replacement = React.cloneElement<any>(target, {
-    active: nextIdx,
-  });
-  return swapChild(state, target, replacement);
-}
-
-const setTitle = (state: ReactElement, { path, title }: SetTitleAction) => {
-  const target = followPath(state, path, true);
-  const replacement = React.cloneElement(target, {
-    title,
-  });
-  return swapChild(state, target, replacement);
-}
-
-const setChildProps = (state: ReactElement, { path, type }: MaximizeAction) => {
-  if (path) {
-    const target = followPath(state, path, true);
-    return swapChild(state, target, target, type);
-  } else {
-    return state;
-  }
-}
-
-const dragDrop = (
-  layoutRoot: ReactElement,
-  action: DragDropAction
-): ReactElement => {
-  console.log("drag drop");
-  const {
-    draggedReactElement: newComponent,
-    dragInstructions,
-    dropTarget,
-  } = action;
-  const existingComponent = dropTarget.component as ReactElement;
-  const { pos } = dropTarget;
-  const destinationTabstrip =
-    pos?.position?.Header && typeOf(existingComponent) === "Stack";
-  const { id, version } = getProps(newComponent);
-  const intrinsicSize = getIntrinsicSize(newComponent);
-  let newLayoutRoot: ReactElement;
-  if (destinationTabstrip) {
-    const [targetTab, insertionPosition] = getInsertTabBeforeAfter(
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      existingComponent!,
-      pos
-    );
-    if (targetTab === undefined) {
-      newLayoutRoot = insertIntoContainer(
-        layoutRoot,
-        existingComponent,
-        newComponent
-      );
-    } else {
-      newLayoutRoot = insertBesideChild(
-        layoutRoot,
-        targetTab,
-        newComponent,
-        insertionPosition
-      );
-    }
-  } else if (!intrinsicSize && pos?.position?.Centre) {
-    newLayoutRoot = _replaceChild(
-      layoutRoot,
-      existingComponent as ReactElement,
-      newComponent
-    );
-  } else {
-    newLayoutRoot = dropLayoutIntoContainer(
-      layoutRoot,
-      dropTarget as DropTarget,
-      newComponent
-    );
-  }
-
-  if (dragInstructions.DoNotRemove) {
-    return newLayoutRoot;
-  }
-  
-  const finalTarget = findTarget(
-    newLayoutRoot,
-    (props: LayoutProps) => props.id === id && props.version === version
-  ) as ReactElement;
-  const finalPath = getProp(finalTarget, "path");
-  return removeChild(newLayoutRoot, { path: finalPath, type: "remove" });
-}
-
-const addChild = (
-  layoutRoot: ReactElement,
-  { path: containerPath, component }: AddAction
-) => {
-  return insertIntoContainer(
-    layoutRoot,
-    followPath(layoutRoot, containerPath) as ReactElement,
-    component
-  );
-}
-
-const dropLayoutIntoContainer = (
-  layoutRoot: ReactElement,
-  dropTarget: DropTarget,
-  newComponent: ReactElement
-): ReactElement => {
-  const {
-    component: existingComponent,
-    pos,
-    clientRect,
-    dropRect,
-  } = dropTarget;
-  const existingComponentPath = getProp(existingComponent, "path");
-
-  if (existingComponentPath === "0.0") {
-    return wrap(layoutRoot, existingComponent, newComponent, pos);
-  }
-  
-  const targetContainer = followPathToParent(
-    layoutRoot,
-    existingComponentPath
-  ) as ReactElement;
-
-  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) as string)) {
-    return wrap(layoutRoot, existingComponent, newComponent, pos);
-  }
-
-  throw Error(`no support right now for position = ${pos.position}`);
-}
-
-const withTheGrain = (pos: DropPos, container: ReactElement) => {
-  if (pos.position.Centre) {
-    return isTerrace(container) || isTower(container);
-  }
-
-  return pos.position.NorthOrSouth
-    ? isTower(container)
-    : pos.position.EastOrWest
-    ? isTerrace(container)
-    : false;
-}
-
-const isTower = (container: ReactElement) => {
-  return (
-    typeOf(container) === "Flexbox" &&
-    container.props.style.flexDirection === "column"
-  );
-}
-
-const isTerrace = (container: ReactElement) => {
-  return (
-    typeOf(container) === "Flexbox" &&
-    container.props.style.flexDirection !== "column"
-  );
-}

package/src/layout-reducer/layoutTypes.ts

@@ -1,159 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { ReactElement } from "react";
-import { DragDropRect, DragInstructions } from "../drag-drop";
-import { DropTarget } from "../drag-drop/DropTarget";
-
-export interface WithProps {
-  props?: { [key: string]: any };
-}
-
-export interface WithType {
-  props?: any;
-  title?: string;
-  type: string;
-}
-
-export interface LayoutRoot extends WithProps {
-  active?: number;
-  children?: ReactElement[];
-  type: string;
-}
-
-export interface LayoutJSON extends WithType {
-  children?: LayoutJSON[];
-  id?: string;
-  props?: { [key: string]: any };
-  state?: any;
-  type: string;
-}
-
-export interface WithActive {
-  active?: number;
-}
-
-export type LayoutModel = LayoutRoot | ReactElement | WithType;
-
-export type layoutType = "Flexbox" | "View" | "DraggableLayout" | "Stack";
-
-export const LayoutActionType = {
-  ADD: "add",
-  DRAG_START: "drag-start",
-  DRAG_DROP: "drag-drop",
-  MAXIMIZE: "maximize",
-  MINIMIZE: "minimize",
-  REMOVE: "remove",
-  REPLACE: "replace",
-  RESTORE: "restore",
-  SAVE: "save",
-  SET_TITLE: "set-title",
-  SPLITTER_RESIZE: "splitter-resize",
-  SWITCH_TAB: "switch-tab",
-  TEAROUT: "tearout",
-} as const;
-
-export type AddAction = {
-  component: any;
-  path: string;
-  type: typeof LayoutActionType.ADD;
-};
-
-export type DragDropAction = {
-  draggedReactElement: ReactElement;
-  dragInstructions: any;
-  dropTarget: Partial<DropTarget>;
-  type: typeof LayoutActionType.DRAG_DROP;
-};
-
-export type MaximizeAction = {
-  path?: string;
-  type: typeof LayoutActionType.MAXIMIZE;
-};
-
-export type MinimizeAction = {
-  path?: string;
-  type: typeof LayoutActionType.MINIMIZE;
-};
-
-export type RemoveAction = {
-  path?: string;
-  type: typeof LayoutActionType.REMOVE;
-};
-
-export type ReplaceAction = {
-  replacement: any;
-  target: any;
-  type: typeof LayoutActionType.REPLACE;
-};
-
-export type RestoreAction = {
-  path?: string;
-  type: typeof LayoutActionType.RESTORE;
-};
-
-export type SetTitleAction = {
-  path: string;
-  title: string;
-  type: typeof LayoutActionType.SET_TITLE;
-};
-
-export type SplitterResizeAction = {
-  path: string;
-  sizes: { currentSize: number; flexBasis: number }[];
-  type: typeof LayoutActionType.SPLITTER_RESIZE;
-};
-
-export type SwitchTabAction = {
-  nextIdx: number;
-  path: string;
-  type: typeof LayoutActionType.SWITCH_TAB;
-};
-
-export type TearoutAction = {
-  path?: string;
-  type: typeof LayoutActionType.TEAROUT;
-};
-
-export type LayoutReducerAction =
-  | AddAction
-  | DragDropAction
-  | MaximizeAction
-  | MinimizeAction
-  | RemoveAction
-  | ReplaceAction
-  | RestoreAction
-  | SetTitleAction
-  | SplitterResizeAction
-  | SwitchTabAction;
-
-export type SaveAction = {
-  type: typeof LayoutActionType.SAVE;
-};
-
-export type AddToolbarContributionViewAction = {
-  content: ReactElement;
-  location: string;
-  type: "add-toolbar-contribution";
-};
-
-export type RemoveToolbarContributionViewAction = {
-  location: string;
-  type: "remove-toolbar-contribution";
-};
-
-export type MousedownViewAction = {
-  preDragActivity?: any;
-  index?: number;
-  type: "mousedown";
-};
-
-export type DragStartAction = {
-  payload?: ReactElement;
-  dragContainerPath?: string;
-  dragElement?: HTMLElement;
-  dragRect: DragDropRect;
-  dropTargets?: string[];
-  evt: MouseEvent;
-  instructions?: DragInstructions;
-  path: string;
-  type: typeof LayoutActionType.DRAG_START;
-};

package/src/layout-reducer/layoutUtils.ts

@@ -1,288 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { uuid } from "@vuu-ui/vuu-utils";
-import React, { cloneElement, CSSProperties, ReactElement } from "react";
-import { dimension } from "../common-types";
-import {
-  ComponentWithId,
-  ComponentRegistry,
-  isContainer,
-  isLayoutComponent,
-} from "../registry/ComponentRegistry";
-import {
-  getPersistentState,
-  hasPersistentState,
-  setPersistentState,
-} from "../use-persistent-state";
-import { expandFlex, getProps, typeOf } from "../utils";
-import { LayoutJSON, LayoutModel, layoutType } from "./layoutTypes";
-
-export const getManagedDimension = (
-  style: CSSProperties
-): [dimension, dimension] =>
-  style.flexDirection === "column" ? ["height", "width"] : ["width", "height"];
-
-const theKidHasNoStyle: CSSProperties = {};
-
-export const applyLayoutProps = (component: ReactElement, path = "0") => {
-  const [layoutProps, children] = getChildLayoutProps(
-    typeOf(component) as string,
-    component.props,
-    path
-  );
-  return React.cloneElement(component, layoutProps, children);
-};
-
-export interface LayoutProps extends ComponentWithId {
-  active?: number;
-  "data-path"?: string;
-  children?: ReactElement[];
-  column?: any;
-  dropTarget?: any;
-  key: string;
-  layout?: any;
-  path?: string;
-  resizeable?: boolean;
-  style: CSSProperties;
-  type?: string;
-  version?: number;
-}
-
-export const processLayoutElement = (
-  layoutElement: ReactElement,
-  previousLayout?: ReactElement
-): ReactElement => {
-  const type = typeOf(layoutElement) as string;
-  const [layoutProps, children] = getChildLayoutProps(
-    type,
-    layoutElement.props,
-    "0",
-    undefined,
-    previousLayout
-  );
-  return cloneElement(layoutElement, layoutProps, children);
-};
-
-export const applyLayout = (
-  type: layoutType,
-  props: LayoutProps,
-  previousLayout?: LayoutModel
-): LayoutModel => {
-  const [layoutProps, children] = getChildLayoutProps(
-    type,
-    props,
-    "0",
-    undefined,
-    previousLayout
-  );
-  return {
-    ...props,
-    ...layoutProps,
-    type,
-    children,
-  };
-};
-
-function getLayoutProps(
-  type: string,
-  props: LayoutProps,
-  path = "0",
-  parentType: string | null = null,
-  previousLayout?: LayoutModel
-): LayoutProps {
-  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 = type === "Stack" ? props.active ?? prevActive : undefined;
-
-  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: string,
-  props: LayoutProps,
-  path: string,
-  parentType: string | null = null,
-  previousLayout?: LayoutModel
-): [LayoutProps, ReactElement[]] {
-  const layoutProps = getLayoutProps(
-    type,
-    props,
-    path,
-    parentType,
-    previousLayout
-  );
-
-  if (props.layout && !previousLayout) {
-    return [layoutProps, [layoutFromJson(props.layout, `${path}.0`)]];
-  }
-
-  const previousChildren =
-    (previousLayout as any)?.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: string,
-  children?: ReactElement[],
-  path = "0",
-  previousChildren?: ReactElement[]
-) {
-  const kids = Array.isArray(children)
-    ? children
-    : React.isValidElement(children)
-    ? [children]
-    : [];
-  return isContainer(type)
-    ? kids.map((child, i) => {
-        const childType = typeOf(child) as string;
-        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: string,
-  props: LayoutProps,
-  parentType?: string | null
-) => {
-  let { style = theKidHasNoStyle } = props;
-  if (type === "Flexbox") {
-    style = {
-      flexDirection: props.column ? "column" : "row",
-      ...style,
-      display: "flex",
-    };
-  }
-
-  if (style.flex) {
-    const { flex, ...otherStyles } = style;
-    style = {
-      ...otherStyles,
-      ...expandFlex(typeof flex === "number" ? flex : 0),
-    };
-  } else if (parentType === "Stack") {
-    style = {
-      ...style,
-      ...expandFlex(1),
-    };
-  } else if (
-    parentType === "Flexbox" &&
-    (style.width || style.height) &&
-    style.flexBasis === undefined
-  ) {
-    style = {
-      ...style,
-      flexBasis: "auto",
-      flexGrow: 0,
-      flexShrink: 0,
-    };
-  }
-
-  return style;
-};
-
-export function layoutFromJson(
-  { id = uuid(), type, children, props, state }: LayoutJSON,
-  path: string
-): ReactElement {
-  const componentType = type.match(/^[a-z]/) ? type : ComponentRegistry[type];
-
-  if (componentType === undefined) {
-    throw Error(
-      `layoutUtils unable to create component from JSON, unknown type ${type}`
-    );
-  }
-
-  if (state) {
-    setPersistentState(id, state);
-  }
-
-  return React.createElement(
-    componentType,
-    {
-      id,
-      ...props,
-      key: id,
-      path,
-    },
-    children
-      ? children.map((child, i) => layoutFromJson(child, `${path}.${i}`))
-      : undefined
-  );
-}
-
-export function layoutToJSON(component: ReactElement) {
-  return componentToJson(component);
-}
-
-export function componentToJson(component: ReactElement): LayoutJSON {
-  const type = typeOf(component) as string;
-  const { id, children, type: _omit, ...props } = getProps(component);
-
-  const state = hasPersistentState(id) ? getPersistentState(id) : undefined;
-
-  return {
-    id,
-    type,
-    props: serializeProps(props as LayoutProps),
-    state,
-    children: React.Children.map(children, componentToJson),
-  };
-}
-
-export function serializeProps(props?: LayoutProps) {
-  if (props) {
-    const { path, ...otherProps } = props;
-    const result: { [key: string]: any } = {};
-    for (const [key, value] of Object.entries(otherProps)) {
-      result[key] = serializeValue(value);
-    }
-    return result;
-  }
-}
-
-function serializeValue(value: unknown): any {
-  if (
-    typeof value === "string" ||
-    typeof value === "number" ||
-    typeof value === "boolean"
-  ) {
-    return value;
-  } else if (Array.isArray(value)) {
-    return value.map(serializeValue);
-  } else if (typeof value === "object" && value !== null) {
-    const result: { [key: string]: any } = {};
-    for (const [k, v] of Object.entries(value)) {
-      result[k] = serializeValue(v);
-    }
-    return result;
-  }
-}