@shopify/flash-list 1.1.0 → 1.2.2

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

@@ -1,7 +1,7 @@
 import {
   getCellContainerPlatformStyles,
   getItemAnimator,
-} from "../utils/PlatformHelper.web";
+} from "../native/config/PlatformHelper.web";
 
 describe("Platform Helper Web", () => {
   it("can compute right transform for web", () => {
@@ -13,8 +13,18 @@ describe("Platform Helper Web", () => {
       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);
@@ -22,6 +32,12 @@ describe("Platform Helper Web", () => {
     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/native/auto-layout/AutoLayoutView.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useEffect, ReactNode } from "react";
 import { LayoutChangeEvent } from "react-native";
 
 import AutoLayoutViewNativeComponent from "./AutoLayoutViewNativeComponent";
@@ -25,6 +25,7 @@ export interface BlankAreaEvent {
 }
 
 export interface AutoLayoutViewProps {
+  children?: ReactNode;
   onBlankAreaEvent?: BlankAreaEventHandler;
   onLayout?: (event: LayoutChangeEvent) => void;
   disableAutoLayout?: boolean;

package/src/native/auto-layout/{AutoLayoutViewNativeComponent.web.ts → AutoLayoutViewNativeComponent.android.ts}

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

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

@@ -0,0 +1,7 @@
+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 +1,7 @@
-import { requireNativeComponent } from "react-native";
+import { HostComponent, View } from "react-native";
 
 import { AutoLayoutViewNativeComponentProps } from "./AutoLayoutViewNativeComponentProps";
 
 const AutoLayoutViewNativeComponent =
-  requireNativeComponent<AutoLayoutViewNativeComponentProps>("AutoLayoutView");
+  View as any as HostComponent<AutoLayoutViewNativeComponentProps>;
 export default AutoLayoutViewNativeComponent;

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

@@ -1,3 +1,5 @@
+import { ReactNode } from "react";
+
 export interface OnBlankAreaEvent {
   nativeEvent: {
     offsetStart: number;
@@ -8,6 +10,7 @@ export interface OnBlankAreaEvent {
 type OnBlankAreaEventHandler = (event: OnBlankAreaEvent) => void;
 
 export interface AutoLayoutViewNativeComponentProps {
+  children?: ReactNode;
   onBlankAreaEvent: OnBlankAreaEventHandler;
   enableInstrumentation: boolean;
   disableAutoLayout?: boolean;

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

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

@@ -0,0 +1,14 @@
+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/{utils/PlatformHelper.ts → native/config/PlatformHelper.android.ts}

@@ -5,7 +5,7 @@ const PlatformConfig = {
 };
 const getCellContainerPlatformStyles = (
   inverted: boolean,
-  parentProps: { x: number; y: number }
+  parentProps: { x: number; y: number; isHorizontal?: boolean }
 ): { transform: string; WebkitTransform: string } | undefined => {
   return undefined;
 };
@@ -13,4 +13,14 @@ const getCellContainerPlatformStyles = (
 const getItemAnimator = (): BaseItemAnimator | undefined => {
   return undefined;
 };
-export { PlatformConfig, getCellContainerPlatformStyles, getItemAnimator };
+
+const getFooterContainer = (): React.ComponentClass | undefined => {
+  return undefined;
+};
+
+export {
+  PlatformConfig,
+  getCellContainerPlatformStyles,
+  getItemAnimator,
+  getFooterContainer,
+};

package/src/native/config/PlatformHelper.ios.ts

@@ -0,0 +1,26 @@
+import { BaseItemAnimator } from "recyclerlistview";
+
+const PlatformConfig = {
+  defaultDrawDistance: 250,
+};
+const getCellContainerPlatformStyles = (
+  inverted: boolean,
+  parentProps: { x: number; y: number; isHorizontal?: boolean }
+): { transform: string; WebkitTransform: string } | undefined => {
+  return undefined;
+};
+
+const getItemAnimator = (): BaseItemAnimator | undefined => {
+  return undefined;
+};
+
+const getFooterContainer = (): React.ComponentClass | undefined => {
+  return undefined;
+};
+
+export {
+  PlatformConfig,
+  getCellContainerPlatformStyles,
+  getItemAnimator,
+  getFooterContainer,
+};

package/src/native/config/PlatformHelper.ts

@@ -0,0 +1,27 @@
+import { BaseItemAnimator } from "recyclerlistview";
+import { DefaultJSItemAnimator } from "recyclerlistview/dist/reactnative/platform/reactnative/itemanimators/defaultjsanimator/DefaultJSItemAnimator";
+
+const PlatformConfig = {
+  defaultDrawDistance: 250,
+};
+const getCellContainerPlatformStyles = (
+  inverted: boolean,
+  parentProps: { x: number; y: number; isHorizontal?: boolean }
+): { transform: string; WebkitTransform: string } | undefined => {
+  return undefined;
+};
+
+const getItemAnimator = (): BaseItemAnimator | undefined => {
+  return new DefaultJSItemAnimator();
+};
+
+const getFooterContainer = (): React.ComponentClass | undefined => {
+  return undefined;
+};
+
+export {
+  PlatformConfig,
+  getCellContainerPlatformStyles,
+  getItemAnimator,
+  getFooterContainer,
+};

package/src/{utils → native/config}/PlatformHelper.web.ts

@@ -1,3 +1,5 @@
+import React from "react";
+import { View } from "react-native";
 import { BaseItemAnimator } from "recyclerlistview";
 import { DefaultJSItemAnimator } from "recyclerlistview/dist/reactnative/platform/reactnative/itemanimators/defaultjsanimator/DefaultJSItemAnimator";
 
@@ -6,10 +8,10 @@ const PlatformConfig = {
 };
 const getCellContainerPlatformStyles = (
   inverted: boolean,
-  parentProps: { x: number; y: number }
+  parentProps: { x: number; y: number; isHorizontal?: boolean }
 ): { transform: string; WebkitTransform: string } | undefined => {
   const transformValue = `translate(${parentProps.x}px,${parentProps.y}px)${
-    inverted ? ` scaleY(-1)` : ``
+    inverted ? ` ${parentProps.isHorizontal ? `scaleX` : `scaleY`}(-1)` : ``
   }`;
   return { transform: transformValue, WebkitTransform: transformValue };
 };
@@ -17,4 +19,14 @@ const getCellContainerPlatformStyles = (
 const getItemAnimator = (): BaseItemAnimator | undefined => {
   return new DefaultJSItemAnimator();
 };
-export { PlatformConfig, getCellContainerPlatformStyles, getItemAnimator };
+
+const getFooterContainer = (): React.ComponentClass | undefined => {
+  return View;
+};
+
+export {
+  PlatformConfig,
+  getCellContainerPlatformStyles,
+  getItemAnimator,
+  getFooterContainer,
+};

package/dist/native/auto-layout/AutoLayoutViewNativeComponent.web.d.ts

@@ -1,5 +0,0 @@
-import React from "react";
-import { AutoLayoutViewNativeComponentProps } from "./AutoLayoutViewNativeComponentProps";
-declare const AutoLayoutViewNativeComponent: React.Component<AutoLayoutViewNativeComponentProps, {}, any>;
-export default AutoLayoutViewNativeComponent;
-//# sourceMappingURL=AutoLayoutViewNativeComponent.web.d.ts.map

package/dist/native/auto-layout/AutoLayoutViewNativeComponent.web.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"AutoLayoutViewNativeComponent.web.d.ts","sourceRoot":"","sources":["../../../src/native/auto-layout/AutoLayoutViewNativeComponent.web.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,kCAAkC,EAAE,MAAM,sCAAsC,CAAC;AAE1F,QAAA,MAAM,6BAA6B,8DACiC,CAAC;AACrE,eAAe,6BAA6B,CAAC"}

package/dist/native/auto-layout/AutoLayoutViewNativeComponent.web.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"AutoLayoutViewNativeComponent.web.js","sourceRoot":"","sources":["../../../src/native/auto-layout/AutoLayoutViewNativeComponent.web.ts"],"names":[],"mappings":";;AACA,6CAAoC;AAIpC,IAAM,6BAA6B,GACjC,mBAAkE,CAAC;AACrE,kBAAe,6BAA6B,CAAC"}

package/dist/utils/PlatformHelper.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"PlatformHelper.d.ts","sourceRoot":"","sources":["../../src/utils/PlatformHelper.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAEpD,QAAA,MAAM,cAAc;;CAEnB,CAAC;AACF,QAAA,MAAM,8BAA8B,aACxB,OAAO,eACJ;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,KACpC;IAAE,SAAS,EAAE,MAAM,CAAC;IAAC,eAAe,EAAE,MAAM,CAAA;CAAE,GAAG,SAEnD,CAAC;AAEF,QAAA,MAAM,eAAe,QAAO,gBAAgB,GAAG,SAE9C,CAAC;AACF,OAAO,EAAE,cAAc,EAAE,8BAA8B,EAAE,eAAe,EAAE,CAAC"}

package/dist/utils/PlatformHelper.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"PlatformHelper.js","sourceRoot":"","sources":["../../src/utils/PlatformHelper.ts"],"names":[],"mappings":";;;AAEA,IAAM,cAAc,GAAG;IACrB,mBAAmB,EAAE,GAAG;CACzB,CAAC;AAWO,wCAAc;AAVvB,IAAM,8BAA8B,GAAG,UACrC,QAAiB,EACjB,WAAqC;IAErC,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC;AAKuB,wEAA8B;AAHvD,IAAM,eAAe,GAAG;IACtB,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC;AACuD,0CAAe"}

package/dist/utils/PlatformHelper.web.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"PlatformHelper.web.d.ts","sourceRoot":"","sources":["../../src/utils/PlatformHelper.web.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAGpD,QAAA,MAAM,cAAc;;CAEnB,CAAC;AACF,QAAA,MAAM,8BAA8B,aACxB,OAAO,eACJ;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,KACpC;IAAE,SAAS,EAAE,MAAM,CAAC;IAAC,eAAe,EAAE,MAAM,CAAA;CAAE,GAAG,SAKnD,CAAC;AAEF,QAAA,MAAM,eAAe,QAAO,gBAAgB,GAAG,SAE9C,CAAC;AACF,OAAO,EAAE,cAAc,EAAE,8BAA8B,EAAE,eAAe,EAAE,CAAC"}

package/dist/utils/PlatformHelper.web.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"PlatformHelper.web.js","sourceRoot":"","sources":["../../src/utils/PlatformHelper.web.ts"],"names":[],"mappings":";;;AACA,sJAAqJ;AAErJ,IAAM,cAAc,GAAG;IACrB,mBAAmB,EAAE,IAAI;CAC1B,CAAC;AAcO,wCAAc;AAbvB,IAAM,8BAA8B,GAAG,UACrC,QAAiB,EACjB,WAAqC;IAErC,IAAM,cAAc,GAAG,oBAAa,WAAW,CAAC,CAAC,gBAAM,WAAW,CAAC,CAAC,gBAClE,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,CAC7B,CAAC;IACH,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,eAAe,EAAE,cAAc,EAAE,CAAC;AACxE,CAAC,CAAC;AAKuB,wEAA8B;AAHvD,IAAM,eAAe,GAAG;IACtB,OAAO,IAAI,6CAAqB,EAAE,CAAC;AACrC,CAAC,CAAC;AACuD,0CAAe"}