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

package/src/__tests__/ConsecutiveNumbers.test.ts

@@ -0,0 +1,232 @@
+/* eslint-disable id-length */
+import { ConsecutiveNumbers } from "../recyclerview/helpers/ConsecutiveNumbers";
+
+describe("ConsecutiveNumbers", () => {
+  describe("constructor", () => {
+    it("should initialize with start and end indices", () => {
+      const numbers = new ConsecutiveNumbers(5, 10);
+      expect(numbers.startIndex).toBe(5);
+      expect(numbers.endIndex).toBe(10);
+    });
+  });
+
+  describe("EMPTY", () => {
+    it("should have correct values for EMPTY constant", () => {
+      expect(ConsecutiveNumbers.EMPTY.startIndex).toBe(-1);
+      expect(ConsecutiveNumbers.EMPTY.endIndex).toBe(-2);
+      expect(ConsecutiveNumbers.EMPTY.length).toBe(0);
+    });
+  });
+
+  describe("length", () => {
+    it("should return correct length for valid range", () => {
+      expect(new ConsecutiveNumbers(5, 10).length).toBe(6);
+      expect(new ConsecutiveNumbers(0, 0).length).toBe(1);
+    });
+
+    it("should return 0 for invalid range", () => {
+      expect(new ConsecutiveNumbers(5, 4).length).toBe(0);
+      expect(new ConsecutiveNumbers(10, 5).length).toBe(0);
+    });
+  });
+
+  describe("at", () => {
+    it("should return correct value at index", () => {
+      const numbers = new ConsecutiveNumbers(5, 10);
+      expect(numbers.at(0)).toBe(5);
+      expect(numbers.at(3)).toBe(8);
+      expect(numbers.at(5)).toBe(10);
+    });
+
+    it("should work with negative ranges", () => {
+      const numbers = new ConsecutiveNumbers(-3, 2);
+      expect(numbers.at(0)).toBe(-3);
+      expect(numbers.at(3)).toBe(0);
+      expect(numbers.at(5)).toBe(2);
+    });
+  });
+
+  describe("equals", () => {
+    it("should return true for identical ranges", () => {
+      const a = new ConsecutiveNumbers(5, 10);
+      const b = new ConsecutiveNumbers(5, 10);
+      expect(a.equals(b)).toBe(true);
+    });
+
+    it("should return false for different ranges", () => {
+      const a = new ConsecutiveNumbers(5, 10);
+      const b = new ConsecutiveNumbers(5, 11);
+      const c = new ConsecutiveNumbers(6, 10);
+      expect(a.equals(b)).toBe(false);
+      expect(a.equals(c)).toBe(false);
+    });
+
+    it("should handle empty ranges", () => {
+      expect(ConsecutiveNumbers.EMPTY.equals(ConsecutiveNumbers.EMPTY)).toBe(
+        true
+      );
+      expect(
+        ConsecutiveNumbers.EMPTY.equals(new ConsecutiveNumbers(1, 5))
+      ).toBe(false);
+    });
+  });
+
+  describe("toArray", () => {
+    it("should return correct array for valid range", () => {
+      expect(new ConsecutiveNumbers(5, 8).toArray()).toEqual([5, 6, 7, 8]);
+      expect(new ConsecutiveNumbers(0, 3).toArray()).toEqual([0, 1, 2, 3]);
+      expect(new ConsecutiveNumbers(-2, 1).toArray()).toEqual([-2, -1, 0, 1]);
+    });
+
+    it("should return empty array for invalid ranges", () => {
+      expect(new ConsecutiveNumbers(5, 4).toArray()).toEqual([]);
+      expect(ConsecutiveNumbers.EMPTY.toArray()).toEqual([]);
+    });
+  });
+
+  describe("includes", () => {
+    it("should return true for values in range", () => {
+      const numbers = new ConsecutiveNumbers(5, 10);
+      expect(numbers.includes(5)).toBe(true);
+      expect(numbers.includes(7)).toBe(true);
+      expect(numbers.includes(10)).toBe(true);
+    });
+
+    it("should return false for values outside range", () => {
+      const numbers = new ConsecutiveNumbers(5, 10);
+      expect(numbers.includes(4)).toBe(false);
+      expect(numbers.includes(11)).toBe(false);
+    });
+
+    it("should handle empty ranges", () => {
+      expect(ConsecutiveNumbers.EMPTY.includes(0)).toBe(false);
+    });
+  });
+
+  describe("indexOf", () => {
+    it("should return correct index for values in range", () => {
+      const numbers = new ConsecutiveNumbers(5, 10);
+      expect(numbers.indexOf(5)).toBe(0);
+      expect(numbers.indexOf(7)).toBe(2);
+      expect(numbers.indexOf(10)).toBe(5);
+    });
+
+    it("should return -1 for values outside range", () => {
+      const numbers = new ConsecutiveNumbers(5, 10);
+      expect(numbers.indexOf(4)).toBe(-1);
+      expect(numbers.indexOf(11)).toBe(-1);
+    });
+  });
+
+  describe("findValue", () => {
+    it("should find values matching predicate", () => {
+      const numbers = new ConsecutiveNumbers(5, 10);
+      expect(numbers.findValue((v) => v % 2 === 0)).toBe(6);
+      expect(numbers.findValue((v) => v > 8)).toBe(9);
+    });
+
+    it("should return undefined when no match found", () => {
+      const numbers = new ConsecutiveNumbers(5, 10);
+      expect(numbers.findValue((v) => v > 100)).toBe(undefined);
+    });
+
+    it("should provide index and array to predicate", () => {
+      const numbers = new ConsecutiveNumbers(5, 7);
+      const mockFn = jest.fn().mockReturnValue(false);
+      numbers.findValue(mockFn);
+      expect(mockFn).toHaveBeenCalledTimes(3);
+      expect(mockFn).toHaveBeenNthCalledWith(1, 5, 0, numbers);
+      expect(mockFn).toHaveBeenNthCalledWith(2, 6, 1, numbers);
+      expect(mockFn).toHaveBeenNthCalledWith(3, 7, 2, numbers);
+    });
+  });
+
+  describe("every", () => {
+    it("should return true when all values match predicate", () => {
+      const numbers = new ConsecutiveNumbers(5, 10);
+      expect(numbers.every((v) => v >= 5)).toBe(true);
+      expect(numbers.every((v) => v <= 10)).toBe(true);
+    });
+
+    it("should return false when some values do not match predicate", () => {
+      const numbers = new ConsecutiveNumbers(5, 10);
+      expect(numbers.every((v) => v % 2 === 0)).toBe(false);
+      expect(numbers.every((v) => v > 7)).toBe(false);
+    });
+
+    it("should provide index and array to predicate", () => {
+      const numbers = new ConsecutiveNumbers(5, 7);
+      const mockFn = jest.fn().mockReturnValue(true);
+      numbers.every(mockFn);
+      expect(mockFn).toHaveBeenCalledTimes(3);
+      expect(mockFn).toHaveBeenNthCalledWith(1, 5, 0, numbers);
+      expect(mockFn).toHaveBeenNthCalledWith(2, 6, 1, numbers);
+      expect(mockFn).toHaveBeenNthCalledWith(3, 7, 2, numbers);
+    });
+
+    it("should short-circuit when predicate returns false", () => {
+      const numbers = new ConsecutiveNumbers(5, 10);
+      const mockFn = jest.fn().mockImplementation((v) => v < 7);
+      numbers.every(mockFn);
+      expect(mockFn).toHaveBeenCalledTimes(3); // Should stop after v=7
+    });
+  });
+
+  describe("slice", () => {
+    it("should slice with both start and end", () => {
+      const numbers = new ConsecutiveNumbers(5, 10);
+      const sliced = numbers.slice(1, 4);
+      expect(sliced.startIndex).toBe(6);
+      expect(sliced.endIndex).toBe(8);
+      expect(sliced.length).toBe(3);
+    });
+
+    it("should slice with only start", () => {
+      const numbers = new ConsecutiveNumbers(5, 10);
+      const sliced = numbers.slice(2);
+      expect(sliced.startIndex).toBe(7);
+      expect(sliced.endIndex).toBe(10);
+      expect(sliced.length).toBe(4);
+    });
+
+    it("should handle out of bounds slices", () => {
+      const numbers = new ConsecutiveNumbers(5, 10);
+      const sliced = numbers.slice(0, 100);
+      expect(sliced.length).toBe(6);
+      expect(sliced.startIndex).toBe(5);
+      expect(sliced.endIndex).toBe(10);
+    });
+
+    it("should handle invalid slices", () => {
+      const numbers = new ConsecutiveNumbers(5, 10);
+      const sliced = numbers.slice(4, 3);
+      expect(sliced.length).toBe(0);
+      expect(sliced.startIndex).toBe(9);
+      expect(sliced.endIndex).toBe(8);
+    });
+  });
+
+  describe("iterator", () => {
+    it("should iterate over all values", () => {
+      const numbers = new ConsecutiveNumbers(5, 8);
+      const result = [];
+      for (const num of numbers) {
+        result.push(num);
+      }
+      expect(result).toEqual([5, 6, 7, 8]);
+    });
+
+    it("should handle empty ranges", () => {
+      const result = [];
+      for (const num of ConsecutiveNumbers.EMPTY) {
+        result.push(num);
+      }
+      expect(result).toEqual([]);
+    });
+
+    it("should work with spread operator", () => {
+      const numbers = new ConsecutiveNumbers(5, 8);
+      expect([...numbers]).toEqual([5, 6, 7, 8]);
+    });
+  });
+});

package/src/__tests__/GridLayoutManager.test.ts

@@ -0,0 +1,113 @@
+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

@@ -0,0 +1,60 @@
+import React from "react";
+import { render } from "@quilted/react-testing";
+
+import { RecyclerView } from "../recyclerview/RecyclerView";
+import { useFlashListContext } from "../recyclerview/RecyclerViewContextProvider";
+import { LayoutCommitObserver } from "../recyclerview/LayoutCommitObserver";
+
+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 = (
+      <RecyclerView
+        testID="parent"
+        data={[1]}
+        renderItem={() => (
+          <LayoutCommitObserver
+            onCommitLayoutEffect={() => {
+              commitLayoutEffectCount++;
+            }}
+          >
+            <RecyclerView
+              testID="child"
+              data={[1]}
+              renderItem={() => (
+                <LayoutCommitObserver
+                  onCommitLayoutEffect={() => {
+                    commitLayoutEffectCount++;
+                  }}
+                >
+                  <LayoutCommitObserver
+                    onCommitLayoutEffect={() => {
+                      commitLayoutEffectCount++;
+                    }}
+                  >
+                    <ChildComponent />
+                  </LayoutCommitObserver>
+                </LayoutCommitObserver>
+              )}
+            />
+          </LayoutCommitObserver>
+        )}
+      />
+    );
+
+    render(content);
+
+    expect(commitLayoutEffectCount).toBe(3);
+  });
+});

package/src/__tests__/LinearLayoutManager.test.ts

@@ -0,0 +1,227 @@
+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);
+    });
+  });
+});