@infinite-table/infinite-react 0.4.13 → 0.5.1

package/src/components/hooks/useInterceptedMap.ts

@@ -0,0 +1,71 @@
+import { useEffect } from 'react';
+
+type InterceptedMapFns<K, V> = {
+  set?: (k: K, v: V) => void;
+  beforeClear?: (map: Map<K, V>) => void;
+  clear?: () => void;
+  delete?: (k: K) => void;
+};
+
+/**
+ *
+ * @param map Map to intercept
+ * @param fns fns to inject
+ * @returns a function to restore the map to initial methods
+ */
+export function interceptMap<K, V>(
+  map: Map<K, V>,
+  fns: InterceptedMapFns<K, V>,
+) {
+  const { set, delete: deleteKey, clear } = map;
+
+  if (fns.set) {
+    map.set = (key: K, value: V) => {
+      set.call(map, key, value);
+      fns.set!(key, value);
+
+      return map;
+    };
+  }
+  if (fns.delete) {
+    map.delete = (key: any) => {
+      const removed = deleteKey.call(map, key);
+      fns.delete!(key)!;
+
+      return removed;
+    };
+  }
+  if (fns.clear || fns.beforeClear) {
+    map.clear = () => {
+      if (fns.beforeClear) {
+        fns.beforeClear(map);
+      }
+      const result = clear.call(map);
+      if (fns.clear) {
+        fns.clear();
+      }
+      return result;
+    };
+  }
+
+  return () => {
+    if (set) {
+      map.set = set;
+    }
+    if (deleteKey) {
+      map.delete = deleteKey;
+    }
+    if (clear) {
+      map.clear = clear;
+    }
+  };
+}
+
+export function useInterceptedMap<K, V>(
+  map: Map<K, V>,
+  fns: InterceptedMapFns<K, V>,
+) {
+  useEffect(() => {
+    return interceptMap(map, fns);
+  }, [map]);
+}

package/src/components/hooks/useLatest.tsx

@@ -0,0 +1,8 @@
+import { useCallback, useRef } from 'react';
+
+export function useLatest<T>(value: T): () => T {
+  const ref = useRef(value);
+  ref.current = value;
+
+  return useCallback(() => ref.current, []);
+}

package/src/components/hooks/useLazyLatest.ts

@@ -0,0 +1,23 @@
+import { useCallback, useMemo, useRef } from 'react';
+
+export type LazyLatest<T> = {
+  (): T | undefined;
+  current: T;
+};
+
+export const useLazyLatest = <T>(value?: T): LazyLatest<T> => {
+  const ref = useRef(value);
+  ref.current = value;
+
+  const fn = useCallback(() => ref.current, []);
+
+  return useMemo(() => {
+    Object.defineProperty(fn, 'current', {
+      set(value: T) {
+        ref.current = value;
+      },
+    });
+
+    return fn as LazyLatest<T>;
+  }, [fn]);
+};

package/src/components/hooks/useMemoShallowObjectMerge.ts

@@ -0,0 +1,16 @@
+import { useRef } from 'react';
+import { shallowEqualObjects } from '../../utils/shallowEqualObjects';
+
+export function useMemoShallowObjectMerge<T1 extends object, T2 extends object>(
+  a: T1,
+  b: T2,
+  merger?: (a: T1, b: T2) => T1 & T2,
+) {
+  const result = merger ? merger(a, b) : { ...a, ...b };
+  const ref = useRef(result);
+
+  if (!shallowEqualObjects(result, ref.current)) {
+    ref.current = result;
+  }
+  return ref.current;
+}

package/src/components/hooks/useMounted.ts

@@ -0,0 +1,18 @@
+import { useCallback, useEffect, useRef } from 'react';
+
+export function useMounted() {
+  let mountedRef = useRef<boolean>(true);
+
+  useEffect(() => {
+    // because React StrictMode (in >=18.0.0) will call useEffect twice
+    // we need to make sure that we set this back to true in useEffect
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
+
+  const isMounted = useCallback(() => mountedRef.current, []);
+
+  return isMounted;
+}

package/src/components/hooks/useOnMount.ts

@@ -0,0 +1,21 @@
+import { RefObject, useEffect } from 'react';
+
+export type OnMountProps = {
+  onMount?: (node: HTMLElement) => void;
+  onUnmount?: (node: HTMLElement) => void;
+};
+export function useOnMount(
+  domRef: RefObject<HTMLElement>,
+  props: OnMountProps,
+) {
+  useEffect(() => {
+    const { onMount, onUnmount } = props;
+
+    const node = domRef?.current;
+    onMount?.(node!);
+
+    return () => {
+      onUnmount?.(node!);
+    };
+  }, []);
+}

package/src/components/hooks/useOnScroll.ts

@@ -0,0 +1,34 @@
+import { RefObject, useEffect } from 'react';
+
+type OnScroll = (scrollPosition: {
+  scrollTop: number;
+  scrollLeft: number;
+}) => void;
+
+export const useOnScroll = (
+  domRef: RefObject<HTMLElement>,
+  onScroll: OnScroll | undefined,
+) => {
+  useEffect(() => {
+    const domNode = domRef?.current;
+
+    const scrollFn = (event: Event) => {
+      const node = event.target as HTMLElement;
+
+      onScroll?.({
+        scrollTop: node.scrollTop,
+        scrollLeft: node.scrollLeft,
+      });
+    };
+
+    const options: AddEventListenerOptions = {
+      passive: false,
+    };
+
+    domNode?.addEventListener('scroll', scrollFn, options);
+
+    return () => {
+      domNode?.removeEventListener('scroll', scrollFn);
+    };
+  }, [onScroll, domRef?.current]);
+};

package/src/components/hooks/useOnce.ts

@@ -0,0 +1,10 @@
+import { useMemo } from 'react';
+import { once } from '../../utils/DeepMap/once';
+
+export function useOnce<ReturnType>(fn: () => ReturnType): ReturnType {
+  const onceFn = useMemo<() => ReturnType>(() => {
+    return once(fn);
+  }, []);
+
+  return onceFn();
+}

package/src/components/hooks/useOverlay/index.tsx

@@ -0,0 +1,418 @@
+import * as React from 'react';
+import {
+  ReactNode,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useState,
+} from 'react';
+import { createPortal } from 'react-dom';
+import {
+  Alignable,
+  AlignPositionOptions,
+  getAlignPosition,
+} from '../../../utils/pageGeometry/alignment';
+
+import type { PointCoords } from '../../../utils/pageGeometry/Point';
+import type { RectangleCoords } from '../../../utils/pageGeometry/Rectangle';
+import { Rectangle } from '../../../utils/pageGeometry/Rectangle';
+
+import { getChangeDetect } from '../../DataSource/privateHooks/getChangeDetect';
+import { propToIdentifyMenu } from '../../Menu/propToIdentifyMenu';
+import { SubscriptionCallback } from '../../types/SubscriptionCallback';
+import { buildSubscriptionCallback } from '../../utils/buildSubscriptionCallback';
+import { useRerender } from '../useRerender';
+
+type OverlayParams = {
+  portalContainer?: ElementContainerGetter | null | false;
+  constrainTo?: OverlayShowParams['constrainTo'];
+};
+
+export type ElementContainerGetter =
+  | (() => HTMLElement | string | Promise<HTMLElement | string>)
+  | string
+  | HTMLElement
+  | Promise<HTMLElement | string>;
+
+function isPromise<T extends any = any>(p: any): p is Promise<T> {
+  return (p && typeof p.then === 'function') || p instanceof Promise;
+}
+function isHTMLElement(
+  el: null | string | HTMLElement | Promise<any> | any,
+): el is HTMLElement {
+  if (el == null) {
+    return false;
+  }
+  if (typeof el === 'string') {
+    return false;
+  }
+  //@ts-ignore
+  return typeof el.tagName === 'string';
+}
+
+export type AdvancedAlignable = Alignable | ElementContainerGetter;
+
+async function retrieveAdvancedAlignable(
+  target: AdvancedAlignable,
+): Promise<RectangleCoords | null> {
+  if (typeof target === 'function') {
+    //@ts-ignore
+    target = target();
+  }
+
+  if (isPromise(target)) {
+    target = await target;
+  }
+  if (typeof target === 'string') {
+    target = document.querySelector(target) as HTMLElement;
+  }
+  if (target && isHTMLElement(target)) {
+    target = target.getBoundingClientRect();
+  }
+
+  //@ts-ignore
+  return target ? Rectangle.from(target) : null;
+}
+
+async function retrieveElement(
+  elementGetter: ElementContainerGetter,
+): Promise<HTMLElement | null> {
+  let result: HTMLElement | string | Promise<HTMLElement | string> | null =
+    null;
+
+  if (typeof elementGetter === 'function') {
+    //@ts-ignore
+    result = elementGetter();
+  } else {
+    result = elementGetter;
+  }
+
+  function queryForElement(result: HTMLElement | string | null) {
+    let el: HTMLElement | null = null;
+
+    if (typeof result === 'string') {
+      el = document.querySelector(result)!;
+    }
+    if (isHTMLElement(result)) {
+      el = result;
+    }
+
+    return el || null;
+  }
+
+  return queryForElement(await result);
+}
+
+function DefaultOverlayPortal(props: { children: ReactNode }) {
+  return (
+    <div style={{ position: 'fixed', top: 0, left: 0 }}>{props.children}</div>
+  );
+}
+
+function OverlayContent(
+  props: {
+    children: () => ReactNode;
+  } & OverlayHandle,
+) {
+  const nodeRef = React.useRef<HTMLDivElement | null>(null);
+  useEffect(() => {
+    return props.realign.onChange((handle) => {
+      if (nodeRef.current && handle) {
+        alignOverlayNode(nodeRef.current, handle);
+      }
+    });
+  }, [props.realign]);
+
+  return (
+    <div
+      style={{ position: 'absolute', top: 0, left: 0 }}
+      ref={useCallback((node: HTMLDivElement) => {
+        if (node) {
+          alignOverlayNode(node, props);
+          // const rect = alignOverlayNode(node, props);
+          // const realignEvent = new CustomEvent('realign', {
+          //   bubbles: true,
+          //   detail: {
+          //     rect,
+          //   },
+          // });
+
+          // node.firstChild?.dispatchEvent(realignEvent);
+        }
+        nodeRef.current = node;
+      }, [])}
+    >
+      {typeof props.children === 'function' ? props.children() : props.children}
+    </div>
+  );
+}
+
+async function alignOverlayNode(
+  node: HTMLDivElement,
+  params: OverlayShowParams,
+) {
+  let { constrainTo, alignTo, alignPosition } = params;
+
+  if (
+    Object.keys(alignTo).length === 2 &&
+    (alignTo as PointCoords).top !== undefined &&
+    (alignTo as PointCoords).left !== undefined
+  ) {
+    alignTo = {
+      ...(alignTo as PointCoords),
+      width: 0,
+      height: 0,
+    } as RectangleCoords;
+  }
+  if (typeof constrainTo === 'boolean') {
+    constrainTo = constrainTo
+      ? document.documentElement.getBoundingClientRect()
+      : undefined;
+  }
+  const constrainToRectangle = constrainTo
+    ? (await retrieveAdvancedAlignable(constrainTo)) || undefined
+    : undefined;
+
+  const alignToRectangle = alignTo
+    ? await retrieveAdvancedAlignable(alignTo as AdvancedAlignable)
+    : undefined;
+  const alignTarget = Rectangle.from(node.getBoundingClientRect());
+
+  if (!alignToRectangle) {
+    return;
+  }
+
+  const { alignedRect } = getAlignPosition({
+    constrainTo: constrainToRectangle,
+    alignAnchor: alignToRectangle,
+    alignTarget,
+    alignPosition,
+  });
+
+  node.style.transform = `translate3d(${alignedRect.left}px,${alignedRect.top}px, 0px)`;
+
+  const rect = node.getBoundingClientRect();
+
+  if (rect.left !== alignedRect.left || rect.top !== alignedRect.top) {
+    // let's take the diff from offsetParent to the alignRect
+    // and adjust it like that
+    const offsetParent = node.offsetParent as HTMLElement;
+
+    if (offsetParent) {
+      const offsetParentRect = offsetParent.getBoundingClientRect();
+      const offsetParentLeft = offsetParentRect.left;
+      const offsetParentTop = offsetParentRect.top;
+
+      const leftDiff = alignedRect.left - offsetParentLeft;
+      const topDiff = alignedRect.top - offsetParentTop;
+
+      node.style.transform = `translate3d(${leftDiff}px,${topDiff}px, 0px)`;
+    }
+  }
+}
+
+/**
+ * If portal container is given, it will create a React portal from that element
+ * otherwise it will simply render another node as portal
+ *
+ * @param portalContainer
+ */
+export function useOverlayPortal(
+  content: ReactNode,
+  portalContainer?: ElementContainerGetter | null | false,
+) {
+  const [container, setContainer] = useState<HTMLElement | null>(null);
+
+  useLayoutEffect(() => {
+    async function getContainer() {
+      const container = portalContainer
+        ? await retrieveElement(portalContainer)
+        : null;
+
+      if (container != null) {
+        setContainer(container);
+      }
+    }
+
+    if (!portalContainer) {
+      return;
+    }
+    getContainer();
+  }, [portalContainer]);
+
+  return portalContainer ? (
+    container ? (
+      createPortal(content, container)
+    ) : (
+      // we're probably still fetching the container
+      <></>
+    )
+  ) : portalContainer === null || portalContainer === false ? (
+    content
+  ) : (
+    <DefaultOverlayPortal>{content}</DefaultOverlayPortal>
+  );
+}
+
+export type OverlayShowParams = {
+  id?: string | number;
+  constrainTo?: AdvancedAlignable | boolean;
+  alignPosition: AlignPositionOptions['alignPosition'];
+  alignTo: AdvancedAlignable | PointCoords;
+};
+
+type OverlayHandle = {
+  key: string;
+  children: () => ReactNode;
+
+  constrainTo: OverlayShowParams['constrainTo'];
+  alignPosition: OverlayShowParams['alignPosition'];
+  alignTo: OverlayShowParams['alignTo'];
+
+  realign: SubscriptionCallback<OverlayHandle>;
+};
+
+function getIdForReactOnlyChild(children: ReactNode | (() => ReactNode)) {
+  if (React.Children.count(children) === 1) {
+    const child = React.Children.only(children);
+    if (React.isValidElement(child)) {
+      return child.props.id || child.key;
+    }
+  }
+  return null;
+}
+
+function injectPortalContainerAndConstrainInMenuChild(
+  children: ReactNode,
+  portalContainer: OverlayParams['portalContainer'],
+  constrainTo: OverlayParams['constrainTo'],
+) {
+  if (React.Children.count(children) === 1) {
+    const child = React.Children.only(children);
+    // here we could have tested for child.type === Menu,
+    // but if we had done that, we could have had to import the `Menu` component
+    // which in turns imports this, so we try to avoid that
+    if (React.isValidElement(child) && child.props[propToIdentifyMenu]) {
+      const newProps: Partial<OverlayParams> = {};
+      if (child.props.portalContainer === undefined) {
+        newProps.portalContainer = portalContainer;
+      }
+      if (child.props.constrainTo === undefined) {
+        newProps.constrainTo = constrainTo;
+      }
+      return React.cloneElement(child, newProps);
+    }
+  }
+  return children;
+}
+
+//@ts-ignore
+globalThis.allhandles = {};
+//@ts-ignore
+globalThis.thehandles = {};
+
+export function useOverlay(params: OverlayParams) {
+  const rootParams = params;
+
+  const [handles] = useState<Map<string, OverlayHandle>>(() => new Map());
+
+  const [handleToRealign, setHandleToRealign] = useState<string | null>(null);
+  const [realignTimestamp, setRealignTimestamp] = useState(0);
+
+  const getContentForPortal = useCallback(() => {
+    const contentForPortal: ReactNode[] = [];
+
+    for (const [_, handle] of handles) {
+      contentForPortal.push(
+        <OverlayContent {...handle} key={handle.key}></OverlayContent>,
+      );
+    }
+
+    return contentForPortal;
+  }, []);
+
+  const portal = useOverlayPortal(
+    getContentForPortal(),
+    params.portalContainer,
+  );
+
+  const [_, updateContent] = useRerender();
+
+  const showOverlay = useCallback(
+    (content: ReactNode | (() => ReactNode), params: OverlayShowParams) => {
+      const id =
+        params.id || getIdForReactOnlyChild(content) || getChangeDetect();
+      const key = `${id}`;
+
+      let handle = handles.get(key);
+
+      const childrenFn = () => {
+        const children = typeof content === 'function' ? content() : content;
+
+        return injectPortalContainerAndConstrainInMenuChild(
+          children,
+          rootParams.portalContainer,
+          params.constrainTo ?? rootParams.constrainTo,
+        );
+      };
+
+      if (handle) {
+        Object.assign(handle, params, { children: childrenFn });
+        updateContent();
+        setHandleToRealign(handle.key);
+        setRealignTimestamp(Date.now());
+        return;
+      }
+
+      handle = {
+        key,
+        children: childrenFn,
+        alignPosition: params.alignPosition,
+        alignTo: params.alignTo,
+        constrainTo: params.constrainTo,
+        realign: buildSubscriptionCallback<OverlayHandle>(),
+      };
+
+      handles.set(handle.key, handle);
+
+      updateContent();
+
+      return () => updateContent();
+    },
+    [handles, rootParams.portalContainer, updateContent],
+  );
+
+  React.useEffect(() => {
+    if (handleToRealign) {
+      const handle = handles.get(handleToRealign);
+      if (handle) {
+        handle.realign(handle);
+      }
+    }
+  }, [handleToRealign, realignTimestamp]);
+
+  const hideOverlay = (id: string) => {
+    id = `${id}`;
+    if (handles.has(id)) {
+      handles.delete(id);
+      updateContent();
+    }
+  };
+
+  const clearAll = () => {
+    handles.clear();
+    updateContent();
+  };
+
+  React.useEffect(() => {
+    // return clearAll;
+  }, []);
+
+  return {
+    portal,
+    hideOverlay,
+    clearAll,
+    rerenderOverlays: updateContent,
+    showOverlay,
+  };
+}

package/src/components/hooks/usePrevious.ts

@@ -0,0 +1,8 @@
+import { useRef, useLayoutEffect } from 'react';
+export const usePrevious = <T>(value: T, initialValue?: T): T => {
+  const ref = useRef(initialValue === undefined ? value : initialValue);
+  useLayoutEffect(() => {
+    ref.current = value;
+  });
+  return ref.current;
+};