@difizen/libro-virtualized 0.1.2

package/src/auto-sizer/auto-sizer.tsx

@@ -0,0 +1,187 @@
+import * as React from 'react';
+
+import createDetectElementResize from '../vendor/detect-element-resize.js';
+
+type Size = {
+  height: number;
+  width: number;
+};
+
+type Props = {
+  /** Function responsible for rendering children.*/
+  children: (param: Size) => React.ReactNode;
+
+  /** Optional custom CSS class name to attach to root AutoSizer element.  */
+  className?: string;
+
+  /** Default height to use for initial render; useful for SSR */
+  defaultHeight?: number;
+
+  /** Default width to use for initial render; useful for SSR */
+  defaultWidth?: number;
+
+  /** Disable dynamic :height property */
+  disableHeight: boolean;
+
+  /** Disable dynamic :width property */
+  disableWidth: boolean;
+
+  /** Nonce of the inlined stylesheet for Content Security Policy */
+  nonce?: string;
+
+  /** Callback to be invoked on-resize */
+  onResize: (param: Size) => void;
+
+  /** Optional inline style */
+  style?: object;
+};
+
+type State = {
+  height: number;
+  width: number;
+};
+
+type ResizeHandler = (element: HTMLElement, onResize: () => void) => void;
+
+type DetectElementResize = {
+  addResizeListener: ResizeHandler;
+  removeResizeListener: ResizeHandler;
+};
+
+export default class AutoSizer extends React.PureComponent<Props, State> {
+  static defaultProps = {
+    onResize: () => {
+      //
+    },
+    disableHeight: false,
+    disableWidth: false,
+    style: {},
+  };
+
+  override state = {
+    height: this.props.defaultHeight || 0,
+    width: this.props.defaultWidth || 0,
+  };
+
+  _parentNode?: HTMLElement;
+  _autoSizer: HTMLElement | null;
+  _detectElementResize: DetectElementResize;
+
+  override componentDidMount() {
+    const { nonce } = this.props;
+    if (
+      this._autoSizer &&
+      this._autoSizer.parentNode &&
+      this._autoSizer.parentNode.ownerDocument &&
+      this._autoSizer.parentNode.ownerDocument.defaultView &&
+      this._autoSizer.parentNode instanceof
+        this._autoSizer.parentNode.ownerDocument.defaultView.HTMLElement
+    ) {
+      // Delay access of parentNode until mount.
+      // This handles edge-cases where the component has already been unmounted before its ref has been set,
+      // As well as libraries like react-lite which have a slightly different lifecycle.
+      this._parentNode = this._autoSizer.parentNode;
+
+      // Defer requiring resize handler in order to support server-side rendering.
+      // See issue #41
+      this._detectElementResize = createDetectElementResize(nonce);
+      this._detectElementResize.addResizeListener(this._parentNode, this._onResize);
+
+      this._onResize();
+    }
+  }
+
+  override componentWillUnmount() {
+    if (this._detectElementResize && this._parentNode) {
+      this._detectElementResize.removeResizeListener(this._parentNode, this._onResize);
+    }
+  }
+
+  override render() {
+    const { children, className, disableHeight, disableWidth, style } = this.props;
+    const { height, width } = this.state;
+
+    // Outer div should not force width/height since that may prevent containers from shrinking.
+    // Inner component should overflow and use calculated width/height.
+    // See issue #68 for more information.
+    const outerStyle: Record<any, any> = { overflow: 'visible' };
+    const childParams: { height: number; width: number; [index: string]: any } = {
+      height: 0,
+      width: 0,
+    };
+
+    if (!disableHeight) {
+      outerStyle['height'] = 0;
+      childParams['height'] = height;
+    }
+
+    if (!disableWidth) {
+      outerStyle['width'] = 0;
+      childParams['width'] = width;
+    }
+
+    /**
+     * TODO: Avoid rendering children before the initial measurements have been collected.
+     * At best this would just be wasting cycles.
+     * Add this check into version 10 though as it could break too many ref callbacks in version 9.
+     * Note that if default width/height props were provided this would still work with SSR.
+    if (
+      height !== 0 &&
+      width !== 0
+    ) {
+      child = children({ height, width })
+    }
+    */
+
+    return (
+      <div
+        className={className}
+        ref={this._setRef}
+        style={{
+          ...outerStyle,
+          ...style,
+        }}
+      >
+        {children(childParams)}
+      </div>
+    );
+  }
+
+  _onResize = () => {
+    const { disableHeight, disableWidth, onResize } = this.props;
+
+    if (this._parentNode) {
+      // Guard against AutoSizer component being removed from the DOM immediately after being added.
+      // This can result in invalid style values which can result in NaN values if we don't handle them.
+      // See issue #150 for more context.
+
+      const height = this._parentNode.offsetHeight || 0;
+      const width = this._parentNode.offsetWidth || 0;
+
+      const style = window.getComputedStyle(this._parentNode) || {};
+      const paddingLeft = parseInt(style.paddingLeft, 10) || 0;
+      const paddingRight = parseInt(style.paddingRight, 10) || 0;
+      const paddingTop = parseInt(style.paddingTop, 10) || 0;
+      const paddingBottom = parseInt(style.paddingBottom, 10) || 0;
+
+      const newHeight = height - paddingTop - paddingBottom;
+      const newWidth = width - paddingLeft - paddingRight;
+
+      if (
+        (!disableHeight && this.state.height !== newHeight) ||
+        (!disableWidth && this.state.width !== newWidth)
+      ) {
+        this.setState({
+          height: height - paddingTop - paddingBottom,
+          width: width - paddingLeft - paddingRight,
+        });
+
+        onResize({ height, width });
+      }
+    }
+  };
+
+  _setRef = (autoSizer: HTMLElement | null) => {
+    this._autoSizer = autoSizer;
+  };
+}

package/src/auto-sizer/index.ts

@@ -0,0 +1,4 @@
+// @flow
+
+export { default } from './auto-sizer.js';
+export { default as AutoSizer } from './auto-sizer.js';

package/src/cell-measurer/cell-measurer-cache.ts

@@ -0,0 +1,220 @@
+/** @flow */
+
+import type { CellMeasureCache } from './types.js';
+
+export const DEFAULT_HEIGHT = 30;
+export const DEFAULT_WIDTH = 100;
+
+// Enables more intelligent mapping of a given column and row index to an item ID.
+// This prevents a cell cache from being invalidated when its parent collection is modified.
+type KeyMapper = (rowIndex: number, columnIndex: number) => any;
+
+type CellMeasurerCacheParams = {
+  defaultHeight?: number;
+  defaultWidth?: number;
+  fixedHeight?: boolean;
+  fixedWidth?: boolean;
+  minHeight?: number;
+  minWidth?: number;
+  keyMapper?: KeyMapper;
+};
+
+type Cache = Record<any, number>;
+
+type IndexParam = {
+  index: number;
+};
+
+/**
+ * Caches measurements for a given cell.
+ */
+export default class CellMeasurerCache implements CellMeasureCache {
+  _cellHeightCache: Cache = {};
+  _cellWidthCache: Cache = {};
+  _columnWidthCache: Cache = {};
+  _rowHeightCache: Cache = {};
+  _defaultHeight: number;
+  _defaultWidth: number;
+  _minHeight: number;
+  _minWidth: number;
+  _keyMapper: KeyMapper;
+  _hasFixedHeight: boolean;
+  _hasFixedWidth: boolean;
+  _columnCount = 0;
+  _rowCount = 0;
+
+  constructor(params: CellMeasurerCacheParams = {}) {
+    const {
+      defaultHeight,
+      defaultWidth,
+      fixedHeight,
+      fixedWidth,
+      keyMapper,
+      minHeight,
+      minWidth,
+    } = params;
+
+    this._hasFixedHeight = fixedHeight === true;
+    this._hasFixedWidth = fixedWidth === true;
+    this._minHeight = minHeight || 0;
+    this._minWidth = minWidth || 0;
+    this._keyMapper = keyMapper || defaultKeyMapper;
+
+    this._defaultHeight = Math.max(
+      this._minHeight,
+      typeof defaultHeight === 'number' ? defaultHeight : DEFAULT_HEIGHT,
+    );
+    this._defaultWidth = Math.max(
+      this._minWidth,
+      typeof defaultWidth === 'number' ? defaultWidth : DEFAULT_WIDTH,
+    );
+
+    if (process.env['NODE_ENV'] !== 'production') {
+      if (this._hasFixedHeight === false && this._hasFixedWidth === false) {
+        console.warn(
+          "CellMeasurerCache should only measure a cell's width or height. " +
+            'You have configured CellMeasurerCache to measure both. ' +
+            'This will result in poor performance.',
+        );
+      }
+
+      if (this._hasFixedHeight === false && this._defaultHeight === 0) {
+        console.warn(
+          'Fixed height CellMeasurerCache should specify a :defaultHeight greater than 0. ' +
+            'Failing to do so will lead to unnecessary layout and poor performance.',
+        );
+      }
+
+      if (this._hasFixedWidth === false && this._defaultWidth === 0) {
+        console.warn(
+          'Fixed width CellMeasurerCache should specify a :defaultWidth greater than 0. ' +
+            'Failing to do so will lead to unnecessary layout and poor performance.',
+        );
+      }
+    }
+  }
+
+  clear(rowIndex: number, columnIndex = 0) {
+    const key = this._keyMapper(rowIndex, columnIndex);
+
+    delete this._cellHeightCache[key];
+    delete this._cellWidthCache[key];
+
+    this._updateCachedColumnAndRowSizes(rowIndex, columnIndex);
+  }
+
+  clearAll() {
+    this._cellHeightCache = {};
+    this._cellWidthCache = {};
+    this._columnWidthCache = {};
+    this._rowHeightCache = {};
+    this._rowCount = 0;
+    this._columnCount = 0;
+  }
+
+  columnWidth = ({ index }: IndexParam) => {
+    const key = this._keyMapper(0, index);
+
+    return Object.prototype.hasOwnProperty.call(this._columnWidthCache, key)
+      ? this._columnWidthCache[key]
+      : this._defaultWidth;
+  };
+
+  get defaultHeight(): number {
+    return this._defaultHeight;
+  }
+
+  get defaultWidth(): number {
+    return this._defaultWidth;
+  }
+
+  hasFixedHeight(): boolean {
+    return this._hasFixedHeight;
+  }
+
+  hasFixedWidth(): boolean {
+    return this._hasFixedWidth;
+  }
+
+  getHeight(rowIndex: number, columnIndex = 0): number {
+    if (this._hasFixedHeight) {
+      return this._defaultHeight;
+    } else {
+      const key = this._keyMapper(rowIndex, columnIndex);
+
+      return Object.prototype.hasOwnProperty.call(this._cellHeightCache, key)
+        ? Math.max(this._minHeight, this._cellHeightCache[key])
+        : this._defaultHeight;
+    }
+  }
+
+  getWidth(rowIndex: number, columnIndex = 0): number {
+    if (this._hasFixedWidth) {
+      return this._defaultWidth;
+    } else {
+      const key = this._keyMapper(rowIndex, columnIndex);
+
+      return Object.prototype.hasOwnProperty.call(this._cellWidthCache, key)
+        ? Math.max(this._minWidth, this._cellWidthCache[key])
+        : this._defaultWidth;
+    }
+  }
+
+  has(rowIndex: number, columnIndex = 0): boolean {
+    const key = this._keyMapper(rowIndex, columnIndex);
+
+    return Object.prototype.hasOwnProperty.call(this._cellHeightCache, key);
+  }
+
+  rowHeight = ({ index }: IndexParam) => {
+    const key = this._keyMapper(index, 0);
+
+    return Object.prototype.hasOwnProperty.call(this._rowHeightCache, key)
+      ? this._rowHeightCache[key]
+      : this._defaultHeight;
+  };
+
+  set(rowIndex: number, columnIndex: number, width: number, height: number): void {
+    const key = this._keyMapper(rowIndex, columnIndex);
+
+    if (columnIndex >= this._columnCount) {
+      this._columnCount = columnIndex + 1;
+    }
+    if (rowIndex >= this._rowCount) {
+      this._rowCount = rowIndex + 1;
+    }
+
+    // Size is cached per cell so we don't have to re-measure if cells are re-ordered.
+    this._cellHeightCache[key] = height;
+    this._cellWidthCache[key] = width;
+
+    this._updateCachedColumnAndRowSizes(rowIndex, columnIndex);
+  }
+
+  _updateCachedColumnAndRowSizes(rowIndex: number, columnIndex: number) {
+    // :columnWidth and :rowHeight are derived based on all cells in a column/row.
+    // Pre-cache these derived values for faster lookup later.
+    // Reads are expected to occur more frequently than writes in this case.
+    // Only update non-fixed dimensions though to avoid doing unnecessary work.
+    if (!this._hasFixedWidth) {
+      let columnWidth = 0;
+      for (let i = 0; i < this._rowCount; i++) {
+        columnWidth = Math.max(columnWidth, this.getWidth(i, columnIndex));
+      }
+      const columnKey = this._keyMapper(0, columnIndex);
+      this._columnWidthCache[columnKey] = columnWidth;
+    }
+    if (!this._hasFixedHeight) {
+      let rowHeight = 0;
+      for (let i = 0; i < this._columnCount; i++) {
+        rowHeight = Math.max(rowHeight, this.getHeight(rowIndex, i));
+      }
+      const rowKey = this._keyMapper(rowIndex, 0);
+      this._rowHeightCache[rowKey] = rowHeight;
+    }
+  }
+}
+
+function defaultKeyMapper(rowIndex: number, columnIndex: number) {
+  return `${rowIndex}-${columnIndex}`;
+}

package/src/cell-measurer/cell-measurer.ts

@@ -0,0 +1,151 @@
+import * as React from 'react';
+import { findDOMNode } from 'react-dom';
+
+import type { CellMeasureCache } from './types.js';
+
+type Children = (params: { measure: () => void }) => React.ReactNode;
+
+type Cell = {
+  columnIndex: number;
+  rowIndex: number;
+};
+
+type Props = {
+  cache: CellMeasureCache;
+  children: Children | React.ReactNode;
+  columnIndex?: number;
+  index?: number;
+  parent: {
+    invalidateCellSizeAfterRender?: (cell: Cell) => void;
+    recomputeGridSize?: (cell: Cell) => void;
+  };
+  rowIndex?: number;
+};
+
+/**
+ * Wraps a cell and measures its rendered content.
+ * Measurements are stored in a per-cell cache.
+ * Cached-content is not be re-measured.
+ */
+export default class CellMeasurer extends React.PureComponent<Props> {
+  static __internalCellMeasurerFlag = false;
+
+  override componentDidMount() {
+    this._maybeMeasureCell();
+  }
+
+  override componentDidUpdate() {
+    this._maybeMeasureCell();
+  }
+
+  override render() {
+    const { children } = this.props;
+
+    return typeof children === 'function'
+      ? children({ measure: this._measure })
+      : children;
+  }
+
+  _getCellMeasurements() {
+    const { cache } = this.props;
+
+    // eslint-disable-next-line react/no-find-dom-node
+    const node = findDOMNode(this);
+
+    // TODO Check for a bad combination of fixedWidth and missing numeric width or vice versa with height
+
+    if (
+      node &&
+      node.ownerDocument &&
+      node.ownerDocument.defaultView &&
+      node instanceof node.ownerDocument.defaultView.HTMLElement
+    ) {
+      const styleWidth = node.style.width;
+      const styleHeight = node.style.height;
+
+      // If we are re-measuring a cell that has already been measured,
+      // It will have a hard-coded width/height from the previous measurement.
+      // The fact that we are measuring indicates this measurement is probably stale,
+      // So explicitly clear it out (eg set to "auto") so we can recalculate.
+      // See issue #593 for more info.
+      // Even if we are measuring initially- if we're inside of a MultiGrid component,
+      // Explicitly clear width/height before measuring to avoid being tainted by another Grid.
+      // eg top/left Grid renders before bottom/right Grid
+      // Since the CellMeasurerCache is shared between them this taints derived cell size values.
+      if (!cache.hasFixedWidth()) {
+        node.style.width = 'auto';
+      }
+      if (!cache.hasFixedHeight()) {
+        node.style.height = 'auto';
+      }
+
+      const height = Math.ceil(node.offsetHeight);
+      const width = Math.ceil(node.offsetWidth);
+
+      // Reset after measuring to avoid breaking styles; see #660
+      if (styleWidth) {
+        node.style.width = styleWidth;
+      }
+      if (styleHeight) {
+        node.style.height = styleHeight;
+      }
+
+      return { height, width };
+    } else {
+      return { height: 0, width: 0 };
+    }
+  }
+
+  _maybeMeasureCell() {
+    const {
+      cache,
+      columnIndex = 0,
+      parent,
+      rowIndex = this.props.index || 0,
+    } = this.props;
+
+    if (!cache.has(rowIndex, columnIndex)) {
+      const { height, width } = this._getCellMeasurements();
+
+      cache.set(rowIndex, columnIndex, width, height);
+
+      // If size has changed, let Grid know to re-render.
+      if (parent && typeof parent.invalidateCellSizeAfterRender === 'function') {
+        parent.invalidateCellSizeAfterRender({
+          columnIndex,
+          rowIndex,
+        });
+      }
+    }
+  }
+
+  _measure = () => {
+    const {
+      cache,
+      columnIndex = 0,
+      parent,
+      rowIndex = this.props.index || 0,
+    } = this.props;
+
+    const { height, width } = this._getCellMeasurements();
+
+    if (
+      height !== cache.getHeight(rowIndex, columnIndex) ||
+      width !== cache.getWidth(rowIndex, columnIndex)
+    ) {
+      cache.set(rowIndex, columnIndex, width, height);
+
+      if (parent && typeof parent.recomputeGridSize === 'function') {
+        parent.recomputeGridSize({
+          columnIndex,
+          rowIndex,
+        });
+      }
+    }
+  };
+}
+
+// Used for DEV mode warning check
+if (process.env['NODE_ENV'] !== 'production') {
+  CellMeasurer.__internalCellMeasurerFlag = true;
+}

package/src/cell-measurer/index.ts

@@ -0,0 +1,5 @@
+import CellMeasurerCache from './cell-measurer-cache.js';
+import CellMeasurer from './cell-measurer.js';
+
+export default CellMeasurer;
+export { CellMeasurer, CellMeasurerCache };

package/src/cell-measurer/types.ts

@@ -0,0 +1,8 @@
+export interface CellMeasureCache {
+  hasFixedWidth(): boolean;
+  hasFixedHeight(): boolean;
+  has(rowIndex: number, columnIndex: number): boolean;
+  set(rowIndex: number, columnIndex: number, width: number, height: number): void;
+  getHeight(rowIndex: number, columnIndex?: number): number;
+  getWidth(rowIndex: number, columnIndex?: number): number;
+}

package/src/grid/accessibility-overscanIndices-getter.ts

@@ -0,0 +1,38 @@
+import type { OverscanIndices, OverscanIndicesGetterParams } from './types.js';
+
+export const SCROLL_DIRECTION_BACKWARD = -1;
+export const SCROLL_DIRECTION_FORWARD = 1;
+
+export const SCROLL_DIRECTION_HORIZONTAL = 'horizontal';
+export const SCROLL_DIRECTION_VERTICAL = 'vertical';
+
+/**
+ * Calculates the number of cells to overscan before and after a specified range.
+ * This function ensures that overscanning doesn't exceed the available cells.
+ */
+
+export default function defaultOverscanIndicesGetter({
+  cellCount,
+  overscanCellsCount,
+  scrollDirection,
+  startIndex,
+  stopIndex,
+}: OverscanIndicesGetterParams): OverscanIndices {
+  // Make sure we render at least 1 cell extra before and after (except near boundaries)
+  // This is necessary in order to support keyboard navigation (TAB/SHIFT+TAB) in some cases
+  // For more info see issues #625
+  // eslint-disable-next-line no-param-reassign
+  overscanCellsCount = Math.max(1, overscanCellsCount);
+
+  if (scrollDirection === SCROLL_DIRECTION_FORWARD) {
+    return {
+      overscanStartIndex: Math.max(0, startIndex - 1),
+      overscanStopIndex: Math.min(cellCount - 1, stopIndex + overscanCellsCount),
+    };
+  } else {
+    return {
+      overscanStartIndex: Math.max(0, startIndex - overscanCellsCount),
+      overscanStopIndex: Math.min(cellCount - 1, stopIndex + 1),
+    };
+  }
+}