@applicaster/zapp-react-native-utils 12.0.0-rc.4 → 12.0.0-rc.41

package/reactHooks/layout/useDimensions/useDimensions.ts

@@ -1,4 +1,4 @@
-import { useState, useLayoutEffect, useRef, useMemo } from "react";
+import { useLayoutEffect, useMemo, useRef, useState } from "react";
 
 import * as R from "ramda";
 
@@ -8,6 +8,7 @@ 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 +33,10 @@ const statusBarHeight = StatusBar?.currentHeight;
  */
 export const useDimensions: UseDimensions = (
   context = "window",
-  fullDimensions = { fullDimensions: false }
+  fullDimensions = { fullDimensions: false, updateForInactiveScreens: true }
 ) => {
+  const isActive = useIsScreenActive();
+
   if (typeof fullDimensions === "boolean") {
     // eslint-disable-next-line no-console
     console.warn(
@@ -73,7 +76,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,7 +84,7 @@ export const useDimensions: UseDimensions = (
 
         // eslint-disable-next-line no-console
         console.log("change: wrong values - width equal to height, ignoring");
-      } else {
+      } else if (isActive || options.updateForInactiveScreens) {
         deviceInfo.current = getDeviceInfo(newDimensions);
         setDimensions(newDimensions);
       }
@@ -92,7 +95,7 @@ export const useDimensions: UseDimensions = (
     return () => {
       activeSubscription.remove();
     };
-  }, []);
+  }, [isActive]);
 
   const memoizedDimensions = useMemo(() => {
     return { ...applyOptions(dimensions), statusBarHeight };

package/reactHooks/navigation/__mocks__/index.ts

@@ -23,3 +23,5 @@ export const useNavigation = jest.fn(() => ({
 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,4 @@
+export const useNavigation = jest.fn(() => ({
+  data: {},
+  currentRoute: "someRoute",
+}));

package/reactHooks/navigation/__tests__/index.test.tsx

@@ -1,12 +1,12 @@
 import React from "react";
 import { PathnameContext } from "@applicaster/zapp-react-native-ui-components/Contexts/PathnameContext";
 import { renderHook } from "@testing-library/react-hooks";
-import { useRoute } from "../index";
+import { useRoute, isNavBarVisible } from "../";
 import { Provider } from "react-redux";
 import configureMockStore from "redux-mock-store";
 import { NavigationContext } from "@applicaster/zapp-react-native-ui-components/Contexts/NavigationContext";
 import { ZappHookModalContext } from "@applicaster/zapp-react-native-ui-components/Contexts";
-import { ROUTE_TYPES } from "../../../navigationUtils/routeTypes";
+import { ROUTE_TYPES } from "@applicaster/zapp-react-native-utils/navigationUtils/routeTypes";
 
 const plugins = [];
 
@@ -45,26 +45,24 @@ const videoItem = {
   type: { value: "video" },
 };
 
-const modalItem = {
-  id: "modal-1",
-};
+const mockGetStackForPathname = jest.fn().mockReturnValue(homeStack);
 
 const mainStackNavigator = {
-  getStackForPathname: jest.fn().mockReturnValue(homeStack),
-  modalState: {},
+  getStackForPathname: mockGetStackForPathname,
+  getModalState: () => {},
   videoModalState: {},
+  canGoBack: jest.fn(),
 };
 
-const videoModalNavigator = {
-  ...mainStackNavigator,
-  videoModalState: { item: videoItem },
+const _createWrapper = (Wrapper, props) => {
+  return function CreatedWrapper({ children }: any) {
+    return <Wrapper {...props}>{children}</Wrapper>;
+  };
 };
 
-const modalNavigator = {
+const videoModalNavigator = {
   ...mainStackNavigator,
-  modalState: {
-    screen: modalItem,
-  },
+  videoModalState: { item: videoItem },
 };
 
 const hookModalNavigator = {
@@ -86,7 +84,6 @@ const hookModalContextState = {
   resetState: jest.fn(),
 };
 
-const modalPathname = `${ROUTE_TYPES.MODAL}/${modalItem.id}`;
 const hooksModalPathname = `${ROUTE_TYPES.HOOKS_MODAL}/${hookModalContextState.state.screenData.payload.id}`;
 const videoModalPathname = `${ROUTE_TYPES.VIDEO_MODAL}/${videoModalNavigator.videoModalState.item.id}`;
 const mockStore = configureMockStore();
@@ -97,10 +94,16 @@ const store = mockStore({
   contentTypes,
 });
 
-const mainStackWrapper = ({ children }) => (
+const mainStackWrapper = ({
+  children,
+  navigator = {},
+  pathname = homeStack.route,
+}) => (
   <Provider store={store}>
-    <NavigationContext.Provider value={mainStackNavigator}>
-      <PathnameContext.Provider value={homeStack.route}>
+    <NavigationContext.Provider
+      value={{ ...mainStackNavigator, ...navigator, currentRoute: pathname }}
+    >
+      <PathnameContext.Provider value={pathname}>
         {children}
       </PathnameContext.Provider>
     </NavigationContext.Provider>
@@ -117,16 +120,6 @@ const videoModalWrapper = ({ children }) => (
   </Provider>
 );
 
-const modalWrapper = ({ children }) => (
-  <Provider store={store}>
-    <NavigationContext.Provider value={modalNavigator}>
-      <PathnameContext.Provider value={modalPathname}>
-        {children}
-      </PathnameContext.Provider>
-    </NavigationContext.Provider>
-  </Provider>
-);
-
 const hookModalWrapper = ({ children }) => (
   <Provider store={store}>
     <ZappHookModalContext.ReactContext.Provider value={hookModalContextState}>
@@ -139,88 +132,251 @@ const hookModalWrapper = ({ children }) => (
   </Provider>
 );
 
-describe("useRoute", () => {
-  describe("Main stack components", () => {
-    it("should return a correct pathname", () => {
-      const { result } = renderHook(() => useRoute(), {
-        wrapper: mainStackWrapper,
+jest.mock("../../../modalState", () => ({
+  useModalStore: jest.fn(),
+}));
+
+describe("navigation", () => {
+  describe("useRoute", () => {
+    describe("Main stack components", () => {
+      it("should return a correct pathname", () => {
+        const { result } = renderHook(() => useRoute(), {
+          wrapper: mainStackWrapper,
+        });
+
+        expect(result.current.pathname).toEqual(homeStack.route);
       });
 
-      expect(result.current.pathname).toEqual(homeStack.route);
+      it("should return correct screenData information", () => {
+        const { result } = renderHook(() => useRoute(), {
+          wrapper: mainStackWrapper,
+        });
+
+        expect(result.current.screenData.id).toEqual(entry.id);
+
+        expect(result.current.screenData.targetScreen.id).toEqual(screen.id);
+      });
     });
 
-    it("should return correct screenData information", () => {
-      const { result } = renderHook(() => useRoute(), {
-        wrapper: mainStackWrapper,
+    describe("Hook modal components", () => {
+      it("should return a correct pathname", () => {
+        const { result } = renderHook(() => useRoute(), {
+          wrapper: hookModalWrapper,
+        });
+
+        expect(result.current.pathname).toEqual(hooksModalPathname);
       });
 
-      expect(result.current.screenData.id).toEqual(entry.id);
+      it("should return correct screenData information", () => {
+        const { result } = renderHook(() => useRoute(), {
+          wrapper: hookModalWrapper,
+        });
 
-      expect(result.current.screenData.targetScreen.id).toEqual(screen.id);
+        expect(result.current.screenData.id).toEqual(
+          hookModalContextState.state.screenData.payload.id
+        );
+      });
     });
-  });
 
-  describe("Hook modal components", () => {
-    it("should return a correct pathname", () => {
-      const { result } = renderHook(() => useRoute(), {
-        wrapper: hookModalWrapper,
+    describe("Video modal components", () => {
+      it("should return a correct pathname", () => {
+        const { result } = renderHook(() => useRoute(), {
+          wrapper: videoModalWrapper,
+        });
+
+        expect(result.current.pathname).toEqual(videoModalPathname);
       });
 
-      expect(result.current.pathname).toEqual(hooksModalPathname);
-    });
+      it("should return correct screenData information", () => {
+        const { result } = renderHook(() => useRoute(), {
+          wrapper: videoModalWrapper,
+        });
+
+        expect(result.current.screenData.id).toEqual(
+          videoModalNavigator.videoModalState.item.id
+        );
 
-    it("should return correct screenData information", () => {
-      const { result } = renderHook(() => useRoute(), {
-        wrapper: hookModalWrapper,
+        expect(result.current.screenData.targetScreen.id).toEqual(
+          rivers["river-player"].id
+        );
       });
+    });
+  });
 
-      expect(result.current.screenData.id).toEqual(
-        hookModalContextState.state.screenData.payload.id
+  describe("isNavBarVisible", () => {
+    it("returns false when the route is a player route", () => {
+      const navBarVisible = isNavBarVisible(
+        "/playable/some_vod_item",
+        {} as ZappRiver,
+        false,
+        false
       );
+
+      expect(navBarVisible).toBe(false);
     });
-  });
 
-  describe("Video modal components", () => {
-    it("should return a correct pathname", () => {
-      const { result } = renderHook(() => useRoute(), {
-        wrapper: videoModalWrapper,
-      });
+    it("returns false when the next screen is the QB search screen", () => {
+      const navBarVisible = isNavBarVisible(
+        "/river/A1234",
+        {
+          type: "qb_search_screen",
+        } as any,
+        false,
+        false
+      );
 
-      expect(result.current.pathname).toEqual(videoModalPathname);
+      expect(navBarVisible).toBe(false);
     });
 
-    it("should return correct screenData information", () => {
-      const { result } = renderHook(() => useRoute(), {
-        wrapper: videoModalWrapper,
+    describe("when screen is a hook", () => {
+      it("returns true if the `showNavBar` flag is set to true", () => {
+        const navBarVisible = isNavBarVisible(
+          "",
+          {
+            hookPlugin: {
+              module: {
+                showNavBar: true,
+              },
+            },
+          } as any,
+          false,
+          false
+        );
+
+        expect(navBarVisible).toBe(true);
+      });
+
+      it("returns true if presentFullScreen flag is set to false", () => {
+        const navBarVisible = isNavBarVisible(
+          "",
+          {
+            hookPlugin: {
+              module: {
+                presentFullScreen: false,
+              },
+            },
+          } as any,
+          false,
+          false
+        );
+
+        expect(navBarVisible).toBe(true);
       });
 
-      expect(result.current.screenData.id).toEqual(
-        videoModalNavigator.videoModalState.item.id
+      it("returns false if presentFullScreen flag is set to true", () => {
+        const navBarVisible = isNavBarVisible(
+          "",
+          {
+            hookPlugin: {
+              module: {
+                presentFullScreen: true,
+              },
+            },
+          } as any,
+          false,
+          false
+        );
+
+        expect(navBarVisible).toBe(false);
+      });
+    });
+
+    it("returns false if the screen's general settings allow screen presentation", () => {
+      const navBarVisible = isNavBarVisible(
+        "",
+        {
+          general: {
+            allow_screen_plugin_presentation: true,
+          },
+        } as any,
+        false,
+        false
       );
 
-      expect(result.current.screenData.targetScreen.id).toEqual(
-        rivers["river-player"].id
+      expect(navBarVisible).toBe(false);
+    });
+
+    it("returns false if the screen's general settings hide app nav bar", () => {
+      const navBarVisible = isNavBarVisible(
+        "",
+        {
+          general: {
+            hide_app_nav_bar: true,
+          },
+        } as any,
+        false,
+        false
       );
+
+      expect(navBarVisible).toBe(false);
     });
-  });
 
-  describe("Modal components", () => {
-    it("should return a correct pathname", () => {
-      const { result } = renderHook(() => useRoute(), {
-        wrapper: modalWrapper,
-      });
+    it("returns false if it's secondary nav bar and hide_secondary_level_menu is true", () => {
+      const navBarVisible = isNavBarVisible(
+        "",
+        {
+          navigations: [
+            {
+              styles: {
+                hide_secondary_level_menu: true,
+              },
+            },
+          ],
+        } as any,
+        false,
+        true
+      );
 
-      expect(result.current.pathname).toEqual(modalPathname);
+      expect(navBarVisible).toBe(false);
     });
 
-    it("should return correct screenData information", () => {
-      const { result } = renderHook(() => useRoute(), {
-        wrapper: modalWrapper,
-      });
+    it("returns true if it's secondary nav bar and hide_secondary_level_menu is false", () => {
+      const navBarVisible = isNavBarVisible(
+        "",
+        {
+          navigations: [
+            {
+              styles: {
+                hide_secondary_level_menu: false,
+              },
+            },
+          ],
+        } as any,
+        true,
+        false
+      );
+
+      expect(navBarVisible).toBe(true);
+    });
+
+    it("returns true if it's first level menu and hide_secondary_level_menu is true", () => {
+      const navBarVisible = isNavBarVisible(
+        "",
+        {
+          navigations: [
+            {
+              styles: {
+                hide_secondary_level_menu: true,
+              },
+            },
+          ],
+        } as any,
+        true,
+        false
+      );
 
-      expect(result.current.screenData.id).toEqual(
-        modalNavigator.modalState.screen.id
+      expect(navBarVisible).toBe(true);
+    });
+
+    it("returns true otherwise", () => {
+      const navBarVisible = isNavBarVisible(
+        "",
+        { navigations: [] } as any,
+        true,
+        true
       );
+
+      expect(navBarVisible).toBe(true);
     });
   });
 });