@difizen/libro-virtualized 0.1.2

package/src/grid/utils/scaling-cell-size-and-position-manager.ts

@@ -0,0 +1,198 @@
+/* eslint-disable no-param-reassign */
+import type { Alignment, CellSizeGetter, VisibleCellRange } from '../types.js';
+
+import CellSizeAndPositionManager from './cell-size-and-position-manager.js';
+import { getMaxElementSize } from './max-element-size.js';
+
+type ContainerSizeAndOffset = {
+  containerSize: number;
+  offset: number;
+};
+
+/**
+ * Browsers have scroll offset limitations (eg Chrome stops scrolling at ~33.5M pixels where as Edge tops out at ~1.5M pixels).
+ * After a certain position, the browser won't allow the user to scroll further (even via JavaScript scroll offset adjustments).
+ * This util picks a lower ceiling for max size and artificially adjusts positions within to make it transparent for users.
+ */
+
+type Params = {
+  maxScrollSize?: number;
+  cellCount: number;
+  cellSizeGetter: CellSizeGetter;
+  estimatedCellSize: number;
+};
+
+/**
+ * Extends CellSizeAndPositionManager and adds scaling behavior for lists that are too large to fit within a browser's native limits.
+ */
+export default class ScalingCellSizeAndPositionManager {
+  _cellSizeAndPositionManager: CellSizeAndPositionManager;
+  _maxScrollSize: number;
+
+  constructor({ maxScrollSize = getMaxElementSize(), ...params }: Params) {
+    // Favor composition over inheritance to simplify IE10 support
+    this._cellSizeAndPositionManager = new CellSizeAndPositionManager(params);
+    this._maxScrollSize = maxScrollSize;
+  }
+
+  areOffsetsAdjusted(): boolean {
+    return this._cellSizeAndPositionManager.getTotalSize() > this._maxScrollSize;
+  }
+
+  configure(params: {
+    cellCount: number;
+    estimatedCellSize: number;
+    cellSizeGetter: CellSizeGetter;
+  }) {
+    this._cellSizeAndPositionManager.configure(params);
+  }
+
+  getCellCount(): number {
+    return this._cellSizeAndPositionManager.getCellCount();
+  }
+
+  getEstimatedCellSize(): number {
+    return this._cellSizeAndPositionManager.getEstimatedCellSize();
+  }
+
+  getLastMeasuredIndex(): number {
+    return this._cellSizeAndPositionManager.getLastMeasuredIndex();
+  }
+
+  /**
+   * Number of pixels a cell at the given position (offset) should be shifted in order to fit within the scaled container.
+   * The offset passed to this function is scaled (safe) as well.
+   */
+  getOffsetAdjustment({
+    containerSize,
+    offset, // safe
+  }: ContainerSizeAndOffset): number {
+    const totalSize = this._cellSizeAndPositionManager.getTotalSize();
+    const safeTotalSize = this.getTotalSize();
+    const offsetPercentage = this._getOffsetPercentage({
+      containerSize,
+      offset,
+      totalSize: safeTotalSize,
+    });
+
+    return Math.round(offsetPercentage * (safeTotalSize - totalSize));
+  }
+
+  getSizeAndPositionOfCell(index: number) {
+    return this._cellSizeAndPositionManager.getSizeAndPositionOfCell(index);
+  }
+
+  getSizeAndPositionOfLastMeasuredCell() {
+    return this._cellSizeAndPositionManager.getSizeAndPositionOfLastMeasuredCell();
+  }
+
+  /** See CellSizeAndPositionManager#getTotalSize */
+  getTotalSize(): number {
+    return Math.min(
+      this._maxScrollSize,
+      this._cellSizeAndPositionManager.getTotalSize(),
+    );
+  }
+
+  /** See CellSizeAndPositionManager#getUpdatedOffsetForIndex */
+  getUpdatedOffsetForIndex({
+    align = 'auto',
+    containerSize,
+    currentOffset, // safe
+    targetIndex,
+  }: {
+    align: Alignment;
+    containerSize: number;
+    currentOffset: number;
+    targetIndex: number;
+  }) {
+    currentOffset = this._safeOffsetToOffset({
+      containerSize,
+      offset: currentOffset,
+    });
+
+    const offset = this._cellSizeAndPositionManager.getUpdatedOffsetForIndex({
+      align,
+      containerSize,
+      currentOffset,
+      targetIndex,
+    });
+
+    return this._offsetToSafeOffset({
+      containerSize,
+      offset,
+    });
+  }
+
+  /** See CellSizeAndPositionManager#getVisibleCellRange */
+  getVisibleCellRange({
+    containerSize,
+    offset, // safe
+  }: ContainerSizeAndOffset): VisibleCellRange {
+    offset = this._safeOffsetToOffset({
+      containerSize,
+      offset,
+    });
+
+    return this._cellSizeAndPositionManager.getVisibleCellRange({
+      containerSize,
+      offset,
+    });
+  }
+
+  resetCell(index: number): void {
+    this._cellSizeAndPositionManager.resetCell(index);
+  }
+
+  _getOffsetPercentage({
+    containerSize,
+    offset, // safe
+    totalSize,
+  }: {
+    containerSize: number;
+    offset: number;
+    totalSize: number;
+  }) {
+    return totalSize <= containerSize ? 0 : offset / (totalSize - containerSize);
+  }
+
+  _offsetToSafeOffset({
+    containerSize,
+    offset, // unsafe
+  }: ContainerSizeAndOffset): number {
+    const totalSize = this._cellSizeAndPositionManager.getTotalSize();
+    const safeTotalSize = this.getTotalSize();
+
+    if (totalSize === safeTotalSize) {
+      return offset;
+    } else {
+      const offsetPercentage = this._getOffsetPercentage({
+        containerSize,
+        offset,
+        totalSize,
+      });
+
+      return Math.round(offsetPercentage * (safeTotalSize - containerSize));
+    }
+  }
+
+  _safeOffsetToOffset({
+    containerSize,
+    offset, // safe
+  }: ContainerSizeAndOffset): number {
+    const totalSize = this._cellSizeAndPositionManager.getTotalSize();
+    const safeTotalSize = this.getTotalSize();
+
+    if (totalSize === safeTotalSize) {
+      return offset;
+    } else {
+      const offsetPercentage = this._getOffsetPercentage({
+        containerSize,
+        offset,
+        totalSize: safeTotalSize,
+      });
+
+      return Math.round(offsetPercentage * (totalSize - containerSize));
+    }
+  }
+}

package/src/grid/utils/update-scroll-index-helper.ts

@@ -0,0 +1,96 @@
+import type { Alignment, CellSize } from '../types.js';
+
+import type ScalingCellSizeAndPositionManager from './scaling-cell-size-and-position-manager.js';
+
+/**
+ * Helper function that determines when to update scroll offsets to ensure that a scroll-to-index remains visible.
+ * This function also ensures that the scroll ofset isn't past the last column/row of cells.
+ */
+
+type Params = {
+  // Width or height of cells for the current axis
+  cellSize?: CellSize;
+
+  // Manages size and position metadata of cells
+  cellSizeAndPositionManager: ScalingCellSizeAndPositionManager;
+
+  // Previous number of rows or columns
+  previousCellsCount: number;
+
+  // Previous width or height of cells
+  previousCellSize: CellSize;
+
+  previousScrollToAlignment: Alignment;
+
+  // Previous scroll-to-index
+  previousScrollToIndex: number;
+
+  // Previous width or height of the virtualized container
+  previousSize: number;
+
+  // Current scrollLeft or scrollTop
+  scrollOffset: number;
+
+  scrollToAlignment: Alignment;
+
+  // Scroll-to-index
+  scrollToIndex: number;
+
+  // Width or height of the virtualized container
+  size: number;
+
+  sizeJustIncreasedFromZero: boolean;
+
+  // Callback to invoke with an scroll-to-index value
+  updateScrollIndexCallback: (index: number) => void;
+};
+
+export default function updateScrollIndexHelper({
+  cellSize,
+  cellSizeAndPositionManager,
+  previousCellsCount,
+  previousCellSize,
+  previousScrollToAlignment,
+  previousScrollToIndex,
+  previousSize,
+  scrollOffset,
+  scrollToAlignment,
+  scrollToIndex,
+  size,
+  sizeJustIncreasedFromZero,
+  updateScrollIndexCallback,
+}: Params) {
+  const cellCount = cellSizeAndPositionManager.getCellCount();
+  const hasScrollToIndex = scrollToIndex >= 0 && scrollToIndex < cellCount;
+  const sizeHasChanged =
+    size !== previousSize ||
+    sizeJustIncreasedFromZero ||
+    !previousCellSize ||
+    (typeof cellSize === 'number' && cellSize !== previousCellSize);
+
+  // If we have a new scroll target OR if height/row-height has changed,
+  // We should ensure that the scroll target is visible.
+  if (
+    hasScrollToIndex &&
+    (sizeHasChanged ||
+      scrollToAlignment !== previousScrollToAlignment ||
+      scrollToIndex !== previousScrollToIndex)
+  ) {
+    updateScrollIndexCallback(scrollToIndex);
+
+    // If we don't have a selected item but list size or number of children have decreased,
+    // Make sure we aren't scrolled too far past the current content.
+  } else if (
+    !hasScrollToIndex &&
+    cellCount > 0 &&
+    (size < previousSize || cellCount < previousCellsCount)
+  ) {
+    // We need to ensure that the current scroll offset is still within the collection's range.
+    // To do this, we don't need to measure everything; CellMeasurer would perform poorly.
+    // Just check to make sure we're still okay.
+    // Only adjust the scroll position if we've scrolled below the last set of rows.
+    if (scrollOffset > cellSizeAndPositionManager.getTotalSize() - size) {
+      updateScrollIndexCallback(cellCount - 1);
+    }
+  }
+}

package/src/index.spec.ts

@@ -0,0 +1,10 @@
+import 'reflect-metadata';
+import assert from 'assert';
+
+import { List } from './index.js';
+
+describe('libro-virtualized', () => {
+  it('#import', () => {
+    assert(List);
+  });
+});

package/src/index.ts

@@ -0,0 +1,4 @@
+export * from './auto-sizer/index.js';
+export * from './cell-measurer/index.js';
+export * from './grid/index.js';
+export * from './list/index.js';

package/src/list/index.ts

@@ -0,0 +1,2 @@
+export { default, default as List } from './list.js';
+export type { RowRendererParams } from './types.js';

package/src/list/list.tsx

@@ -0,0 +1,292 @@
+import classNames from 'classnames';
+import * as React from 'react';
+
+import type {
+  Alignment,
+  CellPosition,
+  CellRendererParams,
+  CellSize,
+  NoContentRenderer,
+  OverscanIndicesGetter,
+  RenderedSection,
+  Scroll as GridScroll,
+} from '../grid/index.js';
+import Grid, { accessibilityOverscanIndicesGetter } from '../grid/index.js';
+
+import type { RenderedRows, RowRenderer, Scroll } from './types.js';
+
+/**
+ * It is inefficient to create and manage a large list of DOM elements within a scrolling container
+ * if only a few of those elements are visible. The primary purpose of this component is to improve
+ * performance by only rendering the DOM nodes that a user is able to see based on their current
+ * scroll position.
+ *
+ * This component renders a virtualized list of elements with either fixed or dynamic heights.
+ */
+
+type Props = {
+  'aria-label'?: string;
+
+  /**
+   * Removes fixed height from the scrollingContainer so that the total height
+   * of rows can stretch the window. Intended for use with WindowScroller
+   */
+  autoHeight: boolean;
+
+  /** Optional CSS class name */
+  className?: string;
+
+  /**
+   * Used to estimate the total height of a List before all of its rows have actually been measured.
+   * The estimated total height is adjusted as rows are rendered.
+   */
+  estimatedRowSize: number;
+
+  /** Height constraint for list (determines how many actual rows are rendered) */
+  height: number;
+
+  /** Optional renderer to be used in place of rows when rowCount is 0 */
+  noRowsRenderer: NoContentRenderer;
+
+  /** Callback invoked with information about the slice of rows that were just rendered.  */
+
+  onRowsRendered: (params: RenderedRows) => void;
+
+  /**
+   * Callback invoked whenever the scroll offset changes within the inner scrollable region.
+   * This callback can be used to sync scrolling between lists, tables, or grids.
+   */
+  onScroll: (params: Scroll) => void;
+
+  /** See Grid#overscanIndicesGetter */
+  overscanIndicesGetter: OverscanIndicesGetter;
+
+  /**
+   * Number of rows to render above/below the visible bounds of the list.
+   * These rows can help for smoother scrolling on touch devices.
+   */
+  overscanRowCount: number;
+
+  /** Either a fixed row height (number) or a function that returns the height of a row given its index.  */
+  rowHeight: CellSize;
+
+  /** Responsible for rendering a row given an index; ({ index: number }): node */
+  rowRenderer: RowRenderer;
+
+  /** Number of rows in list. */
+  rowCount: number;
+
+  /** See Grid#scrollToAlignment */
+  scrollToAlignment: Alignment;
+
+  /** Row index to ensure visible (by forcefully scrolling if necessary) */
+  scrollToIndex: number;
+
+  /** Vertical offset. */
+  scrollTop?: number;
+
+  /** Optional inline style */
+  style: any;
+
+  /** Tab index for focus */
+  tabIndex?: number;
+
+  /** Width of list */
+  width: number;
+
+  // 每个cell的高度
+  cellsHeight: number[];
+
+  editorsOffset: number[];
+
+  editorAreaHeight: number[];
+
+  totalSize: number;
+
+  noEditorArea: React.ReactElement;
+};
+
+export default class List extends React.PureComponent<Props> {
+  static defaultProps = {
+    autoHeight: false,
+    estimatedRowSize: 30,
+    onScroll: () => {
+      //
+    },
+    noRowsRenderer: () => null,
+    onRowsRendered: () => {
+      //
+    },
+    overscanIndicesGetter: accessibilityOverscanIndicesGetter,
+    overscanRowCount: 10,
+    scrollToAlignment: 'auto',
+    scrollToIndex: -1,
+    style: {},
+  };
+
+  Grid?: React.ElementRef<typeof Grid> | null;
+
+  forceUpdateGrid() {
+    if (this.Grid) {
+      this.Grid.forceUpdate();
+    }
+  }
+
+  /** See Grid#getOffsetForCell */
+  getOffsetForRow({ alignment, index }: { alignment: Alignment; index: number }) {
+    if (this.Grid) {
+      const { scrollTop } = this.Grid.getOffsetForCell({
+        alignment,
+        rowIndex: index,
+        columnIndex: 0,
+      });
+
+      return scrollTop;
+    }
+    return 0;
+  }
+
+  /** CellMeasurer compatibility */
+  invalidateCellSizeAfterRender({ columnIndex, rowIndex }: CellPosition) {
+    if (this.Grid) {
+      this.Grid.invalidateCellSizeAfterRender({
+        rowIndex,
+        columnIndex,
+      });
+    }
+  }
+
+  /** See Grid#measureAllCells */
+  measureAllRows() {
+    if (this.Grid) {
+      this.Grid.measureAllCells();
+    }
+  }
+
+  /** CellMeasurer compatibility */
+  recomputeGridSize(
+    { columnIndex = 0, rowIndex = 0 }: CellPosition = { columnIndex: 0, rowIndex: 0 },
+  ) {
+    if (this.Grid) {
+      this.Grid.recomputeGridSize({
+        rowIndex,
+        columnIndex,
+      });
+    }
+  }
+
+  /** See Grid#recomputeGridSize */
+  recomputeRowHeights(index = 0) {
+    if (this.Grid) {
+      this.Grid.recomputeGridSize({
+        rowIndex: index,
+        columnIndex: 0,
+      });
+    }
+  }
+
+  scrollToLine(cellIndex = 0, lineIndex = 0) {
+    if (this.Grid) {
+      this.Grid.scrollToLine({
+        cellIndex,
+        lineIndex,
+      });
+    }
+  }
+
+  /** See Grid#scrollToPosition */
+  scrollToPosition(scrollTop = 0) {
+    if (this.Grid) {
+      this.Grid.scrollToPosition({ scrollTop });
+    }
+  }
+
+  /** See Grid#scrollToCell */
+  scrollToRow(index = 0) {
+    if (this.Grid) {
+      this.Grid.scrollToCell({
+        columnIndex: 0,
+        rowIndex: index,
+      });
+    }
+  }
+
+  override render() {
+    const { className, noRowsRenderer, scrollToIndex, width } = this.props;
+
+    return (
+      <Grid
+        resizeObserver={{} as any}
+        {...this.props}
+        autoContainerWidth
+        cellRenderer={this._cellRenderer}
+        className={classNames('ReactVirtualized__List', className)}
+        columnWidth={width}
+        columnCount={1}
+        noContentRenderer={noRowsRenderer}
+        onScroll={this._onScroll}
+        onSectionRendered={this._onSectionRendered}
+        ref={this._setRef}
+        scrollToRow={scrollToIndex}
+      />
+    );
+  }
+
+  _cellRenderer = ({
+    parent,
+    rowIndex,
+    style,
+    isScrolling,
+    isVisible,
+    key,
+  }: CellRendererParams) => {
+    const { rowRenderer } = this.props;
+
+    // TRICKY The style object is sometimes cached by Grid.
+    // This prevents new style objects from bypassing shallowCompare().
+    // However as of React 16, style props are auto-frozen (at least in dev mode)
+    // Check to make sure we can still modify the style before proceeding.
+    // https://github.com/facebook/react/commit/977357765b44af8ff0cfea327866861073095c12#commitcomment-20648713
+    // const { writable } = Object.getOwnPropertyDescriptor(style, 'width');
+    // if (writable) {
+    //   // By default, List cells should be 100% width.
+    //   // This prevents them from flowing under a scrollbar (if present).
+    //   style.width = '100%';
+    // }
+
+    return rowRenderer({
+      index: rowIndex,
+      style,
+      isScrolling,
+      isVisible,
+      key,
+      parent,
+    });
+  };
+
+  _setRef = (ref: React.ElementRef<typeof Grid> | null) => {
+    this.Grid = ref;
+  };
+
+  _onScroll = ({ clientHeight, scrollHeight, scrollTop }: GridScroll) => {
+    const { onScroll } = this.props;
+
+    onScroll({ clientHeight, scrollHeight, scrollTop });
+  };
+
+  _onSectionRendered = ({
+    rowOverscanStartIndex,
+    rowOverscanStopIndex,
+    rowStartIndex,
+    rowStopIndex,
+  }: RenderedSection) => {
+    const { onRowsRendered } = this.props;
+
+    onRowsRendered({
+      overscanStartIndex: rowOverscanStartIndex,
+      overscanStopIndex: rowOverscanStopIndex,
+      startIndex: rowStartIndex,
+      stopIndex: rowStopIndex,
+    });
+  };
+}

package/src/list/types.ts

@@ -0,0 +1,25 @@
+import type * as React from 'react';
+
+export type RowRendererParams = {
+  index: number;
+  isScrolling: boolean;
+  isVisible: boolean;
+  key: string;
+  parent: Record<any, any>;
+  style: Record<any, any>;
+};
+
+export type RowRenderer = (params: RowRendererParams) => React.ReactNode;
+
+export type RenderedRows = {
+  overscanStartIndex: number;
+  overscanStopIndex: number;
+  startIndex: number;
+  stopIndex: number;
+};
+
+export type Scroll = {
+  clientHeight: number;
+  scrollHeight: number;
+  scrollTop: number;
+};

package/src/utils/animation-frame.ts

@@ -0,0 +1,38 @@
+type Callback = (timestamp: number) => void;
+type CancelAnimationFrame = (requestId: number) => void;
+type RequestAnimationFrame = (callback: Callback) => number;
+
+// Properly handle server-side rendering.
+let win: any;
+if (typeof window !== 'undefined') {
+  win = window;
+} else if (typeof self !== 'undefined') {
+  win = self;
+} else {
+  win = {};
+}
+
+// requestAnimationFrame() shim by Paul Irish
+// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
+const request =
+  win.requestAnimationFrame ||
+  win.webkitRequestAnimationFrame ||
+  win.mozRequestAnimationFrame ||
+  win.oRequestAnimationFrame ||
+  win.msRequestAnimationFrame ||
+  function (callback: Callback): RequestAnimationFrame {
+    return win.setTimeout(callback, 1000 / 60);
+  };
+
+const cancel =
+  win.cancelAnimationFrame ||
+  win.webkitCancelAnimationFrame ||
+  win.mozCancelAnimationFrame ||
+  win.oCancelAnimationFrame ||
+  win.msCancelAnimationFrame ||
+  function (id: number) {
+    win.clearTimeout(id);
+  };
+
+export const raf: RequestAnimationFrame = request;
+export const caf: CancelAnimationFrame = cancel;

package/src/utils/create-callback-memoizer.ts

@@ -0,0 +1,32 @@
+/**
+ * Helper utility that updates the specified callback whenever any of the specified indices have changed.
+ */
+export default function createCallbackMemoizer(requireAllKeys = true) {
+  let cachedIndices: Record<any, any> = {};
+
+  return ({ callback, indices }: any) => {
+    const keys = Object.keys(indices);
+    const allInitialized =
+      !requireAllKeys ||
+      keys.every((key) => {
+        const value = indices[key];
+        return Array.isArray(value) ? value.length > 0 : value >= 0;
+      });
+    const indexChanged =
+      keys.length !== Object.keys(cachedIndices).length ||
+      keys.some((key) => {
+        const cachedValue = cachedIndices[key];
+        const value = indices[key];
+
+        return Array.isArray(value)
+          ? cachedValue.join(',') !== value.join(',')
+          : cachedValue !== value;
+      });
+
+    cachedIndices = indices;
+
+    if (allInitialized && indexChanged) {
+      callback(indices);
+    }
+  };
+}