@applicaster/zapp-react-native-ui-components 15.1.0-rc.8 → 16.0.0-alpha.1833861900

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/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,34 @@
+import React from "react";
+import { TouchableOpacity } from "react-native";
+
+type Props = {
+  children?: React.ReactNode;
+  style?: Record<string, unknown>;
+  testID?: string;
+  accessibilityLabel?: string;
+  accessibilityHint?: string;
+  onPress?: () => void;
+};
+
+export function PressableView({
+  children,
+  style = {},
+  testID,
+  accessibilityLabel,
+  accessibilityHint,
+  onPress,
+}: Props) {
+  return (
+    <TouchableOpacity
+      activeOpacity={1}
+      onPress={onPress}
+      testID={testID}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityHint={accessibilityHint}
+      accessible={!!(testID || accessibilityLabel)}
+      style={style}
+    >
+      {children}
+    </TouchableOpacity>
+  );
+}

package/Components/MasterCell/DefaultComponents/SecondaryImage/hooks/__tests__/useGetImageDimensions.test.ts

@@ -1,4 +1,4 @@
-import { renderHook } from "@testing-library/react-hooks";
+import { renderHook, waitFor } from "@testing-library/react-native";
 import { Image } from "react-native";
 
 import { useGetImageDimensions } from "../useGetImageDimensions";
@@ -13,15 +13,16 @@ jest.spyOn(Image, "getSize").mockImplementation((_uri, success) => {
 
 describe("useGetImageDimensions", () => {
   it("should return aspect ration initially when known dimensions", async () => {
-    const { result, waitForNextUpdate } = renderHook(() =>
+    const { result } = renderHook(() =>
       useGetImageDimensions("https://some_url.com", WIDTH, undefined)
     );
 
     expect(result.current).toBeUndefined();
-    await waitForNextUpdate();
 
-    expect(result.current).toEqual(
-      getDimension({ width: WIDTH, height: HEIGTH })
-    );
+    await waitFor(() => {
+      expect(result.current).toEqual(
+        getDimension({ width: WIDTH, height: HEIGTH })
+      );
+    });
   });
 });

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);
   }

package/Components/MasterCell/DefaultComponents/__tests__/DataProvider.test.tsx

@@ -0,0 +1,141 @@
+import React from "react";
+import { render } from "@testing-library/react-native";
+
+import { defaultComponents } from "../index";
+import { elementMapper } from "../../elementMapper";
+
+const WrapperProbe = jest.fn(({ children }) => <>{children}</>);
+const LeafProbe = jest.fn(() => null);
+
+const components = {
+  ...defaultComponents,
+  View: WrapperProbe,
+  Text: LeafProbe,
+};
+
+const entry = { id: "entry-1" };
+const item = { id: "item-1" };
+
+const renderNode = (node) =>
+  render(
+    <React.Fragment>{elementMapper(components)(node as never)}</React.Fragment>
+  );
+
+describe("DataProvider", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("injects resolved runtime props under dataProviderProps into the direct child and its direct children only", () => {
+    renderNode({
+      type: "DataProvider",
+      props: { _dataKey: "entry", entry },
+      elements: [
+        {
+          type: "View",
+          props: {},
+          elements: [
+            {
+              type: "View",
+              props: {},
+              elements: [{ type: "Text", props: {} }],
+            },
+          ],
+        },
+      ],
+    });
+
+    expect(WrapperProbe).toHaveBeenNthCalledWith(
+      1,
+      expect.objectContaining({
+        dataProviderProps: expect.objectContaining({ entry }),
+      }),
+      expect.anything()
+    );
+
+    expect(WrapperProbe).toHaveBeenNthCalledWith(
+      2,
+      expect.objectContaining({
+        dataProviderProps: expect.objectContaining({ entry }),
+      }),
+      expect.anything()
+    );
+
+    expect(LeafProbe).toHaveBeenCalledWith(
+      expect.not.objectContaining({
+        dataProviderProps: expect.anything(),
+      }),
+      expect.anything()
+    );
+  });
+
+  it("derives the namespaced values from the resolved runtime props", () => {
+    renderNode({
+      type: "DataProvider",
+      props: { _dataKey: "item", item },
+      elements: [
+        {
+          type: "View",
+          props: {},
+          elements: [{ type: "View", props: {} }],
+        },
+      ],
+    });
+
+    expect(WrapperProbe).toHaveBeenNthCalledWith(
+      1,
+      expect.objectContaining({
+        dataProviderProps: expect.objectContaining({ item }),
+      }),
+      expect.anything()
+    );
+
+    expect(WrapperProbe).toHaveBeenNthCalledWith(
+      2,
+      expect.objectContaining({
+        dataProviderProps: expect.objectContaining({ item }),
+      }),
+      expect.anything()
+    );
+  });
+
+  it("does not overwrite explicit dataProviderProps on the direct child", () => {
+    const explicitEntry = { id: "explicit" };
+
+    renderNode({
+      type: "DataProvider",
+      props: { _dataKey: "entry", entry },
+      elements: [
+        {
+          type: "View",
+          props: {
+            dataProviderProps: {
+              entry: explicitEntry,
+              source: "child",
+            },
+          },
+          elements: [{ type: "View", props: {} }],
+        },
+      ],
+    });
+
+    expect(WrapperProbe).toHaveBeenNthCalledWith(
+      1,
+      expect.objectContaining({
+        dataProviderProps: expect.objectContaining({
+          entry: explicitEntry,
+          source: "child",
+        }),
+      }),
+      expect.anything()
+    );
+
+    expect(WrapperProbe).toHaveBeenNthCalledWith(
+      2,
+      expect.objectContaining({
+        dataProviderProps: expect.objectContaining({ entry }),
+      }),
+      expect.anything()
+    );
+  });
+});

package/Components/MasterCell/DefaultComponents/index.ts

@@ -6,26 +6,29 @@ import PureImage from "./Image";
 import { CollapsibleTextContainer } from "../SharedUI/CollapsibleTextContainer/CollapsibleTextContainer";
 import { Toggle } from "./Toggle";
 import { Button } from "./Button";
-import { FocusableView } from "./FocusableView";
 import ProgressBar from "../SharedUI/ProgressBar/ProgressBar";
 import { LiveImage } from "./LiveImage";
 import { DynamicBadge } from "./DynamicBadge";
 import { SecondaryImage } from "./SecondaryImage/Image";
 import { BorderContainerView } from "./BorderContainerView";
 import { CellBadge } from "./CellBadge";
+import { DataProvider } from "./DataProvider";
 import { TvActionButtons } from "./tv/TvActionButtons";
-import { ButtonContainerView } from "./tv/ButtonContainerView";
+import { TvActionButton } from "./tv/TvActionButtons/TvActionButton";
+import { ButtonContainerView } from "./ButtonContainerView";
 import { ImageBorderContainer } from "./ImageBorderContainer";
+import { PressableView } from "./PressableView";
+import { ActionButton as MobileActionButton } from "./mobile/MobileActionButtons/ActionButton";
 
 export const defaultComponents = {
   View,
   CollapsibleTextContainer,
   Text,
   Button,
+  PressableView,
   Image,
   PureImage,
   ButtonContainerView,
-  FocusableView,
   ProgressBar,
   Toggle,
   LiveImage,
@@ -34,5 +37,8 @@ export const defaultComponents = {
   DynamicBadge,
   SecondaryImage,
   TvActionButtons,
+  TvActionButton,
+  MobileActionButton,
   CellBadge,
+  DataProvider,
 };