@shopify/flash-list 2.0.4-alpha.1 → 2.2.0

package/src/__tests__/GridLayoutManager.test.ts

@@ -1,113 +0,0 @@
-import {
-  createPopulatedLayoutManager,
-  getAllLayouts,
-  LayoutManagerType,
-  createLayoutParams,
-} from "./helpers/createLayoutManager";
-
-describe("GridLayoutManager", () => {
-  const windowSize = { width: 400, height: 900 };
-  const defaultParams = { windowSize, maxColumns: 2 };
-
-  describe("Basic grid layout", () => {
-    it("should arrange items in rows with equal widths", () => {
-      const manager = createPopulatedLayoutManager(
-        LayoutManagerType.GRID,
-        4,
-        defaultParams
-      );
-      const layouts = getAllLayouts(manager);
-
-      expect(layouts[0].x).toBe(0);
-      expect(layouts[0].width).toBe(200);
-      expect(layouts[1].x).toBe(200);
-
-      expect(layouts[2].y).toBe(layouts[0].height);
-      expect(layouts[3].x).toBe(200);
-    });
-
-    it("should respect maxColumns configuration", () => {
-      const manager = createPopulatedLayoutManager(LayoutManagerType.GRID, 6, {
-        ...defaultParams,
-        maxColumns: 3,
-      });
-      const layouts = getAllLayouts(manager);
-
-      expect(layouts[0].width).toBeCloseTo(400 / 3);
-      expect(layouts[3].x).toBe(0);
-      expect(layouts[3].y).toBe(layouts[0].height);
-    });
-  });
-
-  describe("Multi-column items", () => {
-    it("should handle items spanning multiple columns", () => {
-      const manager = createPopulatedLayoutManager(LayoutManagerType.GRID, 3, {
-        ...defaultParams,
-        maxColumns: 3,
-        overrideItemLayout: (index, layout) => {
-          layout.span = index === 0 ? 2 : undefined;
-        },
-      });
-      const layouts = getAllLayouts(manager);
-
-      // First item spans 2 columns
-      expect(layouts[0].width).toBeCloseTo((400 / 3) * 2);
-      // Next item starts in third column
-      expect(layouts[1].x).toBeCloseTo((400 / 3) * 2);
-    });
-
-    it("should wrap items that exceed column count", () => {
-      const manager = createPopulatedLayoutManager(LayoutManagerType.GRID, 4, {
-        ...defaultParams,
-        overrideItemLayout: (index, layout) => {
-          layout.span = index % 2 === 0 ? 2 : 1;
-        },
-      });
-      const layouts = getAllLayouts(manager);
-
-      // Row 1: 2 columns (span 2 + span 2 would exceed 2 columns)
-      expect(layouts[0].width).toBe(400);
-      expect(layouts[1].x).toBe(0);
-      expect(layouts[1].y).toBe(layouts[0].height);
-      expect(layouts[2].x).toBe(0);
-      expect(layouts[2].y).toBe(layouts[1].height + layouts[0].height);
-    });
-  });
-
-  describe("Layout recalculations", () => {
-    it("should adjust layout when window size changes", () => {
-      const manager = createPopulatedLayoutManager(
-        LayoutManagerType.GRID,
-        4,
-        defaultParams
-      );
-
-      // Update window size
-      manager.updateLayoutParams(
-        createLayoutParams({
-          ...defaultParams,
-          windowSize: { width: 600, height: 900 },
-        })
-      );
-
-      const updatedWidth = getAllLayouts(manager)[0].width;
-      expect(updatedWidth).toBe(300); // 600 / 2 columns
-    });
-
-    it("should maintain positions when adding new items", () => {
-      const manager = createPopulatedLayoutManager(
-        LayoutManagerType.GRID,
-        2,
-        defaultParams
-      );
-      const initialLayouts = getAllLayouts(manager);
-
-      // Add two more items
-      manager.modifyLayout([], 4);
-
-      const updatedLayouts = getAllLayouts(manager);
-      expect(updatedLayouts[0]).toEqual(initialLayouts[0]);
-      expect(updatedLayouts[3].y).toBe(initialLayouts[0].height);
-    });
-  });
-});

package/src/__tests__/LayoutCommitObserver.test.tsx

@@ -1,63 +0,0 @@
-import React from "react";
-import { render } from "@quilted/react-testing";
-
-import { useFlashListContext } from "../recyclerview/RecyclerViewContextProvider";
-import { LayoutCommitObserver } from "../recyclerview/LayoutCommitObserver";
-import { FlashList } from "..";
-
-describe("LayoutCommitObserver", () => {
-  it("should not alter ref captured by child", () => {
-    const ChildComponent = () => {
-      const context = useFlashListContext();
-      expect(context?.getRef()?.props.testID).toBe("child");
-      expect(context?.getParentRef()?.props.testID).toBe("parent");
-      expect(context?.getScrollViewRef()?.props.testID).toBe("child");
-      expect(context?.getParentScrollViewRef()?.props.testID).toBe("parent");
-
-      return null;
-    };
-
-    let commitLayoutEffectCount = 0;
-
-    const content = (
-      <FlashList
-        testID="parent"
-        data={[1]}
-        renderItem={() => (
-          <LayoutCommitObserver
-            onCommitLayoutEffect={() => {
-              commitLayoutEffectCount++;
-            }}
-          >
-            <FlashList
-              testID="child"
-              data={[1]}
-              renderItem={() => (
-                <LayoutCommitObserver
-                  onCommitLayoutEffect={() => {
-                    commitLayoutEffectCount++;
-                  }}
-                >
-                  <LayoutCommitObserver
-                    onCommitLayoutEffect={() => {
-                      commitLayoutEffectCount++;
-                    }}
-                  >
-                    <ChildComponent />
-                  </LayoutCommitObserver>
-                </LayoutCommitObserver>
-              )}
-            />
-          </LayoutCommitObserver>
-        )}
-      />
-    );
-
-    const renderResult = render(content);
-
-    expect(commitLayoutEffectCount).toBe(3);
-
-    // Force unmount to trigger cleanup of async operations
-    renderResult.unmount();
-  });
-});

package/src/__tests__/LinearLayoutManager.test.ts

@@ -1,227 +0,0 @@
-import {
-  createPopulatedLayoutManager,
-  getAllLayouts,
-  LayoutManagerType,
-  createLayoutParams,
-  createLayoutManager,
-  createMockLayoutInfo,
-} from "./helpers/createLayoutManager";
-
-describe("LinearLayoutManager", () => {
-  const windowSize = { width: 400, height: 900 };
-  const defaultParams = { windowSize, horizontal: false };
-  const horizontalParams = { windowSize, horizontal: true };
-
-  describe("Vertical layout", () => {
-    it("should stack items vertically", () => {
-      const manager = createPopulatedLayoutManager(
-        LayoutManagerType.LINEAR,
-        3,
-        defaultParams,
-        100, // itemWidth
-        100 // itemHeight
-      );
-      const layouts = getAllLayouts(manager);
-
-      expect(layouts.length).toBe(3);
-      expect(layouts[0].y).toBe(0);
-      expect(layouts[1].y).toBe(100);
-      expect(layouts[2].y).toBe(200);
-      expect(layouts[0].x).toBe(0);
-      expect(layouts[0].width).toBe(400); // Should take full width
-    });
-
-    it("should handle variable item heights", () => {
-      const manager = createLayoutManager(
-        LayoutManagerType.LINEAR,
-        defaultParams
-      );
-      const layoutInfos = [
-        createMockLayoutInfo(0, 400, 100),
-        createMockLayoutInfo(1, 400, 150),
-        createMockLayoutInfo(2, 400, 50),
-      ];
-      manager.modifyLayout(layoutInfos, 3);
-      const layouts = getAllLayouts(manager);
-
-      expect(layouts[0].height).toBe(100);
-      expect(layouts[1].height).toBe(150);
-      expect(layouts[2].height).toBe(50);
-
-      expect(layouts[0].y).toBe(0);
-      expect(layouts[1].y).toBe(100); // 0 + 100
-      expect(layouts[2].y).toBe(250); // 100 + 150
-    });
-
-    it("should calculate total layout size correctly", () => {
-      const manager = createPopulatedLayoutManager(
-        LayoutManagerType.LINEAR,
-        3,
-        defaultParams,
-        100,
-        100
-      );
-      const layoutSize = manager.getLayoutSize();
-      expect(layoutSize.width).toBe(400);
-      expect(layoutSize.height).toBe(300); // 3 items * 100 height
-    });
-  });
-
-  describe("Horizontal layout", () => {
-    it("should stack items horizontally", () => {
-      const manager = createPopulatedLayoutManager(
-        LayoutManagerType.LINEAR,
-        3,
-        horizontalParams,
-        100, // itemWidth
-        100 // itemHeight - should take full height
-      );
-      const layouts = getAllLayouts(manager);
-
-      expect(layouts.length).toBe(3);
-      expect(layouts[0].x).toBe(0);
-      expect(layouts[1].x).toBe(100);
-      expect(layouts[2].x).toBe(200);
-      expect(layouts[0].y).toBe(0);
-      expect(layouts[0].minHeight).toBe(900); // Should take full height
-    });
-
-    it("should handle variable item widths", () => {
-      const manager = createLayoutManager(
-        LayoutManagerType.LINEAR,
-        horizontalParams
-      );
-      const layoutInfos = [
-        createMockLayoutInfo(0, 100, 900),
-        createMockLayoutInfo(1, 150, 900),
-        createMockLayoutInfo(2, 50, 900),
-      ];
-      manager.modifyLayout(layoutInfos, 3);
-      const layouts = getAllLayouts(manager);
-
-      expect(layouts[0].width).toBe(100);
-      expect(layouts[1].width).toBe(150);
-      expect(layouts[2].width).toBe(50);
-
-      expect(layouts[0].x).toBe(0);
-      expect(layouts[1].x).toBe(100); // 0 + 100
-      expect(layouts[2].x).toBe(250); // 100 + 150
-    });
-
-    it("should calculate total layout size correctly in horizontal mode", () => {
-      const manager = createPopulatedLayoutManager(
-        LayoutManagerType.LINEAR,
-        3,
-        horizontalParams,
-        100,
-        100
-      );
-      const layoutSize = manager.getLayoutSize();
-      expect(layoutSize.width).toBe(300); // 3 items * 100 width
-      expect(layoutSize.height).toBe(900);
-    });
-  });
-
-  describe("Layout modifications", () => {
-    it("should update layout when items are added", () => {
-      const manager = createPopulatedLayoutManager(
-        LayoutManagerType.LINEAR,
-        2,
-        defaultParams,
-        100,
-        100
-      );
-      const initialLayouts = getAllLayouts(manager);
-      expect(initialLayouts.length).toBe(2);
-
-      // Add one more item
-      const newLayoutInfo = [createMockLayoutInfo(2, 400, 120)];
-      manager.modifyLayout(newLayoutInfo, 3);
-
-      const updatedLayouts = getAllLayouts(manager);
-      expect(updatedLayouts.length).toBe(3);
-      expect(updatedLayouts[2].y).toBe(200); // 100 + 100
-      expect(updatedLayouts[2].height).toBe(120);
-      expect(manager.getLayoutSize().height).toBe(320); // 100 + 100 + 120
-    });
-
-    it("should update layout when items are removed", () => {
-      const manager = createPopulatedLayoutManager(
-        LayoutManagerType.LINEAR,
-        3,
-        defaultParams,
-        100,
-        100
-      );
-      expect(getAllLayouts(manager).length).toBe(3);
-      expect(manager.getLayoutSize().height).toBe(300);
-
-      // Remove the last item
-      manager.modifyLayout([], 2);
-
-      const updatedLayouts = getAllLayouts(manager);
-      expect(updatedLayouts.length).toBe(2);
-      expect(manager.getLayoutSize().height).toBe(200);
-    });
-
-    it("should handle replacing all items", () => {
-      const manager = createPopulatedLayoutManager(
-        LayoutManagerType.LINEAR,
-        3,
-        defaultParams,
-        100,
-        100
-      );
-
-      const newLayoutInfos = [
-        createMockLayoutInfo(0, 400, 50),
-        createMockLayoutInfo(1, 400, 60),
-      ];
-      manager.modifyLayout(newLayoutInfos, 2);
-
-      const layouts = getAllLayouts(manager);
-      expect(layouts.length).toBe(2);
-      expect(layouts[0].height).toBe(50);
-      expect(layouts[1].height).toBe(60);
-      expect(layouts[1].y).toBe(50);
-      expect(manager.getLayoutSize().height).toBe(110); // 50 + 60
-    });
-
-    it("should recalculate layout when window size changes", () => {
-      const manager = createPopulatedLayoutManager(
-        LayoutManagerType.LINEAR,
-        3,
-        defaultParams,
-        100,
-        100
-      );
-      const initialLayouts = getAllLayouts(manager);
-      expect(initialLayouts[0].width).toBe(400);
-
-      manager.updateLayoutParams(
-        createLayoutParams({
-          ...defaultParams,
-          windowSize: { width: 600, height: 900 },
-        })
-      );
-
-      const updatedLayouts = getAllLayouts(manager);
-      expect(updatedLayouts[0].width).toBe(600); // Width should adapt
-      expect(updatedLayouts[1].y).toBe(initialLayouts[1].y); // Vertical position shouldn't change
-    });
-  });
-
-  describe("Empty layout", () => {
-    it("should return zero size for empty layout", () => {
-      const manager = createLayoutManager(
-        LayoutManagerType.LINEAR,
-        defaultParams
-      );
-      manager.modifyLayout([], 0);
-      const layoutSize = manager.getLayoutSize();
-      expect(layoutSize.width).toBe(0);
-      expect(layoutSize.height).toBe(0);
-      expect(getAllLayouts(manager).length).toBe(0);
-    });
-  });
-});

package/src/__tests__/MasonryLayoutManager.test.ts

@@ -1,202 +0,0 @@
-import { RVLayoutManager } from "../recyclerview/layout-managers/LayoutManager";
-import { RVMasonryLayoutManagerImpl } from "../recyclerview/layout-managers/MasonryLayoutManager";
-
-import {
-  getAllLayouts,
-  LayoutManagerType,
-  createLayoutParams,
-  createLayoutManager,
-  createMockLayoutInfo,
-} from "./helpers/createLayoutManager";
-
-describe("MasonryLayoutManager", () => {
-  const windowSize = { width: 400, height: 900 };
-  const defaultParams = {
-    windowSize,
-    maxColumns: 2,
-    optimizeItemArrangement: true,
-  };
-
-  // Helper to get column heights
-  const getColumnHeights = (manager: RVLayoutManager): number[] => {
-    return (manager as RVMasonryLayoutManagerImpl)["columnHeights"];
-  };
-
-  describe("Vertical Masonry Layout", () => {
-    it("should distribute items into columns based on height", () => {
-      const manager = createLayoutManager(
-        LayoutManagerType.MASONRY,
-        defaultParams
-      );
-      const layoutInfos = [
-        createMockLayoutInfo(0, 200, 100), // Col 0
-        createMockLayoutInfo(1, 200, 150), // Col 1
-        createMockLayoutInfo(2, 200, 120), // Col 0 (shorter)
-        createMockLayoutInfo(3, 200, 80), // Col 1 (shorter)
-        createMockLayoutInfo(4, 200, 200), // Col 0 (shorter)
-      ];
-      manager.modifyLayout(layoutInfos, 5);
-      const layouts = getAllLayouts(manager);
-
-      expect(layouts[0].x).toBe(0);
-      expect(layouts[0].y).toBe(0);
-
-      expect(layouts[1].x).toBe(200); // Second column
-      expect(layouts[1].y).toBe(0);
-
-      expect(layouts[2].x).toBe(0); // Back to first column
-      expect(layouts[2].y).toBe(100); // Below item 0
-
-      expect(layouts[3].x).toBe(200); // Still first column
-      expect(layouts[3].y).toBe(150); // Below item 2 (100 + 120)
-
-      expect(layouts[4].x).toBe(0); // Second column
-      expect(layouts[4].y).toBe(220); // Below item 1
-    });
-
-    it("should respect maxColumns configuration", () => {
-      const manager = createLayoutManager(LayoutManagerType.MASONRY, {
-        ...defaultParams,
-        maxColumns: 3,
-      });
-      const layoutInfos = [
-        createMockLayoutInfo(0, 133, 100), // Col 0
-        createMockLayoutInfo(1, 133, 150), // Col 1
-        createMockLayoutInfo(2, 133, 120), // Col 2
-        createMockLayoutInfo(3, 133, 80), // Col 0
-      ];
-      manager.modifyLayout(layoutInfos, 4);
-      const layouts = getAllLayouts(manager);
-      const colWidth = windowSize.width / 3;
-
-      expect(layouts[0].x).toBeCloseTo(0);
-      expect(layouts[1].x).toBeCloseTo(colWidth);
-      expect(layouts[2].x).toBeCloseTo(colWidth * 2);
-      expect(layouts[3].x).toBeCloseTo(0); // Placed in the shortest column (Col 0)
-      expect(layouts[3].y).toBeCloseTo(100); // Below item 0
-    });
-
-    it("should calculate total layout size correctly", () => {
-      const manager = createLayoutManager(
-        LayoutManagerType.MASONRY,
-        defaultParams
-      );
-      const layoutInfos = [
-        createMockLayoutInfo(0, 200, 100), // Col 0
-        createMockLayoutInfo(1, 200, 150), // Col 1
-        createMockLayoutInfo(2, 200, 120), // Col 0
-      ];
-      manager.modifyLayout(layoutInfos, 3);
-      const layoutSize = manager.getLayoutSize();
-
-      expect(layoutSize.width).toBe(400);
-      // Height is the tallest column height
-      const heights = getColumnHeights(manager);
-      expect(layoutSize.height).toBeCloseTo(Math.max(...heights)); // Max of [220, 150]
-      expect(layoutSize.height).toBeCloseTo(220);
-    });
-  });
-
-  describe("Layout Modifications", () => {
-    it("should update layout when items are added", () => {
-      const manager = createLayoutManager(
-        LayoutManagerType.MASONRY,
-        defaultParams
-      );
-      const initialInfos = [
-        createMockLayoutInfo(0, 200, 100), // Col 0 H=100
-        createMockLayoutInfo(1, 200, 150), // Col 1 H=150
-      ];
-      manager.modifyLayout(initialInfos, 2);
-      expect(getAllLayouts(manager).length).toBe(2);
-      expect(getColumnHeights(manager)).toEqual([100, 150]);
-
-      // Add item, should go to Col 0
-      const newLayoutInfos = [createMockLayoutInfo(2, 200, 120)];
-      manager.modifyLayout(newLayoutInfos, 3);
-
-      const layouts = getAllLayouts(manager);
-      expect(layouts.length).toBe(3);
-      expect(layouts[2].x).toBe(0); // Col 0
-      expect(layouts[2].y).toBe(100); // Below item 0
-      expect(getColumnHeights(manager)).toEqual([220, 150]); // 100+120, 150
-    });
-
-    it("should handle removing items (requires full recalculation)", () => {
-      const manager = createLayoutManager(
-        LayoutManagerType.MASONRY,
-        defaultParams
-      );
-      const initialInfos = [
-        createMockLayoutInfo(0, 200, 100), // Col 0 H=100
-        createMockLayoutInfo(1, 200, 150), // Col 1 H=150
-        createMockLayoutInfo(2, 200, 120), // Col 0 H=220
-      ];
-      manager.modifyLayout(initialInfos, 3);
-      expect(getColumnHeights(manager)).toEqual([220, 150]);
-
-      // Remove item 2 (from Col 0) - Masonry usually recalculates fully
-      // We simulate this by passing the remaining items
-      const remainingInfos = [
-        createMockLayoutInfo(0, 200, 100),
-        createMockLayoutInfo(1, 200, 150),
-      ];
-      manager.modifyLayout(remainingInfos, 2);
-
-      const layouts = getAllLayouts(manager);
-      expect(layouts.length).toBe(2);
-      expect(getColumnHeights(manager)).toEqual([100, 150]); // Back to original state
-    });
-
-    it("should recalculate layout when window size changes", () => {
-      const manager = createLayoutManager(
-        LayoutManagerType.MASONRY,
-        defaultParams
-      );
-      const initialInfos = [
-        createMockLayoutInfo(0, 200, 100), // Col 0
-        createMockLayoutInfo(1, 200, 150), // Col 1
-        createMockLayoutInfo(2, 200, 120), // Col 0
-      ];
-      manager.modifyLayout(initialInfos, 3);
-      const initialLayouts = getAllLayouts(manager);
-      expect(initialLayouts[1].x).toBe(200);
-
-      // Change window size and columns
-      manager.updateLayoutParams(
-        createLayoutParams({
-          ...defaultParams,
-          maxColumns: 3,
-          windowSize: { width: 600, height: 900 },
-        })
-      );
-      // modifyLayout needs to be called again as dimensions depend on width
-      const updatedInfos = [
-        createMockLayoutInfo(0, 200, 100), // New width = 600/3 = 200
-        createMockLayoutInfo(1, 200, 150),
-        createMockLayoutInfo(2, 200, 120),
-      ];
-      manager.modifyLayout(updatedInfos, 3);
-
-      const updatedLayouts = getAllLayouts(manager);
-      expect(updatedLayouts[0].width).toBe(200);
-      expect(updatedLayouts[1].x).toBe(200); // Col 1 starts at 200
-      expect(updatedLayouts[2].x).toBe(400); // Col 2 starts at 400
-      expect(getColumnHeights(manager)).toEqual([100, 150, 120]);
-    });
-  });
-
-  describe("Empty Layout", () => {
-    it("should return zero size for empty layout", () => {
-      const manager = createLayoutManager(
-        LayoutManagerType.MASONRY,
-        defaultParams
-      );
-      manager.modifyLayout([], 0);
-      const layoutSize = manager.getLayoutSize();
-      expect(layoutSize.width).toBe(0);
-      expect(layoutSize.height).toBe(0);
-      expect(getAllLayouts(manager).length).toBe(0);
-    });
-  });
-});