@vuu-ui/vuu-layout 0.0.27

package/src/flexbox/Splitter.tsx

@@ -0,0 +1,135 @@
+import React, { HTMLAttributes, KeyboardEvent, useCallback, useRef, useState } from 'react';
+import cx from 'classnames';
+
+import './Splitter.css';
+
+export type SplitterDragStartHandler = (index: number) => void;
+export type SplitterDragHandler = (index: number, distance: number) => void;
+export type SplitterDragEndHandler = () => void;
+
+export interface SplitterProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'onDrag' | 'onDragStart'> {
+  column: boolean;
+  index: number;
+  onDragStart: SplitterDragStartHandler;
+  onDrag: SplitterDragHandler;
+  onDragEnd: SplitterDragEndHandler;
+}
+
+export const Splitter = React.memo(function Splitter({
+  column,
+  index,
+  onDrag,
+  onDragEnd,
+  onDragStart,
+  style
+}: SplitterProps) {
+  const ignoreClick = useRef<boolean>();
+  const rootRef = useRef<HTMLDivElement>(null);
+  const lastPos = useRef<number>(0);
+
+  const [active, setActive] = useState(false);
+
+  const handleKeyDownDrag = useCallback(
+    ({ key, shiftKey }) => {
+      // TODO calc max distance
+      const distance = shiftKey ? 10 : 1;
+      if (column && key === 'ArrowDown') {
+        onDrag(index, distance);
+      } else if (column && key === 'ArrowUp') {
+        onDrag(index, -distance);
+      } else if (!column && key === 'ArrowLeft') {
+        onDrag(index, -distance);
+      } else if (!column && key === 'ArrowRight') {
+        onDrag(index, distance);
+      }
+    },
+    [column, index, onDrag]
+  );
+
+  const handleKeyDownInitDrag = useCallback(
+    (evt) => {
+      const { key } = evt;
+      const horizontalMove = key === 'ArrowLeft' || key === 'ArrowRIght';
+      const verticalMove = key === 'ArrowUp' || key === 'ArrowDown';
+      if ((column && verticalMove) || (!column && horizontalMove)) {
+        onDragStart(index);
+        handleKeyDownDrag(evt);
+        keyDownHandlerRef.current = handleKeyDownDrag;
+      }
+    },
+    [column, handleKeyDownDrag, index, onDragStart]
+  );
+
+  const keyDownHandlerRef = useRef(handleKeyDownInitDrag);
+  const handleKeyDown = (evt: KeyboardEvent) => keyDownHandlerRef.current(evt);
+
+  const handleMouseMove = useCallback(
+    (e) => {
+      ignoreClick.current = true;
+      const pos = e[column ? 'clientY' : 'clientX'];
+      const diff = pos - lastPos.current;
+      // we seem to get a final value of zero
+      if (pos && pos !== lastPos.current) {
+        onDrag(index, diff);
+      }
+      lastPos.current = pos;
+    },
+    [column, index, onDrag]
+  );
+
+  const handleMouseUp = useCallback(() => {
+    window.removeEventListener('mousemove', handleMouseMove, false);
+    window.removeEventListener('mouseup', handleMouseUp, false);
+    onDragEnd();
+    setActive(false);
+    rootRef.current?.focus();
+  }, [handleMouseMove, onDragEnd, setActive]);
+
+  const handleMouseDown = useCallback(
+    (e) => {
+      lastPos.current = column ? e.clientY : e.clientX;
+      onDragStart(index);
+      window.addEventListener('mousemove', handleMouseMove, false);
+      window.addEventListener('mouseup', handleMouseUp, false);
+      e.preventDefault();
+      setActive(true);
+    },
+    [column, handleMouseMove, handleMouseUp, index, onDragStart, setActive]
+  );
+
+  const handleFocus = () => {
+    // TODO
+  };
+
+  const handleClick = () => {
+    if (ignoreClick.current) {
+      ignoreClick.current = false;
+    } else {
+      rootRef.current?.focus();
+    }
+  };
+
+  const handleBlur = () => {
+    // TODO
+    keyDownHandlerRef.current = handleKeyDownInitDrag;
+  };
+
+  const className = cx('Splitter', 'focusable', { active, column });
+  return (
+    <div
+      className={className}
+      data-splitter
+      ref={rootRef}
+      role="separator"
+      style={style}
+      onBlur={handleBlur}
+      onClick={handleClick}
+      onFocus={handleFocus}
+      onKeyDown={handleKeyDown}
+      onMouseDown={handleMouseDown}
+      tabIndex={0}>
+      <div className="grab-zone" />
+    </div>
+  );
+});

package/src/flexbox/flexbox-utils.ts

@@ -0,0 +1,128 @@
+import { getProp } from '../utils';
+import { getIntrinsicSize, hasUnboundedFlexStyle } from '../layout-reducer/flexUtils';
+import { ReactElement } from 'react';
+import type { BreakPoint, ContentMeta } from './flexboxTypes';
+
+const NO_INTRINSIC_SIZE: {
+  height?: number;
+  width?: number;
+} = {};
+
+export const SPLITTER = 1;
+export const PLACEHOLDER = 2;
+
+const isIntrinsicallySized = (item: ContentMeta) => typeof item.intrinsicSize === 'number';
+
+const getBreakPointValues = (breakPoints: BreakPoint[], component: ReactElement) => {
+  const values: { [key: string]: number | undefined } = {};
+  breakPoints.forEach((breakPoint) => {
+    values[breakPoint] = getProp(component, breakPoint);
+  });
+  return values;
+};
+
+export const gatherChildMeta = (
+  children: ReactElement[],
+  dimension: 'width' | 'height',
+  breakPoints?: BreakPoint[]
+) => {
+  return children.map((child, index) => {
+    const resizeable = getProp(child, 'resizeable');
+    const { [dimension]: intrinsicSize } = getIntrinsicSize(child) ?? NO_INTRINSIC_SIZE;
+    const flexOpen = hasUnboundedFlexStyle(child);
+    if (breakPoints) {
+      return {
+        index,
+        flexOpen,
+        intrinsicSize,
+        resizeable,
+        ...getBreakPointValues(breakPoints, child)
+      };
+    } else {
+      return { index, flexOpen, intrinsicSize, resizeable };
+    }
+  });
+};
+
+// Splitters are inserted AFTER the associated index, so
+// never a splitter in last position.
+// Placeholder goes before (first) OR after(last) index
+export const findSplitterAndPlaceholderPositions = (childMeta: ContentMeta[]) => {
+  const count = childMeta.length;
+  const allIntrinsic = childMeta.every(isIntrinsicallySized);
+  const splitterPositions = Array(count).fill(0);
+  if (allIntrinsic) {
+    splitterPositions[0] = PLACEHOLDER;
+    splitterPositions[count - 1] = PLACEHOLDER;
+  }
+  if (count < 2) {
+    return splitterPositions;
+  } else {
+    // 1) From the left, check each item.
+    // Once we hit a resizable item, set this index and all subsequent indices,
+    // except for last, to SPLITTER
+    for (let i = 0, resizeablesLeft = 0; i < count - 1; i++) {
+      if (childMeta[i].resizeable && !resizeablesLeft) {
+        resizeablesLeft = SPLITTER;
+      }
+      splitterPositions[i] += resizeablesLeft;
+    }
+    // 2) Now check from the right. Undo splitter insertion until we reach a point
+    // where there is a resizeable to our right.
+    for (let i = count - 1; i > 0; i--) {
+      if (splitterPositions[i] & SPLITTER) {
+        splitterPositions[i] -= SPLITTER;
+      }
+      if (childMeta[i].resizeable) {
+        break;
+      }
+    }
+    return splitterPositions;
+  }
+};
+
+export const identifyResizeParties = (contentMeta: ContentMeta[], idx: number) => {
+  const idx1 = getLeadingResizeablePos(contentMeta, idx);
+  const idx2 = getTrailingResizeablePos(contentMeta, idx);
+  const participants = idx1 !== -1 && idx2 !== -1 ? [idx1, idx2] : undefined;
+  const bystanders = identifyResizeBystanders(contentMeta, participants);
+  return [participants, bystanders];
+};
+
+function identifyResizeBystanders(contentMeta: ContentMeta[], participants?: number[]) {
+  if (participants) {
+    let bystanders = [];
+    for (let i = 0; i < contentMeta.length; i++) {
+      if (contentMeta[i].flexOpen && !participants.includes(i)) {
+        bystanders.push(i);
+      }
+    }
+    return bystanders;
+  }
+}
+
+function getLeadingResizeablePos(contentMeta: ContentMeta[], idx: number) {
+  let pos = idx,
+    resizeable = false;
+  while (pos >= 1 && !resizeable) {
+    pos = pos - 1;
+    resizeable = isResizeable(contentMeta, pos);
+  }
+  return pos;
+}
+
+function getTrailingResizeablePos(contentMeta: ContentMeta[], idx: number) {
+  let pos = idx,
+    resizeable = false,
+    count = contentMeta.length;
+  while (pos < count && !resizeable) {
+    pos = pos + 1;
+    resizeable = isResizeable(contentMeta, pos);
+  }
+  return pos === count ? -1 : pos;
+}
+
+function isResizeable(contentMeta: ContentMeta[], idx: number): boolean {
+  const { placeholder, splitter, resizeable, intrinsicSize } = contentMeta[idx];
+  return Boolean(!splitter && !intrinsicSize && (placeholder || resizeable));
+}

package/src/flexbox/flexboxTypes.ts

@@ -0,0 +1,63 @@
+import {
+  CSSProperties,
+  HTMLAttributes,
+  MutableRefObject,
+  ReactElement,
+  ReactNode,
+  RefObject
+} from 'react';
+import { SplitterProps } from './Splitter';
+
+export interface LayoutContainerProps {
+  resizeable?: boolean;
+}
+
+export interface FlexboxProps extends LayoutContainerProps, HTMLAttributes<HTMLDivElement> {
+  breakPoints?: BreakPointsProp;
+  children: ReactElement[];
+  cols?: number;
+  column?: true;
+  fullPage?: number;
+  flexFill?: boolean;
+  gap?: number;
+  onSplitterMoved?: (content: ContentMeta[]) => void;
+  row?: true;
+  spacing?: number;
+  splitterSize?: number;
+}
+
+export interface SplitterHookProps {
+  children: ReactNode;
+  onSplitterMoved?: (content: ContentMeta[]) => void;
+  style?: CSSProperties;
+}
+
+export interface SplitterHookResult {
+  content: ReactElement[];
+  rootRef: MutableRefObject<HTMLDivElement | undefined>;
+}
+
+export type SplitterFactory = (index: number) => ReactElement<SplitterProps>;
+
+export type ContentMeta = {
+  currentSize?: number;
+  flexOpen?: boolean;
+  flexBasis?: number;
+  intrinsicSize?: number;
+  minSize?: number;
+  placeholder?: boolean;
+  resizeable?: boolean;
+  shim?: boolean;
+  splitter?: boolean;
+};
+
+export type FlexSize = {
+  size: number;
+  minSize: number;
+};
+
+export type BreakPoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type BreakPoints = BreakPoint[];
+export type BreakPointsProp = {
+  [keys in BreakPoint]?: number;
+};

package/src/flexbox/index.ts

@@ -0,0 +1,4 @@
+export { default as Flexbox } from './Flexbox';
+export * from './FlexboxLayout';
+export * from './FluidGrid';
+export * from './FluidGridLayout';

package/src/flexbox/useResponsiveSizing.ts

@@ -0,0 +1,85 @@
+import {
+  cloneElement,
+  CSSProperties,
+  isValidElement,
+  ReactElement,
+  useCallback,
+  useMemo,
+  useRef,
+} from "react";
+import { getUniqueId } from "@vuu-ui/vuu-utils";
+import { gatherChildMeta } from "./flexbox-utils";
+import { BreakPoint } from "./flexboxTypes";
+
+const breakPoints: BreakPoint[] = ["xs", "sm", "md", "lg", "xl"];
+
+const DEFAULT_COLS = 12;
+
+export const useResponsiveSizing = ({
+  children: childrenProp,
+  cols: colsProp,
+  style,
+}: {
+  children: ReactElement[];
+  cols?: number;
+  style?: CSSProperties;
+}) => {
+  const rootRef = useRef(null);
+  const metaRef = useRef(null);
+  const contentRef = useRef<ReactElement[]>();
+  const cols = colsProp ?? DEFAULT_COLS;
+
+  const isColumn = style?.flexDirection === "column";
+  const dimension = isColumn ? "height" : "width";
+
+  const children = useMemo(
+    () =>
+      Array.isArray(childrenProp)
+        ? childrenProp
+        : isValidElement(childrenProp)
+        ? [childrenProp]
+        : [],
+    [childrenProp]
+  );
+
+  const buildContent = useCallback(
+    (children, dimension): [ReactElement[], any] => {
+      const childMeta = gatherChildMeta(children, dimension, breakPoints);
+      const content = [];
+      const meta = [];
+      for (let i = 0; i < children.length; i++) {
+        const child = children[i];
+        const {
+          style: { flex, ...rest },
+        } = child.props;
+        // TODO do we always need to clone ?
+        // TODO emit the --col-span based on media query
+        content.push(
+          cloneElement(child, {
+            key: getUniqueId(), // need to store these
+            style: {
+              ...rest,
+              "--parent-col-count": cols,
+            },
+          })
+        );
+        meta.push(childMeta[i]);
+      }
+      return [content, meta];
+    },
+    [cols]
+  );
+
+  useMemo(() => {
+    // console.log(`useMemo<initialCotent>`, children)
+    const [content, meta] = buildContent(children, dimension);
+    metaRef.current = meta;
+    contentRef.current = content;
+  }, [buildContent, children, dimension]);
+
+  return {
+    cols,
+    content: contentRef.current,
+    rootRef,
+  };
+};

package/src/flexbox/useSplitterResizing.ts

@@ -0,0 +1,272 @@
+import React, {
+  ReactElement,
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { getUniqueId } from "@vuu-ui/vuu-utils";
+import { Splitter } from "./Splitter";
+import { Placeholder } from "../placeholder";
+
+import {
+  findSplitterAndPlaceholderPositions,
+  gatherChildMeta,
+  identifyResizeParties,
+  PLACEHOLDER,
+  SPLITTER,
+} from "./flexbox-utils";
+import {
+  ContentMeta,
+  FlexSize,
+  SplitterFactory,
+  SplitterHookProps,
+  SplitterHookResult,
+} from "./flexboxTypes";
+
+const originalContentOnly = (meta: ContentMeta) =>
+  !meta.splitter && !meta.placeholder;
+
+export const useSplitterResizing = ({
+  children: childrenProp,
+  onSplitterMoved,
+  style,
+}: SplitterHookProps): SplitterHookResult => {
+  const rootRef = useRef<HTMLDivElement>();
+  const metaRef = useRef<ContentMeta[]>();
+  const contentRef = useRef<ReactElement[]>();
+  const assignedKeys = useRef([]);
+  const [, forceUpdate] = useState({});
+
+  const setContent = (content: ReactElement[]) => {
+    contentRef.current = content;
+    forceUpdate({});
+  };
+
+  const isColumn = style?.flexDirection === "column";
+  const dimension = isColumn ? "height" : "width";
+  const children = useMemo(
+    () =>
+      Array.isArray(childrenProp)
+        ? childrenProp
+        : React.isValidElement(childrenProp)
+        ? [childrenProp]
+        : [],
+    [childrenProp]
+  );
+
+  const handleDragStart = useCallback(
+    (index) => {
+      const { current: contentMeta } = metaRef;
+      if (contentMeta) {
+        const [participants, bystanders] = identifyResizeParties(
+          contentMeta,
+          index
+        );
+        if (participants) {
+          participants.forEach((index) => {
+            const el = rootRef.current?.childNodes[index] as HTMLElement;
+            if (el) {
+              const { size, minSize } = measureElement(el, dimension);
+              contentMeta[index].currentSize = size;
+              contentMeta[index].minSize = minSize;
+            }
+          });
+          if (bystanders) {
+            bystanders.forEach((index) => {
+              const el = rootRef.current?.childNodes[index] as HTMLElement;
+              if (el) {
+                const { [dimension]: size } = el.getBoundingClientRect();
+                contentMeta[index].flexBasis = size;
+              }
+            });
+          }
+        }
+      }
+    },
+    [dimension]
+  );
+
+  const handleDrag = useCallback(
+    (idx, distance) => {
+      if (contentRef.current && metaRef.current) {
+        setContent(
+          resizeContent(
+            contentRef.current,
+            metaRef.current,
+            distance,
+            dimension
+          )
+        );
+      }
+    },
+    [dimension]
+  );
+
+  const handleDragEnd = useCallback(() => {
+    const contentMeta = metaRef.current;
+    if (contentMeta) {
+      onSplitterMoved?.(contentMeta.filter(originalContentOnly));
+    }
+    contentMeta?.forEach((meta) => {
+      meta.currentSize = undefined;
+      meta.flexBasis = undefined;
+      meta.flexOpen = false;
+    });
+  }, [onSplitterMoved]);
+
+  const createSplitter: SplitterFactory = useCallback(
+    (i) => {
+      return React.createElement(Splitter, {
+        column: isColumn,
+        index: i,
+        key: `splitter-${i}`,
+        onDrag: handleDrag,
+        onDragEnd: handleDragEnd,
+        onDragStart: handleDragStart,
+      });
+    },
+    [handleDrag, handleDragEnd, handleDragStart, isColumn]
+  );
+
+  useMemo(() => {
+    // This will always fire when Flexbox has rendered, but nor during splitter resize
+    const [content, meta] = buildContent(
+      children,
+      dimension,
+      createSplitter,
+      assignedKeys.current
+    );
+    metaRef.current = meta;
+    contentRef.current = content;
+  }, [children, createSplitter, dimension]);
+
+  return {
+    content: contentRef.current || [],
+    rootRef,
+  };
+};
+
+function buildContent(
+  children: ReactElement[],
+  dimension: "width" | "height",
+  createSplitter: SplitterFactory,
+  keys: any[]
+): [any[], ContentMeta[]] {
+  const childMeta = gatherChildMeta(children, dimension);
+  const splitterAndPlaceholderPositions =
+    findSplitterAndPlaceholderPositions(childMeta);
+  const content = [];
+  const meta: ContentMeta[] = [];
+  for (let i = 0; i < children.length; i++) {
+    const child = children[i];
+    if (i === 0 && splitterAndPlaceholderPositions[i] & PLACEHOLDER) {
+      //TODO need to assign an id to placeholder
+      content.push(createPlaceholder(i));
+      meta.push({ placeholder: true, shim: true });
+    }
+    if (child.key == null) {
+      const key = keys[i] || (keys[i] = getUniqueId());
+      content.push(React.cloneElement(child, { key }));
+    } else {
+      content.push(child);
+    }
+    meta.push(childMeta[i]);
+
+    if (i > 0 && splitterAndPlaceholderPositions[i] & PLACEHOLDER) {
+      content.push(createPlaceholder(i));
+      meta.push({ placeholder: true });
+    } else if (splitterAndPlaceholderPositions[i] & SPLITTER) {
+      content.push(createSplitter(content.length));
+      meta.push({ splitter: true });
+    }
+  }
+  return [content, meta];
+}
+
+function resizeContent(
+  content: ReactElement[],
+  contentMeta: ContentMeta[],
+  distance: number,
+  dimension: "width" | "height"
+) {
+  const metaUpdated = updateMeta(contentMeta, distance);
+  if (!metaUpdated) {
+    return content;
+  }
+
+  return content.map((child, idx) => {
+    const meta = contentMeta[idx];
+    let { currentSize, flexOpen, flexBasis } = meta;
+    const hasCurrentSize = currentSize !== undefined;
+    if (hasCurrentSize || flexOpen) {
+      const { flexBasis: actualFlexBasis } = child.props.style || {};
+      const size = hasCurrentSize ? meta.currentSize : flexBasis;
+      if (size !== actualFlexBasis) {
+        return React.cloneElement(child, {
+          style: {
+            ...child.props.style,
+            flexBasis: size,
+            [dimension]: "auto",
+          },
+        });
+      } else {
+        return child;
+      }
+    } else {
+      return child;
+    }
+  });
+}
+
+//TODO detect cursor move beyond drag limit and suspend further resize until cursoe re-engages with splitter
+function updateMeta(contentMeta: ContentMeta[], distance: number) {
+  const resizeTargets: number[] = [];
+
+  contentMeta.forEach((meta, idx) => {
+    if (meta.currentSize !== undefined) {
+      resizeTargets.push(idx);
+    }
+  });
+
+  // we want the target being reduced first, this may limit the distance we can apply
+  let target1 = distance < 0 ? resizeTargets[0] : resizeTargets[1];
+
+  const { currentSize = 0, minSize = 0 } = contentMeta[target1];
+  if (currentSize === minSize) {
+    // size is already 0, we cannot go further
+    return false;
+  } else if (Math.abs(distance) > currentSize - minSize) {
+    // reduce to 0
+    const multiplier = distance < 0 ? -1 : 1;
+    distance = Math.max(0, currentSize - minSize) * multiplier;
+  }
+
+  const leadingItem = contentMeta[resizeTargets[0]] as ContentMeta;
+  const { currentSize: leadingSize = 0 } = leadingItem;
+  leadingItem.currentSize = leadingSize + distance;
+
+  const trailingItem = contentMeta[resizeTargets[1]] as ContentMeta;
+  const { currentSize: trailingSize = 0 } = trailingItem;
+  trailingItem.currentSize = trailingSize - distance;
+
+  return true;
+}
+
+function createPlaceholder(index: number) {
+  return React.createElement(Placeholder, {
+    shim: index === 0,
+    key: `placeholder-${index}`,
+  } as any);
+}
+
+function measureElement(
+  el: HTMLElement,
+  dimension: "width" | "height"
+): FlexSize {
+  const { [dimension]: size } = el.getBoundingClientRect();
+  const style = getComputedStyle(el);
+  const minSizeVal = style.getPropertyValue(`min-${dimension}`);
+  const minSize = minSizeVal.endsWith("px") ? parseInt(minSizeVal, 10) : 0;
+  return { size, minSize };
+}

package/src/index.ts

@@ -0,0 +1,20 @@
+export * from "./action-buttons";
+export * from "./chest-of-drawers";
+export { default as Component } from "./Component";
+export * from "./common-types";
+export * from "./dialog";
+export * from "./DraggableLayout";
+export * from "./drag-drop";
+export * from "./flexbox";
+export { Action } from "./layout-action";
+export * from "./layout-header";
+export * from "./layout-provider";
+export * from "./palette";
+export * from "./placeholder";
+export * from "./registry";
+export * from "./responsive";
+export * from "./stack";
+export * from "./tools";
+export * from "./use-persistent-state";
+export * from "./utils";
+export * from "./layout-view";