@vuu-ui/vuu-layout 0.5.10 → 0.5.11

package/src/flexbox/Splitter.tsx

@@ -1,127 +0,0 @@
-import cx from 'classnames';
-import React, { HTMLAttributes, KeyboardEvent, useCallback, useRef, useState } from 'react';
-
-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 }) => {
-      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;
-      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 handleClick = () => {
-    if (ignoreClick.current) {
-      ignoreClick.current = false;
-    } else {
-      rootRef.current?.focus();
-    }
-  };
-
-  const handleBlur = () => {
-    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}
-      onKeyDown={handleKeyDown}
-      onMouseDown={handleMouseDown}
-      tabIndex={0}>
-      <div className="grab-zone" />
-    </div>
-  );
-});

package/src/flexbox/flexbox-utils.ts

@@ -1,128 +0,0 @@
-import { ReactElement } from 'react';
-import { getIntrinsicSize, hasUnboundedFlexStyle } from '../layout-reducer/flexUtils';
-import { getProp } from '../utils';
-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) {
-    const 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;
-  const 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

@@ -1,68 +0,0 @@
-import {
-  CSSProperties,
-  HTMLAttributes,
-  MutableRefObject,
-  ReactElement,
-  ReactNode,
-} 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 FlexboxLayoutProps extends FlexboxProps {
-  path: string;
-}
-
-export interface SplitterHookProps {
-  children: ReactNode;
-  onSplitterMoved?: (content: ContentMeta[]) => void;
-  style?: CSSProperties;
-}
-
-export interface SplitterHookResult {
-  content: ReactElement[];
-  rootRef: MutableRefObject<HTMLDivElement | null>;
-}
-
-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

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

package/src/flexbox/useResponsiveSizing.ts

@@ -1,82 +0,0 @@
-import { getUniqueId } from "@vuu-ui/vuu-utils";
-import {
-  cloneElement,
-  CSSProperties,
-  isValidElement,
-  ReactElement,
-  useCallback,
-  useMemo,
-  useRef,
-} from "react";
-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;
-        content.push(
-          cloneElement(child, {
-            key: getUniqueId(),
-            style: {
-              ...rest,
-              "--parent-col-count": cols,
-            },
-          })
-        );
-        meta.push(childMeta[i]);
-      }
-      return [content, meta];
-    },
-    [cols]
-  );
-
-  useMemo(() => {
-    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

@@ -1,270 +0,0 @@
-import { getUniqueId } from "@vuu-ui/vuu-utils";
-import React, {
-  ReactElement,
-  useCallback,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-import { Placeholder } from "../placeholder";
-import { Splitter } from "./Splitter";
-
-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>(null);
-  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(() => {
-    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) {
-      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];
-    const { 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
-  const 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

@@ -1,19 +0,0 @@
-export * from "@vuu-ui/vuu-popups/src/dialog";
-export * from "./chest-of-drawers";
-export * from "./common-types";
-export { default as Component } from "./Component";
-export * from "./drag-drop";
-export * from "./DraggableLayout";
-export * from "./flexbox";
-export { Action } from "./layout-action";
-export * from "./layout-header";
-export * from "./layout-provider";
-export * from "./layout-view";
-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";