@vuu-ui/vuu-layout 0.0.27 → 0.5.5

package/src/responsive/breakpoints.ts

@@ -1,48 +0,0 @@
-// 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

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

package/src/responsive/measureMinimumNodeSize.ts

@@ -1,23 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,100 +0,0 @@
-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;
-};