@applicaster/zapp-react-native-ui-components 12.0.5 → 13.0.0-alpha.1035032144

package/Components/MasterCell/__tests__/__snapshots__/elementMapper.test.js.snap

@@ -10,7 +10,7 @@ exports[`elementMapper renders the nodes 1`] = `
     <ImageContainer
       key="0"
       style={
-        Object {
+        {
           "borderTopLeftRadius": 4,
           "borderTopRightRadius": 4,
           "height": 216,
@@ -22,7 +22,7 @@ exports[`elementMapper renders the nodes 1`] = `
     <View
       key="1"
       style={
-        Object {
+        {
           "height": 30,
           "marginHorizontal": 24,
           "marginTop": 24,
@@ -37,7 +37,7 @@ exports[`elementMapper renders the nodes 1`] = `
         label="Test Entry"
         numberOfLines={1}
         style={
-          Object {
+          {
             "color": "#EFEFEF",
             "fontSize": 26,
             "fontStyle": "normal",
@@ -49,7 +49,7 @@ exports[`elementMapper renders the nodes 1`] = `
     <View
       key="2"
       style={
-        Object {
+        {
           "height": 60,
           "marginHorizontal": 24,
           "marginTop": 10,
@@ -63,7 +63,7 @@ exports[`elementMapper renders the nodes 1`] = `
         label="Summary of the test entry"
         numberOfLines={2}
         style={
-          Object {
+          {
             "color": "#EFEFEF",
             "fontSize": 24,
             "fontStyle": "normal",
@@ -76,7 +76,7 @@ exports[`elementMapper renders the nodes 1`] = `
     <View
       key="3"
       style={
-        Object {
+        {
           "height": 42,
           "margin": 24,
           "width": 56,
@@ -88,7 +88,7 @@ exports[`elementMapper renders the nodes 1`] = `
       <ImageContainer
         key="0"
         style={
-          Object {
+          {
             "height": 42,
             "width": 56,
           }

package/Components/MasterCell/__tests__/__snapshots__/masterCell.test.js.snap

@@ -3,7 +3,7 @@
 exports[`masterCellBuilder when using a custom data adapter renders correctly 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -13,7 +13,7 @@ exports[`masterCellBuilder when using a custom data adapter renders correctly 1`
     key="0"
     skipButtons={false}
     style={
-      Object {
+      {
         "backgroundColor": "#2F2F2F",
         "borderRadius": 4,
         "height": 436,
@@ -22,7 +22,7 @@ exports[`masterCellBuilder when using a custom data adapter renders correctly 1`
       }
     }
     wrapperRef={
-      Object {
+      {
         "current": null,
       }
     }
@@ -33,7 +33,7 @@ exports[`masterCellBuilder when using a custom data adapter renders correctly 1`
 exports[`masterCellBuilder when using custom containerStyle renders correctly 1`] = `
 <View
   style={
-    Object {
+    {
       "backgroundColor": "black",
     }
   }
@@ -42,9 +42,9 @@ exports[`masterCellBuilder when using custom containerStyle renders correctly 1`
     cellUUID="mocked-uuid"
     key="0"
     skipButtons={false}
-    style={Object {}}
+    style={{}}
     wrapperRef={
-      Object {
+      {
         "current": null,
       }
     }
@@ -55,7 +55,7 @@ exports[`masterCellBuilder when using custom containerStyle renders correctly 1`
 exports[`masterCellBuilder when using custom default components renders correctly 1`] = `
 <mockConstructor
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -64,9 +64,9 @@ exports[`masterCellBuilder when using custom default components renders correctl
     cellUUID="mocked-uuid"
     key="0"
     skipButtons={false}
-    style={Object {}}
+    style={{}}
     wrapperRef={
-      Object {
+      {
         "current": null,
       }
     }
@@ -77,7 +77,7 @@ exports[`masterCellBuilder when using custom default components renders correctl
 exports[`masterCellBuilder when using default options can be invoked as a React Component 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -87,7 +87,7 @@ exports[`masterCellBuilder when using default options can be invoked as a React
     key="0"
     skipButtons={false}
     style={
-      Object {
+      {
         "backgroundColor": "#2F2F2F",
         "borderRadius": 4,
         "height": 436,
@@ -96,13 +96,13 @@ exports[`masterCellBuilder when using default options can be invoked as a React
       }
     }
     whoAmI={
-      Object {
+      {
         "contentType": "feed",
         "state": "default",
       }
     }
     wrapperRef={
-      Object {
+      {
         "current": null,
       }
     }
@@ -113,7 +113,7 @@ exports[`masterCellBuilder when using default options can be invoked as a React
       numberOfLines={1}
       skipButtons={false}
       style={
-        Object {
+        {
           "borderTopLeftRadius": 4,
           "borderTopRightRadius": 4,
           "height": 216,
@@ -127,7 +127,7 @@ exports[`masterCellBuilder when using default options can be invoked as a React
       key="1"
       skipButtons={false}
       style={
-        Object {
+        {
           "height": 30,
           "marginHorizontal": 24,
           "marginTop": 24,
@@ -135,7 +135,7 @@ exports[`masterCellBuilder when using default options can be invoked as a React
         }
       }
       wrapperRef={
-        Object {
+        {
           "current": null,
         }
       }
@@ -146,7 +146,7 @@ exports[`masterCellBuilder when using default options can be invoked as a React
         numberOfLines={1}
         skipButtons={false}
         style={
-          Object {
+          {
             "color": "#EFEFEF",
             "fontSize": 26,
             "fontStyle": "normal",
@@ -160,7 +160,7 @@ exports[`masterCellBuilder when using default options can be invoked as a React
       key="2"
       skipButtons={false}
       style={
-        Object {
+        {
           "height": 60,
           "marginHorizontal": 24,
           "marginTop": 10,
@@ -168,7 +168,7 @@ exports[`masterCellBuilder when using default options can be invoked as a React
         }
       }
       wrapperRef={
-        Object {
+        {
           "current": null,
         }
       }
@@ -179,7 +179,7 @@ exports[`masterCellBuilder when using default options can be invoked as a React
         numberOfLines={2}
         skipButtons={false}
         style={
-          Object {
+          {
             "color": "#EFEFEF",
             "fontSize": 24,
             "fontStyle": "normal",
@@ -194,14 +194,14 @@ exports[`masterCellBuilder when using default options can be invoked as a React
       key="3"
       skipButtons={false}
       style={
-        Object {
+        {
           "height": 42,
           "margin": 24,
           "width": 56,
         }
       }
       wrapperRef={
-        Object {
+        {
           "current": null,
         }
       }
@@ -211,7 +211,7 @@ exports[`masterCellBuilder when using default options can be invoked as a React
         key="0"
         skipButtons={false}
         style={
-          Object {
+          {
             "height": 42,
             "width": 56,
           }
@@ -227,24 +227,24 @@ exports[`masterCellBuilder when using default options renders correctly 1`] = `
 <View>
   <Memo(MasterCell)
     item={
-      Object {
-        "author": Object {
+      {
+        "author": {
           "name": "John Doe",
         },
         "id": "A1234",
-        "media_group": Array [
-          Object {
-            "media_item": Array [
-              Object {
+        "media_group": [
+          {
+            "media_item": [
+              {
                 "key": "image_base",
                 "src": "http://urlOfTheImage.net/img.png",
               },
             ],
             "type": "image",
           },
-          Object {
-            "media_item": Array [
-              Object {
+          {
+            "media_item": [
+              {
                 "key": "logo_thumbnail",
                 "src": "http://urlOfTheImage.net/channelLogo.png",
               },
@@ -255,7 +255,7 @@ exports[`masterCellBuilder when using default options renders correctly 1`] = `
         "published": "2019/03/17 02:17:46 +0000",
         "summary": "Summary of the test entry",
         "title": "Test Entry",
-        "type": Object {
+        "type": {
           "value": "feed",
         },
       }
@@ -265,7 +265,7 @@ exports[`masterCellBuilder when using default options renders correctly 1`] = `
 `;
 
 exports[`masterCellBuilder when using default options returns a function 1`] = `
-Object {
+{
   "$$typeof": Symbol(react.memo),
   "compare": null,
   "hasFocusableInside": [Function],

package/Components/MasterCell/hooks/useAsyncRendering/MasterCellAsyncRenderManager.ts

@@ -16,13 +16,13 @@ export class MasterCellAsyncRenderManager {
   }
 
   public emitAsyncElementRegistrate = () => {
-    this.asyncElementRegistrate$.next();
+    this.asyncElementRegistrate$.next(null);
 
     return this.decrementAsyncElementRegistrationCount;
   };
 
   public emitAsyncElementLayout = () => {
-    this.asyncElementLayout$.next();
+    this.asyncElementLayout$.next(null);
   };
 
   public decrementAsyncElementRegistrationCount = () => {

package/Components/MasterCell/hooks/useAsyncRendering/index.ts

@@ -8,7 +8,7 @@ import { MasterCellAsyncRenderManager } from "./MasterCellAsyncRenderManager";
 const layoutMeasure = (viewRef, onMeasure) => {
   viewRef?.measureLayout?.(
     findNodeHandle(viewRef),
-    (x, y, width, height) => {
+    (_x, _y, width, height) => {
       onMeasure({ width, height });
     },
     noop
@@ -16,7 +16,7 @@ const layoutMeasure = (viewRef, onMeasure) => {
 };
 
 const regularMeasure = (viewRef, onMeasure) => {
-  viewRef?.measure?.((x, y, width, height) => {
+  viewRef?.measure?.((_x, _y, width, height) => {
     onMeasure({ width, height });
   });
 };

package/Components/NativeFocusables/{index.js → index.ts}

@@ -1,10 +1,12 @@
 import { requireNativeComponent, View } from "react-native";
 import { isAppleTV } from "@applicaster/zapp-react-native-ui-components/Helpers/Platform";
 
+// @TODO define the types
 export const FocusableGroupNative = isAppleTV()
-  ? requireNativeComponent("FocusableGroupViewModule", null)
+  ? requireNativeComponent<any>("FocusableGroupViewModule")
   : View;
 
+// @TODO define the types
 export const FocusableItemNative = isAppleTV()
-  ? requireNativeComponent("FocusableViewModule", null)
+  ? requireNativeComponent<any>("FocusableViewModule")
   : View;

package/Components/OfflineHandler/__tests__/__snapshots__/index.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`OfflineHandler renders 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
       "position": "relative",
     }
@@ -11,7 +11,7 @@ exports[`OfflineHandler renders 1`] = `
 >
   <View
     style={
-      Object {
+      {
         "bottom": 0,
         "left": 0,
         "position": "absolute",
@@ -32,7 +32,7 @@ exports[`OfflineHandler renders 1`] = `
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
       style={
-        Object {
+        {
           "alignItems": "center",
           "backgroundColor": undefined,
           "flex": 1,
@@ -43,8 +43,8 @@ exports[`OfflineHandler renders 1`] = `
           "position": "absolute",
           "right": 0,
           "top": 0,
-          "transform": Array [
-            Object {
+          "transform": [
+            {
               "translateY": -88,
             },
           ],
@@ -54,7 +54,7 @@ exports[`OfflineHandler renders 1`] = `
     >
       <View
         style={
-          Object {
+          {
             "backgroundColor": undefined,
             "height": 44,
           }
@@ -62,7 +62,7 @@ exports[`OfflineHandler renders 1`] = `
       />
       <Text
         style={
-          Object {
+          {
             "color": undefined,
             "fontFamily": undefined,
             "fontSize": undefined,

package/Components/OfflineHandler/__tests__/index.test.tsx

@@ -2,43 +2,46 @@ import React from "react";
 
 import renderer, { act } from "react-test-renderer";
 
-jest.useFakeTimers();
+jest.useFakeTimers({ legacyFakeTimers: true });
 
-let connectionStatus = false;
-const previousValue = null;
+let mockConnectionStatus = false;
+const mockPreviousValue = null;
 
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks/connection", () => {
   return {
-    useConnectionInfo: jest.fn(() => connectionStatus),
+    useConnectionInfo: jest.fn(() => mockConnectionStatus),
   };
 });
 
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks/utils", () => {
   return {
-    usePrevious: jest.fn(() => previousValue),
+    usePrevious: jest.fn(() => mockPreviousValue),
   };
 });
 
-jest.mock("@applicaster/zapp-react-native-redux/hooks", () => ({
-  usePickFromState: () => ({
-    plugins: [
-      {
-        name: "offline experience",
-        identifier: "offline-experience",
-        type: "general",
-        module: {
-          useOfflineExperienceConfiguration: () => ({
-            configurationFields: {},
-            localizations: {
-              offline_toast_message: "No internet connection",
-              online_toast_message: "You are back online",
-            },
-          }),
+jest.mock(
+  "@applicaster/zapp-react-native-redux/hooks/usePickFromState",
+  () => ({
+    usePickFromState: () => ({
+      plugins: [
+        {
+          name: "offline experience",
+          identifier: "offline-experience",
+          type: "general",
+          module: {
+            useOfflineExperienceConfiguration: () => ({
+              configurationFields: {},
+              localizations: {
+                offline_toast_message: "No internet connection",
+                online_toast_message: "You are back online",
+              },
+            }),
+          },
         },
-      },
-    ],
-  }),
-}));
+      ],
+    }),
+  })
+);
 
 jest.mock("react-native-safe-area-context", () => ({
   useSafeAreaInsets: () => ({ top: 44 }),
@@ -53,7 +56,7 @@ describe("OfflineHandler", () => {
   });
 
   it("renders Notification mode if component was rendered while online", () => {
-    connectionStatus = true;
+    mockConnectionStatus = true;
 
     let instance;
 

package/Components/PlayerContainer/PlayerContainer.tsx

@@ -35,10 +35,8 @@ import {
   log_warning,
 } from "./logger";
 import { usePlayer } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayer";
-import {
-  useSetNavbarState,
-  useTargetScreenData,
-} from "@applicaster/zapp-react-native-utils/reactHooks/screen";
+import { useSetNavbarState } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext";
+import { useTargetScreenData } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useTargetScreenData";
 import {
   PlayerContainerContext,
   PlayerContainerContextProvider,
@@ -382,7 +380,7 @@ const PlayerContainerComponent = (props: Props) => {
     }
   };
 
-  const playerRemoteHandler = (component, event, isLanguageOverlayVisible) => {
+  const playerRemoteHandler = (event, isLanguageOverlayVisible) => {
     const { eventType } = event;
 
     if (!isLanguageOverlayVisible && eventType === "menu") {
@@ -625,12 +623,8 @@ const PlayerContainerComponent = (props: Props) => {
         <PlayerContainerContext.Consumer>
           {(context) => (
             <TVEventHandlerComponent
-              tvEventHandler={(component, event) =>
-                playerRemoteHandler(
-                  component,
-                  event,
-                  context.isLanguageOverlayVisible
-                )
+              tvEventHandler={(_component, event) =>
+                playerRemoteHandler(event, context.isLanguageOverlayVisible)
               }
             >
               <FocusableGroup

package/Components/River/ComponentsMap/ComponentsMap.tsx

@@ -70,21 +70,6 @@ function ComponentsMapComponent(props: Props) {
 
   const [flatListHeight, setFlatListHeight] = React.useState(null);
 
-  const {
-    isAnyLoading,
-    isAllLoaded,
-    waitForAllComponents,
-    onLoadFinished,
-    onLoadFailed,
-    shouldShowLoadingError,
-    isAnyLoaded,
-    arePreviousComponentsLoaded,
-  } = useLoadingState(feed?.entry?.length || components.length);
-
-  const theme = useTheme();
-
-  const logTimestamp = useProfilerLogging();
-
   const riverComponents = React.useMemo(() => {
     if (feed?.entry?.length < components.length) {
       return R.slice(0, feed?.entry?.length, components);
@@ -93,55 +78,42 @@ function ComponentsMapComponent(props: Props) {
     return components;
   }, [components, feed]);
 
+  const logTimestamp = useProfilerLogging();
+
+  const onLoadDone = React.useCallback(() => {
+    logTimestamp(riverId?.toString());
+  }, [logTimestamp]);
+
+  const { loadingState, onLoadFinished, onLoadFailed, shouldShowLoadingError } =
+    useLoadingState(riverComponents.length, onLoadDone);
+
+  const theme = useTheme();
+
   const renderRiverItem = React.useCallback(
     ({ item, index }) => {
-      const readyToBeDisplayed = arePreviousComponentsLoaded(index);
-
-      const styles = {
-        display: !readyToBeDisplayed ? "none" : ("flex" as "none" | "flex"),
+      const riverItemProps = {
+        riverId,
+        item,
+        index,
+        isScreenWrappedInContainer,
+        feed,
+        groupId,
+        onLoadFailed,
+        onLoadFinished,
+        getStaticComponentFeed,
+        isLast: isLast(index, riverComponents.length),
+        loadingState,
       };
 
       return (
-        <View style={styles}>
-          <ScreenLoadingMeasurementsListItemWrapper index={index}>
-            <RiverItem
-              {...{
-                readyToBeDisplayed,
-                riverId,
-                item,
-                index,
-                isScreenWrappedInContainer,
-                feed,
-                groupId,
-                onLoadFailed,
-                onLoadFinished,
-                getStaticComponentFeed,
-                isLast: isLast(index, riverComponents.length),
-              }}
-            />
-          </ScreenLoadingMeasurementsListItemWrapper>
-        </View>
+        <ScreenLoadingMeasurementsListItemWrapper index={index}>
+          <RiverItem {...riverItemProps} />
+        </ScreenLoadingMeasurementsListItemWrapper>
       );
     },
-    [
-      feed,
-      getStaticComponentFeed,
-      arePreviousComponentsLoaded,
-      onLoadFailed,
-      onLoadFinished,
-    ]
+    [feed, getStaticComponentFeed, onLoadFailed, onLoadFinished]
   );
 
-  const renderFooter = React.useCallback(() => {
-    return (
-      <RiverFooter
-        visible={isAnyLoading}
-        flatListHeight={flatListHeight}
-        isAnyLoaded={isAnyLoaded || waitForAllComponents}
-      />
-    );
-  }, [flatListHeight, isAnyLoading, isAnyLoaded]);
-
   const screenStyle = React.useMemo(
     () => ({
       paddingTop: ifEmptyUseFallback(
@@ -179,12 +151,6 @@ function ComponentsMapComponent(props: Props) {
 
   usePipesCacheReset(riverId, riverComponents);
 
-  React.useEffect(() => {
-    if (isAllLoaded) {
-      logTimestamp(riverId?.toString());
-    }
-  }, [isAllLoaded]);
-
   const refreshControl = React.useMemo(
     () =>
       pullToRefreshEnabled ? (
@@ -280,6 +246,11 @@ function ComponentsMapComponent(props: Props) {
     }
   }, []);
 
+  const contentContainerStyle = React.useMemo(
+    () => (isScreenWrappedInContainer ? {} : screenStyle),
+    [isScreenWrappedInContainer, screenStyle]
+  );
+
   if (shouldShowLoadingError) {
     return <RiverError />;
   }
@@ -291,7 +262,7 @@ function ComponentsMapComponent(props: Props) {
     <View style={styles.container}>
       <ScreenLoadingMeasurements
         riverId={riverId}
-        numberOfComponents={feed?.entry?.length || components.length}
+        numberOfComponents={riverComponents.length}
       >
         <ViewportTracker>
           <FlatList
@@ -312,10 +283,13 @@ function ComponentsMapComponent(props: Props) {
             keyExtractor={keyExtractor}
             renderItem={renderRiverItem}
             data={riverComponents}
-            contentContainerStyle={
-              isScreenWrappedInContainer ? {} : screenStyle
+            contentContainerStyle={contentContainerStyle}
+            ListFooterComponent={
+              <RiverFooter
+                flatListHeight={flatListHeight}
+                loadingState={loadingState}
+              />
             }
-            ListFooterComponent={renderFooter}
             refreshControl={refreshControl}
             onScrollBeginDrag={onScrollBeginDrag}
             onScroll={onScroll}