@shopify/flash-list 2.0.0-alpha.9 → 2.0.0-rc.10

package/src/recyclerview/RecyclerViewManager.ts

@@ -3,103 +3,98 @@ import ViewabilityManager from "../viewability/ViewabilityManager";
 import { ConsecutiveNumbers } from "./helpers/ConsecutiveNumbers";
 import { RVGridLayoutManagerImpl } from "./layout-managers/GridLayoutManager";
 import {
+  LayoutParams,
   RVDimension,
   RVLayoutInfo,
   RVLayoutManager,
+  SpanSizeInfo,
 } from "./layout-managers/LayoutManager";
 import { RVLinearLayoutManagerImpl } from "./layout-managers/LinearLayoutManager";
 import { RVMasonryLayoutManagerImpl } from "./layout-managers/MasonryLayoutManager";
-import { RecycleKeyManagerImpl, RecycleKeyManager } from "./RecycleKeyManager";
 import { RecyclerViewProps } from "./RecyclerViewProps";
 import {
   RVEngagedIndicesTracker,
   RVEngagedIndicesTrackerImpl,
   Velocity,
 } from "./helpers/EngagedIndicesTracker";
-
-// Abstracts layout manager, key manager and viewability manager and generates render stack (progressively on load)
+import { RenderStackManager } from "./RenderStackManager";
+// Abstracts layout manager, render stack manager and viewability manager and generates render stack (progressively on load)
 export class RecyclerViewManager<T> {
   private initialDrawBatchSize = 1;
   private engagedIndicesTracker: RVEngagedIndicesTracker;
-  private recycleKeyManager: RecycleKeyManager;
+  private renderStackManager: RenderStackManager;
   private layoutManager?: RVLayoutManager;
   // Map of index to key
-  private renderStack: Map<number, string> = new Map();
   private isFirstLayoutComplete = false;
   private hasRenderedProgressively = false;
-  private props: RecyclerViewProps<T>;
+  private propsRef: RecyclerViewProps<T>;
   private itemViewabilityManager: ViewabilityManager<T>;
-  private allocatedKeyTracker: Set<string> = new Set();
+  private _isDisposed = false;
+  private _isLayoutManagerDirty = false;
+  private _animationOptimizationsEnabled = false;
 
-  public disableRecycling = false;
   public firstItemOffset = 0;
   public ignoreScrollEvents = false;
 
+  public get animationOptimizationsEnabled() {
+    return this._animationOptimizationsEnabled;
+  }
+
+  public set animationOptimizationsEnabled(value: boolean) {
+    this._animationOptimizationsEnabled = value;
+    this.renderStackManager.disableRecycling = value;
+  }
+
+  public get isOffsetProjectionEnabled() {
+    return this.engagedIndicesTracker.enableOffsetProjection;
+  }
+
+  public get isDisposed() {
+    return this._isDisposed;
+  }
+
   constructor(props: RecyclerViewProps<T>) {
-    this.props = props;
+    this.getStableId = this.getStableId.bind(this);
+    this.getItemType = this.getItemType.bind(this);
+    this.overrideItemLayout = this.overrideItemLayout.bind(this);
+    this.propsRef = props;
     this.engagedIndicesTracker = new RVEngagedIndicesTrackerImpl();
-    this.recycleKeyManager = new RecycleKeyManagerImpl();
+    this.renderStackManager = new RenderStackManager(
+      props.maxItemsInRecyclePool
+    );
     this.itemViewabilityManager = new ViewabilityManager<T>(this as any);
   }
 
   // updates render stack based on the engaged indices which are sorted. Recycles unused keys.
-  // TODO: Write comprehensive tests for this function
   private updateRenderStack = (engagedIndices: ConsecutiveNumbers): void => {
-    // console.log("updateRenderStack", engagedIndices);
-
-    this.allocatedKeyTracker.clear();
-    const newRenderStack = new Map<number, string>();
-    for (const [index, key] of this.renderStack) {
-      if (!engagedIndices.includes(index)) {
-        this.recycleKeyManager.recycleKey(key);
-      }
-    }
-    if (this.disableRecycling) {
-      this.recycleKeyManager.clearPool();
-    }
-    for (const index of engagedIndices) {
-      const currentKey = this.renderStack.get(index);
-
-      if (
-        currentKey &&
-        !this.disableRecycling &&
-        !this.allocatedKeyTracker.has(currentKey)
-      ) {
-        this.recycleKeyManager.recycleKey(currentKey);
-      }
+    this.renderStackManager.sync(
+      this.getStableId,
+      this.getItemType,
+      engagedIndices,
+      this.getDataLength()
+    );
+  };
 
-      const newKey = this.recycleKeyManager.getKey(
-        this.getItemType(index),
-        this.getStableId(index),
-        currentKey
-      );
-      this.allocatedKeyTracker.add(newKey);
-      newRenderStack.set(index, newKey);
-    }
-    //  DANGER
-    for (const [index, key] of this.renderStack) {
-      if (
-        this.recycleKeyManager.hasKeyInPool(key) &&
-        !newRenderStack.has(index) &&
-        index < (this.props.data?.length ?? 0)
-      ) {
-        this.allocatedKeyTracker.add(key);
-        newRenderStack.set(index, key);
-      }
-    }
+  get props() {
+    return this.propsRef;
+  }
 
-    this.renderStack = newRenderStack;
-  };
+  setOffsetProjectionEnabled(value: boolean) {
+    this.engagedIndicesTracker.enableOffsetProjection = value;
+  }
 
   updateProps(props: RecyclerViewProps<T>) {
-    this.props = props;
+    this.propsRef = props;
     this.engagedIndicesTracker.drawDistance =
       props.drawDistance ?? this.engagedIndicesTracker.drawDistance;
-    if (this.props.drawDistance === 0) {
+    if (this.propsRef.drawDistance === 0) {
       this.initialDrawBatchSize = 1;
     } else {
       this.initialDrawBatchSize = (props.numColumns ?? 1) * 2;
     }
+    this.initialDrawBatchSize =
+      this.propsRef.overrideProps?.initialDrawBatchSize ??
+      this.initialDrawBatchSize;
   }
 
   /**
@@ -111,7 +106,7 @@ export class RecyclerViewManager<T> {
     offset: number,
     velocity?: Velocity
   ): ConsecutiveNumbers | undefined {
-    if (this.layoutManager) {
+    if (this.layoutManager && !this._isDisposed) {
       const engagedIndices = this.engagedIndicesTracker.updateScrollOffset(
         offset - this.firstItemOffset,
         velocity,
@@ -126,6 +121,10 @@ export class RecyclerViewManager<T> {
     return undefined;
   }
 
+  updateAverageRenderTime(time: number) {
+    this.engagedIndicesTracker.averageRenderTime = time;
+  }
+
   getIsFirstLayoutComplete() {
     return this.isFirstLayoutComplete;
   }
@@ -139,6 +138,17 @@ export class RecyclerViewManager<T> {
     return this.layoutManager.getLayout(index);
   }
 
+  tryGetLayout(index: number) {
+    if (
+      this.layoutManager &&
+      index >= 0 &&
+      index < this.layoutManager.getLayoutCount()
+    ) {
+      return this.layoutManager.getLayout(index);
+    }
+    return undefined;
+  }
+
   // Doesn't include header / foot etc
   getChildContainerDimensions() {
     if (!this.layoutManager) {
@@ -150,7 +160,7 @@ export class RecyclerViewManager<T> {
   }
 
   getRenderStack() {
-    return this.renderStack;
+    return this.renderStackManager.getRenderStack();
   }
 
   getWindowSize() {
@@ -170,10 +180,10 @@ export class RecyclerViewManager<T> {
   getMaxScrollOffset() {
     return Math.max(
       0,
-      (this.props.horizontal
+      (this.propsRef.horizontal
         ? this.getChildContainerDimensions().width
         : this.getChildContainerDimensions().height) -
-        (this.props.horizontal
+        (this.propsRef.horizontal
           ? this.getWindowSize().width
           : this.getWindowSize().height) +
         this.firstItemOffset
@@ -189,46 +199,43 @@ export class RecyclerViewManager<T> {
     this.engagedIndicesTracker.setScrollDirection(scrollDirection);
   }
 
+  resetVelocityCompute() {
+    this.engagedIndicesTracker.resetVelocityHistory();
+  }
+
   updateLayoutParams(windowSize: RVDimension, firstItemOffset: number) {
     this.firstItemOffset = firstItemOffset;
     const LayoutManagerClass = this.getLayoutManagerClass();
     if (
       this.layoutManager &&
       Boolean(this.layoutManager?.isHorizontal()) !==
-        Boolean(this.props.horizontal)
+        Boolean(this.propsRef.horizontal)
     ) {
       throw new Error(
         "Horizontal prop cannot be toggled, you can use a key on FlashList to recreate it."
       );
     }
+    if (this._isLayoutManagerDirty) {
+      this.layoutManager = undefined;
+      this._isLayoutManagerDirty = false;
+    }
+    const layoutManagerParams: LayoutParams = {
+      windowSize,
+      maxColumns: this.propsRef.numColumns ?? 1,
+      horizontal: Boolean(this.propsRef.horizontal),
+      optimizeItemArrangement: this.propsRef.optimizeItemArrangement ?? true,
+      overrideItemLayout: this.overrideItemLayout,
+      getItemType: this.getItemType,
+    };
     if (!(this.layoutManager instanceof LayoutManagerClass)) {
       // console.log("-----> new LayoutManagerClass");
 
       this.layoutManager = new LayoutManagerClass(
-        {
-          windowSize,
-          maxColumns: this.props.numColumns ?? 1,
-          horizontal: Boolean(this.props.horizontal),
-          optimizeItemArrangement: this.props.optimizeItemArrangement ?? true,
-          overrideItemLayout: (index, layout) => {
-            this.props?.overrideItemLayout?.(
-              layout,
-              this.props.data![index],
-              index,
-              this.props.numColumns ?? 1,
-              this.props.extraData
-            );
-          },
-        },
+        layoutManagerParams,
         this.layoutManager
       );
     } else {
-      this.layoutManager.updateLayoutParams({
-        windowSize,
-        maxColumns: this.props.numColumns ?? 1,
-        horizontal: Boolean(this.props.horizontal),
-        optimizeItemArrangement: this.props.optimizeItemArrangement ?? true,
-      });
+      this.layoutManager.updateLayoutParams(layoutManagerParams);
     }
   }
 
@@ -236,7 +243,7 @@ export class RecyclerViewManager<T> {
     return this.layoutManager !== undefined;
   }
 
-  getVisibleIndices() {
+  computeVisibleIndices() {
     if (!this.layoutManager) {
       throw new Error(
         "LayoutManager is not initialized, visible indices are not unavailable"
@@ -274,9 +281,9 @@ export class RecyclerViewManager<T> {
     // Using higher buffer for masonry to avoid missing items
     this.itemViewabilityManager.shouldListenToVisibleIndices &&
       this.itemViewabilityManager.updateViewableItems(
-        this.props.masonry
+        this.propsRef.masonry
           ? this.engagedIndicesTracker.getEngagedIndices().toArray()
-          : this.getVisibleIndices().toArray()
+          : this.computeVisibleIndices().toArray()
       );
   }
 
@@ -290,7 +297,7 @@ export class RecyclerViewManager<T> {
 
   processDataUpdate() {
     if (this.hasLayout()) {
-      this.modifyChildrenLayout([], this.props.data?.length ?? 0);
+      this.modifyChildrenLayout([], this.propsRef.data?.length ?? 0);
       if (!this.recomputeEngagedIndices()) {
         // recomputeEngagedIndices will update the render stack if there are any changes in the engaged indices.
         // It's important to update render stack so that elements are assgined right keys incase items were deleted.
@@ -303,34 +310,53 @@ export class RecyclerViewManager<T> {
     return this.updateScrollOffset(this.getAbsoluteLastScrollOffset());
   }
 
+  restoreIfNeeded() {
+    if (this._isDisposed) {
+      this._isDisposed = false;
+    }
+  }
+
   dispose() {
+    this._isDisposed = true;
     this.itemViewabilityManager.dispose();
   }
 
+  markLayoutManagerDirty() {
+    this._isLayoutManagerDirty = true;
+  }
+
   getInitialScrollIndex() {
     return (
-      this.props.initialScrollIndex ??
-      (this.props.maintainVisibleContentPosition?.startRenderingFromBottom
+      this.propsRef.initialScrollIndex ??
+      (this.propsRef.maintainVisibleContentPosition?.startRenderingFromBottom
         ? this.getDataLength() - 1
         : undefined)
     );
   }
 
+  shouldMaintainVisibleContentPosition() {
+    // Return true if maintainVisibleContentPosition is enabled and not horizontal
+    return (
+      !this.propsRef.maintainVisibleContentPosition?.disabled &&
+      !this.propsRef.horizontal
+    );
+  }
+
   getDataLength() {
-    return this.props.data?.length ?? 0;
+    return this.propsRef.data?.length ?? 0;
   }
 
   private getLayoutManagerClass() {
     // throw errors for incompatible props
-    if (this.props.masonry && this.props.horizontal) {
+    if (this.propsRef.masonry && this.propsRef.horizontal) {
       throw new Error("Masonry and horizontal props are incompatible");
     }
-    if ((this.props.numColumns ?? 1) > 1 && this.props.horizontal) {
+    if ((this.propsRef.numColumns ?? 1) > 1 && this.propsRef.horizontal) {
       throw new Error("numColumns and horizontal props are incompatible");
     }
-    return this.props.masonry
+    return this.propsRef.masonry
       ? RVMasonryLayoutManagerImpl
-      : (this.props.numColumns ?? 1) > 1 && !this.props.horizontal
+      : (this.propsRef.numColumns ?? 1) > 1 && !this.propsRef.horizontal
       ? RVGridLayoutManagerImpl
       : RVLinearLayoutManagerImpl;
   }
@@ -344,7 +370,7 @@ export class RecyclerViewManager<T> {
     const initialItemLayout = this.layoutManager?.getLayout(
       initialScrollIndex ?? 0
     );
-    const initialItemOffset = this.props.horizontal
+    const initialItemOffset = this.propsRef.horizontal
       ? initialItemLayout?.x
       : initialItemLayout?.y;
 
@@ -369,7 +395,7 @@ export class RecyclerViewManager<T> {
     const layoutManager = this.layoutManager;
     if (layoutManager) {
       this.applyInitialScrollAdjustment();
-      const visibleIndices = this.getVisibleIndices();
+      const visibleIndices = this.computeVisibleIndices();
       // console.log("---------> visibleIndices", visibleIndices);
       this.hasRenderedProgressively = visibleIndices.every(
         (index) =>
@@ -390,7 +416,7 @@ export class RecyclerViewManager<T> {
             0,
             Math.min(
               visibleIndices.length,
-              this.renderStack.size + this.initialDrawBatchSize
+              this.getRenderStack().size + this.initialDrawBatchSize
             )
           )
         );
@@ -399,14 +425,25 @@ export class RecyclerViewManager<T> {
 
   private getItemType(index: number): string {
     return (
-      this.props.getItemType?.(this.props.data![index], index) ?? "default"
+      this.propsRef.getItemType?.(this.propsRef.data![index], index) ??
+      "default"
     ).toString();
   }
 
   private getStableId(index: number): string {
     return (
-      this.props.keyExtractor?.(this.props.data![index], index) ??
+      this.propsRef.keyExtractor?.(this.propsRef.data![index], index) ??
       index.toString()
     );
   }
+
+  private overrideItemLayout(index: number, layout: SpanSizeInfo) {
+    this.propsRef?.overrideItemLayout?.(
+      layout,
+      this.propsRef.data![index],
+      index,
+      this.propsRef.numColumns ?? 1,
+      this.propsRef.extraData
+    );
+  }
 }