@infinite-table/infinite-react 0.4.13 → 0.5.0

package/src/components/RawList/ReactVirtualRenderer.tsx

@@ -0,0 +1,307 @@
+import * as React from 'react';
+import type { RefCallback } from 'react';
+import type { Renderable } from '../types/Renderable';
+import type { RenderItem } from './types';
+import type { SubscriptionCallback } from '../types/SubscriptionCallback';
+import type { RenderRange } from '../VirtualBrain';
+
+import { dbg, Logger } from '../../utils/debug';
+
+import { VirtualBrain } from '../VirtualBrain';
+
+import { MappedItems } from './MappedItems';
+import { AvoidReactDiff } from './AvoidReactDiff';
+import { buildSubscriptionCallback } from '../utils/buildSubscriptionCallback';
+
+const ITEM_POSITION_WITH_TRANSFORM = true;
+
+export class ReactVirtualRenderer extends Logger {
+  private mappedItems: MappedItems;
+  // needed for hot reload and react hooks executing twice in dev
+  private destroyed: boolean = false;
+
+  private itemDOMElements: Record<number, HTMLElement | null> = {};
+  private itemDOMRefs: Record<number, RefCallback<HTMLElement>> = {};
+  private updaters: Record<number, SubscriptionCallback<Renderable>> = {};
+
+  private onRender: (items: Renderable[]) => void = () => null;
+  private brain: VirtualBrain;
+
+  private items: Renderable[] = [];
+  prevLength: number = 0;
+
+  constructor(
+    brain: VirtualBrain,
+    {
+      onRender,
+      channel,
+    }: {
+      onRender?: ReactVirtualRenderer['onRender'];
+      channel?: string;
+    },
+  ) {
+    super(
+      `ReactVirtualRenderer:${brain.getOptions().mainAxis}` +
+        (channel ? `:${channel}` : ''),
+    );
+
+    if (onRender) {
+      this.onRender = onRender;
+    }
+
+    this.brain = brain;
+    this.mappedItems = new MappedItems(brain.getOptions().mainAxis);
+  }
+
+  renderRange = (
+    range: RenderRange,
+    {
+      renderItem,
+      force,
+      onRender,
+    }: {
+      renderItem: RenderItem;
+      force: boolean;
+      onRender?: (items: Renderable[]) => void;
+    },
+  ): Renderable[] => {
+    // needed for hot reload and react hooks executing twice in dev
+    if (this.destroyed) {
+      // console.warn('DESTROYED');
+      return [];
+    }
+    const { mappedItems } = this;
+    const { renderStartIndex, renderEndIndex } = range;
+
+    if (__DEV__) {
+      this.debug(
+        `Render range ${renderStartIndex}-${renderEndIndex}. Force ${force}`,
+      );
+    }
+
+    const renderCount =
+      renderEndIndex === -1 ? 0 : renderEndIndex - renderStartIndex + 1;
+
+    if (this.itemDOMElements[renderCount]) {
+      mappedItems.discardElementsStartingWith(renderCount, (elementIndex) => {
+        delete this.itemDOMElements[elementIndex];
+        delete this.itemDOMRefs[elementIndex];
+
+        // when less items become rendered
+        // we unmount the extra items by calling destroy on the updater
+        // so we don't need to re-render the whole container
+        if (this.updaters[elementIndex]) {
+          this.updaters[elementIndex].destroy();
+          delete this.updaters[elementIndex];
+        }
+
+        delete this.items[elementIndex];
+        if (__DEV__) {
+          this.debug(`Discard element ${elementIndex}`);
+        }
+      });
+    }
+    if (this.items.length > renderCount) {
+      this.items.length = renderCount;
+    }
+
+    const elementsOutsideItemRange =
+      this.mappedItems.getElementsOutsideItemRange(
+        renderStartIndex,
+        renderEndIndex,
+      );
+
+    // start from the last rendered, and render additional elements, until we have renderCount
+    // this loop might not even execute the body once if all the elements are present
+    for (let i = this.items.length; i < renderCount; i++) {
+      this.renderElement(i);
+      // push at start
+      elementsOutsideItemRange.splice(0, 0, i);
+    }
+
+    for (let i = renderStartIndex; i <= renderEndIndex; i++) {
+      if (mappedItems.isRenderedItem(i)) {
+        if (force) {
+          this.renderItemAtElement(i, undefined, renderItem);
+        }
+        continue;
+      }
+
+      const elementIndex = elementsOutsideItemRange.pop();
+      if (elementIndex == null) {
+        if (__DEV__) {
+          this.error(`Cannot find element to render item ${i}`);
+        }
+        continue;
+      }
+      this.renderItemAtElement(i, elementIndex, renderItem);
+    }
+
+    // OLD we need to spread and create a new array
+    // OLD as otherwise the AvoidReactDiff component will receive the same array
+    // OLD and since it uses setState internally, it will not render/update
+    // const result = [...this.items];
+    let result = this.items;
+
+    // TODO why does this optimisation not work
+    // if (this.items.length > this.prevLength) {
+    //   // only assign and do a render when
+    //   // we have more items than last time
+    //   // so we need to show new items
+    result = [...this.items];
+
+    if (this.onRender) {
+      this.onRender(result);
+    }
+    if (onRender) {
+      onRender(result);
+    }
+    //   this.prevLength = result.length;
+    // }
+
+    return result;
+  };
+
+  private renderElement(elementIndex: number) {
+    const domRef = (node: HTMLElement | null) => {
+      if (node) {
+        this.itemDOMElements[elementIndex] = node;
+        this.updateElementPosition(elementIndex);
+      }
+    };
+    this.itemDOMRefs[elementIndex] = domRef;
+    this.updaters[elementIndex] = buildSubscriptionCallback<Renderable>();
+
+    const item = (
+      <AvoidReactDiff
+        key={elementIndex}
+        name={`${elementIndex}`}
+        updater={this.updaters[elementIndex]}
+      />
+    );
+
+    // if (__DEV__) {
+    //   this.debug(`Mount element ${elementIndex}`);
+    // }
+    this.items[elementIndex] = item;
+
+    return item;
+  }
+
+  private renderItemAtElement(
+    itemIndex: number,
+    elementIndex = this.mappedItems.getElementIndexForItem(itemIndex) as number,
+    renderItem: RenderItem,
+    // swapSpanned?: boolean,
+  ) {
+    // needed for hot reload and react hooks executing twice in dev
+    if (this.destroyed) {
+      return;
+    }
+    const spanParent = this.brain.getItemSpanParent(itemIndex);
+    let covered = false;
+    if (spanParent !== itemIndex) {
+      // if (swapSpanned) {
+      //   debugger;
+      //   itemIndex = spanParent;
+      // } else {
+
+      covered = true;
+      // }
+    }
+    const itemSize = this.brain.getItemSize(itemIndex);
+    const itemSpan = this.brain.getItemSpan(itemIndex);
+    const itemSizeWithSpan =
+      itemSpan === 1
+        ? itemSize
+        : this.brain.getItemSizeWithSpan(itemIndex, itemSpan);
+
+    const renderedNode = renderItem({
+      spanParent,
+      itemIndex,
+      itemSize,
+      itemSizeWithSpan,
+      itemSpan,
+      covered,
+      domRef: this.itemDOMRefs[elementIndex],
+    });
+
+    const itemUpdater = this.updaters[elementIndex];
+
+    if (!itemUpdater) {
+      this.error(
+        `Cannot find item updater for item ${itemIndex} at this time... sorry.`,
+      );
+      return;
+    }
+    this.mappedItems.renderItemAtElement(itemIndex, elementIndex, renderedNode);
+
+    if (__DEV__) {
+      dbg(`ReactVirtualRenderer:${this.brain.getOptions().mainAxis}`)(
+        `Render item ${itemIndex} at element ${elementIndex}`,
+      );
+    }
+    itemUpdater(renderedNode);
+
+    this.updateElementPosition(elementIndex);
+  }
+
+  private updateElementPosition = (elementIndex: number) => {
+    const itemElement = this.itemDOMElements[elementIndex];
+    const itemIndex =
+      this.mappedItems.getItemRenderedAtElementIndex(elementIndex);
+
+    const options = this.brain.getOptions();
+
+    if (itemIndex == null) {
+      if (__DEV__) {
+        this.error(`Cannot find item for element ${elementIndex}`);
+      }
+      return;
+    }
+
+    const itemPosition = this.brain.getItemOffsetFor(itemIndex);
+
+    if (itemPosition == null) {
+      return;
+    }
+
+    if (itemElement) {
+      if (__DEV__) {
+        (itemElement.dataset as any).elementIndex = elementIndex;
+        (itemElement.dataset as any).itemIndex = itemIndex;
+      }
+
+      if (ITEM_POSITION_WITH_TRANSFORM) {
+        itemElement.style.transform =
+          options.mainAxis === 'vertical'
+            ? `translateY(${itemPosition}px)`
+            : `translateX(${itemPosition}px)`;
+        itemElement.style.visibility = '';
+      } else {
+        itemElement.style.display = '';
+        itemElement.style[
+          options.mainAxis === 'vertical' ? 'top' : 'left'
+        ] = `${itemPosition}px`;
+      }
+    }
+  };
+
+  destroy = () => {
+    this.destroyed = true;
+    this.reset();
+
+    (this as any).onRender = null;
+    (this as any).renderItem = null;
+    (this as any).brain = null;
+    (this as any).mappedItems = null;
+  };
+
+  reset() {
+    this.itemDOMElements = {};
+    this.itemDOMRefs = {};
+    this.updaters = {};
+    this.items = [];
+    this.mappedItems.reset();
+  }
+}

package/src/components/RawList/index.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { useEffect } from 'react';
+
+import { AvoidReactDiff } from './AvoidReactDiff';
+import { RawListProps } from './types';
+import { useLatest } from '../hooks/useLatest';
+import { useVirtualRenderer } from './useVirtualRenderer';
+
+function RawListFn(props: RawListProps) {
+  const { renderItem, brain, debugChannel } = props;
+
+  const { onRenderUpdater, renderer } = useVirtualRenderer({
+    brain,
+    debugChannel,
+  });
+  const getRenderItem = useLatest(renderItem);
+
+  useEffect(() => {
+    const renderRange = brain.getRenderRange();
+
+    renderer.renderRange(renderRange, {
+      renderItem,
+      force: true,
+      onRender: onRenderUpdater,
+    });
+  }, [brain, renderItem, onRenderUpdater]);
+
+  useEffect(() => {
+    const remove = brain.onRenderRangeChange((renderRange) => {
+      renderer.renderRange(renderRange, {
+        force: false,
+        renderItem: getRenderItem(),
+        onRender: onRenderUpdater,
+      });
+    });
+    return remove;
+  }, [brain, onRenderUpdater]);
+
+  return <AvoidReactDiff updater={onRenderUpdater} />;
+}
+
+export const RawList: React.FC<RawListProps> = React.memo(RawListFn);

package/src/components/RawList/types.ts

@@ -0,0 +1,23 @@
+import type { RefCallback } from 'react';
+import type { Renderable } from '../types/Renderable';
+import type { VirtualBrain } from '../VirtualBrain';
+
+export type RenderItemParam = {
+  domRef: RefCallback<HTMLElement>;
+  itemIndex: number;
+  itemSize: number;
+  itemSizeWithSpan: number;
+  itemSpan: number;
+  spanParent: number;
+  covered: boolean;
+};
+export type RenderItem = (renderProps: RenderItemParam) => Renderable;
+export type RawListItemSpan = (itemSpanProps: { itemIndex: number }) => number;
+
+export type RawListProps = {
+  debugChannel?: string;
+  renderItem: RenderItem;
+  itemSpan?: RawListItemSpan;
+  brain: VirtualBrain;
+  repaintId?: string | number;
+};

package/src/components/RawList/useVirtualRenderer.ts

@@ -0,0 +1,36 @@
+import { useMemo } from 'react';
+
+import { Renderable } from '../types/Renderable';
+import { SubscriptionCallback } from '../types/SubscriptionCallback';
+import { buildSubscriptionCallback } from '../utils/buildSubscriptionCallback';
+
+import { VirtualBrain } from '../VirtualBrain';
+import { ReactVirtualRenderer } from './ReactVirtualRenderer';
+
+function createRenderer(brain: VirtualBrain) {
+  const renderer = new ReactVirtualRenderer(brain, {});
+  const onRenderUpdater = buildSubscriptionCallback<Renderable>();
+
+  brain.onDestroy(() => {
+    renderer.destroy();
+    onRenderUpdater.destroy();
+  });
+
+  return {
+    renderer,
+    onRenderUpdater,
+  };
+}
+export function useVirtualRenderer({
+  brain,
+}: {
+  brain: VirtualBrain;
+  debugChannel?: string;
+}): {
+  onRenderUpdater: SubscriptionCallback<Renderable>;
+  renderer: ReactVirtualRenderer;
+} {
+  return useMemo(() => {
+    return createRenderer(brain);
+  }, [brain]);
+}

package/src/components/RenderHookComponent.tsx

@@ -0,0 +1,10 @@
+export type RenderHookComponentProps<RENDER_FN extends Function, PARAM_TYPE> = {
+  render: RENDER_FN;
+  renderParam: PARAM_TYPE;
+};
+
+export function RenderHookComponent<RENDER_FN extends Function, PARAM_TYPE>(
+  props: RenderHookComponentProps<RENDER_FN, PARAM_TYPE>,
+) {
+  return props.render(props.renderParam) ?? null;
+}

package/src/components/ResizeObserver/index.tsx

@@ -0,0 +1,170 @@
+import * as React from 'react';
+import {
+  useMemo,
+  useRef,
+  useEffect,
+  useLayoutEffect,
+  useCallback,
+} from 'react';
+
+import { Size, OnResizeFn } from '../types/Size';
+import { debounce } from '../utils/debounce';
+
+interface ResizeObserverProps {
+  /**
+   * Specifies whether to call onResize after the initial render (on mount)
+   *
+   * @default true
+   */
+  notifyOnMount?: boolean;
+
+  /**
+   * If set to true, it will be attached using useLayoutEffect. If false, will be attached using useEffect
+   * @default false
+   */
+  earlyAttach?: boolean;
+
+  onResize: OnResizeFn;
+}
+
+export const setupResizeObserver = (
+  node: HTMLElement,
+  callback: OnResizeFn,
+  config: { debounce?: number } = { debounce: 0 },
+): (() => void) => {
+  const debounceTime = config.debounce ?? 0;
+  const RO = (window as any).ResizeObserver;
+
+  const onResizeCallback = debounceTime
+    ? debounce(callback, { wait: debounceTime })
+    : callback;
+
+  const observer = new RO((entries: any[]) => {
+    const entry = entries[0];
+
+    let { width, height } = entry.contentRect;
+
+    if (entry.borderBoxSize?.[0]) {
+      height = entry.borderBoxSize[0].blockSize;
+      width = entry.borderBoxSize[0].inlineSize;
+    } else {
+      // this is needed for Safari and other browsers that don't have borderBoxSize on the entry object
+      const rect = node.getBoundingClientRect();
+      height = rect.height;
+      width = rect.width;
+    }
+
+    onResizeCallback({ width, height });
+  });
+
+  observer.observe(node);
+
+  return () => {
+    observer.disconnect();
+  };
+};
+
+/**
+ * A hook that notifies you when a certain DOM element has changed it's size
+ *
+ * @param ref A React ref to a DOM element
+ * @param callback The function to be called when the element is resized.
+ */
+export const useResizeObserver = (
+  ref: React.MutableRefObject<HTMLElement | null>,
+  callback: OnResizeFn,
+  config: { earlyAttach: boolean; debounce?: number } = {
+    earlyAttach: false,
+    debounce: 0,
+  },
+) => {
+  const sizeRef = useRef<Size>({
+    width: 0,
+    height: 0,
+  });
+
+  const effectFn = (callback: OnResizeFn) => {
+    let disconnect: () => void;
+    if (ref.current) {
+      disconnect = setupResizeObserver(
+        ref.current,
+        (size) => {
+          size = {
+            width: Math.round(size.width),
+            height: Math.round(size.height),
+          };
+          const prevSize = sizeRef.current;
+          if (
+            prevSize.width !== size.width ||
+            prevSize.height !== size.height
+          ) {
+            sizeRef.current = size;
+
+            callback(size);
+          }
+        },
+        { debounce: config.debounce },
+      );
+    }
+    return () => {
+      if (disconnect) {
+        disconnect();
+      }
+    };
+  };
+
+  useEffect(() => {
+    if (!config.earlyAttach) {
+      return effectFn(callback);
+    }
+    return () => {};
+  }, [ref.current, callback, config.earlyAttach, config.debounce]);
+
+  useLayoutEffect(() => {
+    if (config.earlyAttach) {
+      return effectFn(callback);
+    }
+    return () => {};
+  }, [ref.current, callback, config.earlyAttach]);
+};
+
+const ReactResizeObserver = (props: ResizeObserverProps) => {
+  const style = useMemo(
+    () => ({
+      position: 'absolute' as 'absolute',
+      top: 0,
+      left: 0,
+      width: '100%',
+      height: '100%',
+      boxSizing: 'border-box' as 'border-box',
+    }),
+    [],
+  );
+
+  const { notifyOnMount, earlyAttach } = props;
+
+  const firstTime = useRef(true);
+  const ref = useRef<HTMLDivElement>(null);
+
+  const onResize = useCallback(
+    (size: Size) => {
+      if (firstTime.current && !notifyOnMount) {
+        firstTime.current = false;
+        return;
+      }
+      props.onResize(size);
+    },
+    [props.onResize],
+  );
+
+  useResizeObserver(ref, onResize, { earlyAttach: earlyAttach || false });
+
+  return <div ref={ref} style={style}></div>;
+};
+
+ReactResizeObserver.defaultProps = {
+  notifyOnMount: true,
+  earlyAttach: false,
+};
+
+export default ReactResizeObserver;