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

package/src/__tests__/GridLayoutProviderWithProps.test.ts

@@ -1,179 +0,0 @@
-import { ScrollView } from "react-native";
-import { ProgressiveListView } from "recyclerlistview";
-
-import FlashList from "../FlashList";
-
-import { mountFlashList } from "./helpers/mountFlashList";
-
-describe("GridLayoutProviderWithProps", () => {
-  it("updates average window on layout manager change", () => {
-    const flashList = mountFlashList();
-    const oldAverageWindow = (flashList.instance as FlashList<any>).state
-      .layoutProvider["averageWindow"];
-
-    // width change from default 400 to 600 will force layout manager to change
-    flashList.find(ScrollView)?.trigger("onLayout", {
-      nativeEvent: { layout: { height: 900, width: 600 } },
-    });
-
-    const newAverageWindow =
-      flashList.instance.state.layoutProvider["averageWindow"];
-
-    expect(newAverageWindow).not.toBe(oldAverageWindow);
-    flashList.unmount();
-  });
-  it("average window's size is two times the number of items that will fill the screen", () => {
-    const flashList = mountFlashList({ numColumns: 2 });
-    expect(
-      flashList.instance.state.layoutProvider["averageWindow"]["inputValues"]
-        .length
-    ).toBe(20);
-    flashList.find(ScrollView)?.trigger("onLayout", {
-      nativeEvent: { layout: { height: 2000, width: 600 } },
-    });
-    expect(
-      flashList.instance.state.layoutProvider["averageWindow"]["inputValues"]
-        .length
-    ).toBe(40);
-    flashList.setProps({ numColumns: 1 });
-    expect(
-      flashList.instance.state.layoutProvider["averageWindow"]["inputValues"]
-        .length
-    ).toBe(20);
-    flashList.unmount();
-  });
-  it("average window should not be less than 6 in size", () => {
-    const flashList = mountFlashList();
-    flashList.find(ScrollView)?.trigger("onLayout", {
-      nativeEvent: { layout: { height: 100, width: 100 } },
-    });
-    expect(
-      flashList.instance.state.layoutProvider["averageWindow"]["inputValues"]
-        .length
-    ).toBe(6);
-    flashList.unmount();
-  });
-  it("vertical list: average should not update when widths change", () => {
-    const flashList = mountFlashList();
-    const layoutProvider = flashList.instance.state.layoutProvider;
-    const oldAverage = layoutProvider.averageItemSize;
-
-    layoutProvider.getLayoutManager()!.getLayouts()[0].width = 500;
-    flashList.find(ProgressiveListView)?.instance.onItemLayout(0);
-
-    expect(oldAverage).toBe(layoutProvider.averageItemSize);
-    flashList.unmount();
-  });
-  it("horizontal list: average should not update when heights change", () => {
-    const flashList = mountFlashList({ horizontal: true });
-    const layoutProvider = flashList.instance.state.layoutProvider;
-    const oldAverage = layoutProvider.averageItemSize;
-
-    layoutProvider.getLayoutManager()!.getLayouts()[0].height = 600;
-
-    // Can throw a no op set state warning. Should be handled in PLV.
-    flashList.find(ProgressiveListView)?.instance.onItemLayout(0);
-
-    expect(oldAverage).toBe(layoutProvider.averageItemSize);
-    flashList.unmount();
-  });
-  it("computes correct average", () => {
-    const flashList = mountFlashList();
-    const layoutProvider = flashList.instance.state.layoutProvider;
-    expect(layoutProvider.averageItemSize).toBe(200);
-
-    const layouts = layoutProvider.getLayoutManager()!.getLayouts();
-    const progressiveListView = flashList.find(ProgressiveListView);
-    layouts[0].height = 100;
-    layouts[1].height = 200;
-    layouts[2].height = 300;
-    layouts[3].height = 400;
-    progressiveListView?.instance.onItemLayout(0);
-    progressiveListView?.instance.onItemLayout(1);
-    progressiveListView?.instance.onItemLayout(2);
-    progressiveListView?.instance.onItemLayout(3);
-
-    // estimatedItemSize is treated as one of the values. That's why 240.
-    expect(layoutProvider.averageItemSize).toBe(240);
-    flashList.unmount();
-  });
-  it("updates all cached widths for vertical list and heights for horizontal list when orientation changes", () => {
-    const runCacheUpdateTest = (horizontal: boolean) => {
-      const flashList = mountFlashList({
-        data: new Array(20).fill("1"),
-        horizontal,
-      });
-      const progressiveListView = flashList.find(ProgressiveListView);
-      const layoutProvider = flashList.instance.state.layoutProvider;
-
-      layoutProvider
-        .getLayoutManager()!
-        .getLayouts()
-        .forEach((layout, index) => {
-          // marking layouts as if they're actual rendered sizes
-          progressiveListView?.instance.onItemLayout(index);
-
-          // checking size
-          if (horizontal) {
-            expect(layout.height).toBe(900);
-          } else {
-            expect(layout.width).toBe(400);
-          }
-        });
-
-      // simulates orientation change
-      flashList.find(ScrollView)?.trigger("onLayout", {
-        nativeEvent: { layout: { height: 400, width: 900 } },
-      });
-
-      layoutProvider
-        .getLayoutManager()!
-        .getLayouts()
-        .forEach((layout) => {
-          // making sure all widths or heights are updated
-          if (horizontal) {
-            expect(layout.height).toBe(400);
-          } else {
-            expect(layout.width).toBe(900);
-          }
-
-          // making sure extra keys don't make their way to layout unnecessarily
-          expect(Object.keys(layout).length).toBe(6);
-        });
-      flashList.unmount();
-    };
-    // vertical list
-    runCacheUpdateTest(false);
-    // horizontal list
-    runCacheUpdateTest(true);
-  });
-  it("expires if column count or padding changes", () => {
-    const flashList = mountFlashList();
-    const baseProps = flashList.instance.props;
-    expect(
-      flashList.instance.state.layoutProvider.updateProps({
-        ...baseProps,
-        contentContainerStyle: { paddingTop: 10 },
-      }).hasExpired
-    ).toBe(false);
-    expect(
-      flashList.instance.state.layoutProvider.updateProps({
-        ...baseProps,
-        contentContainerStyle: { paddingBottom: 10 },
-      }).hasExpired
-    ).toBe(false);
-    expect(
-      flashList.instance.state.layoutProvider.updateProps({
-        ...baseProps,
-        contentContainerStyle: { paddingLeft: 10 },
-      }).hasExpired
-    ).toBe(true);
-    flashList.instance.state.layoutProvider["_hasExpired"] = false;
-    expect(
-      flashList.instance.state.layoutProvider.updateProps({
-        ...baseProps,
-        numColumns: 2,
-      }).hasExpired
-    ).toBe(true);
-  });
-});

package/src/__tests__/MasonryFlashList.test.ts

@@ -1,292 +0,0 @@
-import { ScrollView, Text, View } from "react-native";
-import "@quilted/react-testing/matchers";
-import { ProgressiveListView } from "recyclerlistview";
-import React from "react";
-
-import {
-  MasonryFlashListProps,
-  MasonryFlashListRef,
-} from "../MasonryFlashList";
-import FlashList from "../FlashList";
-
-import { mountMasonryFlashList } from "./helpers/mountMasonryFlashList";
-
-describe("MasonryFlashList", () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-    jest.useFakeTimers();
-  });
-
-  it("renders items and has 3 internal lists", () => {
-    const masonryFlashList = mountMasonryFlashList();
-    expect(masonryFlashList.findAll(ProgressiveListView).length).toBe(3);
-    expect(masonryFlashList).toContainReactComponent(Text, { children: "One" });
-    expect(masonryFlashList).toContainReactComponent(ProgressiveListView, {
-      isHorizontal: false,
-    });
-    masonryFlashList.unmount();
-  });
-  it("invokes renderItem with columnIndex and columnSpan", () => {
-    const mockRenderItem = jest.fn(() => null);
-    const masonryFlashList = mountMasonryFlashList({
-      renderItem: mockRenderItem,
-      data: ["One", "Two", "Three"],
-      numColumns: 3,
-    });
-    expect(mockRenderItem).toHaveBeenCalledWith(
-      expect.objectContaining({
-        columnIndex: 0,
-        columnSpan: 1,
-      })
-    );
-
-    expect(mockRenderItem).toHaveBeenCalledWith(
-      expect.objectContaining({
-        columnIndex: 1,
-        columnSpan: 1,
-      })
-    );
-
-    expect(mockRenderItem).toHaveBeenCalledWith(
-      expect.objectContaining({
-        columnSpan: 1,
-        columnIndex: 2,
-      })
-    );
-    masonryFlashList.unmount();
-  });
-  it("raised onLoad event only when first internal child mounts", () => {
-    const onLoadMock = jest.fn();
-    const ref = React.createRef<MasonryFlashListRef<string>>();
-    const masonryFlashList = mountMasonryFlashList(
-      {
-        onLoad: onLoadMock,
-      },
-      ref
-    );
-    expect(onLoadMock).not.toHaveBeenCalled();
-    masonryFlashList.findAll(ProgressiveListView)[1]?.instance.onItemLayout(0);
-    expect(onLoadMock).toHaveBeenCalledTimes(1);
-
-    // on load shouldn't be passed to wrapper list
-    expect((ref.current as FlashList<string>).props.onLoad).toBeUndefined();
-    masonryFlashList.unmount();
-  });
-  it("can resize columns using getColumnFlex", () => {
-    const masonryFlashList = mountMasonryFlashList({
-      getColumnFlex: (_, column) => (column === 0 ? 1 : 3),
-    });
-    const progressiveListView =
-      masonryFlashList.find(ProgressiveListView)!.instance;
-    expect(progressiveListView.getLayout(0).width).toBe(100);
-    expect(progressiveListView.getLayout(1).width).toBe(300);
-
-    expect(masonryFlashList.findAll(ProgressiveListView).length).toBe(3);
-    masonryFlashList.findAll(ProgressiveListView).forEach((plv, index) => {
-      if (index === 1) {
-        expect(plv.instance.props.layoutSize.width).toBe(100);
-      }
-      if (index === 2) {
-        expect(plv.instance.props.layoutSize.width).toBe(300);
-      }
-    });
-    masonryFlashList.unmount();
-  });
-  it("mounts a single ScrollView", () => {
-    const masonryFlashList = mountMasonryFlashList();
-    expect(masonryFlashList.findAll(ScrollView)).toHaveLength(1);
-    masonryFlashList.unmount();
-  });
-  it("forwards single onScroll event to external listener", () => {
-    const onScrollMock = jest.fn();
-    const masonryFlashList = mountMasonryFlashList({
-      onScroll: onScrollMock,
-    });
-    masonryFlashList.find(ScrollView)?.instance.props.onScroll({
-      nativeEvent: { contentOffset: { x: 0, y: 0 } },
-    });
-    expect(onScrollMock).toHaveBeenCalledTimes(1);
-    masonryFlashList.unmount();
-  });
-  it("updates scroll offset of all internal lists", () => {
-    const onScrollMock = jest.fn();
-    const masonryFlashList = mountMasonryFlashList({
-      onScroll: onScrollMock,
-    });
-    masonryFlashList.find(ScrollView)?.instance.props.onScroll({
-      nativeEvent: { contentOffset: { x: 0, y: 100 } },
-    });
-    masonryFlashList.findAll(ProgressiveListView).forEach((list) => {
-      expect(list.instance.getCurrentScrollOffset()).toBe(100);
-    });
-    masonryFlashList.unmount();
-  });
-  it("has a valid ref object", () => {
-    const ref = React.createRef<MasonryFlashListRef<string>>();
-    const masonryFlashList = mountMasonryFlashList({}, ref);
-    expect(ref.current).toBeDefined();
-    masonryFlashList.unmount();
-  });
-  it("forwards overrideItemLayout to internal lists", () => {
-    const overrideItemLayout = jest.fn((layout) => {
-      layout.size = 300;
-    });
-    const masonryFlashList = mountMasonryFlashList({
-      overrideItemLayout,
-    });
-    expect(masonryFlashList.findAll(ProgressiveListView).length).toBe(3);
-    masonryFlashList.findAll(ProgressiveListView).forEach((list, index) => {
-      if (index !== 0) {
-        expect(list.instance.getLayout(0).height).toBe(300);
-      }
-    });
-    masonryFlashList.unmount();
-  });
-  it("forwards keyExtractor to internal list", () => {
-    const keyExtractor = (_: string, index: number) => (index + 1).toString();
-    const masonryFlashList = mountMasonryFlashList({
-      keyExtractor,
-    });
-    expect(masonryFlashList.findAll(ProgressiveListView).length).toBe(3);
-    expect(
-      masonryFlashList
-        .findAll(ProgressiveListView)[0]
-        .instance.props.dataProvider.getStableId(0)
-    ).toBe("0");
-    expect(
-      masonryFlashList
-        .findAll(ProgressiveListView)[1]
-        .instance.props.dataProvider.getStableId(0)
-    ).toBe("1");
-    expect(
-      masonryFlashList
-        .findAll(ProgressiveListView)[2]
-        .instance.props.dataProvider.getStableId(0)
-    ).toBe("2");
-    masonryFlashList.unmount();
-  });
-  it("correctly maps list indices to actual indices", () => {
-    const data = new Array(20).fill(0).map((_, index) => index.toString());
-    const getItemType = (item: string, index: number) => {
-      expect(index.toString()).toBe(item);
-      return 0;
-    };
-    const renderItem: MasonryFlashListProps<string>["renderItem"] = ({
-      item,
-      index,
-    }) => {
-      expect(index.toString()).toBe(item);
-      return null;
-    };
-    const overrideItemLayout: MasonryFlashListProps<string>["overrideItemLayout"] =
-      (layout, item: string, index: number) => {
-        expect(index.toString()).toBe(item);
-      };
-    const keyExtractor = (item: string, index: number) => {
-      expect(index.toString()).toBe(item);
-      return index.toString();
-    };
-    const onViewableItemsChanged: MasonryFlashListProps<string>["onViewableItemsChanged"] =
-      (info) => {
-        info.viewableItems.forEach((viewToken) => {
-          expect(viewToken.index?.toString()).toBe(viewToken.item);
-        });
-      };
-
-    const masonryFlashList = mountMasonryFlashList({
-      data,
-      renderItem,
-      getItemType,
-      overrideItemLayout,
-      keyExtractor,
-      onViewableItemsChanged,
-    });
-    jest.advanceTimersByTime(1000);
-    masonryFlashList.unmount();
-  });
-  it("internal list height should be derived from the parent and width from itself", () => {
-    const masonryFlashList = mountMasonryFlashList({
-      testID: "MasonryProxyScrollView",
-    });
-    expect(masonryFlashList.findAll(ProgressiveListView).length).toBe(3);
-    masonryFlashList.findAll(View).forEach((view: any) => {
-      view.props?.onLayout?.({
-        nativeEvent: { layout: { width: 500, height: 500 } },
-      });
-    });
-    masonryFlashList.findAll(ProgressiveListView).forEach((list, index) => {
-      if (index !== 0) {
-        expect(list.instance.getRenderedSize().width).toBe(500);
-        expect(list.instance.getRenderedSize().height).toBe(900);
-      }
-    });
-    masonryFlashList.unmount();
-  });
-  it("can optimize item arrangement", () => {
-    const columnCount = 3;
-    const data = new Array(999).fill(null).map((_, index) => {
-      return "1";
-    });
-    const masonryFlashList = mountMasonryFlashList({
-      data,
-      optimizeItemArrangement: true,
-      numColumns: columnCount,
-      overrideItemLayout(layout, _, index, __, ___?) {
-        layout.size = ((index * 10) % 100) + 100 / ((index % columnCount) + 1);
-      },
-    });
-    expect(masonryFlashList.findAll(ProgressiveListView).length).toBe(4);
-
-    // I've verified that the following values are correct by observing the algorithm in action
-    // Captured values will help prevent regression in the future
-    expect(
-      Math.floor(
-        masonryFlashList
-          .findAll(ProgressiveListView)[1]
-          .instance.getContentDimension().height
-      )
-    ).toBe(35306);
-    expect(
-      Math.floor(
-        masonryFlashList
-          .findAll(ProgressiveListView)[2]
-          .instance.getContentDimension().height
-      )
-    ).toBe(35313);
-    expect(
-      Math.floor(
-        masonryFlashList
-          .findAll(ProgressiveListView)[3]
-          .instance.getContentDimension().height
-      )
-    ).toBe(35339);
-  });
-  it("applies horizontal content container padding to the list", () => {
-    const masonryFlashList = mountMasonryFlashList({
-      numColumns: 4,
-      contentContainerStyle: { paddingHorizontal: 10 },
-    });
-    expect(masonryFlashList.findAll(ProgressiveListView).length).toBe(5);
-    masonryFlashList.findAll(ProgressiveListView).forEach((list, index) => {
-      if (index === 0) {
-        expect(list.instance.getRenderedSize().width).toBe(400);
-        expect(list.instance.getRenderedSize().height).toBe(900);
-      } else {
-        expect(list.instance.getRenderedSize().width).toBe(95);
-        expect(list.instance.getRenderedSize().height).toBe(900);
-      }
-    });
-    masonryFlashList.unmount();
-  });
-  it("divides columns equally if no getColumnFlex is passed", () => {
-    const masonryFlashList = mountMasonryFlashList({
-      numColumns: 4,
-    });
-    const progressiveListView =
-      masonryFlashList.find(ProgressiveListView)!.instance;
-    expect(progressiveListView.getLayout(0).width).toBe(100);
-    expect(progressiveListView.getLayout(1).width).toBe(100);
-    expect(progressiveListView.getLayout(2).width).toBe(100);
-    expect(progressiveListView.getLayout(3).width).toBe(100);
-  });
-});

package/src/__tests__/PlatformHelper.web.test.ts

@@ -1,45 +0,0 @@
-import {
-  getCellContainerPlatformStyles,
-  getItemAnimator,
-} from "../native/config/PlatformHelper.web";
-
-describe("Platform Helper Web", () => {
-  it("can compute right transform for web", () => {
-    const transformStyle = getCellContainerPlatformStyles(false, {
-      x: 20,
-      y: 70,
-    });
-    const transformInvertedStyle = getCellContainerPlatformStyles(true, {
-      x: 30,
-      y: 30,
-    });
-    const transformHorizontalInvertedStyle = getCellContainerPlatformStyles(
-      true,
-      {
-        x: 30,
-        y: 30,
-        isHorizontal: true,
-      }
-    );
-    const expectedTransform = "translate(20px,70px)";
-    const expectedTransformInverted = "translate(30px,30px) scaleY(-1)";
-    const expectedTransformHorizontalInverted =
-      "translate(30px,30px) scaleX(-1)";
-
-    expect(transformStyle?.transform).toBe(expectedTransform);
-    expect(transformStyle?.WebkitTransform).toBe(expectedTransform);
-    expect(transformInvertedStyle?.transform).toBe(expectedTransformInverted);
-    expect(transformInvertedStyle?.WebkitTransform).toBe(
-      expectedTransformInverted
-    );
-    expect(transformHorizontalInvertedStyle?.transform).toBe(
-      expectedTransformHorizontalInverted
-    );
-    expect(transformHorizontalInvertedStyle?.WebkitTransform).toBe(
-      expectedTransformHorizontalInverted
-    );
-  });
-  it("can return an animator", () => {
-    expect(getItemAnimator()!["animateWillMount"]).toBeDefined();
-  });
-});

package/src/__tests__/helpers/mountFlashList.tsx

@@ -1,62 +0,0 @@
-import React from "react";
-import { Text } from "react-native";
-import "@quilted/react-testing/matchers";
-import { render, Root } from "@quilted/react-testing";
-
-import FlashList from "../../FlashList";
-import { FlashListProps, ListRenderItem } from "../../FlashListProps";
-
-jest.mock("../../FlashList", () => {
-  const ActualFlashList = jest.requireActual("../../FlashList").default;
-  class MockFlashList extends ActualFlashList {
-    componentDidMount() {
-      super.componentDidMount();
-      this.rlvRef?._scrollComponent?._scrollViewRef?.props.onLayout({
-        nativeEvent: { layout: { height: 900, width: 400 } },
-      });
-    }
-  }
-  return MockFlashList;
-});
-export type MockFlashListProps = Omit<
-  FlashListProps<string>,
-  "estimatedItemSize" | "data" | "renderItem"
-> & {
-  estimatedItemSize?: number;
-  data?: string[];
-  renderItem?: ListRenderItem<string>;
-  disableDefaultEstimatedItemSize?: boolean;
-};
-/**
- * Helper to mount FlashList for testing.
- */
-export const mountFlashList = (
-  props?: MockFlashListProps,
-  ref?: React.RefObject<FlashList<string>>
-) => {
-  const flashList = render(renderFlashList(props, ref)) as Omit<
-    Root<FlashListProps<string>>,
-    "instance"
-  > & {
-    instance: FlashList<string>;
-  };
-  return flashList;
-};
-
-export function renderFlashList(
-  props?: MockFlashListProps,
-  ref?: React.RefObject<FlashList<string>>
-) {
-  return (
-    <FlashList
-      {...props}
-      ref={ref}
-      renderItem={props?.renderItem || (({ item }) => <Text>{item}</Text>)}
-      estimatedItemSize={
-        props?.estimatedItemSize ??
-        (props?.disableDefaultEstimatedItemSize ? undefined : 200)
-      }
-      data={props?.data || ["One", "Two", "Three", "Four"]}
-    />
-  );
-}

package/src/__tests__/helpers/mountMasonryFlashList.tsx

@@ -1,70 +0,0 @@
-import React from "react";
-import { Text } from "react-native";
-import "@quilted/react-testing/matchers";
-import { render, Root } from "@quilted/react-testing";
-
-import { ListRenderItem } from "../../FlashListProps";
-import {
-  MasonryFlashList,
-  MasonryFlashListProps,
-  MasonryFlashListRef,
-} from "../../MasonryFlashList";
-
-jest.mock("../../FlashList", () => {
-  const ActualFlashList = jest.requireActual("../../FlashList").default;
-  class MockFlashList extends ActualFlashList {
-    componentDidMount() {
-      super.componentDidMount();
-      this.rlvRef?._scrollComponent?._scrollViewRef?.props.onLayout({
-        nativeEvent: {
-          layout: {
-            height: this.props.estimatedListSize?.height ?? 900,
-            width: this.props.estimatedListSize?.width ?? 400,
-          },
-        },
-      });
-    }
-  }
-  return MockFlashList;
-});
-
-export type MockMasonryFlashListProps = Omit<
-  MasonryFlashListProps<string>,
-  "estimatedItemSize" | "data" | "renderItem"
-> & {
-  estimatedItemSize?: number;
-  data?: string[];
-  renderItem?: ListRenderItem<string>;
-};
-
-/**
- * Helper to mount MasonryFlashList for testing.
- */
-export const mountMasonryFlashList = (
-  props?: MockMasonryFlashListProps,
-  ref?: React.RefObject<MasonryFlashListRef<string>>
-) => {
-  const flashList = render(renderMasonryFlashList(props, ref)) as Omit<
-    Root<MasonryFlashListProps<string>>,
-    "instance"
-  > & {
-    instance: MasonryFlashListRef<string>;
-  };
-  return flashList;
-};
-
-export function renderMasonryFlashList(
-  props?: MockMasonryFlashListProps,
-  ref?: React.RefObject<MasonryFlashListRef<string>>
-) {
-  return (
-    <MasonryFlashList
-      {...props}
-      ref={ref}
-      numColumns={props?.numColumns ?? 2}
-      renderItem={props?.renderItem || (({ item }) => <Text>{item}</Text>)}
-      estimatedItemSize={props?.estimatedItemSize ?? 200}
-      data={props?.data || ["One", "Two", "Three", "Four"]}
-    />
-  );
-}