@vuu-ui/vuu-layout 0.5.4 → 0.5.5

package/src/portal/render-portal.jsx

@@ -1,68 +0,0 @@
-import * as ReactDOM from "react-dom";
-import { SaltProvider } from "@salt-ds/core";
-
-import { getPortalContainer } from "./utils";
-
-const electronAPI = window?.require?.("electron");
-let currentPosition = null;
-let windowId = 1;
-
-if (electronAPI) {
-  electronAPI.ipcRenderer.on("set-position", (evt, position) => {
-    currentPosition = position;
-  });
-}
-
-const createDOMContainer = (x, y) => {
-  return getPortalContainer(x, y);
-};
-
-const renderDOMPortal = (component, container, x, y, onRender) => {
-  // check this first to see if position has changed
-  container.style.cssText = `left:${x}px; top:${y}px;position: absolute;`;
-
-  ReactDOM.render(
-    <SaltProvider applyClassesTo="scope">{component}</SaltProvider>,
-    container,
-    onRender
-  );
-};
-
-const renderElectronPortal = (component, x, y, el, onRender) => {
-  let portalContainer = null;
-  console.log("render electron");
-  electronAPI.ipcRenderer.send("portal-request", "open-popup", "");
-  console.log(
-    `currentPosition: x ${currentPosition.x} y ${currentPosition.y}, x,y ${x} ${y}`
-  );
-  const top = y + currentPosition.y + 30,
-    left = x + currentPosition.x;
-  const windowName = `popup_${windowId++}`;
-  //   console.log(`we're in electron, open window ${windowName} at ${x} ${y}`);
-  const win = window.open(
-    "",
-    windowName,
-    `top=${top},left=${left},width=140,height=200,frame=false,resizeable,nodeIntegration=no,roundedCorners=false`
-  );
-
-  portalContainer = getPortalContainer(0, 0, win);
-  const handleRender = () => {
-    const targetEl = portalContainer.querySelector("hw-theme > *");
-    const { height } = targetEl.getBoundingClientRect();
-    win.resizeTo(100, height);
-    onRender && onRender();
-  };
-
-  ReactDOM.render(
-    <SaltProvider applyClassesTo="scope">{component}</SaltProvider>,
-    portalContainer,
-    handleRender
-  );
-  return portalContainer;
-};
-
-export const renderPortal = electronAPI
-  ? renderElectronPortal
-  : renderDOMPortal;
-
-export const createContainer = createDOMContainer;

package/src/portal/utils.js

@@ -1,16 +0,0 @@
-export const installTheme = (themeId) => {
-  const installedThemes = getComputedStyle(document.body).getPropertyValue('--installed-themes');
-  document.body.style.setProperty('--installed-themes', `${installedThemes} ${themeId}`);
-};
-
-let containerId = 1;
-
-export const getPortalContainer = (x = 0, y = 0, win = window) => {
-  // let el = document.body.querySelector('.hwReactPopup.' + group);
-  // if (el === null) {
-  let el = win.document.createElement('div');
-  el.className = 'hwReactPopup ' + containerId++;
-  el.style.cssText = `left:${x}px; top:${y}px;position: absolute;`;
-  win.document.body.appendChild(el);
-  return el;
-};

package/src/registry/ComponentRegistry.ts

@@ -1,35 +0,0 @@
-import React, { FunctionComponent } from 'react';
-
-const _containers: { [key: string]: boolean } = {};
-const _views: { [key: string]: boolean } = {};
-
-export type layoutComponentType = 'component' | 'container' | 'view';
-
-export const ComponentRegistry: { [key: string]: FunctionComponent } = {};
-
-export function isContainer(componentType: string) {
-  return _containers[componentType] === true;
-}
-
-export function isView(componentType: string) {
-  return _views[componentType] === true;
-}
-
-export const isLayoutComponent = (type: string) => isContainer(type) || isView(type);
-
-export const isRegistered = (className: string) => !!ComponentRegistry[className];
-
-// We could check and set displayName in here
-export function registerComponent(
-  componentName: string,
-  component: FunctionComponent<any>,
-  type: layoutComponentType = 'component'
-) {
-  ComponentRegistry[componentName] = component;
-
-  if (type === 'container') {
-    _containers[componentName] = true;
-  } else if (type === 'view') {
-    _views[componentName] = true;
-  }
-}

package/src/registry/index.ts

@@ -1 +0,0 @@
-export * from './ComponentRegistry';

package/src/responsive/OverflowMenu.css

@@ -1,31 +0,0 @@
-.OverflowMenu {
-  /* width: 20px;
-  height: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  margin: 6px 0px 6px 0;
-  align-self: flex-end;
-  border: none;
-  border-radius: 0;
-  background-color: inherit;
-  padding: 0; */
-}
-
-/* .OverflowMenu-open {
-  backgroundcolor: active.overflow.background;
-} */
-
-/* .OverflowMenu-open .OverflowMenu-icon {
-  color: active.overflow.color;
-} */
-
-/* .Toolbar .Toolbar-overflow:hover {
-  background-color: lightgrey;
-} */
-
-[data-overflowed] {
-  order: 99;
-  /* visibility: hidden; */
-}

package/src/responsive/OverflowMenu.jsx

@@ -1,56 +0,0 @@
-import React, { forwardRef } from 'react';
-import { MoreSmallListVertButton } from '../action-buttons';
-
-import './OverflowMenu.css';
-
-const OverflowMenu = forwardRef(function OverflowMenu(
-  // eslint-disable-next-line no-unused-vars
-  { iconName = 'more', overflowOffsetLeft: left, source = [], ...rest },
-  // eslint-disable-next-line no-unused-vars
-  ref
-) {
-  return source.length > 0 ? (
-    <MoreSmallListVertButton />
-  ) : // <Dropdown
-  //   ListProps={{
-  //     width: 200,
-  //   }}
-  //   ref={ref}
-  //   source={source}
-  //   {...rest}
-  // >
-  //   {({ DropdownButtonProps, isOpen }) => {
-  //     const { style, ...restButtonProps } = DropdownButtonProps;
-
-  //     const {
-  //       onClick,
-  //       onKeyDown,
-  //       onFocus,
-  //       onBlur,
-  //       'aria-expanded': menuOpen, // do we use this or isOpen ?
-  //     } = DropdownButtonProps;
-  //     const defaultProps = {
-  //       'data-jpmui-test': 'dropdown-button',
-  //       'aria-label': 'toggle overflow',
-  //       'aria-haspopup': true,
-  //       className: cx('OverflowMenu-dropdown', {
-  //         'OverflowMenu-open': isOpen,
-  //       }),
-  //       onBlur,
-  //       onPress: onClick,
-  //       onFocus,
-  //       onKeyDown,
-  //       title: 'Overflow Menu',
-  //       type: 'button',
-  //       variant: 'secondary',
-  //     };
-
-  //     return (
-  //       <MoreSmallListVertButton {...defaultProps}/>
-  //     );
-  //   }}
-  // </Dropdown>
-  null;
-});
-
-export default OverflowMenu;

package/src/responsive/breakpoints.ts

@@ -1,62 +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 = "salt") => {
-  // 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;
-};