@applicaster/zapp-react-native-ui-components 13.0.0-alpha.8532113155 → 13.0.0-alpha.8541129242

package/Components/FocusableScrollView/index.tsx

@@ -11,6 +11,13 @@ import {
   useInitialFocus,
 } from "@applicaster/zapp-react-native-utils/focusManager";
 
+export type FocusableScrollViewRenderItem = (info: {
+  item: ZappUIComponent;
+  index: number;
+  focused: boolean;
+  parentFocus: ParentFocus;
+}) => React.ReactElement;
+
 export type Props = ScrollViewProps & {
   id?: number | string;
   horizontal?: boolean;
@@ -32,17 +39,27 @@ export type Props = ScrollViewProps & {
   initialFocusDirection?: FocusManager.Android.FocusNavigationDirections;
   onAllComponentsLoaded?: () => void;
   omitPropsPropagation?: Array<keyof FlatListProps<any>>;
-  renderItem: (info: {
-    item: ZappUIComponent;
-    index: number;
-    focused: boolean;
-    parentFocus: ParentFocus;
-  }) => React.ReactElement;
+  renderItem: FocusableScrollViewRenderItem;
 } & ParentFocus;
 
 type State = boolean[];
 type Action = { index?: number; isFocusable: boolean; type?: string };
 
+const unwrapArray = (maybeArray) =>
+  Array.isArray(maybeArray) ? maybeArray[0] : maybeArray;
+
+const getEntry = <T extends unknown>(data: T | T[], index: unknown): T => {
+  let entry;
+
+  if (R.isNil(index)) {
+    entry = unwrapArray(data);
+  } else if (typeof index === "number") {
+    entry = unwrapArray(data[index]);
+  }
+
+  return entry;
+};
+
 const focusableStateReducer = (
   state: State,
   { index = null, isFocusable, type = null }: Action
@@ -73,7 +90,7 @@ const extendScrollViewRef = (_ref, childCompsMeasurementsMap) => {
   };
 
   _ref.scrollToIndex = (params) => {
-    const { index, viewOffset } = params;
+    const { index, viewOffset = 0 } = params;
 
     const itemByIndex = R.find(R.propEq("index", index))(
       R.values(childCompsMeasurementsMap)
@@ -129,8 +146,11 @@ function FocusableScrollViewComponent(props: Props, ref) {
   );
 
   const getFocusableEntryId = React.useCallback(
-    (_entry: ZappEntry, index?: number) => {
-      const entry = R.isNil(index) ? _entry : data[index];
+    (_entry: ZappEntry | null, index?: number) => {
+      const entry: { id?: string } = getEntry(
+        R.isNil(index) ? _entry : data,
+        index
+      );
 
       return entry ? `${props.id}--${entry?.id}` : undefined;
     },
@@ -273,16 +293,25 @@ function FocusableScrollViewComponent(props: Props, ref) {
   const renderItem = React.useCallback(
     (item, index) => {
       const renderArgs = { item, index };
-      const id = `${props.id}--${renderArgs?.item?.id}`;
-      const nextFocus = getNextFocus(renderArgs?.index);
+
+      const id = getFocusableEntryId(
+        Array.isArray(item) ? item[0] : item,
+        index
+      );
+
+      const nextFocus = getNextFocus(index);
 
       const onItemLayout = (event) => {
-        childCompsMeasurementsMap.current[item.id] = {
+        childCompsMeasurementsMap.current[
+          Array.isArray(item) ? index : item.id
+        ] = {
           index,
           layout: event.nativeEvent.layout,
         };
       };
 
+      const onSetIsFocusable = setIsFocusable(renderArgs.index);
+
       return (
         <View key={id} onLayout={onItemLayout}>
           <Focusable
@@ -305,6 +334,7 @@ function FocusableScrollViewComponent(props: Props, ref) {
             id={id}
             disableFocus={shouldDisableFocus(renderArgs?.index)}
             blockFocus={!isRendered(renderArgs?.index)}
+            onSetIsFocusable={onSetIsFocusable}
             {...focusableItemProps}
           >
             {(focused, parentFocus, parentRef) => (
@@ -319,7 +349,7 @@ function FocusableScrollViewComponent(props: Props, ref) {
                 isReadyToRender={isReadyToRender}
                 onLoadFinished={onLoadFinished(renderArgs.index)}
                 onLoadFailed={onLoadFailed(renderArgs.index)}
-                setIsFocusable={setIsFocusable(renderArgs.index)}
+                setIsFocusable={onSetIsFocusable}
               />
             )}
           </Focusable>

package/Components/Layout/TV/NavBarContainer.tsx

@@ -1,9 +1,5 @@
 import * as React from "react";
-import { View, StyleSheet } from "react-native";
-import { ScreenLayoutContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenLayoutContext";
-import { ifEmptyUseFallback } from "@applicaster/zapp-react-native-utils/cellUtils";
-import { useCurrentScreenData } from "@applicaster/zapp-react-native-utils/reactHooks/screen";
-import { useScreenConfiguration } from "../../River/useScreenConfiguration";
+import { StyleSheet, View } from "react-native";
 
 type Props = {
   children: React.ReactNode;
@@ -12,33 +8,33 @@ type Props = {
 };
 
 const styles = StyleSheet.create({
-  container: { position: "absolute", top: 0, zIndex: 10, width: 1920 },
+  container: {
+    position: "absolute",
+    top: 0,
+    zIndex: 10,
+    flex: 1,
+    width: "100%",
+  },
+  themeStyles: {
+    // limits the height of the focusable container of the TopMenuBarTV component
+    // to prevent it from being overlapped by the screen content,
+    // as it makes TopMenuBarTV unfocusable on tvOS
+    maxHeight: 1,
+  },
 });
 
 export const NavBarContainer = ({ children, isVisible, onReady }: Props) => {
-  const screenLayout = React.useContext(ScreenLayoutContext);
-  const screenMarginTop = screenLayout?.screenMarginTop || 0;
-  const screen = useCurrentScreenData();
-  const screenConfig = useScreenConfiguration(screen?.id);
-
-  const themeStyles = React.useMemo(
-    () => ({
-      // limits the height of the focusable container of the TopMenuBarTV component
-      // to prevent it from being overlapped by the screen content,
-      // as it makes TopMenuBarTV unfocusable on tvOS
-      maxHeight: ifEmptyUseFallback(screenConfig?.marginTop, screenMarginTop),
-    }),
-    [screenLayout, screenConfig]
-  );
-
   React.useEffect(() => {
     setTimeout(() => {
       onReady?.(true);
     }, 0);
-  }, []);
+  }, [onReady]);
 
   return isVisible ? (
-    <View testID="nav-bar-container" style={[styles.container, themeStyles]}>
+    <View
+      testID="nav-bar-container"
+      style={[styles.container, styles.themeStyles]}
+    >
       {children}
     </View>
   ) : null;

package/Components/Layout/TV/__tests__/__snapshots__/NavBarContainer.test.tsx.snap

@@ -5,13 +5,14 @@ exports[`NavBarContainer renders 1`] = `
   style={
     [
       {
+        "flex": 1,
         "position": "absolute",
         "top": 0,
-        "width": 1920,
+        "width": "100%",
         "zIndex": 10,
       },
       {
-        "maxHeight": 10,
+        "maxHeight": 1,
       },
     ]
   }

package/Components/Layout/TV/__tests__/__snapshots__/ScreenContainer.test.tsx.snap

@@ -16,13 +16,14 @@ exports[`ScreenContainer renders 1`] = `
     style={
       [
         {
+          "flex": 1,
           "position": "absolute",
           "top": 0,
-          "width": 1920,
+          "width": "100%",
           "zIndex": 10,
         },
         {
-          "maxHeight": 10,
+          "maxHeight": 1,
         },
       ]
     }

package/Components/MasterCell/DefaultComponents/ActionButton.tsx

@@ -4,7 +4,6 @@ import { TouchableOpacity, ViewStyle } from "react-native";
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
 
 import Image from "./Image";
-
 type Props = {
   item: ZappEntry | ZappFeed;
   flavour?: "flavour_1" | "flavour_2";
@@ -69,7 +68,7 @@ export function ActionButton(props: Props) {
     if (!((actionDisabled || !actionContext) && actionState !== null)) {
       setActionState(actionContext.initialEntryState(item));
     }
-  }, [actionDisabled, item?.id, actionContext, action]);
+  }, [actionDisabled, item?.id, actionContext, action, setActionState]);
 
   const onPress = useCallback(() => {
     actionContext.invokeAction(item, {
@@ -85,7 +84,7 @@ export function ActionButton(props: Props) {
         setActionState(state);
       });
     }
-  }, [item?.id]);
+  }, [item?.id, setActionState, actionContext]);
 
   if (actionDisabled || !actionContext) return null;
   const AssetComponent = actionState?.asset;

package/Components/MasterCell/DefaultComponents/LiveImage/index.tsx

@@ -244,7 +244,7 @@ const LiveImageComponent = (props: LiveImageProps) => {
   return (
     <>
       <Image {...props} applyMaxSize />
-      {isShouldRender && (
+      {isShouldRender ? (
         <View style={[style, positionAbsolute]}>
           <PlayerLiveImage
             uri={props.uri}
@@ -257,7 +257,7 @@ const LiveImageComponent = (props: LiveImageProps) => {
             audioMutedByDefault={audio_muted_by_default}
           />
         </View>
-      )}
+      ) : null}
     </>
   );
 };

package/Components/MasterCell/SharedUI/ProgressBar/hooks/useFillInPercent.ts

@@ -34,7 +34,6 @@ export const useFillInPercent = (entry: ZappEntry): number => {
     React.useState<number>(DEFAULT_FILL);
 
   React.useEffect(() => {
-    // setup progress in UI on mount
     getProgressValue(action, entry, (progress) => {
       setFillInPercent(progress);
     });
@@ -45,17 +44,12 @@ export const useFillInPercent = (entry: ZappEntry): number => {
       return;
     }
 
-    // refresh progress in UI when it was changed in CW
-    const unsubscribe = action?.addDataSourceListener?.(() => {
+    return action?.addDataSourceListener?.(() => {
       getProgressValue(action, entry, (progress) => {
         setFillInPercent(progress);
       });
     });
-
-    return () => {
-      unsubscribe?.();
-    };
-  }, [isActive]);
+  }, [isActive, action, entry, setFillInPercent]);
 
   return fillInPercent;
 };

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

@@ -3,12 +3,10 @@
 exports[`elementMapper renders the nodes 1`] = `
 <View>
   <View
-    key="View_0"
     testProp={true}
     viewProp={true}
   >
-    <ImageContainer
-      key="0"
+    <View
       style={
         {
           "borderTopLeftRadius": 4,
@@ -20,7 +18,6 @@ exports[`elementMapper renders the nodes 1`] = `
       uri="http://urlOfTheImage.net/img.png"
     />
     <View
-      key="1"
       style={
         {
           "height": 30,
@@ -32,8 +29,7 @@ exports[`elementMapper renders the nodes 1`] = `
       testProp={true}
       viewProp={true}
     >
-      <_Text
-        key="0"
+      <View
         label="Test Entry"
         numberOfLines={1}
         style={
@@ -47,7 +43,6 @@ exports[`elementMapper renders the nodes 1`] = `
       />
     </View>
     <View
-      key="2"
       style={
         {
           "height": 60,
@@ -58,8 +53,7 @@ exports[`elementMapper renders the nodes 1`] = `
       }
       testProp={true}
     >
-      <_Text
-        key="0"
+      <View
         label="Summary of the test entry"
         numberOfLines={2}
         style={
@@ -74,7 +68,6 @@ exports[`elementMapper renders the nodes 1`] = `
       />
     </View>
     <View
-      key="3"
       style={
         {
           "height": 42,
@@ -85,8 +78,7 @@ exports[`elementMapper renders the nodes 1`] = `
       testProp={true}
       viewProp={true}
     >
-      <ImageContainer
-        key="0"
+      <View
         style={
           {
             "height": 42,

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

@@ -1,35 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`masterCellBuilder when using a custom data adapter renders correctly 1`] = `
-<View
-  style={
-    {
-      "flex": 1,
-    }
-  }
->
-  <View
-    cellUUID="mocked-uuid"
-    key="0"
-    skipButtons={false}
-    style={
-      {
-        "backgroundColor": "#2F2F2F",
-        "borderRadius": 4,
-        "height": 436,
-        "marginRight": 20,
-        "width": 384,
-      }
-    }
-    wrapperRef={
-      {
-        "current": null,
-      }
-    }
-  />
-</View>
-`;
-
 exports[`masterCellBuilder when using custom containerStyle renders correctly 1`] = `
 <View
   style={
@@ -73,202 +43,3 @@ exports[`masterCellBuilder when using custom default components renders correctl
   />
 </mockConstructor>
 `;
-
-exports[`masterCellBuilder when using default options can be invoked as a React Component 1`] = `
-<View
-  style={
-    {
-      "flex": 1,
-    }
-  }
->
-  <View
-    cellUUID="mocked-uuid"
-    key="0"
-    skipButtons={false}
-    style={
-      {
-        "backgroundColor": "#2F2F2F",
-        "borderRadius": 4,
-        "height": 436,
-        "marginRight": 20,
-        "width": 384,
-      }
-    }
-    whoAmI={
-      {
-        "contentType": "feed",
-        "state": "default",
-      }
-    }
-    wrapperRef={
-      {
-        "current": null,
-      }
-    }
-  >
-    <ImageContainer
-      cellUUID="mocked-uuid"
-      key="0"
-      numberOfLines={1}
-      skipButtons={false}
-      style={
-        {
-          "borderTopLeftRadius": 4,
-          "borderTopRightRadius": 4,
-          "height": 216,
-          "width": 384,
-        }
-      }
-      uri="http://urlOfTheImage.net/img.png"
-    />
-    <View
-      cellUUID="mocked-uuid"
-      key="1"
-      skipButtons={false}
-      style={
-        {
-          "height": 30,
-          "marginHorizontal": 24,
-          "marginTop": 24,
-          "width": 336,
-        }
-      }
-      wrapperRef={
-        {
-          "current": null,
-        }
-      }
-    >
-      <_Text
-        key="0"
-        label="Test Entry"
-        numberOfLines={1}
-        skipButtons={false}
-        style={
-          {
-            "color": "#EFEFEF",
-            "fontSize": 26,
-            "fontStyle": "normal",
-            "fontWeight": "bold",
-          }
-        }
-      />
-    </View>
-    <View
-      cellUUID="mocked-uuid"
-      key="2"
-      skipButtons={false}
-      style={
-        {
-          "height": 60,
-          "marginHorizontal": 24,
-          "marginTop": 10,
-          "width": 336,
-        }
-      }
-      wrapperRef={
-        {
-          "current": null,
-        }
-      }
-    >
-      <_Text
-        key="0"
-        label="Summary of the test entry"
-        numberOfLines={2}
-        skipButtons={false}
-        style={
-          {
-            "color": "#EFEFEF",
-            "fontSize": 24,
-            "fontStyle": "normal",
-            "fontWeight": "normal",
-            "opacity": 0.8,
-          }
-        }
-      />
-    </View>
-    <View
-      cellUUID="mocked-uuid"
-      key="3"
-      skipButtons={false}
-      style={
-        {
-          "height": 42,
-          "margin": 24,
-          "width": 56,
-        }
-      }
-      wrapperRef={
-        {
-          "current": null,
-        }
-      }
-    >
-      <ImageContainer
-        cellUUID="mocked-uuid"
-        key="0"
-        skipButtons={false}
-        style={
-          {
-            "height": 42,
-            "width": 56,
-          }
-        }
-        uri="http://urlOfTheImage.net/channelLogo.png"
-      />
-    </View>
-  </View>
-</View>
-`;
-
-exports[`masterCellBuilder when using default options renders correctly 1`] = `
-<View>
-  <Memo(MasterCell)
-    item={
-      {
-        "author": {
-          "name": "John Doe",
-        },
-        "id": "A1234",
-        "media_group": [
-          {
-            "media_item": [
-              {
-                "key": "image_base",
-                "src": "http://urlOfTheImage.net/img.png",
-              },
-            ],
-            "type": "image",
-          },
-          {
-            "media_item": [
-              {
-                "key": "logo_thumbnail",
-                "src": "http://urlOfTheImage.net/channelLogo.png",
-              },
-            ],
-            "type": "thumbnail",
-          },
-        ],
-        "published": "2019/03/17 02:17:46 +0000",
-        "summary": "Summary of the test entry",
-        "title": "Test Entry",
-        "type": {
-          "value": "feed",
-        },
-      }
-    }
-  />
-</View>
-`;
-
-exports[`masterCellBuilder when using default options returns a function 1`] = `
-{
-  "$$typeof": Symbol(react.memo),
-  "compare": null,
-  "hasFocusableInside": [Function],
-  "type": [Function],
-}
-`;

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

@@ -1,20 +1,33 @@
 import * as R from "ramda";
 import * as React from "react";
 import { View } from "react-native";
-import { shallow } from "enzyme";
-import { shallowToJson } from "enzyme-to-json";
+import { render } from "@testing-library/react-native";
 import { elementMapper } from "../elementMapper";
 import { elements } from "./testElements";
 import { defaultComponents } from "../DefaultComponents";
 
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation"
+);
+
 describe("elementMapper", () => {
   it("renders the nodes", () => {
-    const wrapper = shallow(
+    const wrapper = render(
       <View key={1}>
-        {R.map(elementMapper(defaultComponents, { testProp: true }), elements)}
+        {R.map(
+          elementMapper(
+            Object.entries(defaultComponents).reduce((acc, [key]) => {
+              acc[key] = View;
+
+              return acc;
+            }, {}),
+            { testProp: true }
+          ),
+          elements
+        )}
       </View>
     );
 
-    expect(shallowToJson(wrapper)).toMatchSnapshot();
+    expect(wrapper.toJSON()).toMatchSnapshot();
   });
 });