@infinite-table/infinite-react 0.5.0 → 0.5.2

package/src/components/RawList/ReactVirtualRenderer.tsx

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

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

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

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

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

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