@infinite-table/infinite-react 0.4.12 → 0.5.0

package/src/components/HeadlessTable/MappedCells.ts

@@ -0,0 +1,251 @@
+import { Logger } from '../../utils/debug';
+import { DeepMap } from '../../utils/DeepMap';
+import { Renderable } from '../types/Renderable';
+import { TableRenderRange } from '../VirtualBrain/MatrixBrain';
+
+/**
+ * This class abstracts the following behavior:
+ *
+ * in the DOM, we have a list (flat, so no nesting) of elements that represent table cells
+ * At any one time, just a fraction of all table cells are rendered/present in the DOM
+ * and we need to keep track and know for each element what cell represents and for each
+ * rendered cell, to what element it is currently mapped (so we need a bi-directional mapping)
+ *
+ * This class has tests - see tests/mapped-cells.spec.ts
+ */
+
+export class MappedCells extends Logger {
+  /**
+   * This is the mapping from element index to cell info.
+   * The index in the array is the element index while the value at the position is an array where
+   * the first number is the row index and the second number is the column index.
+   */
+  private elementIndexToCell!: ([number, number] | null)[];
+
+  /**
+   * This is the mapping from cell address to element index.
+   * The key in the map is the cell address (built like this: `${rowIndex}:${columnIndex}`)
+   * while the value is the element index it is being rendered to.
+   */
+  private cellToElementIndex!: DeepMap<number, number>;
+
+  /**
+   * Keeps the JSX of rendered elements in memory, so we can possibly reuse it later.
+   */
+  private renderedElements!: Renderable[];
+
+  constructor() {
+    super(`MappedCells`);
+    this.init();
+
+    // if (__DEV__) {
+    //   (globalThis as any).mappedCells = this;
+    //   (globalThis as any).DeepMap = DeepMap;
+    // }
+  }
+
+  getElementFromListForColumn = (
+    elementsOutsideItemRange: number[],
+    colIndex: number,
+  ): number | undefined => {
+    const { elementIndexToCell } = this;
+    const last = elementsOutsideItemRange.length - 1;
+    for (let i = last; i >= 0; i--) {
+      const elementIndex = elementsOutsideItemRange[i];
+
+      const cell = elementIndexToCell[elementIndex];
+      if (cell && cell[1] === colIndex) {
+        if (i === last) {
+          return elementsOutsideItemRange.pop();
+        }
+        elementsOutsideItemRange.splice(i, 1);
+        // console.log('found ', elementIndex, 'at index', i, 'for col', colIndex);
+        return elementIndex;
+      }
+    }
+    return elementsOutsideItemRange.pop();
+  };
+
+  init() {
+    this.elementIndexToCell = [];
+    this.cellToElementIndex = new DeepMap();
+    this.renderedElements = [];
+  }
+
+  reset() {
+    this.init();
+  }
+
+  destroy() {
+    this.elementIndexToCell = [];
+    this.cellToElementIndex.clear();
+    this.renderedElements = [];
+  }
+
+  /**
+   * Retrieves the elements that contain rendered cells that are outside
+   * of the specified range
+   *
+   * @param start in [rowIndex, colIndex] format - represents the topmost-leftmost cell visible of the render range
+   * @param end in [rowIndex, colIndex] format - represents the bottom-right corner of the visible range. The end is not inclusive,
+   * so the last visible cell will be [rowIndex-1, colIndex-1]
+   *
+   * @returns an array of element indexes that are outside the specified range
+   */
+  getElementsOutsideRenderRange = (range: TableRenderRange) => {
+    const { start, end } = range;
+    const [startRow, startCol] = start;
+    const [endRow, endCol] = end;
+
+    const result: number[] = [];
+
+    for (
+      let elementIndex = 0, len = this.elementIndexToCell.length;
+      elementIndex < len;
+      elementIndex++
+    ) {
+      const entry = this.elementIndexToCell[elementIndex];
+      if (!entry) {
+        continue;
+      }
+      const [rowIndex, colIndex] = entry;
+      const rowBefore = rowIndex < startRow;
+      const rowAfter = rowIndex >= endRow;
+
+      const colBefore = colIndex < startCol;
+      const colAfter = colIndex >= endCol;
+
+      const outsideRenderRange = rowBefore || rowAfter || colBefore || colAfter;
+
+      if (outsideRenderRange) {
+        result.push(elementIndex);
+      }
+    }
+
+    return result;
+  };
+
+  isCellRendered = (rowIndex: number, columnIndex: number): boolean => {
+    return this.cellToElementIndex.has([rowIndex, columnIndex]);
+  };
+
+  isElementRendered = (elementIndex: number): boolean => {
+    return !!this.elementIndexToCell[elementIndex];
+  };
+
+  getElementsForRowIndex = (rowIndex: number): number[] => {
+    return this.cellToElementIndex.getValuesStartingWith([rowIndex]);
+  };
+
+  getRenderedNodeAtElement = (elementIndex: number): Renderable | null => {
+    return this.renderedElements[elementIndex] || null;
+  };
+
+  getRenderedCellAtElement = (
+    elementIndex: number,
+  ): [number, number] | null => {
+    const cell = this.elementIndexToCell[elementIndex];
+    return cell || null;
+  };
+
+  getRenderedNodeForCell = (
+    rowIndex: number,
+    columnIndex: number,
+  ): Renderable | null => {
+    const elementIndex = this.cellToElementIndex.get([rowIndex, columnIndex]);
+
+    return elementIndex != null
+      ? this.renderedElements[elementIndex] || null
+      : null;
+  };
+
+  getElementIndexForCell = (
+    rowIndex: number,
+    columnIndex: number,
+  ): number | null => {
+    const elementIndex = this.cellToElementIndex.get([rowIndex, columnIndex]);
+
+    return elementIndex ?? null;
+  };
+
+  renderCellAtElement = (
+    rowIndex: number,
+    colIndex: number,
+    elementIndex: number,
+    renderNode?: Renderable,
+  ) => {
+    if (__DEV__) {
+      this.debug(
+        `Render cell ${rowIndex},${colIndex} at element ${elementIndex}`,
+      );
+    }
+
+    const key = [rowIndex, colIndex];
+
+    const currentCell = this.elementIndexToCell[elementIndex];
+    if (currentCell) {
+      this.cellToElementIndex.delete([currentCell[0], currentCell[1]]);
+    }
+    if (renderNode) {
+      this.renderedElements[elementIndex] = renderNode;
+    }
+
+    this.elementIndexToCell[elementIndex] = [rowIndex, colIndex];
+    this.cellToElementIndex.set(key, elementIndex);
+  };
+
+  discardCell = (rowIndex: number, colIndex: number) => {
+    const key = [rowIndex, colIndex];
+    const elementIndex = this.cellToElementIndex.get(key);
+
+    if (elementIndex != null) {
+      this.renderedElements[elementIndex] = null;
+      this.elementIndexToCell[elementIndex] = null;
+      this.cellToElementIndex.delete(key);
+    }
+  };
+
+  discardElement = (elementIndex: number): [number, number] | null => {
+    const cell = this.elementIndexToCell[elementIndex];
+    if (cell) {
+      const key = [cell[0], cell[1]];
+
+      this.renderedElements[elementIndex] = null;
+      this.elementIndexToCell[elementIndex] = null;
+      this.cellToElementIndex.delete(key);
+
+      return cell;
+    }
+    return null;
+  };
+
+  discardElementsStartingWith = (
+    elIndex: number,
+    callback?: (index: number, cell: [number, number] | null) => void,
+  ) => {
+    let discardedCell: [number, number] | null = null;
+    let oneDiscarded: boolean = false;
+
+    if (elIndex < this.elementIndexToCell.length) {
+      for (
+        let elementIndex = elIndex, len = this.elementIndexToCell.length;
+        elementIndex < len;
+        elementIndex++
+      ) {
+        discardedCell = this.discardElement(elementIndex);
+        if (discardedCell) {
+          oneDiscarded = true;
+        }
+        if (callback) {
+          callback(elementIndex, discardedCell);
+        }
+      }
+
+      this.elementIndexToCell.length = elIndex;
+
+      this.renderedElements.length = elIndex;
+    }
+
+    return oneDiscarded;
+  };
+}

package/src/components/HeadlessTable/RawTable.tsx

@@ -0,0 +1,98 @@
+import * as React from 'react';
+import { useEffect, useLayoutEffect, useMemo } from 'react';
+
+import { AvoidReactDiff } from '../RawList/AvoidReactDiff';
+import { Renderable } from '../types/Renderable';
+import { SubscriptionCallback } from '../types/SubscriptionCallback';
+import { buildSubscriptionCallback } from '../utils/buildSubscriptionCallback';
+import { MatrixBrain } from '../VirtualBrain/MatrixBrain';
+
+import {
+  ReactHeadlessTableRenderer,
+  TableRenderCellFn,
+} from './ReactHeadlessTableRenderer';
+
+export type RawTableProps = {
+  name?: string;
+  brain: MatrixBrain;
+  renderCell: TableRenderCellFn;
+  cellHoverClassNames?: string[];
+  renderer?: ReactHeadlessTableRenderer;
+  onRenderUpdater?: SubscriptionCallback<Renderable>;
+};
+
+function createRenderer(brain: MatrixBrain) {
+  const renderer = new ReactHeadlessTableRenderer(brain);
+  const onRenderUpdater = buildSubscriptionCallback<Renderable>();
+
+  brain.onDestroy(() => {
+    renderer.destroy();
+    onRenderUpdater.destroy();
+  });
+
+  return {
+    renderer,
+    onRenderUpdater,
+  };
+}
+export function RawTableFn(props: RawTableProps) {
+  const { brain, renderCell } = props;
+
+  const { renderer, onRenderUpdater } = useMemo(() => {
+    return props.onRenderUpdater && props.renderer
+      ? {
+          renderer: props.renderer,
+          onRenderUpdater: props.onRenderUpdater,
+        }
+      : createRenderer(brain);
+  }, [brain, props.onRenderUpdater, props.renderer]);
+
+  useEffect(() => {
+    renderer.cellHoverClassNames = props.cellHoverClassNames || [];
+  }, [renderer, props.cellHoverClassNames]);
+
+  // we need to useLayoutEffect here instead of useEffect!
+  // as otherwise sometimes column headers might not be rendered correctly
+  //
+  // For example, for http://localhost:3000/tests/table/props/column/column-change
+  // sometimes firstName and salary are not displayed!!!! in the column header if `useEffect` is used
+
+  useLayoutEffect(() => {
+    const renderRange = brain.getRenderRange();
+
+    renderer.renderRange(renderRange, {
+      onRender: onRenderUpdater,
+      force: true,
+      renderCell,
+    });
+  }, [renderer, brain, renderCell, onRenderUpdater]);
+
+  useEffect(() => {
+    const remove = brain.onRenderRangeChange((renderRange) => {
+      renderer.renderRange(renderRange, {
+        force: false, // TODO should be false
+        onRender: (items) => {
+          const currentItems = onRenderUpdater.get();
+          if (
+            currentItems &&
+            items &&
+            (currentItems as any).length === items.length
+          ) {
+            // dont update, as each item in turn
+            // is an AvoidReactDiff component
+            // which is updating itself
+            return;
+          }
+          onRenderUpdater(items);
+        },
+        renderCell,
+      });
+    });
+
+    return remove;
+  }, [renderCell]);
+
+  return <AvoidReactDiff updater={onRenderUpdater} />;
+}
+
+export const RawTable: React.FC<RawTableProps> = React.memo(RawTableFn);