@applicaster/zapp-react-native-ui-components 13.0.0-alpha.1436249127 → 13.0.0-alpha.1488035644

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,
     }
   }
@@ -11,9 +11,8 @@ exports[`masterCellBuilder when using a custom data adapter renders correctly 1`
   <View
     cellUUID="mocked-uuid"
     key="0"
-    skipButtons={false}
     style={
-      Object {
+      {
         "backgroundColor": "#2F2F2F",
         "borderRadius": 4,
         "height": 436,
@@ -22,7 +21,7 @@ exports[`masterCellBuilder when using a custom data adapter renders correctly 1`
       }
     }
     wrapperRef={
-      Object {
+      {
         "current": null,
       }
     }
@@ -33,7 +32,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",
     }
   }
@@ -41,10 +40,9 @@ exports[`masterCellBuilder when using custom containerStyle renders correctly 1`
   <View
     cellUUID="mocked-uuid"
     key="0"
-    skipButtons={false}
-    style={Object {}}
+    style={{}}
     wrapperRef={
-      Object {
+      {
         "current": null,
       }
     }
@@ -55,7 +53,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,
     }
   }
@@ -63,10 +61,9 @@ exports[`masterCellBuilder when using custom default components renders correctl
   <mockConstructor
     cellUUID="mocked-uuid"
     key="0"
-    skipButtons={false}
-    style={Object {}}
+    style={{}}
     wrapperRef={
-      Object {
+      {
         "current": null,
       }
     }
@@ -77,7 +74,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,
     }
   }
@@ -85,9 +82,8 @@ exports[`masterCellBuilder when using default options can be invoked as a React
   <View
     cellUUID="mocked-uuid"
     key="0"
-    skipButtons={false}
     style={
-      Object {
+      {
         "backgroundColor": "#2F2F2F",
         "borderRadius": 4,
         "height": 436,
@@ -96,13 +92,13 @@ exports[`masterCellBuilder when using default options can be invoked as a React
       }
     }
     whoAmI={
-      Object {
+      {
         "contentType": "feed",
         "state": "default",
       }
     }
     wrapperRef={
-      Object {
+      {
         "current": null,
       }
     }
@@ -111,9 +107,8 @@ exports[`masterCellBuilder when using default options can be invoked as a React
       cellUUID="mocked-uuid"
       key="0"
       numberOfLines={1}
-      skipButtons={false}
       style={
-        Object {
+        {
           "borderTopLeftRadius": 4,
           "borderTopRightRadius": 4,
           "height": 216,
@@ -125,9 +120,8 @@ exports[`masterCellBuilder when using default options can be invoked as a React
     <View
       cellUUID="mocked-uuid"
       key="1"
-      skipButtons={false}
       style={
-        Object {
+        {
           "height": 30,
           "marginHorizontal": 24,
           "marginTop": 24,
@@ -135,7 +129,7 @@ exports[`masterCellBuilder when using default options can be invoked as a React
         }
       }
       wrapperRef={
-        Object {
+        {
           "current": null,
         }
       }
@@ -144,9 +138,8 @@ exports[`masterCellBuilder when using default options can be invoked as a React
         key="0"
         label="Test Entry"
         numberOfLines={1}
-        skipButtons={false}
         style={
-          Object {
+          {
             "color": "#EFEFEF",
             "fontSize": 26,
             "fontStyle": "normal",
@@ -158,9 +151,8 @@ exports[`masterCellBuilder when using default options can be invoked as a React
     <View
       cellUUID="mocked-uuid"
       key="2"
-      skipButtons={false}
       style={
-        Object {
+        {
           "height": 60,
           "marginHorizontal": 24,
           "marginTop": 10,
@@ -168,7 +160,7 @@ exports[`masterCellBuilder when using default options can be invoked as a React
         }
       }
       wrapperRef={
-        Object {
+        {
           "current": null,
         }
       }
@@ -177,9 +169,8 @@ exports[`masterCellBuilder when using default options can be invoked as a React
         key="0"
         label="Summary of the test entry"
         numberOfLines={2}
-        skipButtons={false}
         style={
-          Object {
+          {
             "color": "#EFEFEF",
             "fontSize": 24,
             "fontStyle": "normal",
@@ -192,16 +183,15 @@ exports[`masterCellBuilder when using default options can be invoked as a React
     <View
       cellUUID="mocked-uuid"
       key="3"
-      skipButtons={false}
       style={
-        Object {
+        {
           "height": 42,
           "margin": 24,
           "width": 56,
         }
       }
       wrapperRef={
-        Object {
+        {
           "current": null,
         }
       }
@@ -209,9 +199,8 @@ exports[`masterCellBuilder when using default options can be invoked as a React
       <ImageContainer
         cellUUID="mocked-uuid"
         key="0"
-        skipButtons={false}
         style={
-          Object {
+          {
             "height": 42,
             "width": 56,
           }
@@ -227,24 +216,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 +244,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 +254,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/elementMapper.tsx

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { View } from "react-native";
 
 type ElementProps = {
   type: string;
@@ -44,11 +45,21 @@ const cellPlayerTypes = new Set([
 export function elementMapper(
   components,
   otherProps?: {
+    preferredFocus?: boolean;
     skipButtons?: boolean;
     cellUUID?: string;
-    [key: string]: any;
     emitAsyncElementRegistrate?: () => void;
     emitAsyncElementLayout?: () => void;
+    focused?: boolean;
+    focusedButtonId?: string;
+    groupId?: string;
+    isFocusable?: boolean;
+    onToggleFocus?: (arg0: unknown) => void;
+    prefixId?: string;
+    skipFocusManagerRegistration?: boolean;
+    component?: ZappUIComponent;
+    componentId?: string;
+    wrapperRef: React.RefObject<typeof View>;
   }
 ) {
   return function Element({

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

@@ -11,7 +11,24 @@ import { getEntryState, hasFocusableInsideBuilder } from "./utils";
 
 type Props = {
   item: ZappEntry;
-  state: null | "selected" | "focused";
+  state: null | "selected" | "focused" | "default";
+  emitAsyncElementRegistrate?: () => void;
+  emitAsyncElementLayout?: () => void;
+  skipButtons?: boolean;
+  cellUUID?: string;
+  // New props from CellWithFocusable
+  groupId?: string;
+  onToggleFocus?: (arg0: unknown) => void;
+  prefixId?: string;
+  focusedButtonId?: string;
+  preferredFocus?: boolean;
+  skipFocusManagerRegistration?: boolean;
+  isFocusable?: boolean;
+  focused?: boolean;
+  // New props from Gallery
+  component?: ZappUIComponent;
+  componentId?: string;
+  screenId: string;
 };
 
 const defaultContainerStyle = { flex: 1 };
@@ -39,6 +56,24 @@ type MasterCellBuilderOptions = {
   };
 };
 
+// retrieve screendata from route
+const useMasterCellScreen = (screenId?: string) => {
+  let _screenId = screenId;
+  const { screenData } = useRoute();
+
+  if (!screenId) {
+    // get screenId from targetScreen or screenData
+    _screenId =
+      screenData && "targetScreen" in screenData
+        ? screenData?.targetScreen?.id
+        : screenData?.id;
+  }
+
+  const { screen } = useScreenState(_screenId);
+
+  return screen;
+};
+
 export function masterCellBuilder({
   components = defaultComponents,
   cellConfiguration,
@@ -63,15 +98,8 @@ export function masterCellBuilder({
    * inflated with the data coming from the data source
    * @param {"selected" | "focused" | null} props.state state of the component
    */
-  function MasterCell({ item, state, ...otherProps }: Props) {
-    const { screenData } = useRoute();
-
-    const screenId =
-      screenData && "targetScreen" in screenData
-        ? screenData?.targetScreen?.id
-        : screenData?.id;
-
-    const { screen } = useScreenState(screenId);
+  function MasterCell({ item, state, screenId, ...otherProps }: Props) {
+    const screen = useMasterCellScreen(screenId);
 
     const selectedState = screen?.selectedEntry;
 
@@ -97,18 +125,56 @@ export function masterCellBuilder({
       item?.id,
     ]);
 
-    const remapElements = mapElementWithKey(
-      elementMapper(componentsMap, {
-        ...otherProps,
-        wrapperRef,
-        cellUUID,
-        skipButtons,
-      })
+    const remapElements = React.useMemo(
+      () =>
+        mapElementWithKey(
+          elementMapper(componentsMap, {
+            wrapperRef,
+            emitAsyncElementRegistrate: otherProps.emitAsyncElementRegistrate,
+            emitAsyncElementLayout: otherProps.emitAsyncElementLayout,
+            preferredFocus: otherProps.preferredFocus,
+            cellUUID: cellUUID || otherProps.cellUUID,
+            skipButtons: skipButtons || otherProps.skipButtons,
+            // cellWithFocusable
+            focused: otherProps.focused,
+            focusedButtonId: otherProps.focusedButtonId,
+            groupId: otherProps.groupId,
+            isFocusable: otherProps.isFocusable,
+            onToggleFocus: otherProps.onToggleFocus,
+            prefixId: otherProps.prefixId,
+            skipFocusManagerRegistration:
+              otherProps.skipFocusManagerRegistration,
+            // gallery
+            component: otherProps.component,
+            componentId: otherProps.componentId,
+          })
+        ),
+      [
+        componentsMap,
+        otherProps.emitAsyncElementRegistrate,
+        otherProps.emitAsyncElementLayout,
+        cellUUID || otherProps.cellUUID,
+        skipButtons || otherProps.skipButtons,
+        otherProps.focused,
+        otherProps.focusedButtonId,
+        otherProps.groupId,
+        otherProps.isFocusable,
+        otherProps.onToggleFocus,
+        otherProps.prefixId,
+        otherProps.skipFocusManagerRegistration,
+        otherProps.component,
+        otherProps.componentId,
+      ]
+    );
+
+    const renderElements = React.useMemo(
+      () => elements.map(remapElements),
+      [remapElements, elements]
     );
 
     return (
       <View style={containerStyle} ref={wrapperRef}>
-        {elements.map(remapElements)}
+        {renderElements}
       </View>
     );
   }

package/Components/MasterCell/utils/index.ts

@@ -103,7 +103,7 @@ export const useFilterChildren = <
       item: any;
       pluginIdentifier: string;
     };
-  }
+  },
 >(
   children: T[]
 ): T[] => {

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