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

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/Cell.tsx

@@ -14,10 +14,7 @@ import { BaseFocusable } from "../BaseFocusable";
 import { AccessibilityManager } from "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager";
 
 type Props = {
-  item: {
-    id: string;
-    title: string;
-  };
+  item: ZappEntry;
   index: number;
   shouldScrollHorizontally: (arg1: [any]) => boolean | null | undefined;
   shouldScrollVertically: (...args: any) => boolean | null | undefined;
@@ -33,10 +30,9 @@ type Props = {
     id: string;
   };
   selected?: boolean;
-  CellRenderer: React.ComponentType<{
-    item: any;
-    state: string;
-  }> & { hasFocusableInside: (item: Record<string, string>) => boolean };
+  CellRenderer: React.FunctionComponent<any> & {
+    hasFocusableInside: (item: ZappEntry) => boolean;
+  };
   preferredFocus: boolean;
   navigator: {
     push: (arg1: Record<any, any>) => void;

package/Components/Cell/CellWithFocusable.tsx

@@ -1,14 +1,52 @@
 import * as React from "react";
 
+import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils/focusManager";
+import * as FOCUS_EVENTS from "@applicaster/zapp-react-native-utils/appUtils/focusManager/events";
 import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
 import { toBooleanWithDefaultFalse } from "@applicaster/zapp-react-native-utils/booleanUtils";
 
+import { isAppleTV } from "../../Helpers/Platform";
 import { useCellState } from "../MasterCell/utils";
-import { FocusableGroup } from "../FocusableGroup";
+
+const useCellFocusedState = (
+  skipFocusManagerRegistration: boolean,
+  groupId: string,
+  id: string
+) => {
+  const [currentCellFocused, setCurrentCellFocused] = React.useState(false);
+
+  React.useEffect(() => {
+    const isGroupItemFocused = () => {
+      if (!skipFocusManagerRegistration) {
+        const isFocused = focusManager.isGroupItemFocused(groupId, id);
+        setCurrentCellFocused(isFocused);
+      }
+    };
+
+    const handler = () => {
+      // tvOS hack for properly checking focus
+      if (isAppleTV()) {
+        setTimeout(() => {
+          isGroupItemFocused();
+        }, 0);
+      } else {
+        isGroupItemFocused();
+      }
+    };
+
+    focusManager.on(FOCUS_EVENTS.FOCUS, handler);
+
+    return () => {
+      focusManager.removeHandler(FOCUS_EVENTS.FOCUS, handler);
+    };
+  }, [groupId, skipFocusManagerRegistration]);
+
+  return currentCellFocused;
+};
 
 type Props = {
   item: ZappEntry;
-  CellRenderer: React.ComponentType<{ item: Object; state: string }>;
+  CellRenderer: React.FunctionComponent<any>;
   id: string;
   groupId: string;
   onFocus: Function;
@@ -37,7 +75,11 @@ export function CellWithFocusable(props: Props) {
     focused,
   } = props;
 
-  const [isFocused, setIsFocused] = React.useState(false);
+  const isFocused = useCellFocusedState(
+    skipFocusManagerRegistration,
+    groupId,
+    id
+  );
 
   const state = useCellState({
     id: item.id,
@@ -54,52 +96,26 @@ export function CellWithFocusable(props: Props) {
     }
   }, [focusedButtonId]);
 
-  const handleToggleFocus = React.useCallback(
-    (value) => {
-      setFocusedButtonId(value.focusedButtonId);
-
-      if (value.focusable) {
-        onFocus(value.focusable, value.mouse);
-      }
-    },
-    [onFocus]
-  );
-
-  const onGroupFocus = React.useCallback(() => {
-    if (!skipFocusManagerRegistration) {
-      setIsFocused(true);
-    }
-  }, [skipFocusManagerRegistration]);
+  const handleToggleFocus = (value) => {
+    setFocusedButtonId(value.focusedButtonId);
 
-  const onGroupBlur = React.useCallback(() => {
-    if (!skipFocusManagerRegistration) {
-      setIsFocused(false);
+    if (value.focusable) {
+      onFocus(value.focusable, value.mouse);
     }
-  }, [skipFocusManagerRegistration]);
+  };
 
   return (
-    <FocusableGroup
-      id={`focusable-cell-wrapper-${id}`}
-      testID={"cell-with-focusable-cell-renderer-focusable-group"}
+    <CellRenderer
+      item={item}
       groupId={groupId}
+      onToggleFocus={handleToggleFocus}
+      state={state}
+      prefixId={id}
+      focusedButtonId={focusedButtonId}
       preferredFocus={preferredFocus}
-      shouldUsePreferredFocus
-      onFocus={onGroupFocus}
-      onBlur={onGroupBlur}
-    >
-      <CellRenderer
-        testID={"cell-with-focusable-cell-renderer"}
-        item={item}
-        groupId={`focusable-cell-wrapper-${id}`}
-        onToggleFocus={handleToggleFocus}
-        state={state}
-        prefixId={id}
-        focusedButtonId={focusedButtonId}
-        preferredFocus={true}
-        skipFocusManagerRegistration={skipFocusManagerRegistration}
-        isFocusable={isFocusable}
-        focused={focused}
-      />
-    </FocusableGroup>
+      skipFocusManagerRegistration={skipFocusManagerRegistration}
+      isFocusable={isFocusable}
+      focused={focused}
+    />
   );
 }

package/Components/Cell/TvOSCellComponent.tsx

@@ -10,10 +10,6 @@ import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils/focu
 import { sendSelectCellEvent } from "@applicaster/zapp-react-native-utils/analyticsUtils";
 import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
 import { CellWithFocusable } from "./CellWithFocusable";
-import { getCellState } from "./utils";
-
-const _getCellState = (focused, selected) =>
-  getCellState({ focused, selected });
 
 type Props = {
   item: ZappEntry;
@@ -36,10 +32,9 @@ type Props = {
     component_type: string;
   };
   selected: boolean;
-  CellRenderer: React.ComponentType<{
-    item: any;
-    state: string;
-  }> & { hasFocusableInside: (item: any) => boolean };
+  CellRenderer: React.FunctionComponent<any> & {
+    hasFocusableInside: (item: any) => boolean;
+  };
   preferredFocus: boolean;
   navigator: {
     push: (arg1: Record<any, any>) => void;

package/Components/Cell/__tests__/CellWIthFocusable.test.js

@@ -1,7 +1,7 @@
 import { View } from "react-native";
 import React from "react";
 import { act, render } from "@testing-library/react-native";
-import { CellWithFocusable } from "../CellWithFocusable.tsx";
+import { CellWithFocusable } from "../CellWithFocusable";
 
 import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils/focusManager";
 
@@ -23,9 +23,7 @@ describe("CellWithFocusable", () => {
 
     const wrapper = renderWith(props);
 
-    const element = wrapper.getByTestId("cell-with-focusable-cell-renderer");
-
-    expect(element.props.state).toBe("default");
+    expect(wrapper.UNSAFE_getByType("View").props.state).toBe("default");
   });
 
   it("should render in default state", () => {
@@ -42,9 +40,8 @@ describe("CellWithFocusable", () => {
     focusManager.isGroupItemFocused = jest.fn(() => true);
 
     const wrapper = renderWith(props);
-    const element = wrapper.getByTestId("cell-with-focusable-cell-renderer");
 
-    expect(element.props.state).toBe("default");
+    expect(wrapper.UNSAFE_getByType("View").props.state).toBe("default");
   });
 
   it("should render in focused state", () => {
@@ -58,17 +55,13 @@ describe("CellWithFocusable", () => {
       scrollTo: jest.fn(),
     };
 
+    focusManager.isGroupItemFocused = jest.fn(() => true);
     const wrapper = renderWith(props);
 
-    const focusableGroupComponent = wrapper.getByTestId(
-      "cell-with-focusable-cell-renderer-focusable-group"
-    );
-
     act(() => {
-      focusableGroupComponent.props.onFocus();
+      focusManager.on.mock.calls[focusManager.on.mock.calls.length - 1][1]();
     });
 
-    const element = wrapper.getByTestId("cell-with-focusable-cell-renderer");
-    expect(element.props.state).toBe("focused");
+    expect(wrapper.UNSAFE_getByType("View").props.state).toBe("focused");
   });
 });

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

@@ -90,7 +90,7 @@ export class Focusable extends BaseFocusable<Props> {
     onBlur(nativeEvent);
   }
 
-  setFocus(direction, callback) {
+  setFocus(_direction, callback) {
     const focusMethods = [
       { method: this.willReceiveFocus },
       { method: this.focus, args: [callback] },

package/Components/FocusableList/index.tsx

@@ -87,7 +87,6 @@ function FocusableListComponent<ItemT>(props: Props<ItemT>, ref) {
     initialFocusDirection = "down",
     data = [],
     // eslint-disable-next-line unused-imports/no-unused-vars
-    onAllComponentsLoaded, // TODO: re-implement it
     omitPropsPropagation = [],
   } = props;