@applicaster/zapp-react-native-ui-components 12.0.0-rc.1 → 12.0.0-rc.100

package/Components/Screen/__tests__/Screen.test.tsx

@@ -1,13 +1,21 @@
 import * as React from "react";
 import { View } from "react-native";
-import { create, act } from "react-test-renderer";
-
-import { ORIENTATIONS } from "@applicaster/zapp-react-native-utils/appUtils/orientationHelper";
+import { act, create } from "react-test-renderer";
 
 const Mocked_RouteManager = jest.fn((props) => (
   <View testID="routeManager" {...props} />
 ));
 
+const mock_navBarVisibleFlag = true;
+
+const mockIsNavBarVisible = jest.fn(() => mock_navBarVisibleFlag);
+
+const mockIsOrientationCompatible = jest.fn(() => true);
+
+jest.mock("react-native-safe-area-context", () => ({
+  useSafeAreaInsets: () => ({ top: 44 }),
+}));
+
 jest.mock("../../RouteManager", () => ({
   RouteManager: Mocked_RouteManager,
 }));
@@ -15,6 +23,7 @@ jest.mock("../../RouteManager", () => ({
 jest.mock(
   "@applicaster/zapp-react-native-utils/appUtils/orientationHelper",
   () => ({
+    isOrientationCompatible: mockIsOrientationCompatible,
     allowedOrientationsForScreen: jest.fn(),
     getOrientation: jest.fn(),
     getScreenOrientation: jest.fn(),
@@ -25,59 +34,54 @@ jest.mock(
   })
 );
 
-let mock_navBarVisibleFlag = true;
-
-jest.mock("../navigationHandler.ts", () => ({
-  isNavBarVisible: jest.fn(() => mock_navBarVisibleFlag),
-}));
-
 jest.mock("@applicaster/zapp-react-native-utils/analyticsUtils", () => ({
   useAnalytics: jest.fn(() => ({
     sendScreenEvent: jest.fn(),
   })),
 }));
 
-const {
-  allowedOrientationsForScreen,
-  getOrientation,
-  useGetScreenOrientation,
-} = require("@applicaster/zapp-react-native-utils/appUtils/orientationHelper");
-
 jest.mock("@applicaster/zapp-react-native-utils/theme", () => ({
   useTheme: jest.fn(() => ({
     app_background_color: "blue",
   })),
 }));
 
+const NavBar = jest.fn((props) => <View testID="navBar" {...props} />);
+
+jest.mock(
+  "@applicaster/zapp-react-native-app/App/Layout/layoutHelpers",
+  () => ({
+    getNavigationPluginModule: () => NavBar,
+  })
+);
+
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks/screen", () => ({
-  useCurrentScreenData: jest.fn(() => ({
+  ...(jest.requireActual(
+    "@applicaster/zapp-react-native-utils/reactHooks/screen"
+  ) as any),
+  useScreenData: jest.fn(() => ({
     id: "testId",
+    navigations: [{ id: "testId", category: "nav_bar" }],
   })),
-  useNavbarState: jest.fn(() => ({
-    visible: jest.fn(() => mock_navBarVisibleFlag),
+  useCurrentScreenData: jest.fn(() => ({
+    id: "testId",
   })),
 }));
 
-const {
-  useCurrentScreenData,
-} = require("@applicaster/zapp-react-native-utils/reactHooks/screen");
-
-const { isNavBarVisible } = require("../navigationHandler");
-
-const NavBar = jest.fn((props) => <View testID="navBar" {...props} />);
-const navigator = {};
-const navBarProps = { nav_items: [] };
-const screenData = {};
-
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation", () => ({
+  isNavBarVisible: mockIsNavBarVisible,
   useRoute: jest.fn(() => ({
     pathname: "/river/testId",
+    screenData: { id: "testId" },
   })),
   useNavigation: jest.fn(() => ({
     canGoBack: () => false,
     currentRoute: "/river/testId",
+    activeRiver: { id: "testId" },
+    screenData: { id: "testId" },
     data: { screen: { id: "testId" } },
   })),
+  useIsScreenActive: jest.fn().mockReturnValue(true),
 }));
 
 jest.mock("@applicaster/zapp-react-native-redux/hooks", () => ({
@@ -95,9 +99,26 @@ jest.mock("@applicaster/zapp-react-native-redux/hooks", () => ({
   }),
 }));
 
+const {
+  ORIENTATIONS,
+} = require("@applicaster/zapp-react-native-utils/appUtils/orientationHelper");
+
+const {
+  useCurrentScreenData,
+} = require("@applicaster/zapp-react-native-utils/reactHooks/screen");
+
+const {
+  allowedOrientationsForScreen,
+  getOrientation,
+  useGetScreenOrientation,
+} = require("@applicaster/zapp-react-native-utils/appUtils/orientationHelper");
+
+const navigator = {};
+const navBarProps = { nav_items: [] };
+const screenData = {};
+
 const screenProps = {
   pathname: "/foo/path",
-  NavBar,
   navigator,
   navBarProps,
   screenData,
@@ -111,7 +132,6 @@ describe("<Screen Component />", () => {
   beforeEach(() => {
     allowedOrientationsForScreen.mockClear();
     getOrientation.mockClear();
-    isNavBarVisible.mockClear();
     useGetScreenOrientation.mockClear();
   });
 
@@ -127,14 +147,9 @@ describe("<Screen Component />", () => {
 
   describe("when the navbar should be hidden", () => {
     beforeEach(() => {
-      mock_navBarVisibleFlag = false;
       wrapper = create(<Screen {...screenProps} />);
     });
 
-    afterEach(() => {
-      mock_navBarVisibleFlag = true;
-    });
-
     it("renders correctly", () => {
       act(() => {
         wrapper = create(<Screen {...screenProps} />);

package/Components/Screen/__tests__/__snapshots__/Screen.test.tsx.snap

@@ -6,17 +6,26 @@ exports[`<Screen Component /> when the navbar should be hidden renders correctly
     Object {
       "backgroundColor": "blue",
       "flex": 1,
+      "paddingTop": 0,
     }
   }
 >
   <View
-    nav_items={Array []}
+    hasMenu={false}
+    id="/river/testId"
+    pathname="/river/testId"
+    selected="testId"
     testID="navBar"
+    title=""
   />
   <View>
     <View
-      pathname="/foo/path"
-      screenData={Object {}}
+      pathname="/river/testId"
+      screenData={
+        Object {
+          "id": "testId",
+        }
+      }
       testID="routeManager"
     />
   </View>
@@ -29,17 +38,26 @@ exports[`<Screen Component /> when the navbar should show renders correctly 1`]
     Object {
       "backgroundColor": "blue",
       "flex": 1,
+      "paddingTop": 0,
     }
   }
 >
   <View
-    nav_items={Array []}
+    hasMenu={false}
+    id="/river/testId"
+    pathname="/river/testId"
+    selected="testId"
     testID="navBar"
+    title=""
   />
   <View>
     <View
-      pathname="/foo/path"
-      screenData={Object {}}
+      pathname="/river/testId"
+      screenData={
+        Object {
+          "id": "testId",
+        }
+      }
       testID="routeManager"
     />
   </View>

package/Components/Screen/__tests__/navigationHandler.test.ts

@@ -1,183 +1,6 @@
-import { isNavBarVisible, isMenuVisible } from "../navigationHandler";
+import { isMenuVisible } from "../navigationHandler";
 
 describe("NavigationHandler", () => {
-  describe("isNavBarVisible", () => {
-    it("returns false when the route is a player route", () => {
-      const navBarVisible = isNavBarVisible(
-        "/playable/some_vod_item",
-        {},
-        undefined,
-        false
-      );
-
-      expect(navBarVisible).toBe(false);
-    });
-
-    it("returns false when the next screen is the QB search screen", () => {
-      const navBarVisible = isNavBarVisible(
-        "/river/A1234",
-        {
-          type: "qb_search_screen",
-        },
-        undefined,
-        false
-      );
-
-      expect(navBarVisible).toBe(false);
-    });
-
-    describe("when screen is a hook", () => {
-      it("returns true if the `showNavBar` flag is set to true", () => {
-        const navBarVisible = isNavBarVisible(
-          "",
-          {
-            hookPlugin: {
-              module: {
-                showNavBar: true,
-              },
-            },
-          },
-          undefined,
-          false
-        );
-
-        expect(navBarVisible).toBe(true);
-      });
-
-      it("returns true if presentFullScreen flag is set to false", () => {
-        const navBarVisible = isNavBarVisible(
-          "",
-          {
-            hookPlugin: {
-              module: {
-                presentFullScreen: false,
-              },
-            },
-          },
-          undefined,
-          false
-        );
-
-        expect(navBarVisible).toBe(true);
-      });
-
-      it("returns false if presentFullScreen flag is set to true", () => {
-        const navBarVisible = isNavBarVisible(
-          "",
-          {
-            hookPlugin: {
-              module: {
-                presentFullScreen: true,
-              },
-            },
-          },
-          undefined,
-          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,
-          },
-        },
-        undefined,
-        false
-      );
-
-      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,
-          },
-        },
-        undefined,
-        false
-      );
-
-      expect(navBarVisible).toBe(false);
-    });
-
-    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,
-              },
-            },
-          ],
-        },
-        undefined,
-        true
-      );
-
-      expect(navBarVisible).toBe(false);
-    });
-
-    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,
-              },
-            },
-          ],
-        },
-        undefined,
-        true
-      );
-
-      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: false,
-              },
-            },
-          ],
-        },
-        undefined,
-        false
-      );
-
-      expect(navBarVisible).toBe(true);
-    });
-
-    it("returns true otherwise", () => {
-      const navBarVisible = isNavBarVisible(
-        "",
-        { navigations: [] },
-        undefined,
-        false
-      );
-
-      expect(navBarVisible).toBe(true);
-    });
-  });
-
   describe("isMenuVisible", () => {
     it("returns false when the route is a player route", () => {
       const menuVisible = isMenuVisible("/playable/some_vod_item", {});

package/Components/Screen/index.tsx

@@ -1,36 +1,40 @@
 /// <reference types="@applicaster/applicaster-types" />
-import React, { useMemo } from "react";
+import React from "react";
 import * as R from "ramda";
 import { View } from "react-native";
-import { RouteManager } from "../RouteManager";
+import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import {
+  isOrientationCompatible,
+  useGetScreenOrientation,
+} from "@applicaster/zapp-react-native-utils/appUtils/orientationHelper";
+
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
-import { useScreenOrientationHandler } from "./orientationHandler";
+import { getComponentModule } from "@applicaster/zapp-react-native-utils/pluginUtils";
+import {
+  shouldNavBarDisplayMenu,
+  getNavBarProps,
+  getScreenId,
+} from "@applicaster/zapp-react-native-utils/navigationUtils";
+import {
+  useDimensions,
+  useRoute,
+  useCurrentScreenData,
+  useNavbarState,
+  useScreenData,
+  useNavigation,
+} from "@applicaster/zapp-react-native-utils/reactHooks";
+import { getNavigationPluginModule } from "@applicaster/zapp-react-native-app/App/Layout/layoutHelpers";
+
+import { RouteManager } from "../RouteManager";
 import { useScreenConfiguration } from "../River/useScreenConfiguration";
-import { useCurrentScreenData } from "@applicaster/zapp-react-native-utils/reactHooks/screen";
-import type { ZappNavigationProps } from "@applicaster/zapp-react-native-flow-types/index";
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
-import { ScreenContextProvider } from "../../Contexts/ScreenContext";
+import { useScreenOrientationHandler } from "./orientationHandler";
 
-type Props = {
-  pathname: string;
-  screenData: Record<string, any>;
-  NavBar: ZappPlugin;
-  Menu: ZappPlugin;
-  navBarProps: Record<string, any>;
-  isNavBarVisible: boolean;
-  menuProps: {
-    setToggleMenu: () => void;
-    toggleMenu: () => void;
-    openMenu: () => void;
-    setOpenMenu: () => void;
-    closeMenu: () => void;
-    setCloseMenu: () => void;
-    dimensions: { window: number };
-    navigator: ZappNavigationProps;
-    bottomTabBarHeight: number;
-    isRTL: boolean;
-    category: string;
-  } & QuickBrickAppNavigator;
+const screenStyles = {
+  flex: 1,
+  paddingTop: 0,
+  // paddingBottom: insets.bottom, // Should be applied directly by UI plugin
+  // paddingLeft: insets.left, // Should be applied directly by UI plugin
+  // paddingRight: insets.right, // Should be applied directly by UI plugin
 };
 
 function colorIsNotTransparent(color) {
@@ -41,38 +45,78 @@ function colorIsNotTransparent(color) {
     R.replace("rgba(", "")
   )(color);
 
-  const alpha = Number(layers?.[3]);
-
-  return alpha > 0;
+  return Number(layers?.[3]) > 0;
 }
 
 function isValidColor(string) {
   return string && string !== "transparent" && colorIsNotTransparent(string);
 }
 
-export function Screen(props: Props) {
-  const { pathname, screenData, NavBar } = props;
+type Props = {
+  pathname: unknown;
+  screenData: unknown;
+};
+
+export function Screen(_props: Props) {
+  const theme = useTheme<BaseThemePropertiesMobile>();
+  const navigation = useNavigation();
   const { plugins } = usePickFromState(["plugins"]);
 
-  const offlinePlugin = useMemo(
+  // Gets the data for the current screen configuration
+  const currentScreenData = useCurrentScreenData();
+  const { backgroundColor } = useScreenConfiguration(currentScreenData.id);
+
+  const {
+    width: screenWidth,
+    height,
+    deviceInfo,
+  } = useDimensions("screen", {
+    fullDimensions: true,
+  });
+
+  const { screenData, pathname } = useRoute();
+
+  const currentRiver = useScreenData(
+    getScreenId(screenData, navigation.activeRiver)
+  );
+
+  const { title } = useNavbarState();
+
+  const isTablet = deviceInfo?.isTablet;
+
+  const { appData } = usePickFromState(["appData"]);
+  const isTabletPortrait = appData?.isTabletPortrait;
+
+  const layoutData = { isTablet, isTabletPortrait, width: screenWidth, height };
+
+  const hasMenu = shouldNavBarDisplayMenu(currentRiver, plugins);
+
+  const navBarProps = React.useMemo<MobileNavBarPluginProps | null>(
+    getNavBarProps(currentRiver, pathname, title),
+    [currentRiver, pathname]
+  );
+
+  const NavBar = React.useMemo(
     () =>
-      R.compose(
-        R.prop("module"),
-        R.find(R.propEq("identifier", "offline-experience"))
-      )(plugins),
-    [plugins]
+      getNavigationPluginModule(
+        "nav_bar",
+        currentRiver,
+        plugins
+      ) as React.ComponentType<MobileNavBarPluginProps & { hasMenu: boolean }>,
+    []
   );
 
-  const { OfflineFallbackScreen } = offlinePlugin;
+  const offlinePlugin = getComponentModule({
+    plugins,
+    components: {},
+    componentType: "offline-experience",
+  });
 
-  // Gets the data for the current screen configuration
-  const currentScreenData = useCurrentScreenData();
-  const theme = useTheme();
-  const { backgroundColor } = useScreenConfiguration(currentScreenData.id);
+  const { OfflineFallbackScreen } = offlinePlugin;
 
   const style = React.useMemo(
     () => ({
-      flex: 1,
+      ...screenStyles,
       backgroundColor: isValidColor(backgroundColor)
         ? backgroundColor
         : theme.app_background_color,
@@ -81,19 +125,31 @@ export function Screen(props: Props) {
   );
 
   const targetScreenData =
-    currentScreenData || screenData?.targetScreen || screenData;
+    currentScreenData || (screenData as any)?.targetScreen || screenData;
 
   useScreenOrientationHandler({ screenData: targetScreenData });
 
+  const orientation = useGetScreenOrientation(targetScreenData);
+
+  // We prevent rendering of the screen until UI is actually rotated to screen desired orientation.
+  // This saves unnecessary re-renders and user will not see distorted aspect screen.
+  if (
+    !isOrientationCompatible({
+      orientation,
+      layoutData,
+    })
+  ) {
+    return <View style={style} />;
+  }
+
   return (
-    <ScreenContextProvider pathname={pathname}>
-      <View style={style}>
-        <NavBar key={pathname} {...props.navBarProps} />
-
-        <OfflineFallbackScreen screenData={screenData}>
-          <RouteManager pathname={pathname} screenData={screenData} />
-        </OfflineFallbackScreen>
-      </View>
-    </ScreenContextProvider>
+    <View style={style}>
+      {navBarProps && <NavBar {...navBarProps} hasMenu={hasMenu} />}
+
+      <OfflineFallbackScreen screenData={targetScreenData}>
+        {/* @TODO RouteManager doesn't use props, can they be removed ?  */}
+        <RouteManager pathname={pathname} screenData={screenData} />
+      </OfflineFallbackScreen>
+    </View>
   );
 }