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

package/src/__tests__/useBlankAreaTracker.test.tsx

@@ -1,206 +0,0 @@
-import React, { useEffect } from "react";
-import { render } from "@quilted/react-testing";
-
-import {
-  BlankAreaTrackerConfig,
-  BlankAreaTrackerResult,
-  useBlankAreaTracker,
-} from "../benchmark/useBlankAreaTracker";
-import FlashList from "../FlashList";
-
-import { MockFlashListProps, renderFlashList } from "./helpers/mountFlashList";
-
-type BlankTrackingFlashListProps = MockFlashListProps & {
-  onCumulativeBlankAreaResult?: (result: BlankAreaTrackerResult) => void;
-  onCumulativeBlankAreaChange?: (updatedResult: BlankAreaTrackerResult) => void;
-  blankAreaTrackerConfig?: BlankAreaTrackerConfig;
-  instance?: React.RefObject<FlashList<any>>;
-};
-
-const BlankTrackingFlashList = (props?: BlankTrackingFlashListProps) => {
-  const ref = props?.instance!;
-  const [blankAreaTrackerResult, onBlankArea] = useBlankAreaTracker(
-    ref,
-    props?.onCumulativeBlankAreaChange,
-    {
-      startDelayInMs: props?.blankAreaTrackerConfig?.startDelayInMs ?? 500,
-      sumNegativeValues:
-        props?.blankAreaTrackerConfig?.sumNegativeValues ?? false,
-    }
-  );
-  useEffect(() => {
-    return () => {
-      props?.onCumulativeBlankAreaResult?.(blankAreaTrackerResult);
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  return renderFlashList(
-    { ...props, onBlankArea, estimatedItemSize: 400 },
-    ref
-  );
-};
-
-const mountBlankTrackingFlashList = (props?: BlankTrackingFlashListProps) => {
-  const flashListRef: React.RefObject<FlashList<any>> = {
-    current: null,
-  };
-  const blankTrackingFlashList = render(
-    <BlankTrackingFlashList {...props} instance={flashListRef} />
-  );
-  return {
-    root: blankTrackingFlashList,
-    instance: flashListRef.current!,
-  };
-};
-
-describe("useBlankAreaTracker Hook", () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-    jest.useFakeTimers();
-  });
-
-  it("ignores blank events for 500ms on mount and if content is not enough to fill the list", () => {
-    const onCumulativeBlankAreaChange = jest.fn();
-    const flashList = mountBlankTrackingFlashList({
-      onCumulativeBlankAreaChange,
-    });
-    flashList.instance.props.onBlankArea!({
-      blankArea: 100,
-      offsetEnd: 100,
-      offsetStart: 0,
-    });
-    flashList.instance.props.onBlankArea!({
-      blankArea: 100,
-      offsetEnd: 100,
-      offsetStart: 0,
-    });
-    jest.advanceTimersByTime(400);
-    flashList.instance.props.onBlankArea!({
-      blankArea: 100,
-      offsetEnd: 100,
-      offsetStart: 0,
-    });
-    expect(onCumulativeBlankAreaChange).toHaveBeenCalledTimes(0);
-    jest.advanceTimersByTime(100);
-    flashList.instance.props.onBlankArea!({
-      blankArea: 100,
-      offsetEnd: 100,
-      offsetStart: 0,
-    });
-    expect(onCumulativeBlankAreaChange).toHaveBeenCalledTimes(1);
-    onCumulativeBlankAreaChange.mockClear();
-
-    flashList.root.setProps({ data: ["1"] });
-    flashList.instance.props.onBlankArea!({
-      blankArea: 100,
-      offsetEnd: 100,
-      offsetStart: 0,
-    });
-    expect(onCumulativeBlankAreaChange).toHaveBeenCalledTimes(0);
-    flashList.root.unmount();
-  });
-  it("keeps result object updated with correct values on unmount", () => {
-    let resultObjectCopy: BlankAreaTrackerResult | undefined;
-    const onCumulativeBlankAreaChange = jest.fn(
-      (result: BlankAreaTrackerResult) => {
-        if (!resultObjectCopy) {
-          resultObjectCopy = result;
-        }
-      }
-    );
-    const onCumulativeBlankAreaResult = jest.fn();
-    const flashList = mountBlankTrackingFlashList({
-      onCumulativeBlankAreaResult,
-      onCumulativeBlankAreaChange,
-      blankAreaTrackerConfig: { startDelayInMs: 300 },
-    });
-    flashList.instance.props.onBlankArea!({
-      blankArea: 100,
-      offsetEnd: 100,
-      offsetStart: 0,
-    });
-    jest.advanceTimersByTime(300);
-    flashList.instance.props.onBlankArea!({
-      blankArea: 100,
-      offsetEnd: 100,
-      offsetStart: 0,
-    });
-    expect(resultObjectCopy!.cumulativeBlankArea).toBe(100);
-    expect(resultObjectCopy!.maxBlankArea).toBe(100);
-
-    flashList.instance.props.onBlankArea!({
-      blankArea: 200,
-      offsetEnd: 200,
-      offsetStart: 0,
-    });
-    flashList.instance.props.onBlankArea!({
-      blankArea: -200,
-      offsetEnd: -200,
-      offsetStart: 0,
-    });
-    expect(resultObjectCopy!.cumulativeBlankArea).toBe(300);
-    expect(resultObjectCopy!.maxBlankArea).toBe(200);
-
-    flashList.root.unmount();
-    expect(onCumulativeBlankAreaResult).toHaveBeenCalledWith(resultObjectCopy!);
-  });
-  it("can track negative values on demand", () => {
-    const onCumulativeBlankAreaResult = jest.fn();
-    const flashList = mountBlankTrackingFlashList({
-      onCumulativeBlankAreaResult,
-      blankAreaTrackerConfig: { sumNegativeValues: true },
-    });
-    flashList.instance.props.onBlankArea!({
-      blankArea: -200,
-      offsetEnd: -200,
-      offsetStart: 0,
-    });
-    jest.advanceTimersByTime(500);
-    flashList.instance.props.onBlankArea!({
-      blankArea: -200,
-      offsetEnd: -200,
-      offsetStart: 0,
-    });
-    flashList.instance.props.onBlankArea!({
-      blankArea: -200,
-      offsetEnd: -200,
-      offsetStart: 0,
-    });
-    flashList.root.unmount();
-    expect(onCumulativeBlankAreaResult).toHaveBeenCalledWith({
-      cumulativeBlankArea: -400,
-      maxBlankArea: 0,
-    });
-  });
-  it("only calls onCumulativeBlankAreaChange when values have a change", () => {
-    const onCumulativeBlankAreaChange = jest.fn();
-    const flashList = mountBlankTrackingFlashList({
-      onCumulativeBlankAreaChange,
-    });
-    flashList.instance.props.onBlankArea!({
-      blankArea: -200,
-      offsetEnd: -200,
-      offsetStart: 0,
-    });
-    jest.advanceTimersByTime(500);
-    flashList.instance.props.onBlankArea!({
-      blankArea: -200,
-      offsetEnd: -200,
-      offsetStart: 0,
-    });
-    expect(onCumulativeBlankAreaChange).toHaveBeenCalledTimes(0);
-    flashList.instance.props.onBlankArea!({
-      blankArea: -100,
-      offsetEnd: -100,
-      offsetStart: 0,
-    });
-    expect(onCumulativeBlankAreaChange).toHaveBeenCalledTimes(0);
-    flashList.instance.props.onBlankArea!({
-      blankArea: 100,
-      offsetEnd: 100,
-      offsetStart: 0,
-    });
-    expect(onCumulativeBlankAreaChange).toHaveBeenCalledTimes(1);
-    flashList.root.unmount();
-  });
-});

package/src/benchmark/useBlankAreaTracker.ts

@@ -1,117 +0,0 @@
-import React, { useCallback, useRef } from "react";
-import { RecyclerListView, RecyclerListViewProps } from "recyclerlistview";
-
-import { BlankAreaEvent } from "../native/auto-layout/AutoLayoutView";
-import FlashList from "../FlashList";
-
-export interface BlankAreaTrackerResult {
-  /**
-   * Max blank area displayed
-   */
-  maxBlankArea: number;
-  /**
-   * Sum of all blank area values across all frames
-   */
-  cumulativeBlankArea: number;
-}
-export interface BlankAreaTrackerConfig {
-  /**
-   * When set to true the hook will also sum all negative blank area values.
-   * Blank area is negative when list is able to draw faster than the scroll speed.
-   */
-  sumNegativeValues?: boolean;
-  /**
-   * By default, the hook ignores blank events for 1s after the list load. This value can be changed using this parameter.
-   * Please note that this duration kicks in after the list has loaded and not after the first scroll.
-   */
-  startDelayInMs?: number;
-}
-
-/**
- * Can be used to track visible blank area in production
- * @param flashListRef Ref to the FlashList component
- * @param onBlankAreaChange This event handler will be called when the blank area changes
- * @param config additional configuration for the blank area tracker
- * @returns blankAreaTrackerResult - maxBlankArea, cumulativeBlankArea this object is mutated and kept up to date. Also returns a callback that needs to be forwarded to FlashList.
- */
-export function useBlankAreaTracker(
-  flashListRef: React.RefObject<FlashList<any>>,
-  onBlankAreaChange?: (value: BlankAreaTrackerResult) => void,
-  config?: BlankAreaTrackerConfig
-): [BlankAreaTrackerResult, (event: BlankAreaEvent) => void] {
-  const startDelay = config?.startDelayInMs ?? 1000;
-  const blankAreaResult = useRef({
-    maxBlankArea: 0,
-    cumulativeBlankArea: 0,
-  }).current;
-  const waitOperations = useRef({ inProgress: false, complete: false }).current;
-  const onBlankAreaChangeRef = useRef(onBlankAreaChange);
-  onBlankAreaChangeRef.current = onBlankAreaChange;
-
-  const blankAreaTracker = useCallback(
-    (event: BlankAreaEvent) => {
-      // we're ignoring some of the events that will be fired on list load
-      // initial events are fired on mount and thus, this won't lead to missing events during scroll
-      if (!waitOperations.complete && startDelay > 0) {
-        if (!waitOperations.inProgress) {
-          waitOperations.inProgress = true;
-          setTimeout(() => {
-            waitOperations.complete = true;
-          }, startDelay);
-        }
-        return;
-      }
-      const rlv = flashListRef.current?.recyclerlistview_unsafe;
-      const horizontal = Boolean(flashListRef.current?.props.horizontal);
-      if (rlv) {
-        processBlankAreaChange(
-          rlv,
-          horizontal,
-          blankAreaResult,
-          event,
-          onBlankAreaChangeRef.current,
-          config
-        );
-      }
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [flashListRef]
-  );
-  return [blankAreaResult, blankAreaTracker];
-}
-
-function processBlankAreaChange(
-  rlv: RecyclerListView<RecyclerListViewProps, any>,
-  horizontal: boolean,
-  blankAreaResult: BlankAreaTrackerResult,
-  event: BlankAreaEvent,
-  onBlankAreaChange?: (value: BlankAreaTrackerResult) => void,
-  config?: BlankAreaTrackerConfig
-) {
-  const listSize = horizontal
-    ? rlv.getRenderedSize().width
-    : rlv.getRenderedSize().height;
-  const contentSize = horizontal
-    ? rlv.getContentDimension().width
-    : rlv.getContentDimension().height;
-
-  // ignores blank events when there isn't enough content to fill the list
-  if (contentSize > listSize) {
-    const lastMaxBlankArea = blankAreaResult.maxBlankArea;
-    const lastCumulativeBlankArea = blankAreaResult.cumulativeBlankArea;
-    blankAreaResult.maxBlankArea = Math.max(
-      blankAreaResult.maxBlankArea,
-      event.blankArea,
-      0
-    );
-    blankAreaResult.cumulativeBlankArea += config?.sumNegativeValues
-      ? event.blankArea
-      : Math.max(event.blankArea, 0);
-    if (
-      lastCumulativeBlankArea !== blankAreaResult.cumulativeBlankArea ||
-      lastMaxBlankArea !== blankAreaResult.maxBlankArea
-    ) {
-      onBlankAreaChange?.(blankAreaResult);
-    }
-  }
-}

package/src/enableNewCore.ts

@@ -1,24 +0,0 @@
-import { Platform } from "react-native";
-
-let useNewCore: boolean | undefined;
-export function enableNewCore(enable: boolean) {
-  useNewCore = enable;
-}
-
-export function isNewCoreEnabled() {
-  return useNewCore ?? isReactNativeNewArchitecture();
-}
-
-function isReactNativeNewArchitecture(): boolean {
-  try {
-    // Check for Fabric UI Manager
-    const hasFabricUIManager = Boolean((global as any)?.nativeFabricUIManager);
-
-    // Check for TurboModule system
-    const hasTurboModule = Boolean((global as any)?.__turboModuleProxy);
-
-    return hasFabricUIManager || hasTurboModule || Platform.OS === "web";
-  } catch {
-    return false;
-  }
-}

package/src/errors/CustomError.ts

@@ -1,10 +0,0 @@
-export default class CustomError extends Error {
-  constructor(exception: Exception) {
-    super(`${exception.type}: ${exception.message}`);
-    this.name = exception.type;
-  }
-}
-export interface Exception {
-  type: string;
-  message: string;
-}

package/src/errors/ExceptionList.ts

@@ -1,28 +0,0 @@
-const ExceptionList = {
-  refreshBooleanMissing: {
-    message:
-      "`refreshing` prop must be set as a boolean in order to use `onRefresh`, but got `undefined`.",
-    type: "InvariantViolation",
-  },
-  stickyWhileHorizontalNotSupported: {
-    message:
-      "sticky headers are not supported when list is in horizontal mode. Remove `stickyHeaderIndices` prop.",
-    type: "NotSupportedException",
-  },
-  columnsWhileHorizontalNotSupported: {
-    message:
-      "numColumns is not supported when list is in horizontal mode. Please remove or set numColumns to 1.",
-    type: "NotSupportedException",
-  },
-  multipleViewabilityThresholdTypesNotSupported: {
-    message:
-      "You can set exactly one of itemVisiblePercentThreshold or viewAreaCoveragePercentThreshold. Specifying both is not supported.",
-    type: "MultipleViewabilityThresholdTypesException",
-  },
-  overrideItemLayoutRequiredForMasonryOptimization: {
-    message:
-      "optimizeItemArrangement has been enabled on `MasonryFlashList` but overrideItemLayout is not set.",
-    type: "InvariantViolation",
-  },
-};
-export default ExceptionList;

package/src/errors/Warnings.ts

@@ -1,15 +0,0 @@
-const WarningList = {
-  styleUnsupported:
-    "You have passed a style to FlashList. This list doesn't support styling, use contentContainerStyle or wrap the list in a parent and apply style to it instead.",
-  styleContentContainerUnsupported:
-    "FlashList only supports padding related props and backgroundColor in contentContainerStyle. Please remove other values as they're not used.",
-  unusableRenderedSize:
-    "FlashList's rendered size is not usable. Either the height or width is too small (<2px). " +
-    "Please make sure that the parent view of the list has a valid size. FlashList will match the size of the parent.",
-  missingKeyExtractor:
-    "FlashList requires a keyExtractor prop to be defined when animating elements. Without it, the animations will not run as expected.",
-  estimatedItemSizeMissingWarning:
-    "estimatedItemSize FlashList prop is not defined - based on current configuration you can set it to @size to optimize list performance. " +
-    "Refer to FlashList documentation for more details.",
-};
-export default WarningList;

package/src/native/auto-layout/AutoLayoutView.tsx

@@ -1,73 +0,0 @@
-import React, { useEffect, ReactNode } from "react";
-import { LayoutChangeEvent } from "react-native";
-
-import AutoLayoutViewNativeComponent from "./AutoLayoutViewNativeComponent";
-import { OnBlankAreaEvent } from "./AutoLayoutViewNativeComponentProps";
-
-export type BlankAreaEventHandler = (blankAreaEvent: BlankAreaEvent) => void;
-const listeners: BlankAreaEventHandler[] = [];
-
-export const useOnNativeBlankAreaEvents = (
-  onBlankAreaEvent: (blankAreaEvent: BlankAreaEvent) => void
-) => {
-  useEffect(() => {
-    listeners.push(onBlankAreaEvent);
-    return () => {
-      listeners.filter((callback) => callback !== onBlankAreaEvent);
-    };
-  }, [onBlankAreaEvent]);
-};
-
-export interface BlankAreaEvent {
-  offsetStart: number;
-  offsetEnd: number;
-  blankArea: number;
-}
-
-export interface AutoLayoutViewProps {
-  children?: ReactNode;
-  onBlankAreaEvent?: BlankAreaEventHandler;
-  onLayout?: (event: LayoutChangeEvent) => void;
-  disableAutoLayout?: boolean;
-}
-
-class AutoLayoutView extends React.Component<AutoLayoutViewProps> {
-  private onBlankAreaEventCallback = ({
-    nativeEvent,
-  }: OnBlankAreaEvent): void => {
-    const blankArea = Math.max(nativeEvent.offsetStart, nativeEvent.offsetEnd);
-    const blankEventValue = {
-      blankArea,
-      offsetStart: nativeEvent.offsetStart,
-      offsetEnd: nativeEvent.offsetEnd,
-    };
-    this.broadcastBlankEvent(blankEventValue);
-    if (this.props.onBlankAreaEvent) {
-      this.props.onBlankAreaEvent(blankEventValue);
-    }
-  };
-
-  private broadcastBlankEvent(value: BlankAreaEvent) {
-    const len = listeners.length;
-    for (let i = 0; i < len; i++) {
-      listeners[i](value);
-    }
-  }
-
-  render() {
-    return (
-      <AutoLayoutViewNativeComponent
-        {...this.props}
-        onBlankAreaEvent={this.onBlankAreaEventCallback}
-        enableInstrumentation={
-          listeners.length !== 0 || Boolean(this.props.onBlankAreaEvent)
-        }
-        disableAutoLayout={this.props.disableAutoLayout}
-      >
-        {this.props.children}
-      </AutoLayoutViewNativeComponent>
-    );
-  }
-}
-
-export default AutoLayoutView;

package/src/native/auto-layout/AutoLayoutViewNativeComponent.android.ts

@@ -1,7 +0,0 @@
-import { requireNativeComponent } from "react-native";
-
-import { AutoLayoutViewNativeComponentProps } from "./AutoLayoutViewNativeComponentProps";
-
-const AutoLayoutViewNativeComponent =
-  requireNativeComponent<AutoLayoutViewNativeComponentProps>("AutoLayoutView");
-export default AutoLayoutViewNativeComponent;

package/src/native/auto-layout/AutoLayoutViewNativeComponent.ios.ts

@@ -1,7 +0,0 @@
-import { requireNativeComponent } from "react-native";
-
-import { AutoLayoutViewNativeComponentProps } from "./AutoLayoutViewNativeComponentProps";
-
-const AutoLayoutViewNativeComponent =
-  requireNativeComponent<AutoLayoutViewNativeComponentProps>("AutoLayoutView");
-export default AutoLayoutViewNativeComponent;

package/src/native/auto-layout/AutoLayoutViewNativeComponent.ts

@@ -1,7 +0,0 @@
-import { HostComponent, View } from "react-native";
-
-import { AutoLayoutViewNativeComponentProps } from "./AutoLayoutViewNativeComponentProps";
-
-const AutoLayoutViewNativeComponent =
-  View as any as HostComponent<AutoLayoutViewNativeComponentProps>;
-export default AutoLayoutViewNativeComponent;

package/src/native/auto-layout/AutoLayoutViewNativeComponentProps.ts

@@ -1,17 +0,0 @@
-import { ReactNode } from "react";
-
-export interface OnBlankAreaEvent {
-  nativeEvent: {
-    offsetStart: number;
-    offsetEnd: number;
-  };
-}
-
-type OnBlankAreaEventHandler = (event: OnBlankAreaEvent) => void;
-
-export interface AutoLayoutViewNativeComponentProps {
-  children?: ReactNode;
-  onBlankAreaEvent: OnBlankAreaEventHandler;
-  enableInstrumentation: boolean;
-  disableAutoLayout?: boolean;
-}

package/src/native/cell-container/CellContainer.android.ts

@@ -1,7 +0,0 @@
-import { requireNativeComponent } from "react-native";
-
-/**
- * Behaves as a regular `View` with an extra `index` prop that is saved in the native layer.
- */
-const CellContainer = requireNativeComponent("CellContainer");
-export default CellContainer;

package/src/native/cell-container/CellContainer.ios.ts

@@ -1,7 +0,0 @@
-import { requireNativeComponent } from "react-native";
-
-/**
- * Behaves as a regular `View` with an extra `index` prop that is saved in the native layer.
- */
-const CellContainer = requireNativeComponent("CellContainer");
-export default CellContainer;

package/src/native/cell-container/CellContainer.tsx

@@ -1,14 +0,0 @@
-import React from "react";
-import { View, ViewProps } from "react-native";
-
-export interface CellContainerProps extends ViewProps {
-  index: number;
-}
-
-const CellContainer = React.forwardRef(
-  (props: CellContainerProps, ref: any) => {
-    return <View ref={ref} {...props} />;
-  }
-);
-CellContainer.displayName = "CellContainer";
-export default CellContainer;

package/src/native/cell-container/CellContainer.web.tsx

@@ -1,9 +0,0 @@
-import React from "react";
-/**
- * On web we use a view instead of cell container till we build native web implementations
- */
-const CellContainer = React.forwardRef((props: any, ref) => {
-  return <div ref={ref} {...props} />;
-});
-CellContainer.displayName = "CellContainer";
-export default CellContainer;

package/src/specs/AutoLayoutNativeComponent.ts

@@ -1,24 +0,0 @@
-import codegenNativeComponent from "react-native/Libraries/Utilities/codegenNativeComponent";
-import type { ViewProps } from "react-native";
-import type {
-  Int32,
-  Double,
-  DirectEventHandler,
-} from "react-native/Libraries/Types/CodegenTypes";
-
-type BlankAreaEvent = Readonly<{
-  offsetStart: Int32;
-  offsetEnd: Int32;
-}>;
-
-interface NativeProps extends ViewProps {
-  horizontal?: boolean;
-  scrollOffset?: Double;
-  windowSize?: Double;
-  renderAheadOffset?: Double;
-  enableInstrumentation?: boolean;
-  disableAutoLayout?: boolean;
-  onBlankAreaEvent?: DirectEventHandler<BlankAreaEvent>;
-}
-
-export default codegenNativeComponent<NativeProps>("AutoLayoutView");

package/src/specs/CellContainerNativeComponent.ts

@@ -1,9 +0,0 @@
-import codegenNativeComponent from "react-native/Libraries/Utilities/codegenNativeComponent";
-import type { Int32 } from "react-native/Libraries/Types/CodegenTypes";
-import type { ViewProps } from "react-native";
-
-interface NativeProps extends ViewProps {
-  index?: Int32;
-}
-
-export default codegenNativeComponent<NativeProps>("CellContainer");