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

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/Image/Image.android.tsx

@@ -24,7 +24,9 @@ const MemoizedImage = React.memo(QBImage, R.equals);
 const isValidExternalSource = (source): boolean =>
   source?.uri?.startsWith("http") ||
   source?.uri?.startsWith("data:image") ||
-  source?.uri?.startsWith("file://");
+  source?.uri?.startsWith("file://") ||
+  source?.uri?.startsWith("asset:/") ||
+  source?.uri?.startsWith("node_modules_");
 
 export default function Image({
   style,
@@ -32,6 +34,7 @@ export default function Image({
   placeholderImage,
   entry,
   withDimensions,
+  source: sourceProp,
   ...otherProps
 }: Props) {
   const [showDefault, setShowDefault] = React.useState(false);
@@ -48,7 +51,10 @@ export default function Image({
     entry,
     showDefault,
     placeholderImage: placeholderImage || "",
-    otherProps,
+    otherProps: {
+      source: sourceProp,
+      state: otherProps.state,
+    },
   });
 
   const onError = React.useCallback(() => {

package/Components/MasterCell/DefaultComponents/Image/Image.ios.tsx

@@ -1,8 +1,8 @@
 import * as React from "react";
 import { Image as RnImage, ImageStyle } from "react-native";
-import { equals, omit } from "ramda";
 
 import { useImageSource } from "./hooks";
+import { equals } from "@applicaster/zapp-react-native-utils/utils";
 
 type Source = {
   uri: string;
@@ -25,11 +25,19 @@ function Image({
   placeholderImage,
   entry,
   withDimensions,
+  source: sourceProp,
   ...otherProps
 }: Props) {
   const [error, setErrorState] = React.useState(null);
 
-  const source = useImageSource({ uri, entry, otherProps });
+  const source = useImageSource({
+    uri,
+    entry,
+    otherProps: {
+      source: sourceProp,
+      state: otherProps.state,
+    },
+  });
 
   React.useEffect(() => {
     // reset error state on URI change as the error is referencing previous uri
@@ -49,7 +57,7 @@ function Image({
       onError={React.useCallback(() => setErrorState(true), [])}
       // as we have defaults as "" for placeholder image, we need to pass undefined to source to not throw warnings
       source={_source?.uri ? _source : undefined}
-      {...omit(["source"], otherProps)}
+      {...otherProps}
     />
   );
 }

package/Components/MasterCell/DefaultComponents/Image/Image.web.tsx

@@ -23,9 +23,17 @@ function Image({
   placeholderImage,
   entry,
   withDimensions,
+  source: sourceProp,
   ...otherProps
 }: Props) {
-  const source = useImageSource({ uri, entry, otherProps });
+  const source = useImageSource({
+    uri,
+    entry,
+    otherProps: {
+      source: sourceProp,
+      state: otherProps.state,
+    },
+  });
 
   const updatedSource = source ? withDimensions(source) : { uri: "" };
 

package/Components/MasterCell/DefaultComponents/Image/hooks/useImage.ts

@@ -1,19 +1,21 @@
 import * as React from "react";
-import { path } from "ramda";
 
 import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
 import { extractAsset } from "./utils";
 
 type Return = { uri: string } | null;
+type Source = { context?: string; uri?: string } | null | undefined;
 
-const getSourceContext = path(["source", "context"]);
-const getSourceUri = path(["source", "uri"]);
-const getState = path(["state"]);
+const getSourceContext = (source: Source) => source?.context;
+const getSourceUri = (source: Source) => source?.uri;
 
-export const useImageSource = ({ uri, entry, otherProps }): Return => {
-  const uriContext = getSourceContext(otherProps);
-  const uriState = getState(otherProps);
+export const useImageSource = ({
+  uri,
+  entry,
+  otherProps: { source, state: uriState },
+}): Return => {
+  const uriContext = getSourceContext(source);
 
   const action = useActions(uriContext);
 
@@ -38,7 +40,7 @@ export const useImageSource = ({ uri, entry, otherProps }): Return => {
     return { uri };
   }
 
-  const uriFromSource = getSourceUri(otherProps);
+  const uriFromSource = getSourceUri(source);
 
   if (uriFromSource) {
     return { uri: uriFromSource };
@@ -47,7 +49,7 @@ export const useImageSource = ({ uri, entry, otherProps }): Return => {
   return null;
 };
 
-const getSource = (uri, showDefault, placeholderImage, otherProps) => {
+const getSource = (uri, showDefault, placeholderImage, source) => {
   const placeholderName = placeholderImage || "";
 
   const defaultPath = {
@@ -60,7 +62,7 @@ const getSource = (uri, showDefault, placeholderImage, otherProps) => {
     return { uri };
   }
 
-  const uriFromSource = getSourceUri(otherProps);
+  const uriFromSource = getSourceUri(source);
 
   if (uriFromSource) {
     return { uri: uriFromSource };
@@ -74,10 +76,9 @@ export const useImageSourceWithDefault = ({
   entry,
   showDefault,
   placeholderImage,
-  otherProps,
+  otherProps: { state: uriState, source },
 }): Return => {
-  const uriContext = getSourceContext(otherProps);
-  const uriState = getState(otherProps);
+  const uriContext = getSourceContext(source);
 
   const action = useActions(uriContext);
 
@@ -98,5 +99,5 @@ export const useImageSourceWithDefault = ({
     return extractAsset(!isTV(), entryStateLocal.asset, uriState);
   }
 
-  return getSource(uri, showDefault, placeholderImage, otherProps);
+  return getSource(uri, showDefault, placeholderImage, source);
 };

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

@@ -1,13 +1,15 @@
-import React from "react";
+import React, { PropsWithChildren } from "react";
 import { isVideoPreviewEnabled } from "@applicaster/zapp-react-native-ui-components/Components/MasterCell/utils";
 import { LiveImage } from "../LiveImage";
 import PureImage from "../Image";
 import { useIsScreenActive } from "@applicaster/zapp-react-native-utils/reactHooks";
 
-type Props = {
+type Props = PropsWithChildren<{
   enable_video_preview: boolean;
   player_screen_id: string;
-};
+  uri?: string;
+  [key: string]: any;
+}>;
 
 export const ImageContainer = (props: Props) => {
   const isActive = useIsScreenActive();

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

@@ -1,6 +1,5 @@
 import * as React from "react";
-import merge from "lodash/merge";
-import { clone } from "@applicaster/zapp-react-native-utils/utils";
+import { merge, clone } from "@applicaster/zapp-react-native-utils/utils";
 import { Platform, View, ViewStyle } from "react-native";
 import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
 import { isTV, isWeb } from "@applicaster/zapp-react-native-utils/reactUtils";

package/Components/MasterCell/DefaultComponents/PressableView.tsx

@@ -0,0 +1,54 @@
+import React, { useCallback } from "react";
+import { Pressable, ViewStyle } from "react-native";
+import { PressedStateContext } from "../contexts/PressedStateContext";
+
+type Props = {
+  children?: React.ReactNode;
+  style?: ViewStyle | ViewStyle[];
+  pressedStyle?: ViewStyle | ViewStyle[];
+  testID?: string;
+  accessibilityLabel?: string;
+  accessibilityHint?: string;
+  onPress?: () => void;
+  testOnly_pressed?: boolean;
+};
+
+export function PressableView({
+  children,
+  style,
+  testID,
+  accessibilityLabel,
+  accessibilityHint,
+  pressedStyle,
+  onPress,
+  testOnly_pressed = false,
+}: Props) {
+  return (
+    <Pressable
+      testOnly_pressed={testOnly_pressed}
+      onPress={onPress}
+      testID={testID}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityHint={accessibilityHint}
+      accessible={!!(testID || accessibilityLabel)}
+      style={useCallback(
+        ({ pressed }) => [
+          style,
+          pressed && {
+            opacity: 1,
+          },
+          pressed && pressedStyle,
+        ],
+        [style, pressedStyle]
+      )}
+    >
+      {({ pressed }) => {
+        return (
+          <PressedStateContext.Provider value={pressed}>
+            {children}
+          </PressedStateContext.Provider>
+        );
+      }}
+    </Pressable>
+  );
+}

package/Components/MasterCell/DefaultComponents/SecondaryImage/Image.tsx

@@ -1,17 +1,16 @@
 import * as React from "react";
 import { isNil } from "ramda";
-import { ImageStyle, View } from "react-native";
+import { ViewStyle } from "react-native";
 import {
-  FIT_POSITION,
-  IMAGE_SIZING_FILL,
-  IMAGE_SIZING_FIT,
-} from "@applicaster/zapp-react-native-utils/manifestUtils/secondaryImage";
-import { QBImage as Image } from "@applicaster/zapp-react-native-ui-components/Components/Image";
+  SecondaryImage as UIKitSecondaryImage,
+  UIKitSecondaryImageProps,
+} from "@applicaster/uikit";
 
 import { useGetImageDimensions } from "./hooks";
 import {
   DisplayMode,
-  getStyle,
+  FitPosition,
+  ImageSizing,
   isDisplayModeFixed,
   isImageSizingFit,
 } from "./utils";
@@ -20,9 +19,9 @@ import { withAsyncRenderHOC } from "../../hoc/withAsyncRender";
 interface Props {
   displayMode: DisplayMode;
   uri: Nullable<string>;
-  style: ImageStyle;
-  imageSizing: typeof IMAGE_SIZING_FIT | typeof IMAGE_SIZING_FILL;
-  fitPosition: typeof FIT_POSITION;
+  style: ViewStyle;
+  imageSizing: ImageSizing;
+  fitPosition: FitPosition;
   fixedWidth: number;
   fixedHeight: number;
   onAsyncRender?: () => void;
@@ -31,8 +30,17 @@ interface Props {
 /** Secondary Image Dynamic does not render until the image is loaded */
 const SecondaryImageDynamic = withAsyncRenderHOC(
   (props: Props & { onAsyncRender: () => void }) => {
-    const { uri, style, displayMode, imageSizing, fitPosition, onAsyncRender } =
-      props;
+    const {
+      uri,
+      style,
+      displayMode,
+      imageSizing,
+      fitPosition,
+      onAsyncRender,
+      fixedHeight: _fixedHeight,
+      fixedWidth: _fixedWidth,
+      ...imageProps
+    } = props;
 
     const imageDimension = useGetImageDimensions(
       uri,
@@ -49,24 +57,18 @@ const SecondaryImageDynamic = withAsyncRenderHOC(
     }
 
     return (
-      <View style={style} onLayout={onAsyncRender}>
-        <Image
-          {...props}
-          source={{ uri }}
-          style={{
-            ...getStyle({
-              imageSizing,
-              fitPosition,
-              displayMode,
-              imageDimension,
-              containerHeight,
-              containerWidth,
-            }),
-            borderRadius: style.borderRadius,
-            aspectRatio: imageDimension.aspectRatio,
-          }}
-        />
-      </View>
+      <UIKitSecondaryImage
+        {...imageProps}
+        uri={uri}
+        style={style as UIKitSecondaryImageProps["style"]}
+        displayMode={displayMode}
+        imageSizing={imageSizing}
+        fitPosition={fitPosition}
+        width={containerWidth as number}
+        height={containerHeight}
+        imageDimension={imageDimension}
+        onAsyncRender={onAsyncRender}
+      />
     );
   }
 );
@@ -81,6 +83,8 @@ const SecondaryImageFixed = (props: Props) => {
     fitPosition,
     fixedHeight,
     fixedWidth,
+    onAsyncRender: _onAsyncRender,
+    ...imageProps
   } = props;
 
   const imageDimension = useGetImageDimensions(
@@ -90,26 +94,18 @@ const SecondaryImageFixed = (props: Props) => {
   );
 
   return (
-    <View style={style}>
-      {isNil(imageDimension?.aspectRatio) ? null : (
-        <Image
-          {...props}
-          source={{ uri }}
-          style={{
-            ...getStyle({
-              imageSizing,
-              fitPosition,
-              displayMode,
-              imageDimension,
-              containerHeight: fixedHeight,
-              containerWidth: fixedWidth,
-            }),
-            borderRadius: style.borderRadius,
-            aspectRatio: imageDimension.aspectRatio,
-          }}
-        />
-      )}
-    </View>
+    <UIKitSecondaryImage
+      {...imageProps}
+      uri={uri}
+      style={style as UIKitSecondaryImageProps["style"]}
+      displayMode={displayMode}
+      imageSizing={imageSizing}
+      fitPosition={fitPosition}
+      width={fixedWidth}
+      height={fixedHeight}
+      imageDimension={imageDimension}
+      testID="secondary-image-fixed"
+    />
   );
 };