@applicaster/zapp-react-native-ui-components 15.0.0-rc.5 → 15.0.0-rc.50

package/Components/LinkHandler/LinkHandler.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import * as R from "ramda";
 
 import { findPluginByIdentifier } from "@applicaster/zapp-react-native-utils/pluginUtils";
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import { usePlugins } from "@applicaster/zapp-react-native-redux/hooks";
 import {
   inflateString,
   objectToReadableString,
@@ -40,7 +40,7 @@ export async function inflateUrl(url) {
 
 export function LinkHandler(props: Props) {
   const screenData = props?.screenData;
-  const { plugins } = usePickFromState(["rivers", "plugins"]);
+  const plugins = usePlugins();
 
   const ScreenPlugin = findPluginByIdentifier(
     WEBVIEW_SCREEN_IDENTIFIER,

package/Components/MasterCell/DefaultComponents/BorderContainerView/__tests__/index.test.tsx

@@ -1,8 +1,8 @@
+import * as React from "react";
 import {
   BorderContainerView,
   getBorderPadding, // Export for testing (using a double underscore prefix is a common convention)
 } from "../index";
-import * as React from "react";
 import { render } from "@testing-library/react-native";
 import { toNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/numberUtils";
 import { View } from "react-native";
@@ -11,6 +11,15 @@ jest.mock("@applicaster/zapp-react-native-utils/numberUtils", () => ({
   toNumberWithDefaultZero: jest.fn((value) => Number(value) || 0),
 }));
 
+jest.mock(
+  "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager/hooks",
+  () => ({
+    useAccessibilityManager: jest.fn(() => ({
+      addHeading: jest.fn(),
+    })),
+  })
+);
+
 describe("BorderContainerView", () => {
   describe("getBorderPadding", () => {
     it("returns 0 for inside", () => {
@@ -42,6 +51,8 @@ describe("BorderContainerView", () => {
     };
 
     const borderPosition = null;
+    const mockEntry = { id: "test-entry" } as ZappEntry;
+    const mockHasFocusableInside = jest.fn(() => false);
 
     const { queryByTestId } = render(
       <BorderContainerView
@@ -52,6 +63,10 @@ describe("BorderContainerView", () => {
         borderPaddingRight={toNumberWithDefaultZero(padding.paddingRight)}
         borderPaddingBottom={toNumberWithDefaultZero(padding.paddingBottom)}
         borderPaddingLeft={toNumberWithDefaultZero(padding.paddingLeft)}
+        hasFocusableInside={mockHasFocusableInside}
+        entry={mockEntry}
+        state="focused"
+        hasTextLabels={false}
       >
         <View testID="child" />
       </BorderContainerView>

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

@@ -1,10 +1,16 @@
-import { toNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/numberUtils";
-import * as React from "react";
+import React, { useMemo, useContext, useEffect } from "react";
 import { ImageStyle, StyleSheet, View, ViewStyle } from "react-native";
+import { useAccessibilityManager } from "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager/hooks";
+import { toNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/numberUtils";
+import { MeasurementPortalContext } from "../../../MeasurmentsPortal/MeasurementsPortal";
 
 type BorderPosition = "inside" | "outside" | "center";
 
 interface Props {
+  hasFocusableInside: (entry: ZappEntry) => boolean;
+  entry: ZappEntry;
+  state: CellState;
+  hasTextLabels: boolean;
   style: ImageStyle | ViewStyle;
   borderPosition: BorderPosition;
   borderPaddingTop: number;
@@ -118,8 +124,30 @@ export const BorderContainerView = (props: Props) => {
     borderPaddingLeft,
     style,
     children,
+    hasFocusableInside,
+    entry,
+    state,
+    hasTextLabels,
   } = props;
 
+  const accessibilityManager = useAccessibilityManager();
+  const isMeasurement = useContext(MeasurementPortalContext);
+
+  const isImageOnlyCell = useMemo(
+    () =>
+      state === "focused" &&
+      !hasTextLabels &&
+      !isMeasurement?.measuringInProgress &&
+      !hasFocusableInside(entry),
+    [entry, hasTextLabels, state, isMeasurement?.measuringInProgress]
+  );
+
+  useEffect(() => {
+    if (isImageOnlyCell && entry?.title) {
+      accessibilityManager.addHeading(String(entry.title));
+    }
+  }, [isImageOnlyCell, entry?.title]);
+
   const padding =
     borderPosition === "outside"
       ? {

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

@@ -32,6 +32,7 @@ export default function Image({
   placeholderImage,
   entry,
   withDimensions,
+  source: sourceProp,
   ...otherProps
 }: Props) {
   const [showDefault, setShowDefault] = React.useState(false);
@@ -48,7 +49,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

@@ -9,6 +9,7 @@ import { useTrackCurrentAutoScrollingElement } from "@applicaster/zapp-react-nat
 import { useUIComponentContext } from "@applicaster/zapp-react-native-ui-components/Contexts/UIComponentContext";
 import { getPropComponentType } from "@applicaster/zapp-react-native-utils/cellUtils";
 import { findPluginByIdentifier } from "@applicaster/zapp-react-native-utils/pluginUtils";
+import { useAccessibilityState } from "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager/hooks";
 
 type LiveImageProps = {
   item: ZappEntry;
@@ -108,8 +109,7 @@ const prepareEntry = (entry) => {
     };
   }
 
-  const previewPlayback =
-    entry.extensions?.["brightcove"]?.["preview_playback"];
+  const previewPlayback = entry.extensions?.brightcove?.preview_playback;
 
   if (previewPlayback) {
     return {
@@ -117,14 +117,14 @@ const prepareEntry = (entry) => {
       extensions: {
         ...entry.extensions,
         brightcove: {
-          ...entry?.extensions?.["brightcove"],
+          ...entry?.extensions?.brightcove,
           video_id: previewPlayback,
         },
       },
     };
   }
 
-  if (entry.extensions?.["brightcove"]?.["video_id"]) {
+  if (entry.extensions?.brightcove?.video_id) {
     return entry;
   }
 
@@ -174,7 +174,7 @@ const getPlayerConfig = (player_screen_id, actionIdentifier) => {
     // TODO: Add more dict if needed from the screen component, styles, data etc
     return {
       playerPluginId: playerScreen?.type ?? DEFAULT_PLAYER_IDENTIFIER,
-      screenConfig: playerScreen?.["general"],
+      screenConfig: playerScreen?.general,
     };
   }
 
@@ -206,6 +206,9 @@ const LiveImageComponent = (props: LiveImageProps) => {
     state,
   } = props;
 
+  const accessibilityState = useAccessibilityState({});
+  const isScreenReaderEnabled = accessibilityState.screenReaderEnabled;
+
   const component = useUIComponentContext();
 
   // Fix for blinking on state change
@@ -239,7 +242,8 @@ const LiveImageComponent = (props: LiveImageProps) => {
     getFocusedState(state, componentType, isCurrentlyFocused) &&
     playableEntry &&
     cellUUID &&
-    isSupportedTVForLiveImage();
+    isSupportedTVForLiveImage() &&
+    !isScreenReaderEnabled;
 
   return (
     <>

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

@@ -52,14 +52,14 @@ const _Text = ({
     : textTransform(transformText, _label);
 
   React.useLayoutEffect(() => {
-    // For FocusableCells with action buttons
-    if (otherProps.state) {
-      if (otherProps.state === "focused" && cellFocused === true) {
-        accessibilityManager.addHeading(textLabel);
-      }
-    } else {
-      if (cellFocused === true) {
-        accessibilityManager.addHeading(textLabel);
+    if (cellFocused) {
+      switch (otherProps.state) {
+        case "focused":
+          accessibilityManager.addHeading(textLabel);
+          break;
+        case "focused_selected":
+          accessibilityManager.addHeading(`${textLabel}, Selected`);
+          break;
       }
     }
   }, [cellFocused, otherProps.state, textLabel]);

package/Components/MasterCell/index.tsx

@@ -103,6 +103,8 @@ export function masterCellBuilder({
         wrapperRef,
         cellUUID,
         skipButtons,
+        hasFocusableInside,
+        entry: item,
       })
     );
 

package/Components/MasterCell/utils/__tests__/resolveColor.test.js

@@ -32,14 +32,16 @@ describe("resolveColor", () => {
       color: "invalid_path",
     };
 
-    expect(resolveColor(entry, style)).toEqual(style);
+    expect(resolveColor(entry, style)).toEqual({
+      color: undefined,
+    });
 
     expect(loggerSpy).toHaveBeenCalledWith(
       expect.objectContaining({
         message: "Cannot resolve property invalid_path from the entry.",
         data: {
+          colorFromProp: "invalid_path",
           configurationValue: "invalid_path",
-          entry,
         },
       })
     );
@@ -102,7 +104,9 @@ describe("resolveColor", () => {
       color: "not.exist.path",
     };
 
-    expect(resolveColor(entry, style)).toEqual(style);
+    expect(resolveColor(entry, style)).toEqual({
+      color: undefined,
+    });
   });
 
   it("not modify style with empty path", () => {
@@ -112,4 +116,79 @@ describe("resolveColor", () => {
 
     expect(resolveColor(entry, style)).toEqual(style);
   });
+
+  describe("memoization", () => {
+    beforeEach(() => {
+      // Clear memoization cache before each test
+      resolveColor.clear && resolveColor.clear();
+    });
+
+    it("hits cache with same entry and style references", () => {
+      const style = { color: "extensions.color" };
+
+      const result1 = resolveColor(entry, style);
+      const result2 = resolveColor(entry, style);
+
+      expect(result1).toBe(result2); // Same object reference
+    });
+
+    it("hits cache with new references but equal entry/style values", () => {
+      const entryClone = {
+        extensions: {
+          color: "red",
+          green_color: "green",
+        },
+      };
+
+      const style = { color: "extensions.color" };
+      const styleClone = { color: "extensions.color" };
+
+      const result1 = resolveColor(entry, style);
+      const result2 = resolveColor(entryClone, styleClone);
+
+      expect(result1).toBe(result2);
+    });
+
+    it("misses cache when entry is new object", () => {
+      const entry2 = { extensions: { color: "blue" } }; // Same values, different object
+      const style = { color: "extensions.color" };
+
+      const result1 = resolveColor(entry, style);
+      const result2 = resolveColor(entry2, style);
+
+      expect(result1).not.toBe(result2); // Different object references
+    });
+
+    it("misses cache when entry property changes", () => {
+      const myEntry = {
+        extensions: {
+          color: "red",
+          green_color: "green",
+        },
+      };
+
+      const style = { color: "extensions.color" };
+
+      const result1 = resolveColor(myEntry, style);
+
+      myEntry.extensions.color = "blue"; // Change property
+      const result2 = resolveColor(myEntry, style);
+
+      expect(result1).toEqual({ color: "red" });
+      expect(result2).toEqual({ color: "blue" });
+      expect(result1).not.toBe(result2);
+    });
+
+    it("misses cache when style changes", () => {
+      const style1 = { color: "extensions.color" };
+      const style2 = { backgroundColor: "extensions.color" };
+
+      const result1 = resolveColor(entry, style1);
+      const result2 = resolveColor(entry, style2);
+
+      expect(result1).toEqual({ color: "red" });
+      expect(result2).toEqual({ backgroundColor: "red" });
+      expect(result1).not.toBe(result2);
+    });
+  });
 });

package/Components/MasterCell/utils/index.ts

@@ -7,9 +7,12 @@ import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/acti
 import { masterCellLogger } from "../logger";
 import { getCellState } from "../../Cell/utils";
 import { getColorFromData } from "@applicaster/zapp-react-native-utils/cellUtils";
+import { get } from "@applicaster/zapp-react-native-utils/utils";
 import { isCellSelected, useBehaviorUpdate } from "./behaviorProvider";
 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";
 
 const hasElementSpecificViewType = (viewType) => (element) => {
   if (R.isNil(element)) {
@@ -24,21 +27,21 @@ const hasElementSpecificViewType = (viewType) => (element) => {
   return hasElementsSpecificViewType(viewType)(element.elements);
 };
 
-const logWarning = R.curry(
-  (colorValueFromCellStyle, style, entry, colorValueFromEntry) => {
-    if (R.isNil(colorValueFromEntry)) {
-      masterCellLogger.warn({
-        message: `Cannot resolve property ${colorValueFromCellStyle} from the entry.`,
-        data: {
-          configurationValue: colorValueFromCellStyle,
-          entry,
-        },
-      });
-    }
-
-    return style;
+const logWarning = (
+  colorValueFromCellStyle,
+  colorFromProp,
+  colorValueFromEntry
+) => {
+  if (R.isNil(colorValueFromEntry)) {
+    masterCellLogger.warn({
+      message: `Cannot resolve property ${colorValueFromCellStyle} from the entry.`,
+      data: {
+        configurationValue: colorValueFromCellStyle,
+        colorFromProp,
+      },
+    });
   }
-);
+};
 
 export const hasElementsSpecificViewType = (viewType) => (elements) => {
   if (R.isNil(elements) || R.isEmpty(elements)) {
@@ -48,14 +51,22 @@ export const hasElementsSpecificViewType = (viewType) => (elements) => {
   return R.any(hasElementSpecificViewType(viewType))(elements);
 };
 
-function resolveColorForProp(entry, style, colorProp) {
-  const colorFromProp = style[colorProp];
-  const nestedEntryValue = R.path(colorFromProp.split("."), entry);
+function resolveColorForProp(entry: any, colorFromProp: string | undefined) {
+  if (!colorFromProp) {
+    return undefined;
+  }
+
+  const nestedEntryValue: string | undefined = get(
+    entry,
+    colorFromProp.split(".")
+  );
 
   const color = colorFromProp.replace(".00", "").replace(".0", ""); // https://github.com/dreamyguy/validate-color/issues/44
 
   if (nestedEntryValue === undefined && !validateColor(color)) {
-    logWarning(colorFromProp, style, entry, nestedEntryValue);
+    logWarning(colorFromProp, colorFromProp, nestedEntryValue);
+
+    return undefined;
   }
 
   const colorValue = getColorFromData({
@@ -64,27 +75,46 @@ function resolveColorForProp(entry, style, colorProp) {
   });
 
   if (!colorValue) {
-    logWarning(colorProp, style, entry, colorValue);
+    logWarning(colorFromProp, colorFromProp, nestedEntryValue);
 
-    return style;
+    return undefined;
   }
 
-  return { ...style, [colorProp]: colorValue };
+  return colorValue;
 }
 
-export function resolveColor(entry, style) {
-  if (style === null || style === undefined) {
-    return style;
-  }
-
-  // TODO can be optimized to remove 3 O(n) loops
+const getColorKeys = memoizee((style) => {
   const styleKeys = Object.keys(style);
   const colorKeys = styleKeys.filter((key) => /color/i.test(key));
 
-  return colorKeys.reduce((acc, value) => {
-    return { ...style, ...resolveColorForProp(entry, acc, value) };
-  }, style);
-}
+  return colorKeys;
+});
+
+export const resolveColor = memoizee(
+  (entry, style) => {
+    if (style === null || style === undefined) {
+      return style;
+    }
+
+    return getColorKeys(style).reduce(
+      (acc, value) => {
+        if (acc[value] && typeof acc[value] === "string") {
+          const colorStyle = resolveColorForProp(entry, acc[value]);
+
+          acc[value] = colorStyle;
+        }
+
+        return acc;
+      },
+      { ...style }
+    );
+  },
+  {
+    normalizer: (args) => {
+      return [stringify(args[0]), stringify(args[1])].join("|");
+    },
+  }
+);
 
 export function isVideoPreviewEnabled({
   enable_video_preview = false,