@applicaster/zapp-react-native-ui-components 12.0.0-alpha.5114122134 → 12.0.0-alpha.5208030571

package/Components/River/ComponentsMap/ComponentsMap.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import * as R from "ramda";
-import { View, FlatList, StyleSheet, Platform } from "react-native";
+import { View, StyleSheet, Platform, Animated, FlatList } from "react-native";
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 import { RiverItem } from "../RiverItem";
 import { RiverFooter } from "../RiverFooter";
@@ -21,6 +21,8 @@ import {
 import { useScreenData } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenData";
 import { isLast } from "@applicaster/zapp-react-native-utils/arrayUtils";
 import { withComponentsMapProvider } from "@applicaster/zapp-react-native-ui-components/Decorators/ComponentsMapWrapper";
+import { useScreenContextV2 } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext";
+import { useShallow } from "zustand/react/shallow";
 
 type Props = {
   feed: ZappFeed;
@@ -40,8 +42,10 @@ const styles = StyleSheet.create({
   },
 });
 
-const scrollIndicatorInsets = { right: 1 };
+const getNearestValue = (value, optionA, optionB) =>
+  Math.abs(value - optionA) < Math.abs(value - optionB) ? optionA : optionB;
 
+const scrollIndicatorInsets = { right: 1 };
 const keyExtractor = R.compose(String, R.prop("id"));
 
 function ComponentsMapComponent(props: Props) {
@@ -59,6 +63,7 @@ function ComponentsMapComponent(props: Props) {
     refreshingPipesV1,
   } = props;
 
+  const flatListRef = React.useRef<FlatList | null>(null);
   const screenConfig = useScreenConfiguration(riverId);
   const screenData = useScreenData(riverId);
   const pullToRefreshEnabled = screenData?.rules?.pull_to_refresh_enabled;
@@ -193,6 +198,68 @@ function ComponentsMapComponent(props: Props) {
     []
   );
 
+  const navBarStore = useScreenContextV2()._navBarStore;
+
+  const scrollY = navBarStore(
+    useShallow(({ scrollYAnimated }) => scrollYAnimated)
+  );
+
+  const canMomentum = React.useRef(false);
+
+  const onScrollBeginDrag = React.useCallback(() => {
+    canMomentum.current = true;
+  }, []);
+
+  /* onMomentumScrollEnd: Handling snap to expanded/collapsed state ( for navbar ) */
+  const _onMomentumScrollEnd = React.useCallback(({ nativeEvent }) => {
+    if (!canMomentum.current) return;
+    canMomentum.current = false;
+
+    const { height: headerHeight, scrollState } = navBarStore.getState();
+
+    const offsetY = nativeEvent.contentOffset.y;
+
+    if (
+      !(scrollState === 0 || scrollState === -headerHeight) &&
+      flatListRef.current
+    ) {
+      const offset =
+        getNearestValue(Math.round(scrollState), -headerHeight, 0) ===
+        -headerHeight
+          ? Math.round(offsetY + scrollState + headerHeight)
+          : Math.round(offsetY + scrollState);
+
+      flatListRef.current.scrollToOffset({
+        animated: true,
+        offset,
+      });
+    }
+  }, []);
+
+  /* onScrollEnd: Handling snap to expanded/collapsed state ( for navbar ) */
+  const _onScrollEndDrag = React.useCallback(({ nativeEvent }) => {
+    const { height: headerHeight, scrollState } = navBarStore.getState();
+
+    const offsetY = nativeEvent.contentOffset.y;
+
+    if (
+      !(scrollState === 0 || scrollState === -headerHeight) &&
+      flatListRef.current &&
+      nativeEvent.velocity.y === 0
+    ) {
+      const offset =
+        getNearestValue(Math.round(scrollState), -headerHeight, 0) ===
+        -headerHeight
+          ? Math.round(offsetY + scrollState + headerHeight)
+          : Math.round(offsetY + scrollState);
+
+      flatListRef.current.scrollToOffset({
+        animated: true,
+        offset,
+      });
+    }
+  }, []);
+
   if (shouldShowLoadingError) {
     return <RiverError />;
   }
@@ -208,6 +275,9 @@ function ComponentsMapComponent(props: Props) {
       >
         <ViewportTracker>
           <FlatList
+            ref={(ref) => {
+              flatListRef.current = ref;
+            }}
             // Fix for WebView rerender crashes on Android API 28+
             // https://github.com/react-native-webview/react-native-webview/issues/1915#issuecomment-964035468
             overScrollMode={Platform.OS === "android" ? "never" : "auto"}
@@ -227,6 +297,24 @@ function ComponentsMapComponent(props: Props) {
             }
             ListFooterComponent={renderFooter}
             refreshControl={refreshControl}
+            onScrollBeginDrag={onScrollBeginDrag}
+            onScroll={Animated.event(
+              [
+                {
+                  nativeEvent: {
+                    contentOffset: {
+                      y: scrollY,
+                    },
+                  },
+                },
+              ],
+              {
+                useNativeDriver: false,
+              }
+            )}
+            onMomentumScrollEnd={_onMomentumScrollEnd}
+            onScrollEndDrag={_onScrollEndDrag}
+            scrollEventThrottle={16}
             {...scrollViewExtraProps}
           />
         </ViewportTracker>

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]);
@@ -112,7 +112,6 @@ export const River = (props: Props) => {
 
       focusManager.setupInitialFocus(groupId, true);
       focusManager.setInitialFocus();
-      focusManager.enableAutomaticFocus();
     }
   }, [river, componentsMapExtraProps]);
 

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 { 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,7 +46,7 @@ const stylingKeys = [
 ];
 
 export function useScreenConfiguration(screenId: string): ScreenConfiguration {
-  const { rivers } = usePickFromState(["rivers"]);
+  const rivers = useRivers();
   const isTablet = useIsTablet();
 
   return useMemo(() => {

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/TV/index.web.tsx

@@ -0,0 +1,151 @@
+import * as React from "react";
+import { last, pathOr } from "ramda";
+import { ScreenResolver } from "../../ScreenResolver";
+import {
+  getNavigationProps,
+  getPathAttributes,
+  resolveNavigationPlugin,
+} from "@applicaster/zapp-react-native-utils/navigationUtils";
+import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { NavBarContainer } from "../../Layout/TV/NavBarContainer";
+import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
+import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+
+type Components = {
+  NavBar: React.ComponentType<any>;
+  Background: React.ComponentType<any>;
+};
+
+type Props = {
+  route: string;
+  Components: Components;
+};
+
+const isPlayer = (routeState): boolean => {
+  const pluginType = pathOr(
+    "unknown_plugin_type",
+    ["state", "screen", "plugin_type"],
+    routeState
+  );
+
+  return pluginType === "player";
+};
+
+const getActiveRiver = ({
+  screenId,
+  screenType,
+  routeState,
+  rivers,
+  fallbackActiveRiver,
+}) => {
+  if (rivers[screenId]) {
+    // river presents
+    return screenType === "hooks"
+      ? routeState?.state?.entry?.payload
+      : routeState?.state?.screen;
+  }
+
+  // screenId is not presented into rivers, use fallback instead
+  return fallbackActiveRiver;
+};
+
+const getNavigations = ({
+  screenId,
+  screenType,
+  routeState,
+  rivers,
+  fallbackNavigations,
+}) => {
+  if (rivers[screenId]) {
+    // river presents
+    return screenType === "hooks"
+      ? routeState?.state?.entry?.payload.navigations
+      : routeState?.state?.screen?.navigations;
+  }
+
+  // screenId is not presented into rivers, use fallback instead
+  return fallbackNavigations;
+};
+
+export const Screen = (props: Props) => {
+  if (!props.route) {
+    throw new Error("Required props route is missing");
+  }
+
+  const navigator = useNavigation();
+  const { plugins = [], rivers = [] } = usePickFromState(["plugins", "rivers"]);
+
+  const pathAttributes = getPathAttributes({ pathname: props.route });
+  const routeState = navigator.getStackForPathname(props.route);
+
+  const { screenType, screenId } = last(pathAttributes);
+
+  // console.log("debug_2", "Screen", {
+  //   screenType,
+  //   routeState,
+  //   route: props.route,
+  //   navigator,
+  // });
+
+  const activeRiver = getActiveRiver({
+    screenId,
+    screenType,
+    routeState,
+    rivers,
+    fallbackActiveRiver: navigator.activeRiver,
+  });
+
+  const navigationProps = getNavigationProps({
+    navigator: {
+      // @ts-ignore
+      activeRiver,
+      // @ts-ignore
+      screenTitle: routeState.state.entry?.title || routeState.screen?.name,
+    },
+    category: "menu",
+  });
+
+  const navigations = getNavigations({
+    screenId,
+    screenType,
+    routeState,
+    rivers,
+    fallbackNavigations: navigator.activeRiver.navigations,
+  });
+
+  const menuPlugin = resolveNavigationPlugin({
+    category: "menu",
+    navigations,
+    plugins,
+  }) as QuickBrickPlugin;
+
+  const NavBar = (props.Components.NavBar ||
+    menuPlugin.module) as React.ComponentType<any>;
+
+  const isNavBarVisible = !isPlayer(routeState);
+
+  const screenData =
+    screenType === "hooks"
+      ? routeState?.state?.entry
+      : routeState?.state?.screen;
+
+  return (
+    <>
+      <NavBarContainer isVisible={isNavBarVisible} onReady={noop}>
+        <NavBar
+          groupId={props.route}
+          isVisible={isNavBarVisible}
+          menuPlugin={menuPlugin}
+          navigationProps={navigationProps}
+          // Maybe activeRiver?
+        />
+      </NavBarContainer>
+      <ScreenResolver
+        screenType={screenType}
+        screenId={screenId}
+        screenData={screenData}
+        groupId={props.route}
+      />
+    </>
+  );
+};

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

@@ -1,11 +1,19 @@
 import * as React from "react";
 import { View } from "react-native";
-import { create, act } from "react-test-renderer";
+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,
 }));
@@ -23,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", () => ({
@@ -93,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,
@@ -109,7 +129,6 @@ describe("<Screen Component />", () => {
   beforeEach(() => {
     allowedOrientationsForScreen.mockClear();
     getOrientation.mockClear();
-    isNavBarVisible.mockClear();
     useGetScreenOrientation.mockClear();
   });
 
@@ -125,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} />);
@@ -142,44 +156,44 @@ describe("<Screen Component />", () => {
     });
   });
 
-  // it("invokes the orientation hook when the route changes", () => {
-  //   act(() => {
-  //     wrapper = create(<Screen {...screenProps} />);
-  //   });
-
-  //   // @ts-ignore
-  //   useCurrentScreenData.mockReturnValue({
-  //     id: "player-testId",
-  //     general: { screen_orientation: ORIENTATIONS.landscapeSensor },
-  //     plugin_type: "player",
-  //   });
-
-  //   act(() => {
-  //     wrapper.update(
-  //       <Screen
-  //         {...screenProps}
-  //         pathname="/playable"
-  //         screenData={{
-  //           id: "player-testId",
-  //           general: { screen_orientation: ORIENTATIONS.landscapeSensor },
-  //           plugin_type: "player",
-  //         }}
-  //       />
-  //     );
-  //   });
-
-  //   useCurrentScreenData.mockReturnValue({
-  //     id: "player-testId",
-  //     general: { screen_orientation: ORIENTATIONS.landscapeSensor },
-  //   });
-
-  //   act(() => {
-  //     wrapper.update(<Screen {...screenProps} />);
-  //   });
-
-  //   expect(allowedOrientationsForScreen).toHaveBeenNthCalledWith(
-  //     1,
-  //     ORIENTATIONS.landscapeSensor
-  //   );
-  // });
+  it("invokes the orientation hook when the route changes", () => {
+    act(() => {
+      wrapper = create(<Screen {...screenProps} />);
+    });
+
+    // @ts-ignore
+    useCurrentScreenData.mockReturnValue({
+      id: "player-testId",
+      general: { screen_orientation: ORIENTATIONS.landscapeSensor },
+      plugin_type: "player",
+    });
+
+    act(() => {
+      wrapper.update(
+        <Screen
+          {...screenProps}
+          pathname="/playable"
+          screenData={{
+            id: "player-testId",
+            general: { screen_orientation: ORIENTATIONS.landscapeSensor },
+            plugin_type: "player",
+          }}
+        />
+      );
+    });
+
+    useCurrentScreenData.mockReturnValue({
+      id: "player-testId",
+      general: { screen_orientation: ORIENTATIONS.landscapeSensor },
+    });
+
+    act(() => {
+      wrapper.update(<Screen {...screenProps} />);
+    });
+
+    expect(allowedOrientationsForScreen).toHaveBeenNthCalledWith(
+      1,
+      ORIENTATIONS.landscapeSensor
+    );
+  });
 });