@vuu-ui/vuu-layout 0.0.27 → 0.5.4

package/src/menu/aim/corners.js

@@ -0,0 +1,114 @@
+import { distance, bullseye } from './aim';
+
+function inside(source, targetMin, targetMax) {
+  if (source >= targetMin && source <= targetMax) return 0;
+  else if (source > targetMin) return -1;
+  else return 1;
+}
+
+export function corners(source, target) {
+  source = { left: source.pageX, top: source.pageY };
+  target = target.getBoundingClientRect();
+
+  let ver, hor;
+
+  hor = inside(source.left, target.left, target.left + target.width);
+  ver = inside(source.top, target.top, source.top + target.height);
+
+  if (hor === -1 && ver === -1) return ['top-right', 'bottom-left'];
+  if (hor === -1 && ver === 0) return ['top-right', 'bottom-right'];
+  if (hor === -1 && ver === 1) return ['top-left', 'bottom-right'];
+
+  if (hor === 0 && ver === -1) return ['bottom-right', 'bottom-left'];
+  if (hor === 0 && ver === 0) return [];
+  if (hor === 0 && ver === 1) return ['top-left', 'top-right'];
+
+  if (hor === 1 && ver === -1) return ['bottom-right', 'top-left'];
+  if (hor === 1 && ver === 0) return ['bottom-left', 'top-left'];
+  if (hor === 1 && ver === 1) return ['bottom-left', 'top-right'];
+}
+
+export function boundaries(corners, source, target, adjustment = false) {
+  if (target instanceof HTMLElement || target instanceof SVGElement) {
+    target = target.getBoundingClientRect();
+  }
+
+  if (!source) return [];
+  else if (source instanceof Event) {
+    source = {
+      left: source.pageX,
+      top: source.pageY
+    };
+  } else if (source.x) {
+    source = {
+      left: source.x,
+      top: source.y
+    };
+  }
+
+  let tolerance = adjustment !== false ? Math.round(adjustment / 10) * 1.5 : 0;
+  const position = {
+    left: target.left - tolerance,
+    top: target.top - tolerance,
+    width: target.width + tolerance * 2,
+    height: target.height + tolerance * 2
+  };
+
+  var doc = document.documentElement;
+  var left = (window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0);
+  var top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
+
+  let first = true;
+  let positions = [];
+  corners.forEach((corner) => {
+    switch (corner) {
+      case 'top-right':
+        if (first) positions.push({ x: target.left + target.width + left, y: target.top + top });
+        positions.push({ x: position.left + position.width + left, y: position.top + top });
+        if (!first) positions.push({ x: target.left + target.width + left, y: target.top + top });
+        break;
+      case 'top-left':
+        if (first) positions.push({ x: target.left + left, y: target.top + top });
+        positions.push({ x: position.left + left, y: position.top + top });
+        if (!first) positions.push({ x: target.left + left, y: target.top + top });
+        break;
+      case 'bottom-right':
+        if (first)
+          positions.push({
+            x: target.left + target.width + left,
+            y: target.top + target.height + top
+          });
+        positions.push({
+          x: position.left + position.width + left,
+          y: position.top + position.height + top
+        });
+        if (!first)
+          positions.push({
+            x: target.left + target.width + left,
+            y: target.top + target.height + top
+          });
+        break;
+      case 'bottom-left':
+        if (first) positions.push({ x: target.left + left, y: target.top + target.height + top });
+        positions.push({ x: position.left + left, y: position.top + position.height + top });
+        if (!first) positions.push({ x: target.left + left, y: target.top + target.height + top });
+        break;
+    }
+    if (first) {
+      positions.push({ x: source.left, y: source.top });
+    }
+    first = false;
+  });
+
+  if (adjustment === false) {
+    const be = bullseye(corners, positions, { x: source.left, y: source.top });
+    if (be) {
+      const dist = Math.round(distance({ x: source.left, y: source.top }, be));
+      return boundaries(corners, source, target, dist);
+    }
+  }
+
+  return positions;
+}
+
+export default corners;

package/src/menu/aim/point-in-polygon.js

@@ -0,0 +1,25 @@
+/**
+ * @license MIT
+ * @url https://github.com/substack/point-in-polygon
+ */
+
+export default function (point, vs) {
+  // ray-casting algorithm based on
+  // http://www.ecse.rpi.edu/Homepages/wrf/Research/Short_Notes/pnpoly.html
+
+  var x = point[0],
+    y = point[1];
+
+  var inside = false;
+  for (var i = 0, j = vs.length - 1; i < vs.length; j = i++) {
+    var xi = vs[i][0],
+      yi = vs[i][1];
+    var xj = vs[j][0],
+      yj = vs[j][1];
+
+    var intersect = yi > y != yj > y && x < ((xj - xi) * (y - yi)) / (yj - yi) + xi;
+    if (intersect) inside = !inside;
+  }
+
+  return inside;
+}

package/src/menu/aim/utils.js

@@ -0,0 +1,19 @@
+function scrollPosition() {
+  const scrollTop = document.documentElement.scrollTop
+    ? document.documentElement.scrollTop
+    : document.body.scrollTop;
+  const scrollLeft = document.documentElement.scrollLeft
+    ? document.documentElement.scrollLeft
+    : document.body.scrollLeft;
+
+  return { scrollTop, scrollLeft };
+}
+
+export function mousePosition(event) {
+  const sPos = scrollPosition();
+
+  const x = document.all ? event.clientX + sPos.scrollLeft : event.pageX;
+  const y = document.all ? event.clientY + sPos.scrollTop : event.pageY;
+
+  return { x, y };
+}

package/src/menu/context-menu-provider.jsx

@@ -0,0 +1,135 @@
+import React, { useCallback, useContext, useMemo } from 'react';
+import { PopupService } from '../popup';
+import ContextMenu from './ContextMenu';
+import { MenuItem, MenuItemGroup } from './MenuList';
+
+const showContextMenu = (e, menuDescriptors, handleContextMenuAction) => {
+  const { clientX: left, clientY: top } = e;
+  const menuItems = (menuDescriptors) => {
+    const fromDescriptor = ({ children, label, icon, action, options }, i) =>
+      children ? (
+        <MenuItemGroup key={i} label={label}>
+          {children.map(fromDescriptor)}
+        </MenuItemGroup>
+      ) : (
+        <MenuItem key={i} action={action} data-icon={icon} options={options}>
+          {label}
+        </MenuItem>
+      );
+
+    return menuDescriptors.map(fromDescriptor);
+  };
+
+  const handleClose = (menuId, options) => {
+    if (menuId) {
+      handleContextMenuAction(menuId, options);
+      PopupService.hidePopup();
+    }
+  };
+
+  const component = (
+    <ContextMenu onClose={handleClose} position={{ x: left, y: top }}>
+      {menuItems(menuDescriptors)}
+    </ContextMenu>
+  );
+  PopupService.showPopup({ left: 0, top: 0, component });
+};
+
+export const ContextMenuContext = React.createContext(null);
+
+const NO_INHERITED_CONTEXT = {
+  menuItemDescriptors: []
+};
+
+// The menuBuilder will always be supplied by the code that will display the local
+// context menu. It will be passed all configured menu descriptors. It is free to
+// augment, replace or ignore the existing menu descriptors.
+export const useContextMenu = () => {
+  const { menuActionHandler, menuBuilders } = useContext(ContextMenuContext);
+
+  const buildMenuOptions = useCallback((menuBuilders, location, options) => {
+    let results = [];
+    for (const menuBuilder of menuBuilders) {
+      // Maybe we should leave the concatenation to the menuBuilder, then it can control menuItem order
+      results = results.concat(menuBuilder(location, options));
+    }
+    return results;
+  }, []);
+
+  const handleShowContextMenu = (e, location, options) => {
+    e.stopPropagation();
+    e.preventDefault();
+    const menuItemDescriptors = buildMenuOptions(menuBuilders, location, options);
+    if (menuItemDescriptors.length) {
+      showContextMenu(e, menuItemDescriptors, menuActionHandler);
+    }
+  };
+
+  return handleShowContextMenu;
+};
+
+const Provider = ({
+  children,
+  context: { menuBuilders: inheritedMenuBuilders, menuActionHandler: inheritedMenuActionHandler },
+  menuActionHandler,
+  menuBuilder
+}) => {
+  const menuBuilders = useMemo(() => {
+    if (inheritedMenuBuilders && menuBuilder) {
+      return inheritedMenuBuilders.concat(menuBuilder);
+    } else if (menuBuilder) {
+      return [menuBuilder];
+    } else {
+      return inheritedMenuBuilders || [];
+    }
+  }, [inheritedMenuBuilders, menuBuilder]);
+
+  const handleMenuAction = useCallback(
+    (type, options) => {
+      if (menuActionHandler && menuActionHandler(type, options)) {
+        return true;
+      }
+
+      if (inheritedMenuActionHandler && inheritedMenuActionHandler(type, options)) {
+        return true;
+      }
+    },
+    [inheritedMenuActionHandler, menuActionHandler]
+  );
+
+  return (
+    <ContextMenuContext.Provider
+      value={{
+        menuActionHandler: handleMenuAction,
+        menuBuilders
+      }}
+    >
+      {children}
+    </ContextMenuContext.Provider>
+  );
+};
+
+// Need an option for local menu to override higher-level menu, rather than extend
+export const ContextMenuProvider = ({
+  children,
+  menuActionHandler,
+  menuBuilder,
+  menuItemDescriptors,
+  label
+}) => {
+  return (
+    <ContextMenuContext.Consumer>
+      {(parentContext) => (
+        <Provider
+          context={parentContext || NO_INHERITED_CONTEXT}
+          label={label}
+          menuActionHandler={menuActionHandler}
+          menuBuilder={menuBuilder}
+          menuItemDescriptors={menuItemDescriptors}
+        >
+          {children}
+        </Provider>
+      )}
+    </ContextMenuContext.Consumer>
+  );
+};

package/src/menu/index.js

@@ -0,0 +1,4 @@
+export { default as ContextMenu } from './ContextMenu';
+export { default as MenuList } from './MenuList';
+export * from './MenuList';
+export * from './context-menu-provider';

package/src/menu/key-code.js

@@ -0,0 +1,61 @@
+function union(set1, ...sets) {
+  const result = new Set(set1);
+  for (let set of sets) {
+    for (let element of set) {
+      result.add(element);
+    }
+  }
+  return result;
+}
+
+export const ArrowUp = 'ArrowUp';
+export const ArrowDown = 'ArrowDown';
+export const ArrowLeft = 'ArrowLeft';
+export const Backspace = 'Backspace';
+export const ArrowRight = 'ArrowRight';
+export const Enter = 'Enter';
+export const Escape = 'Escape';
+export const Delete = 'Delete';
+
+const actionKeys = new Set([Enter, Delete]);
+const focusKeys = new Set(['Tab']);
+// const navigationKeys = new Set(["Home", "End", "ArrowRight", "ArrowLeft","ArrowDown", "ArrowUp"]);
+const arrowLeftRightKeys = new Set(['ArrowRight', 'ArrowLeft']);
+const verticalNavigationKeys = new Set(['Home', 'End', 'ArrowDown', 'ArrowUp']);
+const horizontalNavigationKeys = new Set(['Home', 'End', 'ArrowRight', 'ArrowLeft']);
+const functionKeys = new Set([
+  'F1',
+  'F2',
+  'F3',
+  'F4',
+  'F5',
+  'F6',
+  'F7',
+  'F8',
+  'F9',
+  'F10',
+  'F11',
+  'F12'
+]);
+const specialKeys = union(
+  actionKeys,
+  horizontalNavigationKeys,
+  verticalNavigationKeys,
+  arrowLeftRightKeys,
+  functionKeys,
+  focusKeys
+);
+export const isCharacterKey = (evt) => {
+  if (specialKeys.has(evt.key)) {
+    return false;
+  }
+  if (typeof evt.which === 'number' && evt.which > 0) {
+    return !evt.ctrlKey && !evt.metaKey && !evt.altKey && evt.which !== 8;
+  }
+};
+
+export const isNavigationKey = ({ key }, orientation = 'vertical') => {
+  const navigationKeys =
+    orientation === 'vertical' ? verticalNavigationKeys : horizontalNavigationKeys;
+  return navigationKeys.has(key);
+};

package/src/menu/list-dom-utils.js

@@ -0,0 +1,22 @@
+export const listItemElement = (listEl, listItemIdx) =>
+  listEl.querySelector(`:scope > [data-idx="${listItemIdx}"]`);
+
+export function listItemIndex(listItemEl) {
+  if (listItemEl) {
+    let idx = listItemEl.dataset.idx;
+    if (idx) {
+      return parseInt(idx, 10);
+      // eslint-disable-next-line no-cond-assign
+    } else if ((idx = listItemEl.ariaPosInSet)) {
+      return parseInt(idx, 10) - 1;
+    }
+  }
+}
+
+export const listItemId = (el) => el?.id;
+
+export const closestListItem = (el) => el.closest('[data-idx],[aria-posinset]');
+
+export const closestListItemId = (el) => listItemId(closestListItem(el));
+
+export const closestListItemIndex = (el) => listItemIndex(closestListItem(el));

package/src/menu/use-cascade.js

@@ -0,0 +1,292 @@
+import { useCallback, useMemo, useRef, useState } from "react";
+
+import { closestListItem, listItemIndex } from "./list-dom-utils";
+// import {mousePosition} from './aim/utils';
+// import {aiming} from './aim/aim';
+
+const nudge = (menus, distance, pos) => {
+  return menus.map((m, i) =>
+    i === menus.length - 1
+      ? {
+          ...m,
+          [pos]: m[pos] - distance,
+        }
+      : m
+  );
+};
+const nudgeLeft = (menus, distance) => nudge(menus, distance, "left");
+const nudgeUp = (menus, distance) => nudge(menus, distance, "top");
+
+const flipSides = (id, menus) => {
+  const [parentMenu, menu] = menus.slice(-2);
+  const el = document.getElementById(`${id}-${menu.id}`);
+  const { width } = el.getBoundingClientRect();
+  return menus.map((m) =>
+    m === menu
+      ? {
+          ...m,
+          left: parentMenu.left - (width - 2),
+        }
+      : m
+  );
+};
+
+const closedNode = (el) =>
+  el.ariaHasPopup === "true" && el.ariaExpanded !== "true";
+const getPosition = (el, openMenus) => {
+  const [{ left, top: menuTop }] = openMenus.slice(-1);
+  // const {top, right, bottom, left} = el.getBoundingClientRect();
+  // this will not work for MenuList within window, we need the
+  // const {offsetLeft: left, offsetTop: menuTop} = el.closest('.hwMenuList');
+  const { offsetWidth: width, offsetTop: top } = el;
+  return { left: left + width, top: top + menuTop };
+};
+
+export const getItemId = (id) => {
+  let pos = id.lastIndexOf("-");
+  return pos === -1 ? id : id.slice(pos + 1);
+};
+
+export const getMenuId = (id) => {
+  const itemId = getItemId(id);
+  const pos = itemId.lastIndexOf(".");
+  return pos > -1 ? itemId.slice(0, pos) : "root";
+};
+
+const getMenuDepth = (id) => {
+  let count = 0,
+    pos = id.indexOf(".", 0);
+  while (pos !== -1) {
+    count += 1;
+    pos = id.indexOf(".", pos + 1);
+  }
+  return count;
+};
+const identifyItem = (el) => [
+  getMenuId(el.id),
+  getItemId(el.id),
+  el.ariaHasPopup === "true",
+  el.ariaExpanded === "true",
+  getMenuDepth(el.id),
+];
+
+export const useCascade = ({
+  id,
+  onActivate,
+  onMouseEnterItem,
+  position: { x: posX, y: posY },
+}) => {
+  const [, forceRefresh] = useState({});
+  const openMenus = useRef([{ id: "root", left: posX, top: posY }]);
+
+  const setOpenMenus = useCallback((menus) => {
+    openMenus.current = menus;
+    forceRefresh({});
+  }, []);
+
+  const menuOpenPendingTimeout = useRef(null);
+  const menuClosePendingTimeout = useRef(null);
+  const menuState = useRef({ root: "no-popup" });
+  const prevLevel = useRef(0);
+
+  // const prevAim = useRef({mousePos: null, distance: true});
+
+  const openMenu = useCallback(
+    (menuId = "root", itemId = null, listItemEl = null) => {
+      if (menuId === "root" && itemId === null) {
+        setOpenMenus([{ id: "root", left: posX, top: posY }]);
+      } else {
+        menuState.current[menuId] = "popup-open";
+        const doc = listItemEl ? listItemEl.ownerDocument : document;
+        const el = doc.getElementById(`${id}-${menuId}-${itemId}`);
+        const { left, top } = getPosition(el, openMenus.current);
+        setOpenMenus(openMenus.current.concat({ id: itemId, left, top }));
+      }
+    },
+    [id, posX, posY, setOpenMenus]
+  );
+
+  const closeMenu = useCallback(
+    (menuId) => {
+      if (menuId === "root") {
+        setOpenMenus([]);
+      } else {
+        setOpenMenus(openMenus.current.slice(0, -1));
+      }
+    },
+    [setOpenMenus]
+  );
+
+  const closeMenus = useCallback(
+    (menuId, itemId) => {
+      const menus = openMenus.current.slice();
+      let { id: lastMenuId } = menus[menus.length - 1];
+      while (menus.length > 1 && !itemId.startsWith(lastMenuId)) {
+        const parentMenuId = getMenuId(lastMenuId);
+        menus.pop();
+        menuState.current[lastMenuId] = "no-popup";
+        menuState.current[parentMenuId] = "no-popup";
+        ({ id: lastMenuId } = menus[menus.length - 1]);
+      }
+      if (menus.length < openMenus.current.length) {
+        setOpenMenus(menus);
+      }
+    },
+    [setOpenMenus]
+  );
+
+  const scheduleOpen = useCallback(
+    (menuId, itemId, listItemEl) => {
+      if (menuOpenPendingTimeout.current) {
+        clearTimeout(menuOpenPendingTimeout.current);
+      }
+      menuOpenPendingTimeout.current = setTimeout(() => {
+        console.log(`scheduleOpen timed out opening ${itemId}`);
+        closeMenus(menuId, itemId);
+        menuState.current[menuId] = "popup-open";
+        menuState.current[itemId] = "no-popup";
+        openMenu(menuId, itemId, listItemEl);
+      }, 400);
+    },
+    [closeMenus, openMenu]
+  );
+
+  const scheduleClose = useCallback(
+    (openMenuId, menuId, itemId) => {
+      console.log(
+        `scheduleClose openMenuId ${openMenuId} menuId ${menuId} itemId ${itemId}`
+      );
+      menuState.current[openMenuId] = "pending-close";
+      menuClosePendingTimeout.current = setTimeout(() => {
+        closeMenus(menuId, itemId);
+      }, 400);
+    },
+    [closeMenus]
+  );
+
+  const handleRender = useCallback(() => {
+    const { current: menus } = openMenus;
+    const [menu] = menus.slice(-1);
+    const el = document.getElementById(`${id}-${menu.id}`);
+    if (el) {
+      const { right, bottom } = el.getBoundingClientRect();
+      const { clientHeight, clientWidth } = document.body;
+      if (right > clientWidth) {
+        const newMenus =
+          menus.length > 1
+            ? flipSides(id, menus)
+            : nudgeLeft(menus, right - clientWidth);
+        setOpenMenus(newMenus);
+      } else if (bottom > clientHeight) {
+        const newMenus = nudgeUp(menus, bottom - clientHeight);
+        setOpenMenus(newMenus);
+      }
+    }
+  }, [id, setOpenMenus]);
+
+  const listItemProps = useMemo(
+    () => ({
+      onMouseEnter: (evt) => {
+        const listItemEl = closestListItem(evt.target);
+        const [menuId, itemId, isGroup, isOpen, level] =
+          identifyItem(listItemEl);
+        const sameLevel = prevLevel.current === level;
+        const {
+          current: { [menuId]: state },
+        } = menuState;
+        prevLevel.current = level;
+
+        // console.log(
+        //   `%conMouseEnter #${menuId}[${itemId}] @${level}
+        //     isGroup ${isGroup} isOpen ${isOpen}
+        //     openMenus [${openMenus.current.join(',')}]
+        //     state='${JSON.stringify(menuState.current)}`,
+        //     'color: green; font-weight: bold;'
+        // );
+
+        if (state === "no-popup" && isGroup) {
+          // Shouldn;t we always set this ?
+          menuState.current[menuId] = "popup-pending";
+          scheduleOpen(menuId, itemId, listItemEl);
+        } else if (state === "popup-pending" && !isGroup) {
+          menuState.current[menuId] = "no-popup";
+          clearTimeout(menuOpenPendingTimeout.current);
+          menuOpenPendingTimeout.current = null;
+        } else if (state === "popup-pending" && isGroup) {
+          clearTimeout(menuOpenPendingTimeout.current);
+          scheduleOpen(menuId, itemId, listItemEl);
+        } else if (state === "popup-open") {
+          const [{ id: parentMenuId }, { id: openMenuId }] =
+            openMenus.current.slice(-2);
+          if (
+            parentMenuId === menuId &&
+            menuState.current[openMenuId] !== "pending-close" &&
+            sameLevel
+          ) {
+            scheduleClose(openMenuId, menuId, itemId);
+            if (isGroup && !isOpen) {
+              scheduleOpen(menuId, itemId, listItemEl);
+            }
+          } else if (
+            parentMenuId === menuId &&
+            isGroup &&
+            itemId !== openMenuId &&
+            menuState.current[openMenuId] === "pending-close"
+          ) {
+            // if there is already an item queued for opening cancel it
+            scheduleOpen(menuId, itemId, listItemEl);
+          } else if (isGroup) {
+            closeMenus(menuId, itemId);
+            scheduleOpen(menuId, itemId, listItemEl);
+          } else if (
+            !(menuState.current[openMenuId] === "pending-close" && sameLevel)
+          ) {
+            closeMenus(menuId, itemId);
+          }
+        }
+
+        if (state === "pending-close") {
+          if (menuOpenPendingTimeout.current) {
+            clearTimeout(menuOpenPendingTimeout.current);
+            menuOpenPendingTimeout.current = null;
+          }
+          clearTimeout(menuClosePendingTimeout.current);
+          menuClosePendingTimeout.current = null;
+          menuState.current[menuId] = "popup-open";
+        }
+
+        onMouseEnterItem(evt, itemId);
+      },
+
+      onClick: (evt) => {
+        const listItemEl = closestListItem(evt.target);
+        const idx = listItemIndex(listItemEl);
+        if (closedNode(listItemEl).ariaHasPopup === "true") {
+          if (listItemEl.ariaExpanded !== "true") {
+            openMenu(idx);
+          } else {
+            // do nothing
+          }
+        } else {
+          onActivate(getItemId(listItemEl.id));
+        }
+      },
+    }),
+    [
+      closeMenus,
+      onActivate,
+      onMouseEnterItem,
+      openMenu,
+      scheduleClose,
+      scheduleOpen,
+    ]
+  );
+
+  return {
+    closeMenu,
+    handleRender,
+    listItemProps,
+    openMenu,
+    openMenus: openMenus.current,
+  };
+};

package/src/menu/use-click-away.js

@@ -0,0 +1,22 @@
+import { useEffect } from 'react';
+
+export const useClickAway = ({ containerClassName, isOpen, onClose }) => {
+  useEffect(() => {
+    const clickHandler = isOpen
+      ? (evt) => {
+          const container = evt.target.closest(`.${containerClassName}`);
+          if (container === null) {
+            onClose('root');
+          }
+        }
+      : null;
+
+    document.body.addEventListener('click', clickHandler, true);
+
+    return () => {
+      if (clickHandler) {
+        document.body.removeEventListener('click', clickHandler, true);
+      }
+    };
+  }, [containerClassName, isOpen, onClose]);
+};