@vuu-ui/vuu-layout 0.0.27

package/src/responsive/breakpoints.ts

@@ -0,0 +1,48 @@
+// should we have some global; defaults ?
+
+import { BreakPointsProp } from '../flexbox/flexboxTypes';
+
+export type BreakPointRamp = [string, number, number];
+
+function breakpointReader(themeName: string, defaultBreakpoints?: BreakPointsProp) {
+  //TODO ownerDocument
+  const themeRoot = document.body.querySelector(`.${themeName}`);
+  const handler = {
+    get: function (style: CSSStyleDeclaration, stopName: string) {
+      const val = style.getPropertyValue(
+        // lets assume we have the following naming convention
+        `--${themeName}-breakpoint-${stopName}`
+      );
+      return val ? parseInt(val) : undefined;
+    }
+  };
+
+  return themeRoot ? new Proxy(getComputedStyle(themeRoot), handler) : defaultBreakpoints ?? {};
+}
+
+const byDescendingStopSize = ([, s1]: [string, number], [, s2]: [string, number]) => s2 - s1;
+
+// These are assumed to be min-width (aka mobile-first) stops, we could take a
+// paramneter to support max-width as well ?
+// return [stopName, minWidth, maxWidth]
+export const breakpointRamp = (breakpoints: BreakPointsProp): BreakPointRamp[] =>
+  Object.entries(breakpoints)
+    .sort(byDescendingStopSize)
+    .map(([name, value], i, all) => [name, value, i < all.length - 1 ? all[i + 1][1] : 9999]);
+
+let documentBreakpoints: BreakPointRamp[] | null = null;
+
+const loadBreakpoints = (themeName = 'uitk') => {
+  // TODO would be nice to read these breakpoint labels from a css variable to
+  // avoid hard-coding them here ?
+  const { xs, sm, md, lg, xl } = breakpointReader(themeName) as BreakPointsProp;
+  return breakpointRamp({ xs, sm, md, lg, xl });
+};
+
+//TODO support multiple themes loaded
+export const getBreakPoints = (themeName?: string) => {
+  if (documentBreakpoints === null) {
+    documentBreakpoints = loadBreakpoints(themeName);
+  }
+  return documentBreakpoints;
+};

package/src/responsive/index.ts

@@ -0,0 +1,4 @@
+export * from "./use-breakpoints";
+export * from "./useOverflowObserver";
+export * from "./useResizeObserver";
+export * from "./utils";

package/src/responsive/measureMinimumNodeSize.ts

@@ -0,0 +1,23 @@
+const LEFT_RIGHT = ['left', 'right'];
+const TOP_BOTTOM = ['top', 'bottom'];
+
+export function measureMinimumNodeSize(node: HTMLElement, dimension: 'width' | 'height' = 'width') {
+  const { [dimension]: size } = node.getBoundingClientRect();
+  const { padRight = false, padLeft = false } = node.dataset;
+  const style = getComputedStyle(node);
+  const [start, end] = dimension === 'width' ? LEFT_RIGHT : TOP_BOTTOM;
+  const marginStart = padLeft ? 0 : parseInt(style.getPropertyValue(`margin-${start}`), 10);
+  const marginEnd = padRight ? 0 : parseInt(style.getPropertyValue(`margin-${end}`), 10);
+
+  let minWidth = size;
+  const flexShrink = parseInt(style.getPropertyValue('flex-shrink'), 10);
+  if (flexShrink > 0) {
+    const flexBasis = parseInt(style.getPropertyValue('flex-basis'), 10);
+    // TODO what about percentage values ?
+    if (!isNaN(flexBasis)) {
+      minWidth = flexBasis;
+    }
+  }
+
+  return marginStart + minWidth + marginEnd;
+}

package/src/responsive/overflowUtils.js

@@ -0,0 +1,14 @@
+export const getOverflowedItems = (containerRef, height = 64) => {
+  const elements = Array.from(containerRef.current.childNodes);
+  const firstOverflowIdx = findFirstOverflow(elements, height);
+  return [elements.slice(0, firstOverflowIdx), elements.slice(firstOverflowIdx)];
+};
+
+export const findFirstOverflow = (elements, height) => {
+  for (let i = 0; i < elements.length; i++) {
+    if (elements[i].offsetTop >= height) {
+      return i;
+    }
+  }
+  return -1;
+};

package/src/responsive/use-breakpoints.ts

@@ -0,0 +1,100 @@
+import { RefObject, useCallback, useEffect, useRef, useState } from 'react';
+import { useResizeObserver } from './useResizeObserver';
+import {
+  BreakPointRamp,
+  breakpointRamp,
+  getBreakPoints as getDocumentBreakpoints
+} from './breakpoints';
+import { BreakPoint, BreakPointsProp } from '../flexbox/flexboxTypes';
+import { ExecFileOptionsWithStringEncoding } from 'child_process';
+
+const EMPTY_ARRAY: BreakPoint[] = [];
+
+export interface BreakpointsHookProps {
+  breakPoints?: BreakPointsProp;
+  smallerThan?: string;
+}
+
+// TODO how do we cater for smallerThan/greaterThan breakpoints
+export const useBreakpoints = (
+  { breakPoints: breakPointsProp, smallerThan }: BreakpointsHookProps,
+  ref: RefObject<any>
+) => {
+  const [breakpointMatch, setBreakpointmatch] = useState(smallerThan ? false : 'lg');
+  const bodyRef = useRef(document.body);
+  const breakPointsRef = useRef(
+    breakPointsProp ? breakpointRamp(breakPointsProp) : getDocumentBreakpoints()
+  );
+
+  // TODO how do we identify the default
+  const sizeRef = useRef('lg');
+
+  const stopFromMinWidth = useCallback(
+    (w) => {
+      if (breakPointsRef.current) {
+        for (let [name, size] of breakPointsRef.current) {
+          if (w >= size) {
+            return name;
+          }
+        }
+      }
+    },
+    [breakPointsRef]
+  );
+
+  const matchSizeAgainstBreakpoints = useCallback(
+    (width) => {
+      if (smallerThan) {
+        const breakPointRamp = breakPointsRef.current.find(
+          ([name]: BreakPointRamp) => name === smallerThan
+        );
+        if (breakPointRamp) {
+          const [, , maxValue] = breakPointRamp;
+          return width < maxValue;
+        }
+      } else {
+        return stopFromMinWidth(width);
+      }
+      // is this right ?
+      return width;
+    },
+    [smallerThan, stopFromMinWidth]
+  );
+
+  // TODO need to make the dimension a config
+  useResizeObserver(
+    ref || bodyRef,
+    breakPointsRef.current ? ['width'] : EMPTY_ARRAY,
+    ({ width: measuredWidth }: { width: number }) => {
+      const result = matchSizeAgainstBreakpoints(measuredWidth);
+      if (result !== sizeRef.current) {
+        sizeRef.current = result;
+        setBreakpointmatch(result);
+      }
+    },
+    true
+  );
+
+  useEffect(() => {
+    const target = ref || bodyRef;
+    if (target.current) {
+      const prevSize = sizeRef.current;
+      if (breakPointsRef.current) {
+        // We're measuring here when the resizeObserver has also measured
+        // There isn't a convenient way to get the Resizeobserver to
+        // notify initial size - that's not really its job, unless we
+        // set a flag ?
+        const { clientWidth } = target.current;
+        const result = matchSizeAgainstBreakpoints(clientWidth);
+        sizeRef.current = result;
+        // If initial size of ref does not match the default, notify client after render
+        if (result !== prevSize) {
+          setBreakpointmatch(result);
+        }
+      }
+    }
+  }, [setBreakpointmatch, matchSizeAgainstBreakpoints, ref]);
+
+  // No, just ass the class directly to the ref, no need to render
+  return breakpointMatch;
+};