@react-stately/virtualizer 3.7.2-nightly.4649 → 3.7.2-nightly.4656

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-stately/virtualizer",
-  "version": "3.7.2-nightly.4649+02f242f41",
+  "version": "3.7.2-nightly.4656+0c17289de",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -22,8 +22,8 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@react-aria/utils": "3.0.0-nightly.2937+02f242f41",
-    "@react-types/shared": "3.0.0-nightly.2937+02f242f41",
+    "@react-aria/utils": "3.0.0-nightly.2944+0c17289de",
+    "@react-types/shared": "3.0.0-nightly.2944+0c17289de",
     "@swc/helpers": "^0.5.0"
   },
   "peerDependencies": {
@@ -32,5 +32,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "02f242f41f0347b3f11e50b019c197127b7d0a08"
+  "gitHead": "0c17289de18041e6f8b99df26a5a3ca922cc5145"
 }

package/src/Layout.ts

@@ -13,17 +13,15 @@
 import {InvalidationContext} from './types';
 import {Key} from '@react-types/shared';
 import {LayoutInfo} from './LayoutInfo';
-// import {Point} from './Point';
 import {Rect} from './Rect';
 import {Size} from './Size';
 import {Virtualizer} from './Virtualizer';
-// import { DragTarget, DropTarget } from '@react-types/shared';
 
 /**
- * [CollectionView]{@link CollectionView} supports arbitrary layout objects, which compute what views are visible, and how
+ * [Virtualizer]{@link Virtualizer} supports arbitrary layout objects, which compute what views are visible, and how
  * to position and style them. However, layouts do not create the views themselves directly. Instead,
  * layouts produce lightweight {@link LayoutInfo} objects which describe various properties of a view,
- * such as its position and size. The {@link CollectionView} is then responsible for creating the actual
+ * such as its position and size. The {@link Virtualizer} is then responsible for creating the actual
  * views as needed, based on this layout information.
  *
  * Every layout extends from the {@link Layout} abstract base class. Layouts must implement a minimum of the
@@ -32,14 +30,14 @@ import {Virtualizer} from './Virtualizer';
  * @see {@link getVisibleLayoutInfos}
  * @see {@link getLayoutInfo}
  */
-export abstract class Layout<T extends object> {
-  /** The CollectionView the layout is currently attached to. */
+export abstract class Layout<T extends object, O = any> {
+  /** The Virtualizer the layout is currently attached to. */
   virtualizer: Virtualizer<T, any, any>;
 
   /**
    * Returns whether the layout should invalidate in response to
    * visible rectangle changes. By default, it only invalidates
-   * when the collection view's size changes. Return true always
+   * when the virtualizer's size changes. Return true always
    * to make the layout invalidate while scrolling (e.g. sticky headers).
    */
   shouldInvalidate(newRect: Rect, oldRect: Rect): boolean {
@@ -51,10 +49,10 @@ export abstract class Layout<T extends object> {
   /**
    * This method allows the layout to perform any pre-computation
    * it needs to in order to prepare {@link LayoutInfo}s for retrieval.
-   * Called by the collection view before {@link getVisibleLayoutInfos}
+   * Called by the virtualizer before {@link getVisibleLayoutInfos}
    * or {@link getLayoutInfo} are called.
    */
-  validate(invalidationContext: InvalidationContext<T, any>) {} // eslint-disable-line @typescript-eslint/no-unused-vars
+  validate(invalidationContext: InvalidationContext<O>) {} // eslint-disable-line @typescript-eslint/no-unused-vars
 
   /**
    * Returns an array of {@link LayoutInfo} objects which are inside the given rectangle.
@@ -75,51 +73,8 @@ export abstract class Layout<T extends object> {
    */
   abstract getContentSize(): Size;
 
-  /**
-   * Returns a {@link DragTarget} describing a view at the given point to be dragged.
-   * Return `null` to cancel the drag. The default implementation returns the view at the given point.
-   * @param point The point at which the drag occurred.
+  /** 
+   * Updates the size of the given item.
    */
-  // getDragTarget(point: Point): DragTarget | null {
-  //   let target = this.virtualizer.keyAtPoint(point);
-  //   if (!target) {
-  //     return null;
-  //   }
-
-  //   return {
-  //     type: 'item',
-  //     key: target
-  //   };
-  // }
-
-  /**
-   * Returns a {@link DragTarget} object describing where a drop should occur. Return `null`
-   * to reject the drop. The dropped items will be inserted before the resulting target.
-   * @param point The point at which the drop occurred.
-   */
-  // getDropTarget(point: Point): DropTarget | null {
-  //   return null;
-  // }
-
-  /**
-   * Returns the starting attributes for an animated insertion.
-   * The view is animated from this {@link LayoutInfo} to the one returned by {@link getLayoutInfo}.
-   * The default implementation just returns its input.
-   *
-   * @param layoutInfo The proposed LayoutInfo for this view.
-   */
-  getInitialLayoutInfo(layoutInfo: LayoutInfo): LayoutInfo {
-    return layoutInfo;
-  }
-
-  /**
-   * Returns the ending attributes for an animated removal.
-   * The view is animated from the {@link LayoutInfo} returned by {@link getLayoutInfo}
-   * to the one returned by this method. The default implementation returns its input.
-   *
-   * @param layoutInfo The original LayoutInfo for this view.
-   */
-  getFinalLayoutInfo(layoutInfo: LayoutInfo): LayoutInfo {
-    return layoutInfo;
-  }
+  updateItemSize?(key: Key, size: Size): boolean;
 }

package/src/LayoutInfo.ts

@@ -15,9 +15,9 @@ import {Rect} from './Rect';
 
 /**
  * Instances of this lightweight class are created by {@link Layout} subclasses
- * to represent each view in the {@link CollectionView}. LayoutInfo objects describe
+ * to represent each view in the {@link Virtualizer}. LayoutInfo objects describe
  * various properties of a view, such as its position and size, and style information.
- * The collection view uses this information when creating actual views to display.
+ * The virtualizer uses this information when creating actual views to display.
  */
 export class LayoutInfo {
   /**

package/src/OverscanManager.ts

@@ -13,30 +13,14 @@
 import {Point} from './Point';
 import {Rect} from './Rect';
 
-class RollingAverage {
-  private count: number = 0;
-  value: number = 0;
-  
-  addSample(sample: number) {
-    this.count++;
-    this.value += (sample - this.value) / this.count;
-  }
-}
-
 export class OverscanManager {
   private startTime = 0;
-  private averagePerf = new RollingAverage();
-  private averageTime = new RollingAverage();
-  private velocity = new Point(5, 5);
-  private overscanX = new RollingAverage();
-  private overscanY = new RollingAverage();
+  private velocity = new Point(0, 0);
   private visibleRect = new Rect();
   
   setVisibleRect(rect: Rect) {
     let time = performance.now() - this.startTime;
     if (time < 500) {
-      this.averageTime.addSample(time);
-
       if (rect.x !== this.visibleRect.x && time > 0) {
         this.velocity.x = (rect.x - this.visibleRect.x) / time;
       }
@@ -50,42 +34,21 @@ export class OverscanManager {
     this.visibleRect = rect;
   }
 
-  collectMetrics() {
-    let time = performance.now() - this.startTime;
-    if (time < 500) {
-      this.averagePerf.addSample(time);
-    }
-
-    if (this.visibleRect.height > 0) {
-      let o = Math.abs(this.velocity.y * (this.averageTime.value + this.averagePerf.value));  
-      this.overscanY.addSample(o);
-    }
-
-    if (this.visibleRect.width > 0) {
-      let o = Math.abs(this.velocity.x * (this.averageTime.value + this.averagePerf.value));  
-      this.overscanX.addSample(o);
-    }
-  }
-
   getOverscannedRect() {
     let overscanned = this.visibleRect.copy();
 
-    let overscanY = Math.round(Math.min(this.visibleRect.height * 2, this.overscanY.value) / 100) * 100;
-    if (this.velocity.y > 0) {
-      overscanned.y -= overscanY * 0.2;
-      overscanned.height += overscanY + overscanY * 0.2;
-    } else {
+    let overscanY = this.visibleRect.height / 3;
+    overscanned.height += overscanY;
+    if (this.velocity.y < 0) {
       overscanned.y -= overscanY;
-      overscanned.height += overscanY + overscanY * 0.2;
     }
 
-    let overscanX = Math.round(Math.min(this.visibleRect.width * 2, this.overscanX.value) / 100) * 100;
-    if (this.velocity.x > 0) {
-      overscanned.x -= overscanX * 0.2;
-      overscanned.width += overscanX + overscanX * 0.2;
-    } else {
-      overscanned.x -= overscanX;
-      overscanned.width += overscanX + overscanX * 0.2;
+    if (this.velocity.x !== 0) {
+      let overscanX = this.visibleRect.width / 3;
+      overscanned.width += overscanX;
+      if (this.velocity.x < 0) {
+        overscanned.x -= overscanX;
+      }
     }
 
     return overscanned;

package/src/ReusableView.ts

@@ -17,20 +17,17 @@ import {Virtualizer} from './Virtualizer';
 let KEY = 0;
 
 /**
- * [CollectionView]{@link CollectionView} creates instances of the [ReusableView]{@link ReusableView} class to
- * represent views currently being displayed. ReusableViews manage a DOM node, handle
- * applying {@link LayoutInfo} objects to the view, and render content
- * as needed. Subclasses must implement the {@link render} method at a
- * minimum. Other methods can be overridden to customize behavior.
+ * [Virtualizer]{@link Virtualizer} creates instances of the [ReusableView]{@link ReusableView} class to
+ * represent views currently being displayed.
  */
 export class ReusableView<T extends object, V> {
-  /** The CollectionVirtualizer this view is a part of. */
+  /** The Virtualizer this view is a part of. */
   virtualizer: Virtualizer<T, V, unknown>;
 
   /** The LayoutInfo this view is currently representing. */
   layoutInfo: LayoutInfo | null;
 
-  /** The content currently being displayed by this view, set by the collection view. */
+  /** The content currently being displayed by this view, set by the virtualizer. */
   content: T;
 
   rendered: V;
@@ -38,9 +35,16 @@ export class ReusableView<T extends object, V> {
   viewType: string;
   key: Key;
 
+  parent: ReusableView<T, V> | null;
+  children: Set<ReusableView<T, V>>;
+  reusableViews: Map<string, ReusableView<T, V>[]>;
+
   constructor(virtualizer: Virtualizer<T, V, unknown>) {
     this.virtualizer = virtualizer;
     this.key = ++KEY;
+    this.parent = null;
+    this.children = new Set();
+    this.reusableViews = new Map();
   }
 
   /**
@@ -51,4 +55,29 @@ export class ReusableView<T extends object, V> {
     this.rendered = null;
     this.layoutInfo = null;
   }
+
+  getReusableView(reuseType: string) {
+    // Reusable view queue should be FIFO so that DOM order remains consistent during scrolling.
+    // For example, cells within a row should remain in the same order even if the row changes contents.
+    // The cells within a row are removed from their parent in order. If the row is reused, the cells
+    // should be reused in the new row in the same order they were before.
+    let reusable = this.reusableViews.get(reuseType);
+    let view = reusable?.length > 0
+      ? reusable.shift()
+      : new ReusableView<T, V>(this.virtualizer);
+
+    view.viewType = reuseType;
+    view.parent = this;
+    return view;
+  }
+
+  reuseChild(child: ReusableView<T, V>) {
+    child.prepareForReuse();
+    let reusable = this.reusableViews.get(child.viewType);
+    if (!reusable) {
+      reusable = [];
+      this.reusableViews.set(child.viewType, reusable);
+    }
+    reusable.push(child);
+  }
 }