@applicaster/zapp-react-native-ui-components 13.0.0-alpha.6714678893 → 13.0.0-alpha.7120331332

package/Components/AppContainer/__tests__/__snapshots__/AppContainer.test.js.snap

@@ -3,7 +3,7 @@
 exports[`<AppContainer /> renders correctly 1`] = `
 <View
   style={
-    Object {
+    {
       "backgroundColor": "rgba(255, 255, 255, 1)",
       "flex": 1,
     }

package/Components/AudioPlayer/__tests__/__snapshots__/Runtime.test.js.snap

@@ -3,7 +3,7 @@
 exports[`<Runtime /> LTR renders correctly 1`] = `
 <View
   style={
-    Object {
+    {
       "height": 40,
       "justifyContent": "flex-start",
       "width": 600,
@@ -12,7 +12,7 @@ exports[`<Runtime /> LTR renders correctly 1`] = `
 >
   <Text
     style={
-      Object {
+      {
         "alignItems": "flex-end",
         "color": "white",
         "flexDirection": "row",
@@ -32,7 +32,7 @@ exports[`<Runtime /> LTR renders correctly 1`] = `
 exports[`<Runtime /> RTL renders correctly 1`] = `
 <View
   style={
-    Object {
+    {
       "height": 40,
       "justifyContent": "flex-end",
       "width": 600,
@@ -41,7 +41,7 @@ exports[`<Runtime /> RTL renders correctly 1`] = `
 >
   <Text
     style={
-      Object {
+      {
         "alignItems": "flex-start",
         "color": "white",
         "flexDirection": "row-reverse",

package/Components/AudioPlayer/__tests__/__snapshots__/artWork.test.js.snap

@@ -3,7 +3,7 @@
 exports[`<Artwork /> renders correctly 1`] = `
 <View
   style={
-    Object {
+    {
       "marginHorizontal": 24,
     }
   }
@@ -12,12 +12,12 @@ exports[`<Artwork /> renders correctly 1`] = `
     fadeDuration={0}
     resizeMode="cover"
     source={
-      Object {
+      {
         "uri": "https://example.com",
       }
     }
     style={
-      Object {
+      {
         "height": 400,
         "width": 400,
       }

package/Components/AudioPlayer/__tests__/__snapshots__/audioPlayer.test.js.snap

@@ -3,7 +3,7 @@
 exports[`<AudioPlayer /> renders correctly 1`] = `
 <AudioPlayerLayout
   config={
-    Object {
+    {
       "artworkAspectRatio": "1:1",
       "audioPlayerBackgroundImageQuery": "",
       "backgroundColor": "black",
@@ -21,11 +21,11 @@ exports[`<AudioPlayer /> renders correctly 1`] = `
       "titleFontSize": undefined,
     }
   }
-  style={Object {}}
+  style={{}}
 >
   <Channel
     config={
-      Object {
+      {
         "artworkAspectRatio": "1:1",
         "audioPlayerBackgroundImageQuery": "",
         "backgroundColor": "black",
@@ -47,7 +47,7 @@ exports[`<AudioPlayer /> renders correctly 1`] = `
   />
   <Title
     config={
-      Object {
+      {
         "artworkAspectRatio": "1:1",
         "audioPlayerBackgroundImageQuery": "",
         "backgroundColor": "black",
@@ -69,7 +69,7 @@ exports[`<AudioPlayer /> renders correctly 1`] = `
   />
   <Summary
     config={
-      Object {
+      {
         "artworkAspectRatio": "1:1",
         "audioPlayerBackgroundImageQuery": "",
         "backgroundColor": "black",
@@ -98,7 +98,7 @@ exports[`<AudioPlayer /> renders correctly 1`] = `
     audio_player_summary_color="white"
     audio_player_title_color="white"
     config={
-      Object {
+      {
         "artworkAspectRatio": "1:1",
         "audioPlayerBackgroundImageQuery": "",
         "backgroundColor": "black",

package/Components/AudioPlayer/__tests__/__snapshots__/audioPlayerLayout.test.js.snap

@@ -4,7 +4,7 @@ exports[`<AudioPlayerLayout  /> renders correctly 1`] = `
 <View
   pointerEvents="none"
   style={
-    Object {
+    {
       "backgroundColor": "transparent",
       "overflow": "hidden",
     }
@@ -12,12 +12,12 @@ exports[`<AudioPlayerLayout  /> renders correctly 1`] = `
 >
   <ForwardRef(AnimatedComponentWrapper)
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "overflow": "hidden",
         },
-        Object {
+        {
           "opacity": 0,
         },
       ]
@@ -26,19 +26,19 @@ exports[`<AudioPlayerLayout  /> renders correctly 1`] = `
     <ImageBackground
       resizeMode="cover"
       source={
-        Object {
+        {
           "uri": "https://example.com",
         }
       }
       style={
-        Object {
+        {
           "flex": 1,
         }
       }
     >
       <View
         style={
-          Object {
+          {
             "backgroundColor": "transparent",
             "overflow": "hidden",
           }

package/Components/AudioPlayer/__tests__/__snapshots__/channel.test.js.snap

@@ -3,7 +3,7 @@
 exports[`<Channel /> renders correctly 1`] = `
 <View
   style={
-    Object {
+    {
       "height": 72,
       "marginBottom": 30,
       "width": 128,
@@ -13,12 +13,12 @@ exports[`<Channel /> renders correctly 1`] = `
   <Image
     fadeDuration={0}
     source={
-      Object {
+      {
         "uri": "https://example.com",
       }
     }
     style={
-      Object {
+      {
         "height": 72,
         "width": 128,
       }

package/Components/AudioPlayer/__tests__/__snapshots__/summary.test.js.snap

@@ -3,7 +3,7 @@
 exports[`<Summary /> renders correctly 1`] = `
 <View
   style={
-    Object {
+    {
       "height": 80,
       "marginBottom": 30,
       "width": 600,
@@ -13,7 +13,7 @@ exports[`<Summary /> renders correctly 1`] = `
   <Text
     numberOfLines={2}
     style={
-      Object {
+      {
         "color": "white",
         "fontFamily": null,
         "fontSize": 20,

package/Components/AudioPlayer/__tests__/__snapshots__/title.test.js.snap

@@ -3,7 +3,7 @@
 exports[`<Title /> renders correctly 1`] = `
 <View
   style={
-    Object {
+    {
       "height": 100,
       "marginBottom": 12,
       "width": 600,
@@ -13,7 +13,7 @@ exports[`<Title /> renders correctly 1`] = `
   <Text
     numberOfLines={2}
     style={
-      Object {
+      {
         "color": "white",
         "fontFamily": null,
         "fontSize": 38,

package/Components/Cell/TvOSCellComponent.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import * as R from "ramda";
 import { View, StyleSheet } from "react-native";
 
-import { Focusable } from "@applicaster/zapp-react-native-ui-components/Components/Focusable/FocusableTvOS";
+import { Focusable } from "@applicaster/zapp-react-native-ui-components/Components/Focusable";
 import { FocusableCell } from "@applicaster/zapp-react-native-ui-components/Components/FocusableCell";
 import { getItemType } from "@applicaster/zapp-react-native-utils/navigationUtils";
 import { SCREEN_TYPES } from "@applicaster/zapp-react-native-utils/navigationUtils/itemTypes";
@@ -251,7 +251,7 @@ export class TvOSCellComponent extends React.Component<Props, State> {
 
     const focusableId = R.join("-", [component?.id, id, index]);
 
-    const handleFocus = (arg1: any, index?: number) => {
+    const handleFocus = (arg1: any, index: number) => {
       const focusFn = onFocus || noop;
       focusFn(arg1, index);
 
@@ -284,7 +284,7 @@ export class TvOSCellComponent extends React.Component<Props, State> {
       <View onLayout={this.onLayout} style={styles.container}>
         <Focusable
           id={focusableId}
-          groupId={(groupId || component?.id).toString()}
+          groupId={groupId || component?.id}
           onFocus={handleFocus}
           onBlur={onBlur || this.onBlur}
           isParallaxDisabled={this.layout?.width > 1740}
@@ -303,7 +303,7 @@ export class TvOSCellComponent extends React.Component<Props, State> {
                   index,
                   CellRenderer,
                   item,
-                  focused: !!(this.props.focused || selectedCell || focused),
+                  focused: this.props.focused || selectedCell || focused,
                   scrollTo: this.scrollTo,
                   behavior,
                 }}

package/Components/CellRendererResolver/__tests__/__snapshots__/cellRendererResolver.test.js.snap

@@ -3,24 +3,24 @@
 exports[`CellRendererResolver renders correctly 1`] = `
 <View
   someProp={
-    Object {
-      "cellOptions": Object {},
-      "cellStyles": Object {
-        "ABCDE-123456": Object {
-          "configuration": Object {},
+    {
+      "cellOptions": {},
+      "cellStyles": {
+        "ABCDE-123456": {
+          "configuration": {},
           "plugin_identifier": "custom_renderer_plugin",
         },
-        "FGHIJ-123456": Object {
-          "configuration": Object {},
+        "FGHIJ-123456": {
+          "configuration": {},
           "plugin_identifier": "unknown_plugin",
         },
       },
-      "component": Object {
-        "styles": Object {
+      "component": {
+        "styles": {
           "cell_plugin_configuration_id": "ABCDE-123456",
         },
       },
-      "styles": Object {},
+      "styles": {},
     }
   }
 />
@@ -29,24 +29,24 @@ exports[`CellRendererResolver renders correctly 1`] = `
 exports[`CellRendererResolver with a default renderer plugin renders correctly 1`] = `
 <View
   someProp={
-    Object {
-      "cellOptions": Object {},
-      "cellStyles": Object {
-        "ABCDE-123456": Object {
-          "configuration": Object {},
+    {
+      "cellOptions": {},
+      "cellStyles": {
+        "ABCDE-123456": {
+          "configuration": {},
           "plugin_identifier": "custom_renderer_plugin",
         },
-        "FGHIJ-123456": Object {
-          "configuration": Object {},
+        "FGHIJ-123456": {
+          "configuration": {},
           "plugin_identifier": "unknown_plugin",
         },
       },
-      "component": Object {
-        "styles": Object {
+      "component": {
+        "styles": {
           "cell_plugin_configuration_id": "ABCDE-123456",
         },
       },
-      "styles": Object {},
+      "styles": {},
     }
   }
 />

package/Components/CellRendererResolver/__tests__/cellRendererResolver.test.js

@@ -2,9 +2,11 @@ import * as React from "react";
 import { View } from "react-native";
 import { shallow } from "enzyme";
 
-jest.mock("../../default-cell-renderer", () =>
-  jest.fn((prop) => <View whoAmI="default renderer" someProp={prop} />)
-);
+jest.mock("../../default-cell-renderer", () => {
+  const View = jest.requireActual("react-native").View;
+
+  return jest.fn((prop) => <View whoAmI="default renderer" someProp={prop} />);
+});
 
 const { CellRendererResolver } = require("../index");
 

package/Components/ComponentResolver/__tests__/__snapshots__/componentResolver.test.js.snap

@@ -5,22 +5,22 @@ exports[`ComponentResolver renders correctly 1`] = `
   value={null}
 >
   <Memo(ComponentResolver)
-    cellStyles={Object {}}
+    cellStyles={{}}
     component={
-      Object {
+      {
         "component_type": "some_component",
       }
     }
     components={
-      Object {
+      {
         "SomeComponent": [MockFunction],
       }
     }
     decorators={[MockFunction]}
     dispatch={[Function]}
-    plugins={Array []}
+    plugins={[]}
     store={
-      Object {
+      {
         "clearActions": [Function],
         "dispatch": [Function],
         "getActions": [Function],

package/Components/ComponentResolver/__tests__/componentResolver.test.js

@@ -4,19 +4,21 @@ import { shallow } from "enzyme";
 import { shallowToJson } from "enzyme-to-json";
 import configureStore from "redux-mock-store";
 
-const logger = {
+const mockLogger = {
   warning: jest.fn(),
 };
 
 jest.mock("../../../Helpers/logger", () => ({
   componentsLogger: {
-    addSubsystem: jest.fn(() => logger),
+    addSubsystem: jest.fn(() => mockLogger),
   },
 }));
 
-jest.mock("../../default-cell-renderer", () =>
-  jest.fn((prop) => <View whoAmI="default renderer" someProp={prop} />)
-);
+jest.mock("../../default-cell-renderer", () => {
+  const View = jest.requireActual("react-native").View;
+
+  return jest.fn((prop) => <View whoAmI="default renderer" someProp={prop} />);
+});
 
 const mock_rtl_flag = false;
 
@@ -48,7 +50,7 @@ function clearAllMocks() {
   SomeComponent.mockClear();
   decorators.mockClear();
   renderFunction.mockClear();
-  logger.warning.mockClear();
+  mockLogger.warning.mockClear();
 }
 
 describe("ComponentResolver", () => {
@@ -104,16 +106,16 @@ describe("ComponentResolverComponent", () => {
     expect(shallowToJson(wrapper)).toMatchSnapshot();
     expect(wrapper.isEmptyRender()).toBe(true);
 
-    expect(logger.warning).toHaveBeenCalledTimes(2);
+    expect(mockLogger.warning).toHaveBeenCalledTimes(2);
 
-    expect(logger.warning).toHaveBeenNthCalledWith(
+    expect(mockLogger.warning).toHaveBeenNthCalledWith(
       1,
       expect.objectContaining({
         message: "Could not resolve cell builder plugin",
       })
     );
 
-    expect(logger.warning).toHaveBeenNthCalledWith(
+    expect(mockLogger.warning).toHaveBeenNthCalledWith(
       2,
       expect.objectContaining({
         message: warningMessage,

package/Components/DisplayState/__tests__/__snapshots__/displayState.test.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DISPLAY_STATES matches the snapshot 1`] = `
-Object {
+{
   "CONTENT": "CONTENT",
   "CONTROLS": "CONTROLS",
   "DISCOVERY": "DISCOVERY",
@@ -9,7 +9,7 @@ Object {
 `;
 
 exports[`DisplayStateContext has the correct properties 1`] = `
-Object {
+{
   "Consumer": [MockFunction],
   "Provider": [MockFunction],
   "withConsumer": [MockFunction],

package/Components/Focusable/FocusableTvOS.tsx

@@ -16,8 +16,6 @@ function noop() {}
 type Props = {
   id: string;
   groupId: string;
-  willReceiveFocus?: (nativeEvent: React.SyntheticEvent) => void;
-  hasReceivedFocus?: (nativeEvent: React.SyntheticEvent) => void;
   onPress?: (nativeEvent: React.SyntheticEvent) => void;
   onFocus?: (nativeEvent: React.SyntheticEvent) => void;
   onBlur?: (nativeEvent: React.SyntheticEvent) => void;
@@ -37,8 +35,6 @@ type Props = {
   forceFocus?: boolean;
   initialFocus?: boolean;
   onLayout?: (e: any) => void;
-  offsetUpdater: (arg1: string, arg2: number) => number;
-  style: any;
 };
 
 export class Focusable extends BaseFocusable<Props> {

package/Components/FocusableScrollView/index.tsx

@@ -11,13 +11,6 @@ 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;
@@ -39,27 +32,17 @@ export type Props = ScrollViewProps & {
   initialFocusDirection?: FocusManager.Android.FocusNavigationDirections;
   onAllComponentsLoaded?: () => void;
   omitPropsPropagation?: Array<keyof FlatListProps<any>>;
-  renderItem: FocusableScrollViewRenderItem;
+  renderItem: (info: {
+    item: ZappUIComponent;
+    index: number;
+    focused: boolean;
+    parentFocus: ParentFocus;
+  }) => React.ReactElement;
 } & ParentFocus;
 
 type State = boolean[];
 type Action = { index?: number; isFocusable: boolean; type?: string };
 
-const unwrapArray = (maybeArray) =>
-  Array.isArray(maybeArray) ? maybeArray[0] : maybeArray;
-
-function getEntry<T>(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
@@ -90,7 +73,7 @@ const extendScrollViewRef = (_ref, childCompsMeasurementsMap) => {
   };
 
   _ref.scrollToIndex = (params) => {
-    const { index, viewOffset = 0 } = params;
+    const { index, viewOffset } = params;
 
     const itemByIndex = R.find(R.propEq("index", index))(
       R.values(childCompsMeasurementsMap)
@@ -146,11 +129,8 @@ function FocusableScrollViewComponent(props: Props, ref) {
   );
 
   const getFocusableEntryId = React.useCallback(
-    (_entry: ZappEntry | null, index?: number) => {
-      const entry: { id?: string } = getEntry(
-        R.isNil(index) ? _entry : data,
-        index
-      );
+    (_entry: ZappEntry, index?: number) => {
+      const entry = R.isNil(index) ? _entry : data[index];
 
       return entry ? `${props.id}--${entry?.id}` : undefined;
     },
@@ -293,18 +273,11 @@ function FocusableScrollViewComponent(props: Props, ref) {
   const renderItem = React.useCallback(
     (item, index) => {
       const renderArgs = { item, index };
-
-      const id = getFocusableEntryId(
-        Array.isArray(item) ? item[0] : item,
-        index
-      );
-
-      const nextFocus = getNextFocus(index);
+      const id = `${props.id}--${renderArgs?.item?.id}`;
+      const nextFocus = getNextFocus(renderArgs?.index);
 
       const onItemLayout = (event) => {
-        childCompsMeasurementsMap.current[
-          Array.isArray(item) ? index : item.id
-        ] = {
+        childCompsMeasurementsMap.current[item.id] = {
           index,
           layout: event.nativeEvent.layout,
         };

package/Components/GeneralContentScreen/utils/__tests__/useCurationAPI.test.js

@@ -16,6 +16,15 @@ import { PathnameContext } from "@applicaster/zapp-react-native-ui-components/Co
 import { Provider } from "react-redux";
 import configureStore from "redux-mock-store";
 
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/navigation/useRoute",
+  () => ({
+    useRoute: jest.fn().mockReturnValue({
+      pathname: "/home",
+    }),
+  })
+);
+
 const homeStack = {
   route: "/home",
   state: {

package/Components/GeneralContentScreen/utils/useCurationAPI.ts

@@ -9,7 +9,7 @@ import { loadPipesData } from "@applicaster/zapp-react-native-redux/ZappPipes";
 import { isEmptyOrNil } from "@applicaster/zapp-react-native-utils/cellUtils";
 import { Categories } from "./logger";
 import { createLogger } from "@applicaster/zapp-react-native-utils/logger";
-import { useRoute } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
+import { useRoute } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useRoute";
 import {
   ZappPipesEntryContext,
   ZappPipesScreenContext,

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

@@ -39,6 +39,7 @@ jest.mock(
 );
 
 jest.mock("@applicaster/zapp-react-native-utils/theme", () => ({
+  ...jest.requireActual<any>("@applicaster/zapp-react-native-utils/theme"),
   useTheme: () => ({}),
 }));
 

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

@@ -3,7 +3,7 @@
 exports[`LayoutContainer renders 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
       "height": 1080,
       "width": 1920,

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

@@ -3,14 +3,14 @@
 exports[`NavBarContainer renders 1`] = `
 <View
   style={
-    Array [
-      Object {
+    [
+      {
         "position": "absolute",
         "top": 0,
         "width": 1920,
         "zIndex": 10,
       },
-      Object {
+      {
         "maxHeight": 10,
       },
     ]