@applicaster/zapp-react-native-ui-components 15.0.0-rc.144 → 15.0.0-rc.146

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

@@ -0,0 +1,163 @@
+import React from "react";
+import { View } from "react-native";
+
+type Props = Record<string, any> & {
+  children?: React.ReactNode;
+};
+
+/**
+ * Creates the provider payload from the resolved runtime props.
+ * `children` is structural and is therefore excluded. `_dataKey` is produced
+ * by `configInflater` from the data mapping propName and identifies the prop
+ * that carries the resolved entry value.
+ */
+const createDataProviderProps = ({ children: _children, ...props }: Props) => ({
+  _dataKey: props._dataKey,
+  [props._dataKey as string]: props[props._dataKey as string],
+});
+
+/**
+ * Merges provider values into an element's existing `dataProviderProps`
+ * without overwriting keys that were supplied explicitly.
+ */
+const mergeDataProviderProps = (
+  targetProps: Record<string, unknown>,
+  forwardedProps: Record<string, unknown>
+) => {
+  const dataProviderProps = Object.keys(forwardedProps).reduce(
+    (acc, key) => {
+      if (typeof acc[key] === "undefined") {
+        acc[key] = forwardedProps[key];
+      }
+
+      return acc;
+    },
+    { ...(targetProps.dataProviderProps as Record<string, unknown>) } as Record<
+      string,
+      unknown
+    >
+  );
+
+  return {
+    dataProviderProps: dataProviderProps,
+    ...(targetProps[dataProviderProps._dataKey as string] === undefined
+      ? {
+          [dataProviderProps._dataKey as string]:
+            forwardedProps[dataProviderProps._dataKey as string],
+        }
+      : {}),
+  };
+};
+
+/**
+ * Applies the provider props to the wrapped child's direct children only.
+ * The shallow stop is intentional: descendants below this level must receive
+ * data explicitly from their parent component instead of implicit propagation.
+ */
+const cloneSecondLevel = (
+  nodes: React.ReactNode,
+  forwardedProps: Record<string, unknown>
+) =>
+  React.Children.map(nodes, (child) => {
+    if (!React.isValidElement(child)) {
+      return child;
+    }
+
+    if (child.type === View) {
+      return child;
+    }
+
+    return React.cloneElement(
+      child,
+      mergeDataProviderProps(
+        child.props as Record<string, unknown>,
+        forwardedProps
+      ) as never
+    );
+  });
+
+/**
+ * Specification:
+ * `DataProvider` bridges MasterCell node-tree `data` mappings into runtime
+ * React props for a shallow wrapped subtree under `dataProviderProps`.
+ *
+ * Purpose:
+ * Use `DataProvider` when a subtree root and that root's direct children must
+ * receive the same resolved runtime prop without propagating that prop deeper
+ * into the tree.
+ *
+ * Input contract:
+ * - `DataProvider` receives runtime props from normal MasterCell inflation.
+ * - The values under `dataProviderProps` are derived from the resolved props
+ *   it receives.
+ * - The inner keys are not hardcoded and may include `entry`, `item`, or any
+ *   other prop name produced by the node-tree `data` mapping.
+ *
+ * Forwarding contract:
+ * - inject the mapped value as a direct prop on the wrapped child
+ * - inject `dataProviderProps` into the wrapped child
+ * - inject both the direct prop and `dataProviderProps` into that child's
+ *   direct children
+ * - stop at that level
+ * - do not overwrite explicit keys that already exist inside
+ *   `dataProviderProps` on wrapped elements
+ *
+ * Non-forwarded props:
+ * - `children`
+ *
+ * Example:
+ *
+ * ```ts
+ * {
+ *   type: "DataProvider",
+ *   data: [
+ *     {
+ *       func: "identity",
+ *       args: [],
+ *       propName: "entry",
+ *     },
+ *   ],
+ *   elements: [
+ *     {
+ *       type: "ButtonContainerView",
+ *       elements: [Button({ ... })],
+ *     },
+ *   ],
+ * }
+ * ```
+ *
+ * Expected runtime result:
+ * - `ButtonContainerView` receives `entry` and `dataProviderProps.entry`
+ * - each direct `Button` child receives `entry` and `dataProviderProps.entry`
+ * - deeper descendants such as `Asset` or `TextLabel` do not receive
+ *   `entry` or `dataProviderProps.entry` unless their parent passes it
+ *   explicitly
+ */
+export const DataProvider = ({ children, ...props }: Props) => {
+  const forwardedProps = createDataProviderProps(props);
+
+  return (
+    <>
+      {React.Children.map(children, (child) => {
+        if (!React.isValidElement(child)) {
+          return child;
+        }
+
+        const injectedChildren = cloneSecondLevel(
+          child.props.children,
+          forwardedProps
+        );
+
+        return React.cloneElement(child, {
+          ...mergeDataProviderProps(
+            child.props as Record<string, unknown>,
+            forwardedProps
+          ),
+          ...(typeof injectedChildren !== "undefined"
+            ? { children: injectedChildren }
+            : {}),
+        });
+      })}
+    </>
+  );
+};

package/Components/MasterCell/DefaultComponents/FocusableView/index.android.tsx

@@ -1,17 +1,11 @@
 import React from "react";
 import { View, ImageStyle } 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 { getXray } from "@applicaster/zapp-react-native-utils/logger";
 import { useFocusable } from "@applicaster/zapp-react-native-ui-components/Components/Focusable/index.android";
 import { useIsRTL } from "@applicaster/zapp-react-native-utils/localizationUtils";
 
-const { Logger } = getXray();
-
 import { recursiveCloneElementsWithState } from "../../utils";
 
-const logger = new Logger("plugin", "plugins/navigation-action");
-
 type ButtonProps = Record<string, any> & {
   style: ImageStyle;
 };
@@ -33,7 +27,7 @@ const getNextFocusRight = ({ nextFocusRight, parentFocus, isRTL }) => {
 };
 
 export function FocusableViewComponent(
-  { style, children, item, ...otherProps }: ButtonProps,
+  { style, children, ...otherProps }: ButtonProps,
   ref
 ) {
   const {
@@ -44,7 +38,6 @@ export function FocusableViewComponent(
     focusedStyles,
     nextFocusLeft,
     nextFocusRight,
-    pluginIdentifier,
     disableFocus,
     onButtonFocus,
   } = otherProps;
@@ -52,20 +45,6 @@ export function FocusableViewComponent(
   const parentFocus = useFocusable();
   const isRTL = useIsRTL();
 
-  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);
-  };
-
   const onFocus = React.useCallback(
     (ref) => {
       onButtonFocus?.(ref);
@@ -82,7 +61,7 @@ export function FocusableViewComponent(
       id={generateId(cellUUID, suffixId)}
       disableFocus={disableFocus}
       groupId={groupId}
-      onPress={onPress}
+      onPress={otherProps.onPress}
       nextFocusUp={parentFocus?.nextFocusUp}
       nextFocusDown={parentFocus?.nextFocusDown}
       nextFocusLeft={getNextFocusLeft({ nextFocusLeft, parentFocus, isRTL })}

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

@@ -1,26 +1,20 @@
 import React, { useMemo } from "react";
 import { ImageStyle } 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 { getXray } from "@applicaster/zapp-react-native-utils/logger";
 import { toBooleanWithDefaultFalse } from "@applicaster/zapp-react-native-utils/booleanUtils";
 
-const { Logger } = getXray();
-
 import {
   recursiveCloneElementsWithState,
   getFocusedButtonId,
 } from "../../utils";
 
-const logger = new Logger("plugin", "plugins/navigation-action");
-
 type Props = Record<string, any> & {
   style: ImageStyle;
 };
 
 const getFocusableId = (prefixId, suffixId) => `${prefixId}___${suffixId}`;
 
-export function FocusableView({ style, children, item, ...otherProps }: Props) {
+export function FocusableView({ style, children, ...otherProps }: Props) {
   const {
     groupId,
     prefixId,
@@ -29,7 +23,6 @@ export function FocusableView({ style, children, item, ...otherProps }: Props) {
     focusedButtonId,
     normalStyles,
     focusedStyles,
-    pluginIdentifier,
     preferredFocus,
   } = otherProps;
 
@@ -41,20 +34,9 @@ export function FocusableView({ style, children, item, ...otherProps }: Props) {
 
   const additionalStyles = focused ? focusedStyles : normalStyles;
 
-  const actionContext = useActions(pluginIdentifier);
-
-  const onPress = (event) => {
+  const handlePress = (event) => {
     event?.preventDefault?.();
-
-    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);
+    otherProps?.onPress?.(event);
   };
 
   const handleFocus = (focusable) => {
@@ -83,7 +65,7 @@ export function FocusableView({ style, children, item, ...otherProps }: Props) {
       style={styles}
       onFocus={handleFocus}
       onBlur={handleBlur}
-      onPress={onPress}
+      onPress={handlePress}
       preferredFocus={preferredFocus}
       skipFocusManagerRegistration={otherProps.skipFocusManagerRegistration}
       isFocusable={otherProps.isFocusable}

package/Components/MasterCell/DefaultComponents/PressableView.tsx

@@ -1,261 +1,34 @@
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import React from "react";
 import { TouchableOpacity } from "react-native";
 
-import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
-
-import { masterCellLogger } from "../logger";
-import {
-  buildLegacySelection,
-  resolveIsActive,
-  resolveLabelText,
-} from "./mobile/MobileActionButtons/helpers";
-
-type ChildElementProps = {
-  children?: React.ReactNode;
-  mobileActionRole?: string;
-  uri?: string;
-  state?: "default" | "focused";
-};
-
 type Props = {
   children?: React.ReactNode;
-  item: ZappEntry | ZappFeed;
-  action?: {
-    identifier?: string;
-    flavour?: "flavour_1" | "flavour_2";
-  };
   style?: Record<string, unknown>;
-  focusedStyles?: Record<string, unknown>;
   testID?: string;
   accessibilityLabel?: string;
   accessibilityHint?: string;
-};
-
-const isValidElement = (
-  child: React.ReactNode
-): child is React.ReactElement<ChildElementProps> =>
-  React.isValidElement(child);
-
-/** retrieves asset uri for a given flavour,
- * if flavour is not provided, returns the default asset from `asset` or selected state asset (if available)
- * asset can be:
- *  provided as asset path,
- *  provided as [default || flavour_1, alternative || flavour_2] array.
- * mobileButtonAssets asset can be:
- *  provided as asset path,
- *  provided as [default || flavour_1, alternative || flavour_2] array,
- *  provided as [[] as flavour_1, [] as flavour_2] array for multiple flavours, where each flavour can be either a path or [default, alternative] array.
- *
- * isActive reflect the state of the action and can be used to render different asset for active/inactive state if asset is provided as array
- *
- * */
-const selectByAssetFlavour = (
-  actionState: {
-    asset?: string | [string, string];
-    mobileButtonAssets?: [string, string] | [string, string][];
-  },
-  flavour?: "flavour_1" | "flavour_2",
-  isActive?: boolean
-) => {
-  if (actionState.mobileButtonAssets) {
-    if (flavour) {
-      if (flavour === "flavour_1") {
-        if (typeof actionState.mobileButtonAssets[0] === "string") {
-          return actionState.mobileButtonAssets[0];
-        }
-
-        if (Array.isArray(actionState.mobileButtonAssets[0])) {
-          return actionState.mobileButtonAssets[0][isActive ? 1 : 0];
-        }
-
-        return actionState.mobileButtonAssets[0];
-      } else if (flavour === "flavour_2") {
-        if (typeof actionState.mobileButtonAssets[1] === "string") {
-          return actionState.mobileButtonAssets[1];
-        }
-
-        if (Array.isArray(actionState.mobileButtonAssets[1])) {
-          return actionState.mobileButtonAssets[1][isActive ? 1 : 0];
-        }
-
-        return actionState.mobileButtonAssets[1];
-      }
-    }
-
-    return Array.isArray(actionState.mobileButtonAssets[0])
-      ? actionState.mobileButtonAssets[0][isActive ? 1 : 0]
-      : actionState.mobileButtonAssets[0];
-  } else {
-    return typeof actionState?.asset === "string"
-      ? actionState.asset
-      : actionState.asset[isActive ? 1 : 0];
-  }
+  onPress?: () => void;
 };
 
 export function PressableView({
   children,
-  item,
-  action,
   style = {},
-  focusedStyles = {},
   testID,
   accessibilityLabel,
   accessibilityHint,
+  onPress,
 }: Props) {
-  const actionContext = useActions(action?.identifier);
-
-  const actionDisabled =
-    typeof actionContext?.isActionAvailable === "function" &&
-    !actionContext.isActionAvailable(item);
-
-  const supportsEntryState =
-    typeof actionContext?.initialEntryState === "function" && !actionDisabled;
-
-  const [actionState, setActionState] = useState(() =>
-    supportsEntryState ? actionContext.initialEntryState(item) : null
-  );
-
-  useEffect(() => {
-    if (supportsEntryState) {
-      setActionState(actionContext.initialEntryState(item));
-    }
-  }, [supportsEntryState, item, actionContext]);
-
-  useEffect(() => {
-    if (typeof actionContext?.addListener === "function") {
-      return actionContext.addListener(String(item?.id), (nextState) => {
-        setActionState(nextState);
-      });
-    }
-
-    if (typeof actionContext?.addListeners === "function") {
-      return actionContext.addListeners(({ entryState, entry }) => {
-        if (entry?.id === item?.id) {
-          setActionState(entryState);
-        }
-      });
-    }
-
-    return undefined;
-  }, [actionContext, item?.id]);
-
-  const legacySelected = useMemo(() => {
-    if (!actionContext || supportsEntryState) {
-      return false;
-    }
-
-    return buildLegacySelection(item, actionContext);
-  }, [actionContext, supportsEntryState, item]);
-
-  const isActive = resolveIsActive(actionState, legacySelected);
-
-  const labelText = supportsEntryState
-    ? resolveLabelText(actionState?.label)
-    : "";
-
-  const shouldRenderAsset = Boolean(
-    supportsEntryState
-      ? actionState?.asset && actionState?.mobileButtonAssets
-      : false
-  );
-
-  const shouldRenderLabel = Boolean(labelText);
-
-  const cloneChildrenWithState = (nodes?: React.ReactNode): React.ReactNode => {
-    return React.Children.map(nodes, (child) => {
-      if (!isValidElement(child)) {
-        return child;
-      }
-
-      const role = child.props.mobileActionRole;
-      const nextChildren = cloneChildrenWithState(child.props.children);
-
-      if (role === "asset" && !shouldRenderAsset) {
-        return null;
-      }
-
-      if (role === "label" && !shouldRenderLabel) {
-        return null;
-      }
-
-      if (
-        role === "label_container" &&
-        React.Children.count(nextChildren) === 0
-      ) {
-        return null;
-      }
-
-      const nextProps: Partial<ChildElementProps> = {};
-
-      if (role === "asset") {
-        if (action.flavour) {
-          nextProps.uri = selectByAssetFlavour(
-            actionState,
-            action.flavour,
-            isActive
-          );
-        }
-      }
-
-      if (role === "label") {
-        nextProps.state = isActive ? "focused" : "default";
-      }
-
-      if (nextChildren !== child.props.children) {
-        nextProps.children = nextChildren;
-      }
-
-      return React.cloneElement(child, nextProps);
-    });
-  };
-
-  const onPress = useCallback(async () => {
-    if (!actionContext) {
-      return;
-    }
-
-    if (supportsEntryState) {
-      return actionContext.invokeAction(item, {
-        updateState: setActionState,
-      });
-    }
-
-    const favouritesAction = legacySelected
-      ? actionContext.removeFavourite
-      : actionContext.addFavourite;
-
-    const toggleAction = actionContext?.invokeAction ?? favouritesAction;
-
-    return toggleAction?.(item);
-  }, [actionContext, supportsEntryState, item, legacySelected]);
-
-  if (!actionContext) {
-    masterCellLogger.warning(
-      `You're missing an action plugin(${action?.identifier}) required by your mobile action button.`
-    );
-
-    return null;
-  }
-
-  if (actionDisabled) {
-    return null;
-  }
-
-  if (!shouldRenderAsset && !shouldRenderLabel) {
-    return null;
-  }
-
   return (
     <TouchableOpacity
       activeOpacity={1}
       onPress={onPress}
-      testID={testID || `${item?.id}`}
-      accessibilityLabel={accessibilityLabel || `${item?.id}`}
+      testID={testID}
+      accessibilityLabel={accessibilityLabel}
       accessibilityHint={accessibilityHint}
       accessible={!!(testID || accessibilityLabel)}
-      style={isActive ? { ...style, ...focusedStyles } : style}
+      style={style}
     >
-      {cloneChildrenWithState(children)}
+      {children}
     </TouchableOpacity>
   );
 }

package/Components/MasterCell/DefaultComponents/Text/hooks/useText.ts

@@ -45,6 +45,7 @@ export const useTextLabel = ({ label, entry }): string => {
   const [entryStateLocal, setEntryStateLocal] =
     React.useState(initialEntryState);
 
+  // For favourites
   React.useEffect(() => {
     return action?.addListeners?.(({ entryState, entry: actionEntry }) => {
       if (entry.id === actionEntry.id) {
@@ -53,6 +54,16 @@ export const useTextLabel = ({ label, entry }): string => {
     });
   }, []);
 
+  // For rest actions
+  React.useEffect(() => {
+    // Update entryStateLocal when action state changes. Example: state change when pressing the download button.
+    if (typeof action?.addListener === "function") {
+      return action.addListener(String(entry?.id), (nextState) => {
+        setEntryStateLocal(nextState);
+      });
+    }
+  }, []);
+
   if (context && name && action) {
     return prepareHebrewText(extractLabel(entryStateLocal.label, name), isRTL);
   }