@vuu-ui/vuu-layout 0.0.27

package/src/utils/pathUtils.ts

@@ -0,0 +1,294 @@
+import React, { ReactElement } from "react";
+import { LayoutModel } from "../layout-reducer";
+import { isContainer } from "../registry/ComponentRegistry";
+import { getProp, getProps } from "./propUtils";
+import { typeOf } from "./typeOf";
+
+const removeFinalPathSegment = (path: string) => {
+  const pos = path.lastIndexOf(".");
+  if (pos === -1) {
+    return path;
+  } else {
+    return path.slice(0, pos);
+  }
+};
+
+// TODO isn't this equivalent to containerOf ?
+export function followPathToParent(
+  source: ReactElement,
+  path: string
+): ReactElement | null {
+  const { "data-path": dataPath, path: sourcePath = dataPath } =
+    getProps(source);
+
+  if (path === "0") return null;
+  if (path === sourcePath) return null;
+
+  return followPath(source, removeFinalPathSegment(path), true);
+}
+
+export function findTarget(
+  source: LayoutModel,
+  test: (props: any) => boolean
+): LayoutModel | undefined {
+  const { children, ...props } = getProps(source);
+  if (test(props)) {
+    return source;
+  } else if (React.Children.count(children) > 0) {
+    const array = React.isValidElement(children) ? [children] : children;
+    for (let child of array) {
+      const target = findTarget(child, test);
+      if (target) {
+        return target;
+      }
+    }
+  }
+}
+
+export function containerOf(
+  source: LayoutModel,
+  target: LayoutModel
+): LayoutModel | null {
+  if (target === source) {
+    return null;
+  } else {
+    const { path: sourcePath, children } = getProps(source);
+
+    let { idx, finalStep } = nextStep(sourcePath, getProp(target, "path"));
+    if (finalStep) {
+      return source;
+    } else if (children === undefined || children[idx] === undefined) {
+      return null;
+    } else {
+      return containerOf(children[idx], target);
+    }
+  }
+}
+
+// Do not use React.Children.toArray,
+// it does not preserve keys
+export const getChild = (
+  children: ReactElement[],
+  idx: number
+): ReactElement | undefined => {
+  // idx may be a nu,mber or string
+  if (React.isValidElement(children) && idx == 0) {
+    return children;
+  } else if (Array.isArray(children)) {
+    return children[idx];
+  }
+};
+
+// Use a path only to identify a component
+export function followPathToComponent(component: ReactElement, path: string) {
+  var paths = path.split(".");
+  let children = [component];
+
+  const getChildren = (c: ReactElement) =>
+    React.isValidElement(c.props.children)
+      ? [c.props.children]
+      : c.props.children;
+
+  for (let i = 0; i < paths.length; i++) {
+    const idx = parseInt(paths[i]);
+    const child = children[idx];
+    if (i === paths.length - 1) {
+      return child;
+    } else {
+      children = getChildren(child);
+    }
+  }
+}
+
+export function followPath(
+  source: LayoutModel,
+  path: string
+): LayoutModel | undefined;
+export function followPath(
+  source: ReactElement,
+  path: string,
+  throwIfNotFound: true
+): ReactElement;
+export function followPath(source: any, path: any, throwIfNotFound = false) {
+  const { "data-path": dataPath, path: sourcePath = dataPath } =
+    getProps(source);
+  if (path.indexOf(sourcePath) !== 0) {
+    throw Error(
+      `pathUtils.followPath path ${path} is not within source path ${sourcePath}`
+    );
+  }
+  const route = path.slice(sourcePath.length + 1);
+  if (route === "") {
+    return source;
+  }
+
+  let target = source;
+  const paths = route.split(".");
+
+  for (var i = 0; i < paths.length; i++) {
+    if (React.Children.count(target.props.children) === 0) {
+      const message = `element at 0.${paths
+        .slice(0, i)
+        .join(".")} has no children, so cannot fulfill rest of path ${paths
+        .slice(i)
+        .join(".")}`;
+
+      if (throwIfNotFound) {
+        throw Error(message);
+      } else {
+        console.warn(message);
+        return;
+      }
+    }
+
+    target = getChild(target.props.children, parseInt(paths[i]));
+
+    if (target === undefined) {
+      const message = `model at 0.${paths
+        .slice(0, i)
+        .join(".")} has no children that fulfill next step of path ${paths
+        .slice(i)
+        .join(".")}`;
+
+      if (throwIfNotFound) {
+        throw Error(message);
+      } else {
+        console.warn(message);
+      }
+    }
+  }
+  return target;
+}
+
+export function nextLeaf(root: ReactElement, path: string) {
+  const parent = followPathToParent(root, path);
+  let pathIndices = path.split(".").map((idx) => parseInt(idx, 10));
+  if (parent) {
+    const lastIdx = pathIndices.pop();
+    const { children } = parent.props;
+    if (children.length - 1 > lastIdx!) {
+      return firstLeaf(children[lastIdx! + 1]);
+    } else {
+      const parentIdx = pathIndices.pop();
+      const nextParent = followPathToParent(root, getProp(parent, "path"));
+      if (nextParent && typeof parentIdx === "number") {
+        pathIndices = nextParent.props.path
+          .split(".")
+          .map((idx: string) => parseInt(idx, 10));
+        if (nextParent.props.children.length - 1 > parentIdx) {
+          const nextStep = nextParent.props.children[parentIdx + 1];
+          if (isContainer(typeOf(nextStep) as string)) {
+            return firstLeaf(nextStep);
+          } else {
+            return nextStep;
+          }
+        }
+      }
+    }
+  }
+
+  return firstLeaf(root);
+}
+
+export function previousLeaf(root: ReactElement, path: string) {
+  let pathIndices = path.split(".").map((idx) => parseInt(idx, 10));
+  let lastIdx = pathIndices.pop();
+  let parent = followPathToParent(root, path);
+  if (parent != null && typeof lastIdx === "number") {
+    const { children } = parent.props;
+    if (lastIdx > 0) {
+      return lastLeaf(children[lastIdx - 1]);
+    } else {
+      while (pathIndices.length > 1) {
+        lastIdx = pathIndices.pop() as number;
+        parent = followPathToParent(
+          root,
+          getProp(parent, "path")
+        ) as ReactElement;
+        // pathIndices = nextParent.props.path
+        //   .split(".")
+        //   .map((idx) => parseInt(idx, 10));
+        if (lastIdx > 0) {
+          const nextStep = parent.props.children[lastIdx - 1];
+          if (isContainer(typeOf(nextStep) as string)) {
+            return lastLeaf(nextStep);
+          } else {
+            return nextStep;
+          }
+        }
+      }
+    }
+  }
+  return lastLeaf(root);
+}
+
+function firstLeaf(layoutRoot: ReactElement): ReactElement {
+  if (isContainer(typeOf(layoutRoot) as string)) {
+    const { children } = layoutRoot.props || layoutRoot;
+    return firstLeaf(children[0]);
+  } else {
+    return layoutRoot;
+  }
+}
+
+function lastLeaf(root: ReactElement): ReactElement {
+  if (isContainer(typeOf(root) as string)) {
+    const { children } = root.props || root;
+    return lastLeaf(children[children.length - 1]);
+  } else {
+    return root;
+  }
+}
+
+type NextStepResult = {
+  idx: number;
+  finalStep: boolean;
+};
+
+export function nextStep(
+  pathSoFar: string,
+  targetPath: string,
+  followPathToEnd = false
+): NextStepResult {
+  if (pathSoFar === targetPath) {
+    return { idx: -1, finalStep: true };
+  }
+
+  const pathVisited = `${pathSoFar}.`;
+  if (!targetPath.startsWith(pathVisited)) {
+    throw Error("pathUtils nextStep has strayed from the path");
+  }
+
+  const endOfTheLine = followPathToEnd ? 0 : 1;
+  // check that pathSoFar startsWith targetPath and if not, throw
+  const paths = targetPath
+    .replace(pathVisited, "")
+    .split(".")
+    .map((n) => parseInt(n, 10));
+  return { idx: paths[0], finalStep: paths.length === endOfTheLine };
+}
+
+export function resetPath(
+  model: ReactElement,
+  path: string,
+  additionalProps?: any
+): ReactElement {
+  if (getProp(model, "path") === path) {
+    return model;
+  }
+  const children: ReactElement[] = [];
+  // React.Children.map rewrites keys, forEach does not
+  React.Children.forEach(model.props.children, (child, i) => {
+    if (!getProp(child, "path")) {
+      children.push(child);
+    } else {
+      children.push(resetPath(child, `${path}.${i}`));
+    }
+  });
+  const pathPropName = model.props["data-path"] ? "data-path" : "path";
+  return React.cloneElement(
+    model,
+    { [pathPropName]: path, ...additionalProps },
+    children
+  );
+}

package/src/utils/propUtils.ts

@@ -0,0 +1,24 @@
+import { ReactElement } from 'react';
+import { LayoutModel } from '../layout-reducer';
+
+const NO_PROPS = {};
+export const getProp = (component: LayoutModel, propName: string) => {
+  const props = getProps(component);
+  return props[propName] ?? props[`data-${propName}`];
+};
+
+export const getProps = (component?: LayoutModel) => component?.props || component || NO_PROPS;
+
+// Used when a container is expected to have a single child
+export const getChildProp = (container: LayoutModel) => {
+  const props = getProps(container);
+  if (props.children) {
+    const {
+      children: [target, ...rest]
+    } = props;
+    if (rest.length > 0) {
+      console.warn(`getChild expected a single child, found ${rest.length + 1}`);
+    }
+    return target as ReactElement;
+  }
+};

package/src/utils/refUtils.ts

@@ -0,0 +1,16 @@
+import { MutableRefObject } from "react";
+
+export function setRef<T>(
+  ref:
+    | MutableRefObject<T | null>
+    | ((instance: T | null) => void)
+    | null
+    | undefined,
+  value: T | null
+): void {
+  if (typeof ref === "function") {
+    ref(value);
+  } else if (ref) {
+    ref.current = value;
+  }
+}

package/src/utils/styleUtils.ts

@@ -0,0 +1,14 @@
+import { CSSProperties } from 'react';
+export type CSSFlexProperties = Pick<CSSProperties, 'flexBasis' | 'flexGrow' | 'flexShrink'>;
+
+export const expandFlex = (flex: number | CSSFlexProperties): CSSFlexProperties => {
+  if (typeof flex === 'number') {
+    return {
+      flexBasis: 0,
+      flexGrow: 1,
+      flexShrink: 1
+    };
+  } else {
+    throw Error(`"no support yet for flex value ${flex}`);
+  }
+};

package/src/utils/typeOf.ts

@@ -0,0 +1,22 @@
+import { ReactElement } from 'react';
+import { LayoutModel, WithType } from '../layout-reducer';
+
+//TODO this should throw if we cannot identify a type
+export function typeOf(element?: LayoutModel | WithType): string | undefined {
+  if (element) {
+    const type = element.type as any;
+    if (typeof type === 'function' || typeof type === 'object') {
+      const elementName = type.displayName || type.name || type.type?.name;
+      if (typeof elementName === 'string') {
+        return elementName;
+      }
+    } else if (typeof element.type === 'string') {
+      return element.type;
+    } else if (element.constructor) {
+      return (element.constructor as any).displayName as string;
+    }
+    throw Error(`typeOf unable to determine type of element`);
+  }
+}
+
+export const isTypeOf = (element: ReactElement, type: string) => typeOf(element) === type;