@shopify/flash-list 1.8.0 → 2.0.0-alpha.2

package/src/recyclerview/hooks/useUnmountFlag.ts

@@ -0,0 +1,26 @@
+import { useRef, useLayoutEffect } from "react";
+
+/**
+ * Hook that provides a way to track component unmounting state.
+ * This hook is particularly useful for preventing state updates or side effects
+ * after a component has unmounted, helping to avoid memory leaks and race conditions.
+ *
+ * @returns A ref containing a boolean flag that indicates whether the component is unmounted
+ *         (true) or mounted (false)
+ */
+export const useUnmountFlag = () => {
+  // Create a ref to store the unmount state
+  // Using ref ensures the value persists between renders without causing re-renders
+  const isUnmounted = useRef(false);
+
+  // Use layoutEffect to set up cleanup on unmount
+  // This ensures the flag is set before any other cleanup effects run
+  useLayoutEffect(() => {
+    // Cleanup function that runs when the component unmounts
+    return () => {
+      isUnmounted.current = true;
+    };
+  }, []);
+
+  return isUnmounted;
+};

package/src/recyclerview/layout-managers/GridLayoutManager.ts

@@ -0,0 +1,215 @@
+import {
+  LayoutParams,
+  RVDimension,
+  RVLayout,
+  RVLayoutInfo,
+  RVLayoutManager,
+} from "./LayoutManager";
+
+/**
+ * GridLayoutManager implementation that arranges items in a grid pattern.
+ * Items are placed in rows and columns, with support for items spanning multiple columns.
+ */
+export class RVGridLayoutManagerImpl extends RVLayoutManager {
+  /** The width of the bounded area for the grid */
+  private boundedSize: number;
+
+  constructor(params: LayoutParams, previousLayoutManager?: RVLayoutManager) {
+    super(params, previousLayoutManager);
+    this.boundedSize = params.windowSize.width;
+  }
+
+  /**
+   * Updates layout parameters and triggers recomputation if necessary.
+   * @param params New layout parameters
+   */
+  updateLayoutParams(params: LayoutParams): void {
+    const prevNumColumns = this.maxColumns;
+    super.updateLayoutParams(params);
+    if (
+      this.boundedSize !== params.windowSize.width ||
+      prevNumColumns !== params.maxColumns
+    ) {
+      this.boundedSize = params.windowSize.width;
+      if (this.layouts.length > 0) {
+        //update all widths
+        for (let i = 0; i < this.layouts.length; i++) {
+          this.layouts[i].width = this.getWidth(i);
+        }
+        //console.log("-----> recomputeLayouts");
+
+        this.recomputeLayouts(0, this.layouts.length - 1);
+        this.requiresRepaint = true;
+      }
+    }
+  }
+
+  /**
+   * Processes layout information for items, updating their dimensions.
+   * @param layoutInfo Array of layout information for items
+   * @param itemCount Total number of items in the list
+   */
+  processLayoutInfo(layoutInfo: RVLayoutInfo[], itemCount: number) {
+    for (const info of layoutInfo) {
+      const { index, dimensions } = info;
+      const layout = this.layouts[index];
+      layout.height = dimensions.height;
+      layout.isHeightMeasured = true;
+      layout.isWidthMeasured = true;
+    }
+  }
+
+  /**
+   * Estimates layout dimensions for an item at the given index.
+   * @param index Index of the item to estimate layout for
+   */
+  estimateLayout(index: number) {
+    const layout = this.layouts[index];
+    layout.width = this.getWidth(index);
+    layout.height = this.getEstimatedHeight(index);
+
+    layout.isWidthMeasured = true;
+    layout.enforcedWidth = true;
+  }
+
+  /**
+   * Returns the total size of the layout area.
+   * @returns RVDimension containing width and height of the layout
+   */
+  getLayoutSize(): RVDimension {
+    if (this.layouts.length === 0) return { width: 0, height: 0 };
+    const lastRowTallestItem = this.processAndReturnTallestItemInRow(
+      this.layouts.length - 1
+    );
+    return {
+      width: this.boundedSize,
+      height: lastRowTallestItem.y + lastRowTallestItem.height,
+    };
+  }
+
+  /**
+   * Recomputes layouts for items in the given range.
+   * @param startIndex Starting index of items to recompute
+   * @param endIndex Ending index of items to recompute
+   */
+  recomputeLayouts(startIndex: number, endIndex: number): void {
+    const newStartIndex = this.locateFirstNeighbourIndex(startIndex);
+    const startVal = this.getLayout(newStartIndex);
+
+    let startX = startVal.x;
+    let startY = startVal.y;
+
+    for (let i = newStartIndex; i <= endIndex; i++) {
+      const layout = this.getLayout(i);
+      if (!this.checkBounds(startX, layout.width)) {
+        const tallestItem = this.processAndReturnTallestItemInRow(i);
+        startY = tallestItem.y + tallestItem.height;
+        startX = 0;
+      }
+
+      layout.x = startX;
+      layout.y = startY;
+      startX += layout.width;
+    }
+  }
+
+  /**
+   * Calculates the width of an item based on its span.
+   * @param index Index of the item
+   * @returns Width of the item
+   */
+  private getWidth(index: number): number {
+    const span = this.getSpanSizeInfo(index).span ?? 1;
+    return (this.boundedSize / this.maxColumns) * span;
+  }
+
+  /**
+   * Processes items in a row and returns the tallest item.
+   * Also handles height normalization for items in the same row.
+   * Tallest item per row helps in forcing tallest items height on neighbouring items.
+   * @param index Index of the last item in the row
+   * @returns The tallest item in the row
+   */
+  private processAndReturnTallestItemInRow(index: number): RVLayout {
+    const startIndex = this.locateFirstNeighbourIndex(index);
+    const y = this.layouts[startIndex].y;
+    let tallestItem: RVLayout | undefined;
+    let maxHeight = 0;
+    let i = startIndex;
+    let isMeasured = false;
+    // TODO: Manage precision problems
+    while (Math.ceil(this.layouts[i].y) === Math.ceil(y)) {
+      const layout = this.layouts[i];
+      isMeasured = isMeasured || Boolean(layout.isHeightMeasured);
+      maxHeight = Math.max(maxHeight, layout.height);
+      if (
+        layout.height > (layout.minHeight ?? 0) &&
+        layout.height > (tallestItem?.height ?? 0)
+      ) {
+        tallestItem = layout;
+      }
+
+      i++;
+      if (i >= this.layouts.length) {
+        break;
+      }
+    }
+
+    tallestItem = tallestItem ?? this.layouts[startIndex];
+
+    if (!isMeasured) {
+      return tallestItem;
+    }
+
+    if (tallestItem) {
+      let targetHeight = tallestItem.height;
+      if (maxHeight - tallestItem.height > 1) {
+        targetHeight = 0;
+        this.requiresRepaint = true;
+      }
+      i = startIndex;
+      // TODO: Manage precision problems
+      while (Math.ceil(this.layouts[i].y) === Math.ceil(y)) {
+        this.layouts[i].minHeight = targetHeight;
+        if (targetHeight > 0) {
+          this.layouts[i].height = targetHeight;
+        }
+        i++;
+        if (i >= this.layouts.length) {
+          break;
+        }
+      }
+      tallestItem.minHeight = 0;
+    }
+    return tallestItem;
+  }
+
+  /**
+   * Checks if an item can fit within the bounded width.
+   * @param itemX Starting X position of the item
+   * @param width Width of the item
+   * @returns True if the item fits within bounds
+   */
+  private checkBounds(itemX: number, width: number): boolean {
+    // TODO: Manage precision problems
+    return itemX + width <= this.boundedSize + 0.9;
+  }
+
+  /**
+   * Locates the index of the first item in the current row.
+   * @param startIndex Index to start searching from
+   * @returns Index of the first item in the row
+   */
+  private locateFirstNeighbourIndex(startIndex: number): number {
+    if (startIndex === 0) {
+      return 0;
+    }
+    let i = startIndex - 1;
+    for (; i >= 0; i--) {
+      if (this.layouts[i].x === 0) {
+        break;
+      }
+    }
+    return Math.max(i, 0);
+  }
+}