@applicaster/zapp-react-native-ui-components 15.1.4 → 16.0.0-alpha.1042942411

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

@@ -7,6 +7,7 @@ exports[`dataAdapter creates a tree of nodes 1`] = `
       {
         "elements": undefined,
         "props": {
+          "_dataKey": "uri",
           "numberOfLines": 1,
           "uri": "http://urlOfTheImage.net/img.png",
         },
@@ -23,6 +24,7 @@ exports[`dataAdapter creates a tree of nodes 1`] = `
           {
             "elements": undefined,
             "props": {
+              "_dataKey": "label",
               "label": "Test Entry",
               "numberOfLines": 1,
             },
@@ -49,6 +51,7 @@ exports[`dataAdapter creates a tree of nodes 1`] = `
           {
             "elements": undefined,
             "props": {
+              "_dataKey": "label",
               "label": "Summary of the test entry",
               "numberOfLines": 2,
             },
@@ -76,6 +79,7 @@ exports[`dataAdapter creates a tree of nodes 1`] = `
           {
             "elements": undefined,
             "props": {
+              "_dataKey": "uri",
               "uri": "http://urlOfTheImage.net/channelLogo.png",
             },
             "style": {
@@ -119,6 +123,7 @@ exports[`dataAdapter returns a tree view for a specific content type fallback to
       {
         "elements": undefined,
         "props": {
+          "_dataKey": "uri",
           "numberOfLines": 1,
           "uri": "http://urlOfTheImage.net/img.png",
         },
@@ -135,6 +140,7 @@ exports[`dataAdapter returns a tree view for a specific content type fallback to
           {
             "elements": undefined,
             "props": {
+              "_dataKey": "label",
               "label": "Test Entry",
               "numberOfLines": 1,
             },
@@ -161,6 +167,7 @@ exports[`dataAdapter returns a tree view for a specific content type fallback to
           {
             "elements": undefined,
             "props": {
+              "_dataKey": "label",
               "label": "Summary of the test entry",
               "numberOfLines": 2,
             },
@@ -188,6 +195,7 @@ exports[`dataAdapter returns a tree view for a specific content type fallback to
           {
             "elements": undefined,
             "props": {
+              "_dataKey": "uri",
               "uri": "http://urlOfTheImage.net/channelLogo.png",
             },
             "style": {
@@ -231,6 +239,7 @@ exports[`dataAdapter returns a tree view for a specific content type if the cont
       {
         "elements": undefined,
         "props": {
+          "_dataKey": "uri",
           "numberOfLines": 1,
           "uri": "http://urlOfTheImage.net/img.png",
         },
@@ -247,6 +256,7 @@ exports[`dataAdapter returns a tree view for a specific content type if the cont
           {
             "elements": undefined,
             "props": {
+              "_dataKey": "label",
               "label": "Test Entry",
               "numberOfLines": 1,
             },
@@ -273,6 +283,7 @@ exports[`dataAdapter returns a tree view for a specific content type if the cont
           {
             "elements": undefined,
             "props": {
+              "_dataKey": "label",
               "label": "Summary of the test entry",
               "numberOfLines": 2,
             },
@@ -300,6 +311,7 @@ exports[`dataAdapter returns a tree view for a specific content type if the cont
           {
             "elements": undefined,
             "props": {
+              "_dataKey": "uri",
               "uri": "http://urlOfTheImage.net/channelLogo.png",
             },
             "style": {
@@ -343,6 +355,7 @@ exports[`dataAdapter returns a tree view for state fallback to the default if th
       {
         "elements": undefined,
         "props": {
+          "_dataKey": "uri",
           "numberOfLines": 1,
           "uri": "http://urlOfTheImage.net/img.png",
         },
@@ -359,6 +372,7 @@ exports[`dataAdapter returns a tree view for state fallback to the default if th
           {
             "elements": undefined,
             "props": {
+              "_dataKey": "label",
               "label": "Test Entry",
               "numberOfLines": 1,
             },
@@ -385,6 +399,7 @@ exports[`dataAdapter returns a tree view for state fallback to the default if th
           {
             "elements": undefined,
             "props": {
+              "_dataKey": "label",
               "label": "Summary of the test entry",
               "numberOfLines": 2,
             },
@@ -412,6 +427,7 @@ exports[`dataAdapter returns a tree view for state fallback to the default if th
           {
             "elements": undefined,
             "props": {
+              "_dataKey": "uri",
               "uri": "http://urlOfTheImage.net/channelLogo.png",
             },
             "style": {
@@ -455,6 +471,7 @@ exports[`dataAdapter returns a tree view for state fallback to the default if th
       {
         "elements": undefined,
         "props": {
+          "_dataKey": "uri",
           "numberOfLines": 1,
           "uri": "http://urlOfTheImage.net/img.png",
         },
@@ -471,6 +488,7 @@ exports[`dataAdapter returns a tree view for state fallback to the default if th
           {
             "elements": undefined,
             "props": {
+              "_dataKey": "label",
               "label": "Test Entry",
               "numberOfLines": 1,
             },
@@ -497,6 +515,7 @@ exports[`dataAdapter returns a tree view for state fallback to the default if th
           {
             "elements": undefined,
             "props": {
+              "_dataKey": "label",
               "label": "Summary of the test entry",
               "numberOfLines": 2,
             },
@@ -524,6 +543,7 @@ exports[`dataAdapter returns a tree view for state fallback to the default if th
           {
             "elements": undefined,
             "props": {
+              "_dataKey": "uri",
               "uri": "http://urlOfTheImage.net/channelLogo.png",
             },
             "style": {
@@ -567,6 +587,7 @@ exports[`dataAdapter returns a tree view for state matching the state if it exis
       {
         "elements": undefined,
         "props": {
+          "_dataKey": "uri",
           "numberOfLines": 1,
           "uri": "http://urlOfTheImage.net/img.png",
         },
@@ -583,6 +604,7 @@ exports[`dataAdapter returns a tree view for state matching the state if it exis
           {
             "elements": undefined,
             "props": {
+              "_dataKey": "label",
               "label": "Test Entry",
               "numberOfLines": 1,
             },
@@ -609,6 +631,7 @@ exports[`dataAdapter returns a tree view for state matching the state if it exis
           {
             "elements": undefined,
             "props": {
+              "_dataKey": "label",
               "label": "Summary of the test entry",
               "numberOfLines": 2,
             },
@@ -636,6 +659,7 @@ exports[`dataAdapter returns a tree view for state matching the state if it exis
           {
             "elements": undefined,
             "props": {
+              "_dataKey": "uri",
               "uri": "http://urlOfTheImage.net/channelLogo.png",
             },
             "style": {

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

@@ -32,6 +32,7 @@ describe("configInflater", () => {
       },
       type: "testType",
       props: {
+        _dataKey: "uri",
         uri: {
           extensions: {
             color: "red",

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

@@ -30,4 +30,50 @@ describe("elementMapper", () => {
 
     expect(wrapper.toJSON()).toMatchSnapshot();
   });
+
+  it("renders inline ReactComponent nodes", () => {
+    const InlineComponent = jest.fn(({ testID, children }) => (
+      <View testID={testID}>{children}</View>
+    ));
+
+    const node = {
+      type: "ReactComponent",
+      style: { marginTop: 8 },
+      props: {
+        component: InlineComponent,
+        testID: "inline-react-component",
+        requiresCellUUID: true,
+      },
+      elements: [
+        {
+          type: "View",
+          style: { width: 10 },
+          props: {
+            testID: "inline-react-child",
+          },
+        },
+      ],
+    };
+
+    const wrapper = render(
+      <View>
+        {elementMapper({ View }, { cellUUID: "cell-uuid-test" })(node)}
+      </View>
+    );
+
+    expect(wrapper.getByTestId("inline-react-component")).toBeTruthy();
+    expect(wrapper.getByTestId("inline-react-child")).toBeTruthy();
+
+    expect(InlineComponent).toHaveBeenCalledWith(
+      expect.objectContaining({
+        testID: "inline-react-component",
+        style: { marginTop: 8 },
+        cellUUID: "cell-uuid-test",
+      }),
+      expect.anything()
+    );
+
+    expect(InlineComponent.mock.calls[0][0].component).toBeUndefined();
+    expect(InlineComponent.mock.calls[0][0].requiresCellUUID).toBeUndefined();
+  });
 });

package/Components/MasterCell/contexts/PressedStateContext.ts

@@ -0,0 +1,3 @@
+import React from "react";
+
+export const PressedStateContext = React.createContext<boolean>(false);

package/Components/MasterCell/dataAdapter.ts

@@ -32,7 +32,9 @@ function retrieveData(entry, func, args) {
  * @param {String} masterCellConfig.type of the component
  * @param {Object} masterCellConfig.style default style object for the component
  * @param {?Object} masterCellConfig.data func/args/propName that indicates how to extract
- * the data from the entry and to which prop it should be injected after manipulation
+ * the data from the entry and to which prop it should be injected after manipulation.
+ * The last mapped propName is also stored as `_dataKey` so DataProvider can
+ * mirror the resolved value into both direct props and `dataProviderProps`.
  * @param {?[Object]} element.elements Optional array of nested elements to render within the current node
  * @returns {Object} inflated configuration, ready to be rendered by the master cell's element mapper
  */
@@ -56,6 +58,7 @@ export function configInflater(
 ) {
   const props = data.reduce(
     (acc, curr) => {
+      acc._dataKey = curr.propName;
       acc[curr.propName] = retrieveData(entry, curr.func, curr.args);
 
       return acc;

package/Components/MasterCell/elementMapper.tsx

@@ -8,6 +8,8 @@ type ElementProps = {
   key: string;
 };
 
+const REACT_COMPONENT_TYPE = "ReactComponent";
+
 export function mapElementWithKey(fn) {
   return function (element, key) {
     return fn({ ...element, key });
@@ -18,9 +20,23 @@ export function mapElementWithKey(fn) {
 const focusableTypes = new Set([
   "View",
   "ButtonContainerView",
-  "FocusableView",
+  "TvActionButton",
+  "PressableView",
   "CollapsibleTextContainer",
   "BorderContainerView",
+  "UIKitBadge",
+]);
+
+const childrenRenderingTypes = new Set([
+  "View",
+  "ButtonContainerView",
+  "PressableView",
+  "CollapsibleTextContainer",
+  "BorderContainerView",
+  "DataProvider",
+  "TvActionButton",
+  "MobileActionButton",
+  "UIKitBadge",
 ]);
 
 const cellPlayerTypes = new Set([
@@ -30,6 +46,23 @@ const cellPlayerTypes = new Set([
   "DynamicBadge",
 ]);
 
+const resolveComponent = (type, props, components) => {
+  if (type === REACT_COMPONENT_TYPE) {
+    return props?.component;
+  }
+
+  return components[type];
+};
+
+const shouldInjectCellUUID = (type, props) =>
+  cellPlayerTypes.has(type) ||
+  (type === REACT_COMPONENT_TYPE && Boolean(props?.requiresCellUUID));
+
+const shouldRenderChildren = (type, props) =>
+  type === REACT_COMPONENT_TYPE
+    ? props?.renderChildren !== false
+    : childrenRenderingTypes.has(type);
+
 /**
  * Maps a provided node in a master cell configuration to a React Component tree with appropriate props & styles
  * Curried function of the form elementMapper(components)(element)
@@ -58,7 +91,7 @@ export function elementMapper(
     elements = [],
     key,
   }: ElementProps) {
-    const propsForCellPlayer = cellPlayerTypes.has(type)
+    const propsForCellPlayer = shouldInjectCellUUID(type, props)
       ? {
           cellUUID: otherProps?.cellUUID,
         }
@@ -86,14 +119,28 @@ export function elementMapper(
 
     if (hidden) return null;
 
-    const Component = components[type];
+    const Component = resolveComponent(type, componentProps, components);
+
+    if (!Component) return null;
+
+    const componentPropsToRender =
+      type === REACT_COMPONENT_TYPE
+        ? (({
+            component: _component,
+            renderChildren: _renderChildren,
+            requiresCellUUID: _requiresCellUUID,
+            ...rest
+          }: Record<string, any>) => rest)(componentProps)
+        : componentProps;
+
+    const canRenderChildren =
+      elements.length > 0 && shouldRenderChildren(type, componentProps);
+
     const fn = mapElementWithKey(elementMapper(components, otherProps));
 
     return (
-      <Component key={key} {...componentProps}>
-        {focusableTypes.has(type) && elements.length > 0
-          ? elements.map(fn)
-          : null}
+      <Component key={key} {...componentPropsToRender}>
+        {canRenderChildren ? elements.map(fn) : null}
       </Component>
     );
   };

package/Components/MasterCell/hooks/index.ts

@@ -1 +1,3 @@
 export { useAsyncRendering } from "./useAsyncRendering";
+
+export { usePressedState } from "./usePressedState";

package/Components/MasterCell/hooks/usePressedState.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { PressedStateContext } from "../contexts/PressedStateContext";
+
+export const usePressedState = () => React.useContext(PressedStateContext);

package/Components/MasterCell/index.tsx

@@ -2,6 +2,8 @@ import * as R from "ramda";
 import * as React from "react";
 import { v4 as uuid } from "uuid";
 
+import { isHorizontalList } from "@applicaster/zapp-react-native-utils/componentsUtils";
+import { isVideoPreviewEnabled } from "@applicaster/zapp-react-native-ui-components/Components/MasterCell/utils";
 import { useRoute } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 import { useScreenState } from "@applicaster/zapp-react-native-utils/screenState";
@@ -35,8 +37,8 @@ type MasterCellBuilderOptions = {
   containerStyle: any;
   cellOptions?: {
     isRTL?: boolean;
-    generateId?: () => string;
     skipButtons?: boolean;
+    component?: ZappComponent;
   };
 };
 
@@ -47,7 +49,7 @@ export function masterCellBuilder({
   containerStyle = defaultContainerStyle,
   cellOptions = {},
 }: MasterCellBuilderOptions) {
-  const { generateId = uuid, skipButtons = false } = cellOptions;
+  const { skipButtons = false, component } = cellOptions;
 
   const componentsMap = R.merge(defaultComponents, components);
   const { View } = componentsMap;
@@ -100,8 +102,22 @@ export function masterCellBuilder({
 
     const wrapperRef = React.useRef(null);
 
-    const cellUUID = React.useMemo<string>(generateId, [
-      generateId,
+    const cellUUID = React.useMemo<string>(() => {
+      const isLiveImage = isVideoPreviewEnabled({
+        enable_video_preview: component?.rules?.enable_video_preview,
+        player_screen_id: component?.rules?.player_screen_id,
+      });
+
+      const isHL = isHorizontalList(component);
+
+      return isHL && isLiveImage
+        ? `${component?.id}-${component?.styles?.cell_plugin_configuration_id}`
+        : uuid();
+    }, [
+      component?.id,
+      component?.styles?.cell_plugin_configuration_id,
+      component?.rules?.enable_video_preview,
+      component?.rules?.player_screen_id,
       screenId,
       item?.id,
     ]);

package/Components/MasterCell/utils/__tests__/cloneChildrenWithIds.test.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+
+import { DataProvider } from "../../DefaultComponents/DataProvider";
+import { cloneChildrenWithIds } from "..";
+
+const Probe = () => null;
+
+describe("cloneChildrenWithIds", () => {
+  it("injects next focus props into plain children", () => {
+    const children = [
+      <Probe key="one" />,
+      <Probe key="two" />,
+      <Probe key="three" />,
+    ];
+
+    const result = cloneChildrenWithIds(["id-1", "id-2", "id-3"], children);
+
+    expect(result[0].props.nextFocusLeft).toBeUndefined();
+    expect(result[0].props.nextFocusRight).toBe("id-2");
+    expect(result[1].props.nextFocusLeft).toBe("id-1");
+    expect(result[1].props.nextFocusRight).toBe("id-3");
+    expect(result[2].props.nextFocusLeft).toBe("id-2");
+    expect(result[2].props.nextFocusRight).toBeUndefined();
+  });
+
+  it("injects next focus props into DataProvider-wrapped children", () => {
+    const children = [
+      <DataProvider key="one" entry={{ id: "entry-1" }}>
+        <Probe suffixId="button_1" />
+      </DataProvider>,
+      <DataProvider key="two" entry={{ id: "entry-2" }}>
+        <Probe suffixId="button_2" />
+      </DataProvider>,
+    ];
+
+    const result = cloneChildrenWithIds(["id-1", "id-2"], children);
+
+    expect(result[0].props.children.props.nextFocusLeft).toBeUndefined();
+    expect(result[0].props.children.props.nextFocusRight).toBe("id-2");
+    expect(result[1].props.children.props.nextFocusLeft).toBe("id-1");
+    expect(result[1].props.children.props.nextFocusRight).toBeUndefined();
+  });
+});

package/Components/MasterCell/utils/__tests__/useFilterChildren.test.tsx

@@ -0,0 +1,80 @@
+import React from "react";
+import { renderHook } from "@testing-library/react-native";
+import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
+
+import { DataProvider } from "../../DefaultComponents/DataProvider";
+import { useFilterChildren } from "..";
+
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/actions", () => ({
+  useActions: jest.fn(),
+}));
+
+const mockUseActions = useActions as jest.Mock;
+const Probe = () => null;
+
+describe("useFilterChildren", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("filters DataProvider-wrapped button children using the wrapped button props", () => {
+    const available = jest.fn(() => true);
+    const unavailable = jest.fn(() => false);
+
+    mockUseActions.mockReturnValue({
+      actions: {
+        available_action: {
+          module: {
+            context: {
+              _currentValue: {
+                isActionAvailable: available,
+              },
+            },
+          },
+        },
+        unavailable_action: {
+          module: {
+            context: {
+              _currentValue: {
+                isActionAvailable: unavailable,
+              },
+            },
+          },
+        },
+      },
+    });
+
+    const availableItem = { id: "entry-1" };
+    const unavailableItem = { id: "entry-2" };
+
+    const children = [
+      <DataProvider key="available" entry={availableItem}>
+        <Probe
+          entry={availableItem}
+          pluginIdentifier="available_action"
+          suffixId="button_1"
+          cellUUID="cell-1"
+        />
+      </DataProvider>,
+      <DataProvider key="unavailable" entry={unavailableItem}>
+        <Probe
+          entry={unavailableItem}
+          pluginIdentifier="unavailable_action"
+          suffixId="button_2"
+          cellUUID="cell-1"
+        />
+      </DataProvider>,
+    ];
+
+    const { result } = renderHook(() => useFilterChildren(children));
+
+    expect(result.current).toHaveLength(1);
+
+    expect(result.current[0].props.children.props.pluginIdentifier).toBe(
+      "available_action"
+    );
+
+    expect(available).toHaveBeenCalledWith(availableItem);
+    expect(unavailable).toHaveBeenCalledWith(unavailableItem);
+  });
+});