@applicaster/zapp-react-native-utils 13.0.0-rc.14 → 13.0.0-rc.141

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

@@ -135,10 +135,6 @@ const hookModalWrapper = ({ children }) => (
   </Provider>
 );
 
-jest.mock("../../../modalState", () => ({
-  useModalStore: jest.fn(),
-}));
-
 describe("navigation", () => {
   describe("useRoute", () => {
     describe("Main stack components", () => {
@@ -314,14 +310,14 @@ describe("navigation", () => {
       expect(navBarVisible).toBe(false);
     });
 
-    it("returns false if it's secondary nav bar and hide_secondary_level_menu is true", () => {
+    it("returns false if it's secondary nav bar and show_secondary_level_menu is false", () => {
       const navBarVisible = isNavBarVisible(
         "",
         {
           navigations: [
             {
               styles: {
-                hide_secondary_level_menu: true,
+                show_secondary_level_menu: false,
               },
             },
           ],
@@ -333,14 +329,14 @@ describe("navigation", () => {
       expect(navBarVisible).toBe(false);
     });
 
-    it("returns true if it's secondary nav bar and hide_secondary_level_menu is false", () => {
+    it("returns true if it's secondary nav bar and show_secondary_level_menu is true", () => {
       const navBarVisible = isNavBarVisible(
         "",
         {
           navigations: [
             {
               styles: {
-                hide_secondary_level_menu: false,
+                show_secondary_level_menu: true,
               },
             },
           ],
@@ -352,14 +348,14 @@ describe("navigation", () => {
       expect(navBarVisible).toBe(true);
     });
 
-    it("returns true if it's first level menu and hide_secondary_level_menu is true", () => {
+    it("returns true if it's first level menu and show_secondary_level_menu is false", () => {
       const navBarVisible = isNavBarVisible(
         "",
         {
           navigations: [
             {
               styles: {
-                hide_secondary_level_menu: true,
+                show_secondary_level_menu: false,
               },
             },
           ],
@@ -370,16 +366,5 @@ describe("navigation", () => {
 
       expect(navBarVisible).toBe(true);
     });
-
-    it("returns true otherwise", () => {
-      const navBarVisible = isNavBarVisible(
-        "",
-        { navigations: [] } as any,
-        true,
-        true
-      );
-
-      expect(navBarVisible).toBe(true);
-    });
   });
 });

package/reactHooks/navigation/getTabBarHeight.ts

@@ -0,0 +1,10 @@
+import { platformSelect } from "../../reactUtils";
+
+const TAB_BAR_HEIGHT_IOS = 49;
+const TAB_BAR_HEIGHT_ANDROID = 56;
+
+export const getTabBarHeight = () =>
+  platformSelect({
+    ios: TAB_BAR_HEIGHT_IOS,
+    android: TAB_BAR_HEIGHT_ANDROID,
+  }) as number;

package/reactHooks/navigation/index.ts

@@ -1,9 +1,5 @@
-/* eslint-disable @typescript-eslint/no-use-before-define */
-/* eslint max-len: off */
-
-import React, { useContext, useEffect, useMemo } from "react";
-import { BackHandler, InteractionManager, NativeModules } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useContext, useEffect, useMemo, useRef } from "react";
+import { BackHandler } from "react-native";
 
 import {
   useContentTypes,
@@ -11,34 +7,38 @@ import {
 } from "@applicaster/zapp-react-native-redux/hooks";
 import { HooksManager } from "@applicaster/zapp-react-native-utils/appUtils/HooksManager";
 
-import { legacyScreenData } from "@applicaster/quick-brick-core/App/NavigationProvider/utils";
-import {
-  LONG_KEY_PRESS_TIMEOUT,
-  QUICK_BRICK_NAVBAR,
-  QUICK_BRICK_CONTENT,
-} from "@applicaster/quick-brick-core/const";
-import { useZappHooksModalState } from "@applicaster/zapp-react-dom-ui-components/Components/ZappHooksModal/hooks/useZappHooksModalState";
+import { LONG_KEY_PRESS_TIMEOUT } from "@applicaster/quick-brick-core/const";
 import { ZappHookModalContext } from "@applicaster/zapp-react-native-ui-components/Contexts";
-import { PathnameContext } from "@applicaster/zapp-react-native-ui-components/Contexts/PathnameContext";
 import { HookModalContextT } from "@applicaster/zapp-react-native-ui-components/Contexts/ZappHookModalContext";
 import { HOOKS_EVENTS } from "../../appUtils/HooksManager/constants";
-import {
-  getNavigationProps,
-  getRiverFromRoute,
-  getTargetRoute,
-} from "../../navigationUtils";
-import { platformSelect } from "../../reactUtils";
+import { getRiverFromRoute, getTargetRoute } from "../../navigationUtils";
 import { useConnectionInfo } from "../connection";
-import { getTargetScreenData } from "../screen/useTargetScreenData";
 
-import { isTV, isWeb } from "@applicaster/zapp-react-native-utils/reactUtils";
+import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { useNavbarState } from "../screen";
-import { useNavigation } from "./useNavigation";
-import { useModalStore } from "../../modalState";
-import { ScreenDataContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenDataContext";
 
 export { useNavigation } from "./useNavigation";
 
+export { useRoute } from "./useRoute";
+
+export { usePathname } from "./usePathname";
+
+export { useNavigationPluginData } from "./useNavigationPluginData";
+
+export { useNavigationType } from "./useNavigationType";
+
+export { useGetBottomTabBarHeight } from "./useGetBottomTabBarHeight";
+
+export { useIsScreenActive } from "./useIsScreenActive";
+
+export { useProfilerLogging } from "./useProfilerLogging";
+
+export {
+  useUniqueRouteSuffix,
+  useNavbarId,
+  useContentId,
+} from "./useUniqueRouteSuffix";
+
 /**
  * This function helps to decide wether the navbar should be presented on the screen
  * based on route and / or screen Data
@@ -108,11 +108,13 @@ export function isNavBarVisible(
     return false;
   }
 
-  const hideSecondaryLevel = screenData?.navigations?.some(
-    (navigation) => navigation.styles?.hide_secondary_level_menu
-  );
+  const showSecondaryLevel =
+    !isTV() ||
+    screenData?.navigations?.some(
+      (navigation) => navigation.styles?.show_secondary_level_menu
+    );
 
-  if (canGoBack && hideSecondaryLevel) {
+  if (canGoBack && !showSecondaryLevel) {
     return false;
   }
 
@@ -123,12 +125,8 @@ export function isNavBarVisible(
   return true;
 }
 
-const { ProfilerBridge } = NativeModules;
-
-export const usePathname = () => React.useContext(PathnameContext);
-
 export const useBackHandler = (cb: () => boolean) => {
-  React.useEffect(() => {
+  useEffect(() => {
     BackHandler.addEventListener("hardwareBackPress", cb);
 
     return () => {
@@ -137,88 +135,6 @@ export const useBackHandler = (cb: () => boolean) => {
   }, [cb]);
 };
 
-// starts with modal/
-const isModalPathname = (pathname: string) => /^modal\//.test(pathname);
-
-const isVideoModalPathname = (pathname: string) =>
-  /^video-modal\//.test(pathname);
-
-const isHookModalPathname = (pathname: string) =>
-  /^hooks-modal\//.test(pathname);
-
-const isHookPathname = (pathname: string) => /^\/hooks\//.test(pathname);
-
-type VariousScreenData = LegacyNavigationScreenData | ZappRiver | ZappEntry;
-
-export const useRoute = (): {
-  screenData: VariousScreenData;
-  pathname: string;
-} => {
-  const pathname = usePathname() || "";
-  const navigator = useNavigation();
-  const screenDataContext = legacyScreenData(useContext(ScreenDataContext));
-
-  const { plugins, contentTypes, rivers } = usePickFromState([
-    "plugins",
-    "rivers",
-    "contentTypes",
-  ]);
-
-  const { modalState } = useModalStore();
-  const hookModalState = useZappHooksModalState();
-
-  const modalScreenData = modalState.screen;
-
-  const hookModalScreenData = hookModalState.state.screenData?.payload;
-
-  const videoModalScreenData =
-    navigator.videoModalState?.item &&
-    legacyScreenData(
-      {
-        entry: navigator.videoModalState?.item as ZappEntry,
-        screen: getTargetScreenData(
-          navigator.videoModalState?.item as ZappEntry,
-          rivers,
-          contentTypes
-        ),
-      },
-      plugins
-    );
-
-  // There are 4 route scenarios
-  // For regular screens take date from navigator stack.
-  // is path is model grab screenData from modal state
-  // if path is video modal grab screenData from video state
-  // if path is hook modal grab screenData from hook state
-  // if path is hook grab screenData from screenData
-
-  if (isModalPathname(pathname)) {
-    const screenData = modalScreenData ?? ({} as ZappEntry);
-
-    return { screenData, pathname };
-  }
-
-  if (isVideoModalPathname(pathname)) {
-    const screenData = videoModalScreenData as LegacyNavigationScreenData;
-
-    return { screenData, pathname };
-  }
-
-  if (isHookModalPathname(pathname)) {
-    const screenData = hookModalScreenData;
-
-    return { screenData, pathname };
-  }
-
-  if (isHookPathname(pathname)) {
-    return { screenData: screenDataContext, pathname };
-  }
-
-  const screenData = screenDataContext;
-
-  return { screenData, pathname };
-};
-
 type Callbacks = Partial<{
   handleHookPresent: ({
     route,
@@ -244,7 +160,7 @@ export const useZappHooksForEntry = (
     setIsHooksExecutionInProgress,
     setIsPresentingFullScreen,
     setIsRunningInBackground,
-  }: HookModalContextT = React.useContext(ZappHookModalContext.ReactContext);
+  }: HookModalContextT = useContext(ZappHookModalContext.ReactContext);
 
   const {
     appData: { layoutVersion },
@@ -342,50 +258,10 @@ export const useZappHooksForEntry = (
   }, [entry.id]);
 };
 
-export enum MenuTypes {
-  drawer = "DRAWER",
-  bottomTabBar = "BOTTOM_TAB_BAR",
-}
-
-export const useNavigationPluginData = (): ZappNavigation | undefined => {
-  const {
-    screenData: useRouteScreenData,
-  }: { screenData: QuickBrickNavigationData | null } = useRoute();
-
-  const navigations = useRouteScreenData?.targetScreen
-    ? (useRouteScreenData.targetScreen as ZappRiver).navigations
-    : (useRouteScreenData as ZappRiver).navigations;
-
-  const navigationMenu = navigations?.find((nav) => nav.category === "menu");
-
-  return navigationMenu;
-};
-
-export const useNavigationType = (): MenuTypes => {
-  const navigationMenu = useNavigationPluginData();
-
-  return !navigationMenu ||
-    navigationMenu.navigation_type === "quick_brick_side_menu"
-    ? MenuTypes.drawer
-    : MenuTypes.bottomTabBar;
-};
-
-export const useProfilerLogging = () => {
-  const logTimestamp = (data: string) =>
-    InteractionManager.runAfterInteractions(() => {
-      if (ProfilerBridge && data) {
-        ProfilerBridge.updateTimer("navigation", data, Date.now());
-      }
-    });
-
-  return logTimestamp;
-};
-
 export const useRunIfLongPress = (
   options = { timeout: LONG_KEY_PRESS_TIMEOUT }
 ) => {
-  const pressTimeout =
-    React.useRef<Nullable<ReturnType<typeof setTimeout>>>(null);
+  const pressTimeout = useRef<Nullable<ReturnType<typeof setTimeout>>>(null);
 
   const resetTimeout = () => {
     clearTimeout(pressTimeout.current as ReturnType<typeof setTimeout>);
@@ -414,81 +290,3 @@ export const useIsNavBarVisible = (): boolean => {
 
   return useMemo(() => visible, [visible]);
 };
-
-const useGetNavBarTopBorderWidth = (): number => {
-  const navigator = useNavigation();
-
-  const navProps = getNavigationProps({
-    navigator,
-    title: "",
-    category: "menu",
-  });
-
-  return Number(((navProps?.styles as any)?.top_border_width as number) ?? 0);
-};
-
-const TAB_BAR_HEIGHT_IOS = 49;
-const TAB_BAR_HEIGHT_ANDROID = 56;
-
-const useGetTabBarHeight = () =>
-  platformSelect({
-    ios: TAB_BAR_HEIGHT_IOS + (useSafeAreaInsets().bottom ?? 0),
-    android: TAB_BAR_HEIGHT_ANDROID,
-  }) as number;
-
-export const useGetBottomTabBarHeight = (): number => {
-  const topBorderWidth = useGetNavBarTopBorderWidth();
-  const tabBarHeight = useGetTabBarHeight();
-
-  const isBottomBarNavigation = useNavigationType() === MenuTypes.bottomTabBar;
-
-  return !isBottomBarNavigation ? 0 : tabBarHeight + topBorderWidth;
-};
-
-// If current screen is active/focused (visible to the user)
-export const useIsScreenActive = () => {
-  const pathname = usePathname();
-  const { currentRoute, videoModalState } = useNavigation();
-
-  if (
-    videoModalState.visible &&
-    ["FULLSCREEN", "MAXIMIZED", "PIP"].includes(videoModalState.mode)
-  ) {
-    return false;
-  }
-
-  return pathname === currentRoute;
-};
-
-type Return = (prefix: string) => string;
-
-export const useUniqueRouteSuffix = (): Return => {
-  const pathname = usePathname();
-  const { currentRoute } = useNavigation();
-
-  const suffix = `currentRoute:${currentRoute}_pathname:${pathname}`;
-
-  const withUniqueRouteSuffix = React.useCallback((prefix: string) => {
-    if (isWeb()) {
-      // we should use extended route prefix only on Web, where we have stack-navigator
-      return `${prefix}___${suffix}`;
-    }
-
-    // for other platforms use previous version
-    return prefix;
-  }, []);
-
-  return withUniqueRouteSuffix;
-};
-
-export const useNavbarId = () => {
-  const withUniqueRouteSuffix = useUniqueRouteSuffix();
-
-  return withUniqueRouteSuffix(QUICK_BRICK_NAVBAR);
-};
-
-export const useContentId = () => {
-  const withUniqueRouteSuffix = useUniqueRouteSuffix();
-
-  return withUniqueRouteSuffix(QUICK_BRICK_CONTENT);
-};

package/reactHooks/navigation/useGetBottomTabBarHeight.ts

@@ -0,0 +1,19 @@
+import { useGetNavBarTopBorderWidth } from "./useGetNavBarTopBorderWidth";
+import { getTabBarHeight } from "./getTabBarHeight";
+import { useNavigation } from "./useNavigation";
+import { MenuTypes, useNavigationType } from "./useNavigationType";
+import { useNavigationPluginData } from "./useNavigationPluginData";
+
+export const useGetBottomTabBarHeight = (): number => {
+  const { activeRiver } = useNavigation();
+
+  const navigationPluginData = useNavigationPluginData(activeRiver);
+  const navigationType = useNavigationType(navigationPluginData);
+
+  const topBorderWidth = useGetNavBarTopBorderWidth();
+  const tabBarHeight = getTabBarHeight();
+
+  const isBottomBarNavigation = navigationType === MenuTypes.bottomTabBar;
+
+  return !isBottomBarNavigation ? 0 : tabBarHeight + topBorderWidth;
+};

package/reactHooks/navigation/useGetNavBarTopBorderWidth.ts

@@ -0,0 +1,14 @@
+import { getNavigationProps } from "../../navigationUtils";
+import { useNavigation } from "./useNavigation";
+
+export const useGetNavBarTopBorderWidth = (): number => {
+  const navigator = useNavigation();
+
+  const navProps = getNavigationProps({
+    navigator,
+    title: "",
+    category: "menu",
+  });
+
+  return Number(((navProps?.styles as any)?.top_border_width as number) ?? 0);
+};

package/reactHooks/navigation/useIsScreenActive.ts

@@ -0,0 +1,17 @@
+import { useNavigation } from "./useNavigation";
+import { usePathname } from "./usePathname";
+
+// If current screen is active/focused (visible to the user)
+export const useIsScreenActive = () => {
+  const pathname = usePathname();
+  const { currentRoute, videoModalState } = useNavigation();
+
+  if (
+    videoModalState.visible &&
+    ["FULLSCREEN", "MAXIMIZED", "PIP"].includes(videoModalState.mode)
+  ) {
+    return false;
+  }
+
+  return pathname === currentRoute;
+};

package/reactHooks/navigation/useNavigationPluginData.ts

@@ -0,0 +1,19 @@
+import { useRoute } from "./useRoute";
+
+export const useNavigationPluginData = (
+  screenData?: LegacyNavigationScreenData | null
+): ZappNavigation | undefined => {
+  const {
+    screenData: useRouteScreenData,
+  }: { screenData: QuickBrickNavigationData | null } = useRoute();
+
+  const activeScreenData = screenData ?? useRouteScreenData;
+
+  const navigations = activeScreenData?.targetScreen
+    ? (activeScreenData.targetScreen as ZappRiver).navigations
+    : (activeScreenData as ZappRiver).navigations;
+
+  const navigationMenu = navigations?.find((nav) => nav.category === "menu");
+
+  return navigationMenu;
+};

package/reactHooks/navigation/useNavigationType.ts

@@ -0,0 +1,17 @@
+import { useNavigationPluginData } from "./useNavigationPluginData";
+
+export enum MenuTypes {
+  drawer = "DRAWER",
+  bottomTabBar = "BOTTOM_TAB_BAR",
+}
+
+export const useNavigationType = (navigation?: ZappNavigation): MenuTypes => {
+  const navigationPluginData = useNavigationPluginData();
+
+  const navigationMenu = navigation ?? navigationPluginData;
+
+  return !navigationMenu ||
+    navigationMenu.navigation_type === "quick_brick_side_menu"
+    ? MenuTypes.drawer
+    : MenuTypes.bottomTabBar;
+};

package/reactHooks/navigation/usePathname.ts

@@ -0,0 +1,4 @@
+import { PathnameContext } from "@applicaster/zapp-react-native-ui-components/Contexts/PathnameContext";
+import React from "react";
+
+export const usePathname = () => React.useContext(PathnameContext);

package/reactHooks/navigation/useProfilerLogging.ts

@@ -0,0 +1,15 @@
+import { useCallback } from "react";
+import { InteractionManager, NativeModules } from "react-native";
+
+const { ProfilerBridge } = NativeModules;
+
+export const useProfilerLogging = () =>
+  useCallback(
+    (data: string) =>
+      InteractionManager.runAfterInteractions(() => {
+        if (ProfilerBridge && data) {
+          ProfilerBridge.updateTimer("navigation", data, Date.now());
+        }
+      }),
+    []
+  );

package/reactHooks/navigation/useRoute.ts

@@ -0,0 +1,98 @@
+/* eslint-disable @typescript-eslint/no-use-before-define */
+/* eslint max-len: off */
+
+import { useContext } from "react";
+
+import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+
+import { legacyScreenData } from "@applicaster/quick-brick-core/App/NavigationProvider/utils";
+
+import { getTargetScreenData } from "../screen/useTargetScreenData";
+import { useHookModalScreenData } from "../hookModal/hooks/useHookModalScreenData";
+
+import { useNavigation } from "./useNavigation";
+import { useModalStoreState } from "../../modalState";
+import { ScreenDataContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenDataContext";
+import { usePathname } from "./usePathname";
+
+// starts with modal/
+const isModalPathname = (pathname: string) => /^modal\//.test(pathname);
+
+const isVideoModalPathname = (pathname: string) =>
+  /^video-modal\//.test(pathname);
+
+const isHookModalPathname = (pathname: string) =>
+  /^hooks-modal\//.test(pathname);
+
+const isHookPathname = (pathname: string) => /^\/hooks\//.test(pathname);
+
+type VariousScreenData = LegacyNavigationScreenData | ZappRiver | ZappEntry;
+
+export const useRoute = (): {
+  screenData: VariousScreenData;
+  pathname: string;
+} => {
+  const pathname = usePathname() || "";
+  const navigator = useNavigation();
+
+  const screenDataContext = legacyScreenData(useContext(ScreenDataContext));
+
+  const { plugins, contentTypes, rivers } = usePickFromState([
+    "plugins",
+    "rivers",
+    "contentTypes",
+  ]);
+
+  const modalState = useModalStoreState();
+
+  const modalScreenData = modalState.screen;
+
+  const hookModalScreenData = useHookModalScreenData();
+
+  const videoModalScreenData =
+    navigator?.videoModalState?.item &&
+    legacyScreenData(
+      {
+        entry: navigator.videoModalState?.item as ZappEntry,
+        screen: getTargetScreenData(
+          navigator.videoModalState?.item as ZappEntry,
+          rivers,
+          contentTypes
+        ),
+      },
+      plugins
+    );
+
+  // There are 4 route scenarios
+  // For regular screens take date from navigator stack.
+  // is path is model grab screenData from modal state
+  // if path is video modal grab screenData from video state
+  // if path is hook modal grab screenData from hook state
+  // if path is hook grab screenData from screenData
+
+  if (isModalPathname(pathname)) {
+    const screenData = modalScreenData ?? ({} as ZappEntry);
+
+    return { screenData, pathname };
+  }
+
+  if (isVideoModalPathname(pathname)) {
+    const screenData = videoModalScreenData as LegacyNavigationScreenData;
+
+    return { screenData, pathname };
+  }
+
+  if (isHookModalPathname(pathname)) {
+    const screenData = hookModalScreenData;
+
+    return { screenData, pathname };
+  }
+
+  if (isHookPathname(pathname)) {
+    return { screenData: screenDataContext, pathname };
+  }
+
+  const screenData = screenDataContext;
+
+  return { screenData, pathname };
+};

package/reactHooks/navigation/useUniqueRouteSuffix.ts

@@ -0,0 +1,41 @@
+import React from "react";
+import { isWeb } from "../../reactUtils";
+import { useNavigation } from "./useNavigation";
+import { usePathname } from "./usePathname";
+import {
+  QUICK_BRICK_CONTENT,
+  QUICK_BRICK_NAVBAR,
+} from "@applicaster/quick-brick-core/const";
+
+type Return = (prefix: string) => string;
+
+export const useUniqueRouteSuffix = (): Return => {
+  const pathname = usePathname();
+  const { currentRoute } = useNavigation();
+
+  const suffix = `currentRoute:${currentRoute}_pathname:${pathname}`;
+
+  const withUniqueRouteSuffix = React.useCallback((prefix: string) => {
+    if (isWeb()) {
+      // we should use extended route prefix only on Web, where we have stack-navigator
+      return `${prefix}___${suffix}`;
+    }
+
+    // for other platforms use previous version
+    return prefix;
+  }, []);
+
+  return withUniqueRouteSuffix;
+};
+
+export const useNavbarId = () => {
+  const withUniqueRouteSuffix = useUniqueRouteSuffix();
+
+  return withUniqueRouteSuffix(QUICK_BRICK_NAVBAR);
+};
+
+export const useContentId = () => {
+  const withUniqueRouteSuffix = useUniqueRouteSuffix();
+
+  return withUniqueRouteSuffix(QUICK_BRICK_CONTENT);
+};