@applicaster/zapp-react-native-ui-components 15.1.0-rc.9 → 16.0.0-alpha.1740103407

package/Components/River/RefreshControl.tsx

@@ -4,9 +4,7 @@ import {
   RefreshControl as RNRefreshControl,
   StyleSheet,
 } from "react-native";
-import * as R from "ramda";
-import { path } from "@applicaster/zapp-react-native-utils/utils";
-import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
+import { get } from "@applicaster/zapp-react-native-utils/utils";
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 import { useLocalizedStrings } from "@applicaster/zapp-react-native-utils/localizationUtils";
 import { useAnalytics } from "@applicaster/zapp-react-native-utils/analyticsUtils";
@@ -15,7 +13,7 @@ import { useCurrentScreenData } from "@applicaster/zapp-react-native-utils/react
 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";
-import { useLoadPipesDataDispatch } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { usePullToRefresh } from "./hooks";
 
 const BRIGHTNESS_THRESHOLD = 160;
 const ABOVE_DEFAULT_COLOR = "gray";
@@ -55,66 +53,6 @@ const getBrightness = (RGBcolor) => {
   );
 };
 
-export const usePullToRefresh = (
-  riverComponents,
-  pullToRefreshPipesV1RefreshingStateUpdater,
-  refreshingPipesV1
-) => {
-  const isPipesV1 = !!pullToRefreshPipesV1RefreshingStateUpdater;
-
-  const [refreshing, setRefreshing] = React.useState(false);
-
-  const feeds: string[] = React.useMemo(
-    () =>
-      (riverComponents || [])
-        .map((riverComponent) => path(["data", "source"], riverComponent))
-        .filter((feed) => !isNilOrEmpty(feed)),
-    [riverComponents]
-  );
-
-  const feedsLength = feeds.length;
-
-  const [requestsCompletedCounter, setRequestsCompletedCounter] =
-    React.useState(0);
-
-  const loadPipesDataDispatcher = useLoadPipesDataDispatch();
-
-  React.useEffect(() => {
-    // will not work for pipes v1 on 1st level screens
-    if (refreshing && !isPipesV1) {
-      feeds.forEach((feed) => {
-        loadPipesDataDispatcher(feed, {
-          silentRefresh: true,
-          clearCache: true,
-          callback: () => {
-            setRequestsCompletedCounter(R.inc);
-          },
-        });
-      });
-    }
-  }, [refreshing, isPipesV1, feeds, loadPipesDataDispatcher]);
-
-  React.useEffect(() => {
-    if (requestsCompletedCounter === feedsLength) {
-      setRefreshing(false);
-    }
-  }, [requestsCompletedCounter, feedsLength]);
-
-  const onRefresh = React.useCallback(() => {
-    if (isPipesV1) {
-      pullToRefreshPipesV1RefreshingStateUpdater(true);
-    } else {
-      setRefreshing(true);
-      setRequestsCompletedCounter(0);
-    }
-  }, [isPipesV1]);
-
-  return {
-    refreshing: isPipesV1 ? refreshingPipesV1 : refreshing,
-    onRefresh,
-  };
-};
-
 /** Returns the offset for the progress view of the RefreshControl component
  *  based on navbar content position */
 export const useGetProgressViewOffset = () => {
@@ -143,16 +81,12 @@ export const useGetProgressViewOffset = () => {
   }
 };
 
-export function RefreshControl(props: {
-  pullToRefreshPipesV1RefreshingStateUpdater?: (refreshing: boolean) => void;
-  refreshingPipesV1?: boolean;
-}) {
+export function RefreshControl(props) {
   const screenData = useCurrentScreenData();
 
   const { refreshing, onRefresh } = usePullToRefresh(
-    screenData.ui_components,
-    props.pullToRefreshPipesV1RefreshingStateUpdater,
-    props.refreshingPipesV1
+    screenData.id,
+    screenData.ui_components
   );
 
   const { app_background_color: themeBackgroundColor } = useTheme();
@@ -170,29 +104,26 @@ export function RefreshControl(props: {
     displayTitleIOS,
   } = React.useMemo(
     () => ({
-      indicatorColor: R.prop(
-        "pull_to_refresh_indicator_color",
-        screenData.styles
-      ),
-      titleUnderIndicatorColor: R.prop(
-        "pull_to_refresh_title_color_under_indicator",
-        screenData.styles
+      indicatorColor: get(screenData.styles, "pull_to_refresh_indicator_color"),
+      titleUnderIndicatorColor: get(
+        screenData.styles,
+        "pull_to_refresh_title_color_under_indicator"
       ),
-      indicatorBackgroundColor: R.prop(
-        "pull_to_refresh_indicator_bg_color",
-        screenData.styles
+      indicatorBackgroundColor: get(
+        screenData.styles,
+        "pull_to_refresh_indicator_bg_color"
       ),
       indicatorSize:
-        R.prop("pull_to_refresh_indicator_size", screenData.styles) === "large"
+        get(screenData.styles, "pull_to_refresh_indicator_size") === "large"
           ? "large"
           : "default",
-      generalContentBackgroungColor: R.prop(
-        "screen_background_color",
-        screenData.styles
+      generalContentBackgroungColor: get(
+        screenData.styles,
+        "screen_background_color"
       ),
-      displayTitleIOS: R.prop(
-        "pull_to_refresh_display_title_ios",
-        screenData.styles
+      displayTitleIOS: get(
+        screenData.styles,
+        "pull_to_refresh_display_title_ios"
       ),
     }),
     [screenData]

package/Components/River/River.tsx

@@ -2,7 +2,6 @@ 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";
 
 type Props = ZappScreenProps & {
@@ -23,24 +22,13 @@ type Props = ZappScreenProps & {
   river: ZappRiver;
 };
 
-type State = {
-  refreshing: boolean;
-};
-
-export class RiverComponent extends React.Component<Props, State> {
+export class RiverComponent extends React.Component<Props> {
   private currentScreenTitle: string;
   private currentScreenSummary: string;
   constructor(props: Props) {
     super(props);
 
-    this.state = {
-      refreshing: false,
-    };
-
     this.applyContexts();
-
-    this.pullToRefreshPipesV1RefreshingStateUpdater =
-      this.pullToRefreshPipesV1RefreshingStateUpdater.bind(this);
   }
 
   applyContexts() {
@@ -69,20 +57,9 @@ export class RiverComponent extends React.Component<Props, State> {
     }
   }
 
-  usesPipesV1Layout() {
-    return this.props?.appData?.layoutVersion === "v1";
-  }
-
-  // Method added to keep pipes v1 logic up to date with the pullToRefresh state.
-  // TODO: Remove when pipes v1 is deprecated.
-  pullToRefreshPipesV1RefreshingStateUpdater(refreshing) {
-    this.setState({ refreshing });
-  }
-
   render() {
     const {
       river,
-      feedUrl,
       screenData,
       isInsideContainer,
       groupId,
@@ -91,22 +68,10 @@ export class RiverComponent extends React.Component<Props, State> {
 
     const { id, type } = river;
 
-    const connectedFeedURL = R.path(["content", "src"], screenData);
-    const _feedUrl = feedUrl || connectedFeedURL;
-
     if (type !== "general_content") {
-      let riverWithConnectedDatasource;
-
-      if (_feedUrl && this.usesPipesV1Layout()) {
-        riverWithConnectedDatasource = {
-          ...river,
-          data: R.merge(river.data || {}, { source: _feedUrl }),
-        };
-      }
-
       return (
         <ScreenResolver
-          screenData={R.mergeLeft(riverWithConnectedDatasource || river, {
+          screenData={R.mergeLeft(river, {
             groupId,
             ...screenData,
           })}
@@ -116,53 +81,15 @@ export class RiverComponent extends React.Component<Props, State> {
       );
     }
 
-    if (!_feedUrl || !this.usesPipesV1Layout()) {
-      this.currentScreenTitle = (screenData && screenData.title) || null;
-
-      return (
-        <GeneralContentScreen
-          screenId={id}
-          isScreenWrappedInContainer={isInsideContainer}
-          groupId={groupId}
-          scrollViewExtraProps={scrollViewExtraProps}
-        />
-      );
-    }
+    this.currentScreenTitle = (screenData && screenData.title) || null;
 
     return (
-      <FeedLoader
-        feedUrl={_feedUrl}
-        refreshing={this.state.refreshing}
-        refreshCallback={() =>
-          this.pullToRefreshPipesV1RefreshingStateUpdater(false)
-        }
-      >
-        {(feed) => {
-          if (!feed) {
-            return null;
-          }
-
-          this.currentScreenSummary = (feed && feed.summary) || null;
-
-          this.currentScreenTitle =
-            (feed && feed.title) || (screenData && screenData.title) || null;
-
-          return (
-            <GeneralContentScreen
-              screenId={id}
-              groupId={groupId}
-              feed={feed}
-              isScreenWrappedInContainer={isInsideContainer}
-              scrollViewExtraProps={scrollViewExtraProps}
-              componentsMapExtraProps={{
-                pullToRefreshPipesV1RefreshingStateUpdater:
-                  this.pullToRefreshPipesV1RefreshingStateUpdater,
-                refreshingPipesV1: this.state.refreshing,
-              }}
-            />
-          );
-        }}
-      </FeedLoader>
+      <GeneralContentScreen
+        screenId={id}
+        isScreenWrappedInContainer={isInsideContainer}
+        groupId={groupId}
+        scrollViewExtraProps={scrollViewExtraProps}
+      />
     );
   }
 }

package/Components/River/TV/River.tsx

@@ -2,7 +2,8 @@
 
 import * as React from "react";
 import { Text } from "react-native";
-import * as R from "ramda";
+
+import { mergeRight } from "@applicaster/zapp-react-native-utils/utils";
 
 import { GeneralContentScreen } from "../../GeneralContentScreen";
 import { ScreenResolver } from "@applicaster/zapp-react-native-ui-components/Components/ScreenResolver";
@@ -13,6 +14,8 @@ import {
 } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext";
 import { useRivers } from "@applicaster/zapp-react-native-utils/reactHooks/state";
 
+import { toStringOrEmpty } from "./utils";
+
 type Props = {
   screenId: string;
   screenData: ZappRiver | ZappEntry;
@@ -24,6 +27,7 @@ type Props = {
   isInsideContainer?: boolean;
   extraAnchorPointYOffset: number;
   river?: ZappRiver | ZappEntry;
+  groupId: string;
 };
 
 export const River = (props: Props) => {
@@ -35,6 +39,7 @@ export const River = (props: Props) => {
     componentsMapExtraProps,
     isInsideContainer,
     extraAnchorPointYOffset,
+    groupId,
   } = props;
 
   const { title: screenTitle, summary: screenSummary } = useNavbarState();
@@ -51,28 +56,41 @@ export const River = (props: Props) => {
     [screenId]
   );
 
-  const stringOrEmpty = (value: string | number | undefined): string =>
-    R.isNil(value) ? "" : String(value);
+  const screenResolverData = React.useMemo(() => {
+    const extraData = mergeRight(extraProps, screenResolverExtraProps);
+
+    return {
+      extraData,
+      screenData: mergeRight(river, { groupId: extraData?.groupId }),
+      componentsMapExtraProps: mergeRight(componentsMapExtraProps, { groupId }),
+    };
+  }, [
+    extraProps,
+    screenResolverExtraProps,
+    river,
+    componentsMapExtraProps,
+    groupId,
+  ]);
 
   React.useEffect(() => {
     if (!isInsideContainer) {
-      setScreenTitle(stringOrEmpty(screenData?.title));
-      setScreenSummary(stringOrEmpty(screenData?.summary));
+      setScreenTitle(toStringOrEmpty(screenData?.title));
+      setScreenSummary(toStringOrEmpty(screenData?.summary));
     }
   }, [screenData.id]);
 
   React.useEffect(() => {
     if (feedData && !isInsideContainer) {
       if (feedData.title && feedData.title !== screenTitle) {
-        setScreenTitle(stringOrEmpty(feedData.title));
+        setScreenTitle(toStringOrEmpty(feedData.title));
       }
 
       if (feedData.summary && feedData.summary !== screenSummary) {
-        setScreenSummary(stringOrEmpty(feedData.summary));
+        setScreenSummary(toStringOrEmpty(feedData.summary));
       }
     } else {
-      setScreenTitle(stringOrEmpty(screenData?.title));
-      setScreenSummary(stringOrEmpty(screenData?.summary));
+      setScreenTitle(toStringOrEmpty(screenData?.title));
+      setScreenSummary(toStringOrEmpty(screenData?.summary));
     }
   }, [feedData, screenData, screenTitle, screenSummary]);
 
@@ -86,15 +104,13 @@ export const River = (props: Props) => {
   }
 
   if (river.type !== "general_content") {
-    const extraData = { ...R.mergeRight(extraProps, screenResolverExtraProps) };
-
     return (
       <ScreenResolver
         screenType={river.type}
         screenId={screenId}
-        screenData={R.merge(river, { groupId: extraData?.groupId })}
-        componentsMapExtraProps={componentsMapExtraProps}
-        {...extraData}
+        screenData={screenResolverData.screenData}
+        componentsMapExtraProps={screenResolverData.componentsMapExtraProps}
+        {...screenResolverData.extraData}
       />
     );
   }
@@ -106,6 +122,7 @@ export const River = (props: Props) => {
       isScreenWrappedInContainer={isInsideContainer}
       extraAnchorPointYOffset={extraAnchorPointYOffset}
       componentsMapExtraProps={componentsMapExtraProps}
+      groupId={groupId}
     />
   );
 };

package/Components/River/TV/index.tsx

@@ -1,11 +1,15 @@
-import { compose } from "ramda";
+import { compose, identity } from "@applicaster/zapp-react-native-utils/utils";
+import { isTvOSPlatform } from "@applicaster/zapp-react-native-utils/reactUtils";
+
 import { River as RiverComponent } from "./River";
-import { withTvEventHandler } from "./withTVEventHandler";
 import { withComponentsMapOffsetContext } from "../../../Contexts/ComponentsMapOffsetContext";
 import { withRiverDataLoader } from "./withRiverDataLoader";
+import { withFocusableGroupForContent } from "./withFocusableGroupForContent";
+
+const isTVOS = isTvOSPlatform();
 
 export const River = compose(
-  withTvEventHandler,
   withComponentsMapOffsetContext,
-  withRiverDataLoader
+  withRiverDataLoader,
+  isTVOS ? withFocusableGroupForContent : identity
 )(RiverComponent);

package/Components/River/TV/utils/__tests__/toStringOrEmpty.test.ts

@@ -0,0 +1,30 @@
+import { toStringOrEmpty } from "..";
+
+describe("toStringOrEmpty", () => {
+  test("returns empty string for undefined", () => {
+    expect(toStringOrEmpty(undefined)).toBe("");
+  });
+
+  test("returns empty string for null", () => {
+    expect(toStringOrEmpty(null)).toBe("");
+  });
+
+  test("converts number to string", () => {
+    expect(toStringOrEmpty(0)).toBe("0");
+    expect(toStringOrEmpty(123)).toBe("123");
+    expect(toStringOrEmpty(-42)).toBe("-42");
+  });
+
+  test("returns string as is", () => {
+    expect(toStringOrEmpty("hello")).toBe("hello");
+    expect(toStringOrEmpty("")).toBe("");
+  });
+
+  test("works with numeric strings", () => {
+    expect(toStringOrEmpty("123")).toBe("123");
+  });
+
+  test("does not throw on falsy values like 0", () => {
+    expect(toStringOrEmpty(0)).toBe("0");
+  });
+});

package/Components/River/TV/utils/index.ts

@@ -0,0 +1,4 @@
+import { isNil } from "@applicaster/zapp-react-native-utils/utils";
+
+export const toStringOrEmpty = (value: unknown): string =>
+  isNil(value) ? "" : String(value);

package/Components/River/TV/withFocusableGroupForContent.tsx

@@ -0,0 +1,71 @@
+import * as React from "react";
+import { View, StyleSheet } from "react-native";
+
+import { FocusableGroup } from "@applicaster/zapp-react-native-ui-components/Components/FocusableGroup";
+import { riverFocusManager } from "@applicaster/zapp-react-native-utils/appUtils/RiverFocusManager";
+
+import { topMenuLayoutChange$ } from "@applicaster/zapp-react-native-tvos-app/Layout/topMenu";
+
+const styles = StyleSheet.create({
+  flexOne: {
+    flex: 1,
+  },
+});
+
+export const withFocusableGroupForContent = (Component) => {
+  return function WithFocusableGroupForContent(props) {
+    const { screenId, isInsideContainer } = props;
+
+    const [topMenuHeight, setTopMenuHeight] = React.useState(0);
+
+    React.useEffect(() => {
+      const subscription = topMenuLayoutChange$.subscribe((layout) => {
+        setTopMenuHeight(layout.height);
+      });
+
+      return () => {
+        subscription.unsubscribe();
+      };
+    }, []);
+
+    const focusableId = React.useMemo(
+      () =>
+        riverFocusManager.screenFocusableGroupId({
+          screenId,
+          isInsideContainer,
+        }),
+      [screenId, isInsideContainer]
+    );
+
+    if (isInsideContainer) {
+      return <Component {...props} />;
+    }
+
+    return (
+      <FocusableGroup
+        key={focusableId}
+        id={focusableId}
+        // The top menu is rendered in its own FocusableGroup, anchored at the top of the screen.
+        // When the "content" FocusableGroup starts at y = 0 as well, the two groups visually overlap.
+        // On TvOS platform this overlap can confuse the focus engine, because the focusable bounds of
+        // the top-menu group and the content group intersect, leading to erratic navigation between
+        // the menu and the content (e.g. unexpected jumps or focus getting "stuck").
+        //
+        // To avoid this, we shift the entire content FocusableGroup down by the dynamic top menu
+        // height (marginTop: topMenuHeight). This separates the focus regions of the two groups in
+        // focus space, so they no longer intersect.
+        //
+        // The inner <View> below then applies the inverse margin (marginTop: -topMenuHeight) so that
+        // the actual visual position of the content on screen does not change; only the focusable
+        // bounds of the outer group are offset.
+        style={[styles.flexOne, { marginTop: topMenuHeight }]}
+        // this group does not have parent
+        groupId={undefined}
+      >
+        <View style={[styles.flexOne, { marginTop: -1 * topMenuHeight }]}>
+          <Component {...props} groupId={focusableId} />
+        </View>
+      </FocusableGroup>
+    );
+  };
+};

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

@@ -1,20 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`componentsMap renders renders components map correctly 1`] = `
-<View
-  style={
-    {
-      "flex": 1,
-    }
-  }
->
+<View>
   <View
     onLayout={[Function]}
-    style={
-      {
-        "flex": 1,
-      }
-    }
   >
     <RCTScrollView
       ListFooterComponent={
@@ -155,6 +144,7 @@ exports[`componentsMap renders renders components map correctly 1`] = `
         }
       }
       stickyHeaderIndices={[]}
+      testID="components-map-flat-list"
       viewabilityConfigCallbackPairs={[]}
       windowSize={12}
     >
@@ -166,11 +156,6 @@ exports[`componentsMap renders renders components map correctly 1`] = `
         >
           <View
             onLayout={[Function]}
-            style={
-              {
-                "flex": 1,
-              }
-            }
           >
             <View />
           </View>
@@ -182,11 +167,6 @@ exports[`componentsMap renders renders components map correctly 1`] = `
         >
           <View
             onLayout={[Function]}
-            style={
-              {
-                "flex": 1,
-              }
-            }
           />
         </View>
         <View

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

@@ -139,7 +139,13 @@ jest.mock(
   })
 );
 
+jest.mock("@applicaster/zapp-react-native-ui-components/events", () => ({
+  ...jest.requireActual("@applicaster/zapp-react-native-ui-components/events"),
+  emitScrollEndReached: jest.fn(),
+}));
+
 const { View } = require("react-native");
+const events = require("@applicaster/zapp-react-native-ui-components/events");
 const { ComponentsMap } = require("../ComponentsMap/ComponentsMap");
 const theme = require("./theme-mock.json");
 
@@ -190,4 +196,36 @@ describe("componentsMap", () => {
 
     expect(toJSON()).toMatchSnapshot();
   });
+
+  it("calls emitScrollEndReached when onScroll was called and isScreenWrappedInContainer is false", () => {
+    themeSpy = jest
+      .spyOn(themeUtils, "useTheme")
+      .mockImplementation(() => () => theme);
+
+    events.emitScrollEndReached.mockClear();
+
+    const { getByTestId } = render(
+      <Provider store={store}>
+        <ComponentsMap
+          {...props}
+          isScreenWrappedInContainer={false}
+          feed={{ entry: [] }}
+        />
+      </Provider>
+    );
+
+    const flatList = getByTestId("components-map-flat-list");
+
+    flatList.props.onScroll({
+      nativeEvent: {
+        contentOffset: { y: 0 },
+        layoutMeasurement: { height: 100 },
+        contentSize: { height: 200 },
+      },
+    });
+
+    flatList.props.onEndReached();
+
+    expect(events.emitScrollEndReached).toHaveBeenCalledTimes(1);
+  });
 });