@applicaster/zapp-react-native-utils 12.0.0-rc.6 → 12.0.0-rc.60

package/reactHooks/flatList/useLoadNextPageIfNeeded.ts

@@ -5,27 +5,34 @@ type Return = (index: number) => void;
 
 type Predicate = (
   entry: ZappUIComponentProps["zappPipesData"]["data"]["entry"],
-  index: number
+  index: number,
+  numberOfColumns: number
 ) => boolean;
 
 type Props = {
   ifNeeded: Predicate;
   loadNextData: () => void;
   entry: ZappUIComponentProps["zappPipesData"]["data"]["entry"];
+  numberOfColumns?: number;
 };
 
 const handleLoadNextPage =
   (
-    ifNeeded: (entry: ZappEntry[], index: number) => boolean,
+    ifNeeded: (
+      entry: ZappEntry[],
+      index: number,
+      numberOfColumns?: number
+    ) => boolean,
     loadNextData: () => void,
-    entry: ZappEntry[]
+    entry: ZappEntry[],
+    numberOfColumns
   ) =>
   (index: number) => {
     /**
      * Lazy-Loading, invoke nextLoadData if we reach the end of the List
      */
 
-    if (ifNeeded(entry, index)) {
+    if (ifNeeded(entry, index, numberOfColumns)) {
       loadNextData();
     }
   };
@@ -34,10 +41,10 @@ export const useLoadNextPageIfNeeded = ({
   ifNeeded,
   loadNextData = noop,
   entry,
+  numberOfColumns = 0,
 }: Props): Return => {
-  return React.useCallback(handleLoadNextPage(ifNeeded, loadNextData, entry), [
-    ifNeeded,
-    loadNextData,
-    entry,
-  ]);
+  return React.useCallback(
+    handleLoadNextPage(ifNeeded, loadNextData, entry, numberOfColumns),
+    [ifNeeded, loadNextData, entry, numberOfColumns]
+  );
 };

package/reactHooks/index.ts

@@ -13,3 +13,5 @@ export * from "./navigation";
 export * from "./device";
 
 export * from "./screen";
+
+export * from "./state";

package/reactHooks/layout/__tests__/{index.test.js → index.test.tsx}

@@ -1,4 +1,10 @@
+import React from "react";
+
 import { cleanup, renderHook } from "@testing-library/react-hooks";
+import { Provider } from "react-redux";
+import configureStore from "redux-mock-store";
+
+import * as ReactNative from "react-native";
 
 const mocked_return_value = (tv) => ({
   screen: tv
@@ -10,41 +16,31 @@ const mocked_return_value = (tv) => ({
 const platform = "android";
 let tv_flag = false;
 
-jest.mock("react-native-safe-area-context", () => ({
-  useSafeAreaInsets: () => ({ top: 50 }),
-}));
+ReactNative.Dimensions.get = jest.fn(
+  (context) => mocked_return_value(tv_flag)[context]
+);
 
 const mockRemoveFn = jest.fn();
 
-jest.mock("react-native", () => {
-  const RNMock = jest.genMockFromModule("react-native");
-
-  const Dims = {
-    get: jest.fn((context) => mocked_return_value(tv_flag)[context]),
-    addEventListener: jest.fn().mockReturnValue({
-      remove: mockRemoveFn,
-    }),
-  };
-
-  const QuickBrickCommunicationModule = {
-    initialProps: {
-      is_tablet: false,
-    },
-  };
-
-  return {
-    ...RNMock,
-    Dimensions: Dims,
-    Platform: {
-      OS: platform,
-    },
-    NativeModules: {
-      ...RNMock.NativeModules,
-      QuickBrickCommunicationModule,
-    },
-  };
+ReactNative.Dimensions.addEventListener = jest.fn().mockReturnValue({
+  remove: mockRemoveFn,
 });
 
+ReactNative.Platform.OS = platform;
+
+const QuickBrickCommunicationModule = {
+  initialProps: {
+    is_tablet: false,
+  },
+};
+
+ReactNative.NativeModules.QuickBrickCommunicationModule =
+  QuickBrickCommunicationModule;
+
+jest.mock("react-native-safe-area-context", () => ({
+  useSafeAreaInsets: () => ({ top: 50 }),
+}));
+
 jest.mock("../../../reactUtils", () => ({
   platformSelect: jest.fn((specs) => specs[platform] || specs.default),
   isTV: jest.fn(() => tv_flag),
@@ -52,22 +48,47 @@ jest.mock("../../../reactUtils", () => ({
 
 jest.mock("../../navigation", () => ({
   useNavigation: () => null,
+  useIsScreenActive: () => true,
 }));
 
 const { Dimensions } = require("react-native");
-const { useDimensions } = require("../");
+const { useDimensions } = require("..");
+
+const mockStore = configureStore();
+
+const getWrapper = () => {
+  const store = mockStore({ appData: {} });
+
+  const Wrapper = ({ children }: { children: React.ReactChild }) => (
+    /* @ts-ignore */
+    <Provider store={store}>{children}</Provider>
+  );
+
+  return Wrapper;
+};
+
+const testHook = (context, params?) => {
+  const wrapper = getWrapper();
+
+  const {
+    result,
+    result: { current: dimensions },
+  } = renderHook(() => useDimensions(context, params), {
+    wrapper,
+  });
+
+  return { result, dimensions };
+};
 
 describe("useDimensions", () => {
   it("renders", () => {
-    const { result } = renderHook(() =>
-      useDimensions("window", { fullDimensions: true })
-    );
+    const { result } = testHook("window", { fullDimensions: true });
 
     expect(result).toBeDefined();
   });
 
   it("sets event listener", () => {
-    renderHook(() => useDimensions("window", { fullDimensions: true }));
+    testHook("window", { fullDimensions: true });
 
     expect(Dimensions.addEventListener).toBeCalledWith(
       "change",
@@ -76,16 +97,14 @@ describe("useDimensions", () => {
   });
 
   it("removes event listener", () => {
-    renderHook(() => useDimensions("window", { fullDimensions: true }));
+    testHook("window", { fullDimensions: true });
     cleanup();
 
     expect(mockRemoveFn).toBeCalled();
   });
 
   it("Returns full dimensions object", () => {
-    const {
-      result: { current: dimensions },
-    } = renderHook(() => useDimensions("window", { fullDimensions: true }));
+    const { dimensions } = testHook("window", { fullDimensions: true });
 
     expect(dimensions).toHaveProperty("height");
     expect(dimensions).toHaveProperty("width");
@@ -94,20 +113,17 @@ describe("useDimensions", () => {
   });
 
   it("Returns shorthand dimensions object", () => {
-    const {
-      result: { current: dimensions },
-    } = renderHook(() => useDimensions("window"));
+    const { dimensions } = testHook("window");
 
     expect(dimensions).toHaveProperty("height");
     expect(dimensions).toHaveProperty("width");
   });
 
   it("Returns the device info object", () => {
-    const {
-      result: { current: dimensions },
-    } = renderHook(() =>
-      useDimensions("window", { fullDimensions: true, deviceInfo: true })
-    );
+    const { dimensions } = testHook("window", {
+      fullDimensions: true,
+      deviceInfo: true,
+    });
 
     expect(dimensions).toHaveProperty("height");
     expect(dimensions).toHaveProperty("width");
@@ -120,10 +136,7 @@ describe("useDimensions", () => {
     it("applies the scale on TV, and screen context", () => {
       tv_flag = true;
       const { screen } = mocked_return_value(tv_flag);
-
-      const {
-        result: { current: dimensions },
-      } = renderHook(() => useDimensions("screen"));
+      const { dimensions } = testHook("screen");
 
       expect(dimensions).toHaveProperty("height", screen.height * screen.scale);
       expect(dimensions).toHaveProperty("width", screen.width * screen.scale);
@@ -135,10 +148,7 @@ describe("useDimensions", () => {
     it("doesn't apply the scale on mobile with screen context", () => {
       tv_flag = false;
       const { screen } = mocked_return_value(tv_flag);
-
-      const {
-        result: { current: dimensions },
-      } = renderHook(() => useDimensions("screen"));
+      const { dimensions } = testHook("screen");
 
       expect(dimensions).toHaveProperty("height", screen.height);
       expect(dimensions).toHaveProperty("width", screen.width);
@@ -148,10 +158,7 @@ describe("useDimensions", () => {
     it("doesn't apply the scale on TV with window context", () => {
       tv_flag = true;
       const { window } = mocked_return_value(tv_flag);
-
-      const {
-        result: { current: dimensions },
-      } = renderHook(() => useDimensions("window"));
+      const { dimensions } = testHook("window");
 
       expect(dimensions).toHaveProperty("height", window.height);
       expect(dimensions).toHaveProperty("width", window.width);

package/reactHooks/layout/getDeviceInfo/index.ts

@@ -3,13 +3,15 @@ import { isTablet } from "../isTablet";
 /**
  * Returns an object with additional device info that can be used to determine if tablet
  * @param {Number} dimensions - Dimensions object passed to the function
+ * @param {Object} appData - application data object passed to the function
  * @returns {DeviceInfo} deviceInfo - returns an object with scale, isTablet, and orientation
  */
-export const getDeviceInfo = (dimensions) => {
+export const getDeviceInfo = (dimensions, appData) => {
   const scale = dimensions?.scale;
   const isLandscape = dimensions?.width > dimensions?.height;
   const orientation = isLandscape ? "landscape" : "portrait";
   const tablet = isTablet(dimensions, orientation) || false;
+  const isTabletLandscape = tablet && !appData?.isTabletPortrait;
 
-  return { scale, isTablet: tablet, orientation };
+  return { scale, isTablet: tablet, orientation, isTabletLandscape };
 };

package/reactHooks/layout/index.ts

@@ -1,9 +1,10 @@
 import * as R from "ramda";
 import { StatusBar, Platform } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 import { platformSelect, isTV } from "../../reactUtils";
 import { useIsNavBarVisible } from "../navigation";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
+
 import { isTablet } from "./isTablet";
 
 export { isTablet } from "./isTablet";

package/reactHooks/layout/types/index.ts

@@ -2,6 +2,7 @@ type DeviceInfo = {
   isTablet: boolean;
   scale: number;
   orientation: string;
+  isTabletLandscape: boolean;
 };
 
 type RNDimensions = {
@@ -20,6 +21,7 @@ export type Options = {
   excludeStatusBar?: boolean;
   rounded?: boolean;
   deviceInfo?: boolean;
+  updateForInactiveScreens?: boolean;
 };
 
 export type Context = "window" | "screen";

package/reactHooks/layout/useDimensions/helpers/__tests__/getInitialDimensions.native.test.js

@@ -1,19 +1,14 @@
-let mockPlatformOS = "android";
+import * as ReactNative from "react-native";
 
-jest.mock("react-native", () => {
-  const mockDimensionsGet = jest.fn(
-    (type) =>
-      ({
-        window: { width: 1, height: 1 },
-        screen: { width: 360, height: 540 },
-      }[type])
-  );
+const mockDimensionsGet = jest.fn(
+  (type) =>
+    ({
+      window: { width: 1, height: 1 },
+      screen: { width: 360, height: 540 },
+    }[type])
+);
 
-  return {
-    Platform: jest.fn(() => ({ OS: mockPlatformOS })),
-    Dimensions: { get: mockDimensionsGet },
-  };
-});
+ReactNative.Dimensions.get = mockDimensionsGet;
 
 const mockGetConstants = jest.fn().mockReturnValue({
   Dimensions: {
@@ -26,9 +21,10 @@ jest.mock("react-native/Libraries/Utilities/NativeDeviceInfo", () => ({
   getConstants: mockGetConstants,
 }));
 
-const { Platform, Dimensions } = require("react-native");
+const { Platform, Dimensions } = ReactNative;
 
 Platform.OS = "android";
+
 const { getInitialDimensions } = require("../getInitialDimensions.native.ts");
 
 describe("useDimensions > helpers ( native )", () => {
@@ -48,7 +44,6 @@ describe("useDimensions > helpers ( native )", () => {
 
   it("should call NativeDeviceInfo.getConstants for ios when width === height", () => {
     Platform.OS = "ios";
-    mockPlatformOS = "ios";
 
     jest.fn().mockReturnValue({
       Dimensions: {

package/reactHooks/layout/useDimensions/helpers/__tests__/getInitialDimensions.test.js

@@ -1,21 +1,19 @@
-jest.mock("react-native", () => {
-  const mockDimensionsGet = jest.fn(
-    (type) =>
-      ({
-        window: { width: 1, height: 1 },
-        screen: { width: 360, height: 540 },
-      }[type])
-  );
+import * as ReactNative from "react-native";
 
-  return {
-    Platform: jest.fn(() => ({ OS: "web" })),
-    Dimensions: { get: mockDimensionsGet },
-  };
-});
+const mockDimensionsGet = jest.fn(
+  (type) =>
+    ({
+      window: { width: 1, height: 1 },
+      screen: { width: 360, height: 540 },
+    }[type])
+);
+
+ReactNative.Dimensions.get = mockDimensionsGet;
 
-const { Platform, Dimensions } = require("react-native");
+const { Platform, Dimensions } = ReactNative;
 
 Platform.OS = "web";
+
 const { getInitialDimensions } = require("../getInitialDimensions.ts");
 
 describe("useDimensions > helpers (web)", () => {

package/reactHooks/layout/useDimensions/useDimensions.ts

@@ -1,13 +1,16 @@
-import { useState, useLayoutEffect, useRef, useMemo } from "react";
+import { useLayoutEffect, useMemo, useRef, useState } from "react";
 
 import * as R from "ramda";
 
 import { Dimensions, Platform, StatusBar } from "react-native";
+import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+
 import { isTV } from "../../../reactUtils";
 
 import { Options, UseDimensions } from "../types";
 import { getDeviceInfo } from "../getDeviceInfo";
 import { getInitialDimensions } from "./helpers";
+import { useIsScreenActive } from "../../navigation";
 
 function compensateForScaleIfNeeded(context) {
   return function () {
@@ -32,8 +35,11 @@ const statusBarHeight = StatusBar?.currentHeight;
  */
 export const useDimensions: UseDimensions = (
   context = "window",
-  fullDimensions = { fullDimensions: false }
+  fullDimensions = { fullDimensions: false, updateForInactiveScreens: true }
 ) => {
+  const isActive = useIsScreenActive();
+  const { appData } = usePickFromState(["appData"]);
+
   if (typeof fullDimensions === "boolean") {
     // eslint-disable-next-line no-console
     console.warn(
@@ -47,7 +53,7 @@ export const useDimensions: UseDimensions = (
       : { ...fullDimensions };
 
   const [dimensions, setDimensions] = useState(getInitialDimensions(context));
-  const deviceInfo = useRef(getDeviceInfo(dimensions));
+  const deviceInfo = useRef(getDeviceInfo(dimensions, appData));
 
   const applyOptions = R.compose(
     R.when(() => options.deviceInfo, R.assoc("deviceInfo", deviceInfo.current)),
@@ -73,7 +79,7 @@ export const useDimensions: UseDimensions = (
 
       if (newDimensions.width === newDimensions.height) {
         /**
-         * Ignoring case occured on iOS when Dimensions.get sometimes returning
+         * Ignoring case occurred on iOS when Dimensions.get sometimes returning
          * wrong `window` sizes
          * when switch background -> foreground state.
          * ( TODO fix when 1:1 aspect ratio will be used )
@@ -81,8 +87,8 @@ export const useDimensions: UseDimensions = (
 
         // eslint-disable-next-line no-console
         console.log("change: wrong values - width equal to height, ignoring");
-      } else {
-        deviceInfo.current = getDeviceInfo(newDimensions);
+      } else if (isActive || options.updateForInactiveScreens) {
+        deviceInfo.current = getDeviceInfo(newDimensions, appData);
         setDimensions(newDimensions);
       }
     };
@@ -92,7 +98,7 @@ export const useDimensions: UseDimensions = (
     return () => {
       activeSubscription.remove();
     };
-  }, []);
+  }, [isActive]);
 
   const memoizedDimensions = useMemo(() => {
     return { ...applyOptions(dimensions), statusBarHeight };

package/reactHooks/navigation/__mocks__/index.ts

@@ -15,11 +15,26 @@ export const mockMenu: ZappNavigation = {
   // preset_id?: null | unknown;
 };
 
+export const useRoute = jest.fn(() => ({
+  screenData: {
+    name: "someName",
+  },
+  pathname: "someRoute",
+}));
+
 export const useNavigation = jest.fn(() => ({
   data: {},
+  screenData: {
+    name: "someName",
+  },
+  activeRiver: {
+    id: "someId",
+  },
   currentRoute: "someRoute",
 }));
 
 export const useNavigationPluginData = jest.fn().mockReturnValue(mockMenu);
 
 export const useIsNavBarVisible = jest.fn().mockReturnValue(true);
+
+export const useIsScreenActive = jest.fn().mockReturnValue(true);

package/reactHooks/navigation/__mocks__/useNavigation.ts

@@ -0,0 +1,7 @@
+export const useNavigation = jest.fn(() => ({
+  data: {},
+  screenData: {
+    name: "someName",
+  },
+  currentRoute: "someRoute",
+}));