@applicaster/zapp-react-native-ui-components 15.0.0-rc.143 → 15.0.0-rc.145

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,12 +20,23 @@ export function mapElementWithKey(fn) {
 const focusableTypes = new Set([
   "View",
   "ButtonContainerView",
-  "FocusableView",
+  "TvActionButton",
   "PressableView",
   "CollapsibleTextContainer",
   "BorderContainerView",
 ]);
 
+const childrenRenderingTypes = new Set([
+  "View",
+  "ButtonContainerView",
+  "PressableView",
+  "CollapsibleTextContainer",
+  "BorderContainerView",
+  "DataProvider",
+  "TvActionButton",
+  "MobileActionButton",
+]);
+
 const cellPlayerTypes = new Set([
   "Image",
   "LiveImage",
@@ -31,6 +44,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)
@@ -59,7 +89,7 @@ export function elementMapper(
     elements = [],
     key,
   }: ElementProps) {
-    const propsForCellPlayer = cellPlayerTypes.has(type)
+    const propsForCellPlayer = shouldInjectCellUUID(type, props)
       ? {
           cellUUID: otherProps?.cellUUID,
         }
@@ -87,14 +117,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/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);
+  });
+});

package/Components/MasterCell/utils/index.ts

@@ -13,6 +13,7 @@ import { useRoute } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { useScreenStateStore } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useScreenStateStore";
 import memoizee from "memoizee";
 import stringify from "fast-json-stable-stringify";
+import { DataProvider } from "../DefaultComponents/DataProvider";
 
 const hasElementSpecificViewType = (viewType) => (element) => {
   if (R.isNil(element)) {
@@ -126,10 +127,50 @@ export function isVideoPreviewEnabled({
   return enable_video_preview && !R.isEmpty(player_screen_id);
 }
 
+export const unwrapDataProviderChild = (
+  child: React.ReactElement
+): React.ReactElement => {
+  if ((child as any)?.type !== DataProvider) {
+    return child;
+  }
+
+  const [wrappedChild] = React.Children.toArray((child as any).props.children);
+
+  return (
+    React.isValidElement(wrappedChild) ? wrappedChild : child
+  ) as React.ReactElement;
+};
+
+/**
+ * Resolves the entry value passed by DataProvider.
+ * Prefer the direct `entry` prop and fall back to `dataProviderProps[_dataKey]`
+ * for older wrappers that still read from namespaced provider props.
+ */
+const getEntryFromProps = (props: {
+  dataProviderProps?: {
+    _dataKey: string;
+    [key: string]: unknown;
+  };
+  entry?: any;
+}) => {
+  const dataProviderProps = props.dataProviderProps;
+
+  return (
+    props.entry ??
+    (dataProviderProps?._dataKey
+      ? dataProviderProps[dataProviderProps._dataKey]
+      : undefined)
+  );
+};
+
 export const useFilterChildren = <
   T extends {
     props: {
-      item: any;
+      dataProviderProps?: {
+        _dataKey: string;
+        [key: string]: unknown;
+      };
+      entry?: any;
       pluginIdentifier: string;
     };
   },
@@ -139,8 +180,13 @@ export const useFilterChildren = <
   const actions = useActions("");
 
   const filteredChildren = children.filter((child) => {
-    const item = child.props.item;
-    const actionIdentifier = child.props.pluginIdentifier;
+    const wrappedChild = unwrapDataProviderChild(
+      child as unknown as React.ReactElement
+    ) as unknown as T;
+
+    const item = getEntryFromProps(wrappedChild.props);
+
+    const actionIdentifier = wrappedChild.props.pluginIdentifier;
     const action = actions.actions[actionIdentifier];
 
     // context value of specific plugin
@@ -154,7 +200,7 @@ export const useFilterChildren = <
 
     masterCellLogger.error({
       message: `Action plugin for ${actionIdentifier} could not be found, check the configuration of your action button`,
-      data: { item, action: child.props.pluginIdentifier },
+      data: { item, action: wrappedChild.props.pluginIdentifier },
     });
 
     return false;
@@ -202,17 +248,42 @@ export const recursiveCloneElementsWithState = (focused: boolean, children) => {
 const next = (currentIndex, items) => items[currentIndex + 1];
 const previous = (currentIndex, items) => items[currentIndex - 1];
 
-export const cloneElementsWithIds = (ids, children) => {
+export const cloneChildrenWithIds = (
+  ids: string[],
+  children: React.ReactElement[]
+) => {
   if (R.isNil(children) || R.isEmpty(children)) {
     return undefined;
   }
 
-  return React.Children.map(children, (element, index) =>
-    React.cloneElement(element, {
-      nextFocusLeft: previous(index, ids),
-      nextFocusRight: next(index, ids),
-    })
-  );
+  return React.Children.map(children, (element, index) => {
+    const nextFocusLeft = previous(index, ids);
+    const nextFocusRight = next(index, ids);
+
+    if (element?.type !== DataProvider) {
+      return React.cloneElement(element, {
+        nextFocusLeft,
+        nextFocusRight,
+      });
+    }
+
+    const wrappedChild = unwrapDataProviderChild(element) as React.ReactElement<
+      Record<string, unknown>
+    >;
+
+    if (!React.isValidElement(wrappedChild)) {
+      return element;
+    }
+
+    const injectedWrappedChild = React.cloneElement(wrappedChild, {
+      nextFocusLeft,
+      nextFocusRight,
+    });
+
+    return React.cloneElement(element, {
+      children: injectedWrappedChild,
+    });
+  });
 };
 
 export const getFocusedButtonId = (focusable) => {
@@ -252,10 +323,9 @@ export const useCellState = ({
 export const hasFocusableInsideBuilder = (elementsBuilder) => (item) => {
   const elements = elementsBuilder({ entry: item });
 
-  return R.anyPass([
-    hasElementsSpecificViewType("ButtonContainerView"),
-    hasElementsSpecificViewType("FocusableView"),
-  ])(elements);
+  return R.anyPass([hasElementsSpecificViewType("ButtonContainerView")])(
+    elements
+  );
 };
 
 export function getEntryState(state, selected) {

package/Components/Navigator/StackNavigator.tsx

@@ -6,11 +6,16 @@ import { getPathAttributes } from "@applicaster/zapp-react-native-utils/navigati
 import { FocusableGroup } from "@applicaster/zapp-react-native-ui-components/Components/FocusableGroup";
 import { ScreenDataContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenDataContext";
 import { PathnameContext } from "@applicaster/zapp-react-native-ui-components/Contexts/PathnameContext";
+import { StyleSheet } from "react-native";
 
 import { Screen } from "../Screen/TV/index.web";
 import { isLast } from "@applicaster/zapp-react-native-utils/arrayUtils";
 import { ScreenContextProvider } from "../../Contexts/ScreenContext";
 
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+});
+
 type Components = {
   NavBar: React.ComponentType<any>;
   Background: React.ComponentType<any>;
@@ -41,6 +46,7 @@ export const StackNavigator = ({ Components }: Props) => {
         preferredFocus={isLast(index, mainStack.length)}
         excludeFromFocusSearching
         key={routeId}
+        style={styles.container}
       >
         <ScreenDataContext.Provider value={state}>
           <PathnameContext.Provider value={route}>

package/Components/ScreenRevealManager/withScreenRevealManager.tsx

@@ -25,6 +25,7 @@ export const SHOWN = 1; // opacity = 1
 
 type Props = {
   componentsToRender: ZappUIComponent[];
+  backgroundColor?: string;
 };
 
 export const withScreenRevealManager = (Component) => {
@@ -97,7 +98,9 @@ export const withScreenRevealManager = (Component) => {
               styles.container,
               {
                 opacity: opacityRef.current,
-                backgroundColor: theme.app_background_color,
+                // TODO: we should support background image as well, but for now we will use background color from theme
+                backgroundColor:
+                  props.backgroundColor ?? theme.app_background_color,
               },
             ]}
             testID="animated-component"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "15.0.0-rc.143",
+  "version": "15.0.0-rc.145",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,10 +28,10 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "15.0.0-rc.143",
-    "@applicaster/zapp-react-native-bridge": "15.0.0-rc.143",
-    "@applicaster/zapp-react-native-redux": "15.0.0-rc.143",
-    "@applicaster/zapp-react-native-utils": "15.0.0-rc.143",
+    "@applicaster/applicaster-types": "15.0.0-rc.145",
+    "@applicaster/zapp-react-native-bridge": "15.0.0-rc.145",
+    "@applicaster/zapp-react-native-redux": "15.0.0-rc.145",
+    "@applicaster/zapp-react-native-utils": "15.0.0-rc.145",
     "fast-json-stable-stringify": "^2.1.0",
     "promise": "^8.3.0",
     "url": "^0.11.0",

package/Components/MasterCell/DefaultComponents/mobile/MobileActionButtons/ButtonContainerView.ts

@@ -1,23 +0,0 @@
-type Props = {
-  style: Record<string, unknown>;
-  contentStyle: Record<string, unknown>;
-  elements: Array<Record<string, unknown>>;
-};
-
-export const ButtonContainerView = ({
-  style,
-  contentStyle,
-  elements,
-}: Props) => {
-  return {
-    type: "View",
-    style,
-    elements: [
-      {
-        type: "View",
-        style: contentStyle,
-        elements,
-      },
-    ],
-  };
-};

package/Components/MasterCell/DefaultComponents/tv/ButtonContainerView/index.android.tsx

@@ -1,135 +0,0 @@
-import React from "react";
-import { View, ButtonProps } from "react-native";
-import { Focusable } from "@applicaster/zapp-react-native-ui-components/Components/Focusable";
-import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
-import * as R from "ramda";
-import { useInitialFocus } from "@applicaster/zapp-react-native-utils/focusManager";
-import { getXray } from "@applicaster/zapp-react-native-utils/logger";
-import { useFocusable } from "@applicaster/zapp-react-native-ui-components/Components/Focusable/index.android";
-import {
-  useIsRTL,
-  applyRTLStylesIfNeeded,
-} from "@applicaster/zapp-react-native-utils/localizationUtils";
-
-const { Logger } = getXray();
-
-import {
-  cloneElementsWithIds,
-  insertBetween,
-  recursiveCloneElementsWithState,
-  useFilterChildren,
-} from "../../../utils";
-
-import type {
-  HorizontalSeparatorProps,
-  ContainerProps,
-  ContainerChildren,
-} from "./types";
-
-const logger = new Logger("plugin", "plugins/navigation-action");
-
-const generateId = (cellUUID, suffixId) => `${cellUUID}--${suffixId}`;
-
-const HorizontalSeparator = ({ width }: HorizontalSeparatorProps) => (
-  <View style={{ width }} />
-);
-
-export function ButtonContainerView({
-  style,
-  children,
-  ...otherProps
-}: ContainerProps) {
-  const isRTL = useIsRTL();
-
-  const horizontalGutter = R.pathOr(0, ["horizontalGutter"], otherProps);
-
-  const filteredChildren = useFilterChildren<ContainerChildren>(children);
-
-  const buttonIds = filteredChildren.map((child) => {
-    const { cellUUID, suffixId } = child.props;
-
-    return generateId(cellUUID, suffixId);
-  });
-
-  useInitialFocus(otherProps.state === "focused", R.head(buttonIds));
-
-  if (R.isEmpty(filteredChildren)) {
-    return null;
-  }
-
-  return (
-    <View style={applyRTLStylesIfNeeded(style, isRTL)}>
-      {insertBetween(
-        (index) => (
-          <HorizontalSeparator
-            key={`separator_${index}`}
-            width={horizontalGutter}
-          />
-        ),
-        cloneElementsWithIds(buttonIds, filteredChildren)
-      )}
-    </View>
-  );
-}
-
-export function FocusableViewComponent(
-  { style, children, item, ...otherProps }: ButtonProps,
-  ref
-) {
-  const {
-    cellUUID,
-    groupId,
-    suffixId,
-    normalStyles,
-    focusedStyles,
-    nextFocusLeft,
-    nextFocusRight,
-    pluginIdentifier,
-    disableFocus,
-  } = otherProps;
-
-  const parentFocus = useFocusable();
-
-  const actionContext = useActions(pluginIdentifier);
-
-  const onPress = () => {
-    if (!actionContext) {
-      logger.warning(
-        `Cannot resolve action context for ${pluginIdentifier} - please make sure the plugin is installed and up to date`
-      );
-
-      return;
-    }
-
-    actionContext?.invokeAction?.(item);
-  };
-
-  return (
-    <Focusable
-      id={generateId(cellUUID, suffixId)}
-      disableFocus={disableFocus}
-      groupId={groupId}
-      onPress={onPress}
-      nextFocusUp={parentFocus?.nextFocusUp}
-      nextFocusDown={parentFocus?.nextFocusDown}
-      nextFocusLeft={nextFocusLeft || parentFocus?.nextFocusLeft}
-      nextFocusRight={nextFocusRight || parentFocus?.nextFocusRight}
-      ref={ref}
-    >
-      {(isFocused) => {
-        const additionalStyles = isFocused ? focusedStyles : normalStyles;
-
-        return (
-          <View
-            style={{
-              ...style,
-              ...additionalStyles,
-            }}
-          >
-            {recursiveCloneElementsWithState(isFocused, children)}
-          </View>
-        );
-      }}
-    </Focusable>
-  );
-}

package/Components/MasterCell/DefaultComponents/tv/ButtonContainerView/types.ts

@@ -1,25 +0,0 @@
-import { ImageStyle } from "react-native";
-
-export type ContainerProps = Record<string, any> & {
-  buttonsToggleEnabled: boolean;
-  skipButtons: boolean;
-  style: ImageStyle;
-  children: ContainerChildren[];
-};
-
-export type ButtonProps = Record<string, any> & {
-  style: ImageStyle;
-};
-
-export type HorizontalSeparatorProps = {
-  width: number;
-};
-
-export type ContainerChildren = {
-  props: {
-    item: any;
-    pluginIdentifier: string;
-    cellUUID: string;
-    suffixId: string;
-  };
-};