@applicaster/zapp-react-native-ui-components 12.0.0-rc.6 → 12.0.0-rc.61

package/Components/River/RefreshControl.tsx

@@ -1,5 +1,9 @@
 import * as React from "react";
-import { RefreshControl as RNRefreshControl } from "react-native";
+import {
+  Platform,
+  RefreshControl as RNRefreshControl,
+  StyleSheet,
+} from "react-native";
 import * as R from "ramda";
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 import { useLocalizedStrings } from "@applicaster/zapp-react-native-utils/localizationUtils";
@@ -8,10 +12,30 @@ import { useSendAnalyticsEventWithFunction } from "@applicaster/zapp-react-nativ
 import { useCurrentScreenData } from "@applicaster/zapp-react-native-utils/reactHooks/screen";
 import { loadPipesData } from "@applicaster/zapp-react-native-redux/ZappPipes";
 import { useDispatch } from "react-redux";
+import { useShallow } from "zustand/react/shallow";
+import { useScreenContextV2 } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 const BRIGHTNESS_THRESHOLD = 160;
 const ABOVE_DEFAULT_COLOR = "gray";
 const BELOW_DEFAULT_COLOR = "white";
+const BASE_INDICATOR_HEIGHT = 40;
+const BASE_INDICATOR_OFFSET = 16;
+
+/** Return spacing required to position indicator below the navbar bottom line (Android only) */
+const getRefreshControlOffset = () => {
+  return Platform.OS === "ios"
+    ? 0
+    : BASE_INDICATOR_HEIGHT + BASE_INDICATOR_OFFSET;
+};
+
+const styles = StyleSheet.create({
+  // eslint-disable-next-line react-native/no-color-literals
+  control: {
+    zIndex: 1,
+    backgroundColor: "transparent",
+  },
+});
 
 const getBrightness = (RGBcolor) => {
   const RGBvalues = RGBcolor.substring(
@@ -91,6 +115,34 @@ export const usePullToRefresh = (
   };
 };
 
+/** Returns the offset for the progress view of the RefreshControl component
+ *  based on navbar content position */
+export const useGetProgressViewOffset = () => {
+  const { _navBarStore } = useScreenContextV2();
+  const { top } = useSafeAreaInsets();
+
+  const offset = getRefreshControlOffset();
+
+  const { height, contentPosition } = _navBarStore(
+    useShallow(({ contentPosition, height }) => ({ contentPosition, height }))
+  );
+
+  if (height === 0) {
+    return offset;
+  }
+
+  switch (contentPosition) {
+    case "on_bottom_status_bar":
+      // navbar height
+      return offset + height - top;
+    case "on_top_screen":
+      // navbar height + status bar height
+      return offset + height;
+    default:
+      return offset;
+  }
+};
+
 export function RefreshControl(props: {
   pullToRefreshPipesV1RefreshingStateUpdater?: (refreshing: boolean) => void;
   refreshingPipesV1?: boolean;
@@ -211,6 +263,7 @@ export function RefreshControl(props: {
       refreshing={refreshing}
       onRefresh={onRefreshHandler}
       colors={[preparedIndicatorColor]}
+      progressViewOffset={useGetProgressViewOffset()}
       progressBackgroundColor={preparedIndicatorBackgroundColor}
       // @ts-ignore in RN68 this `size` became string
       size={indicatorSize}
@@ -222,6 +275,7 @@ export function RefreshControl(props: {
           : null
       }
       titleColor={preparedTitleUnderIndicatorColor}
+      style={styles.control}
     />
   );
 }

package/Components/River/River.tsx

@@ -1,13 +1,10 @@
 import * as React from "react";
 import * as R from "ramda";
+import { GeneralContentScreen } from "@applicaster/zapp-react-native-ui-components/Components/GeneralContentScreen";
 
 import { FeedLoader } from "../FeedLoader";
 import { ScreenResolver } from "../ScreenResolver";
 
-import type { ZappScreenProps } from "@applicaster/zapp-react-native-flow-types";
-
-import { GeneralContentScreen } from "../GeneralContentScreen";
-
 type Props = ZappScreenProps & {
   feedUrl?: string;
   isInsideContainer?: boolean;
@@ -18,6 +15,12 @@ type Props = ZappScreenProps & {
     | import("react-native").FlatListProps<any>
   ) &
     Record<string, any>;
+  appData: AppDataKeys;
+  screenTitle: string;
+  screenSummary: string;
+  setIsScreenWrappedInContainer: (isInsideContainer: boolean) => void;
+  screenContext: ZappRiver;
+  river: ZappRiver;
 };
 
 type State = {
@@ -27,7 +30,7 @@ type State = {
 export class RiverComponent extends React.Component<Props, State> {
   private currentScreenTitle: string;
   private currentScreenSummary: string;
-  constructor(props) {
+  constructor(props: Props) {
     super(props);
 
     this.state = {

package/Components/River/TV/River.tsx

@@ -4,7 +4,6 @@ import * as React from "react";
 import { Text } from "react-native";
 import * as R from "ramda";
 
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import {
   useFeedLoader,
   useLayoutVersion,
@@ -20,6 +19,7 @@ import {
   useNavbarState,
   useSetNavbarState,
 } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext";
+import { useRivers } from "@applicaster/zapp-react-native-utils/reactHooks/state";
 
 type Props = {
   screenId: string;
@@ -53,7 +53,7 @@ export const River = (props: Props) => {
 
   const navigationPluginData = useNavigationPluginData();
 
-  const { rivers } = usePickFromState(["rivers"]);
+  const rivers = useRivers();
   const isV2 = useLayoutVersion({ isV2: true });
 
   const river = React.useMemo(() => rivers?.[screenId], [screenId]);

package/Components/River/__tests__/__snapshots__/componentsMap.test.js.snap

@@ -64,7 +64,7 @@ exports[`componentsMap renders renders components map correctly 1`] = `
       refreshControl={null}
       removeClippedSubviews={true}
       renderItem={[Function]}
-      scrollEventThrottle={50}
+      scrollEventThrottle={16}
       scrollIndicatorInsets={
         Object {
           "right": 1,

package/Components/River/__tests__/componentsMap.test.js

@@ -6,6 +6,12 @@ import configureStore from "redux-mock-store";
 
 import * as themeUtils from "@applicaster/zapp-react-native-utils/theme";
 
+// silences the errors related to React-native-gesture-handler in tests
+jest.mock(
+  "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation",
+  () => () => null
+);
+
 jest.mock("react-native-safe-area-context", () => ({
   useSafeAreaInsets: () => ({ top: 50 }),
 }));
@@ -83,6 +89,7 @@ jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation", () => ({
   useNavigation: jest.fn(() => ({ currentRoute: "/river/A1234" })),
   useRoute: jest.fn(() => ({ pathname: "/river/A1234", screenData })),
   useProfilerLogging: jest.fn(),
+  useIsScreenActive: jest.fn().mockReturnValue(true),
 }));
 
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks/screen", () => ({

package/Components/River/useScreenConfiguration.ts

@@ -1,10 +1,10 @@
 import * as R from "ramda";
 
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
-import { useDimensions } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { toCamelCase } from "@applicaster/zapp-react-native-utils/stringUtils";
 import { useMemo } from "react";
 import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
+import { useRivers } from "@applicaster/zapp-react-native-utils/reactHooks/state";
 
 type GeneralContentScreen = ZappRiver & {
   styles: {
@@ -46,8 +46,8 @@ const stylingKeys = [
 ];
 
 export function useScreenConfiguration(screenId: string): ScreenConfiguration {
-  const { rivers } = usePickFromState(["rivers"]);
-  const { deviceInfo } = useDimensions("screen", { deviceInfo: true });
+  const rivers = useRivers();
+  const isTablet = useIsTablet();
 
   return useMemo(() => {
     const config = {} as ScreenConfiguration;
@@ -56,8 +56,7 @@ export function useScreenConfiguration(screenId: string): ScreenConfiguration {
     if (screenData) {
       const { styles } = screenData;
 
-      const keyPrefix =
-        deviceInfo?.isTablet && styles?.tablet_theme ? "tablet_" : "";
+      const keyPrefix = isTablet && styles?.tablet_theme ? "tablet_" : "";
 
       stylingKeys.forEach(([key, castFn]) => {
         const styleKey = `${keyPrefix}${key}`;

package/Components/RouteManager/__tests__/__snapshots__/routeManager.test.js.snap

@@ -5,6 +5,7 @@ exports[`<RouteManager /> renders correctly 1`] = `
   screenId="A1234"
 >
   <WithProvider
+    pathname="/river/A1234"
     screenData={
       Object {
         "id": "A1234",

package/Components/RouteManager/__tests__/routeManager.test.js

@@ -2,11 +2,17 @@ import React from "react";
 import { shallow } from "enzyme";
 import { shallowToJson } from "enzyme-to-json";
 
-import { ScreenResolver } from "@applicaster/zapp-react-native-ui-components/Components/ScreenResolver";
-
 const pathname = "/river/A1234";
 const screenData = { id: "A1234" };
 
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation", () => ({
+  useRoute: jest.fn(() => ({ pathname: pathname, screenData: screenData })),
+}));
+
+const {
+  ScreenResolver,
+} = require("@applicaster/zapp-react-native-ui-components/Components/ScreenResolver");
+
 const { RouteManager } = require("../index");
 
 describe("<RouteManager />", () => {
@@ -20,6 +26,7 @@ describe("<RouteManager />", () => {
 
   it("passes the correct props to ScreenResolver", () => {
     expect(wrapper.find(ScreenResolver).props()).toEqual({
+      pathname: "/river/A1234",
       screenType: "river",
       screenId: "A1234",
       screenData: { id: "A1234" },

package/Components/RouteManager/index.tsx

@@ -2,6 +2,7 @@ import * as React from "react";
 import * as R from "ramda";
 
 import { getPathAttributes } from "@applicaster/zapp-react-native-utils/navigationUtils";
+import { useRoute } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { ScreenResolver } from "../ScreenResolver";
 import { TestId } from "./TestId";
 
@@ -12,7 +13,8 @@ type Props = { pathname: string; screenData: Record<string, any> };
  * and reconciles data returned from hook plugins if needed
  * @param {Props}: see props above
  */
-export function RouteManager({ pathname, screenData, ...otherProps }: Props) {
+export function RouteManager(props: Props) {
+  const { pathname, screenData: _screenData } = useRoute();
   const pathAttributes = getPathAttributes({ pathname });
 
   const { screenType, screenId } = R.last(pathAttributes);
@@ -22,8 +24,8 @@ export function RouteManager({ pathname, screenData, ...otherProps }: Props) {
       <ScreenResolver
         screenType={screenType}
         screenId={screenId}
-        screenData={screenData}
-        {...otherProps}
+        {...props}
+        screenData={props.screenData}
       />
     </TestId>
   );

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

@@ -1,13 +1,19 @@
 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);
+
+jest.mock("react-native-safe-area-context", () => ({
+  useSafeAreaInsets: () => ({ top: 44 }),
+}));
+
 jest.mock("../../RouteManager", () => ({
   RouteManager: Mocked_RouteManager,
 }));
@@ -25,59 +31,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 +96,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 +129,6 @@ describe("<Screen Component />", () => {
   beforeEach(() => {
     allowedOrientationsForScreen.mockClear();
     getOrientation.mockClear();
-    isNavBarVisible.mockClear();
     useGetScreenOrientation.mockClear();
   });
 
@@ -127,14 +144,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", {});