@applicaster/zapp-react-native-ui-components 15.0.0-alpha.5170277721 → 15.0.0-alpha.5197372201

package/Components/MasterCell/DefaultComponents/SecondaryImage/__tests__/__snapshots__/Image.test.tsx.snap

@@ -1,9 +1,45 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`SecondaryImage - Image SecondaryImage fixed mode should not use async render props 1`] = `
+<View
+  style={
+    {
+      "borderRadius": 10,
+      "height": 100,
+      "width": 100,
+    }
+  }
+>
+  <Image
+    displayMode="fixed"
+    fitPosition="center"
+    fixedHeight={100}
+    fixedWidth={100}
+    imageSizing="fill"
+    source={
+      {
+        "uri": "someUrl",
+      }
+    }
+    style={
+      {
+        "aspectRatio": 1,
+        "borderRadius": 10,
+        "height": 100,
+        "width": 100,
+      }
+    }
+    uri="someUrl"
+  />
+</View>
+`;
+
 exports[`SecondaryImage - Image SecondaryImage should not render if no aspect ratio (dynamic) 1`] = `null`;
 
 exports[`SecondaryImage - Image SecondaryImage should not render if no uri 1`] = `null`;
 
+exports[`SecondaryImage - Image SecondaryImage should not render in dynamic mode without image 1`] = `null`;
+
 exports[`SecondaryImage - Image SecondaryImage should render if known dimensions 1`] = `
 <View
   onLayout={[Function]}
@@ -17,6 +53,10 @@ exports[`SecondaryImage - Image SecondaryImage should render if known dimensions
 >
   <Image
     displayMode="dynamic"
+    fitPosition="center"
+    fixedHeight={0}
+    fixedWidth={0}
+    imageSizing="fill"
     onAsyncRender={[Function]}
     source={
       {
@@ -35,3 +75,49 @@ exports[`SecondaryImage - Image SecondaryImage should render if known dimensions
   />
 </View>
 `;
+
+exports[`SecondaryImage - Image SecondaryImage should render in fixed mode with known dimensions 1`] = `
+<View
+  style={
+    {
+      "borderRadius": 10,
+      "height": 100,
+      "width": 100,
+    }
+  }
+>
+  <Image
+    displayMode="fixed"
+    fitPosition="center"
+    fixedHeight={100}
+    fixedWidth={100}
+    imageSizing="fill"
+    source={
+      {
+        "uri": "someUrl",
+      }
+    }
+    style={
+      {
+        "aspectRatio": 1,
+        "borderRadius": 10,
+        "height": 100,
+        "width": 100,
+      }
+    }
+    uri="someUrl"
+  />
+</View>
+`;
+
+exports[`SecondaryImage - Image SecondaryImage should render in fixed mode without image until loaded 1`] = `
+<View
+  style={
+    {
+      "borderRadius": 5,
+      "height": 100,
+      "width": 100,
+    }
+  }
+/>
+`;

package/Components/MasterCell/DefaultComponents/SecondaryImage/__tests__/index.test.ts

@@ -0,0 +1,141 @@
+import { SecondaryImage } from "../index";
+
+describe("SecondaryImage - Configuration Builder", () => {
+  const mockValue = (config: any) => (key: string, transformer?: Function) => {
+    const value = config[key];
+
+    return transformer ? transformer(value) : value;
+  };
+
+  it("should pass false as second argument to image_src_from_media_item", () => {
+    const config = {
+      secondary_image_switch: true,
+      secondary_image_position: "over_image",
+      secondary_image_visibility: "always",
+      secondary_image_image_key: "custom_image",
+      secondary_image_display_mode: "dynamic",
+      secondary_image_dynamic_width: 100,
+    };
+
+    const result = SecondaryImage({
+      value: mockValue(config),
+      currentPosition: "over_image",
+      state: "default",
+    });
+
+    expect(result).not.toBeNull();
+    expect(result?.elements).toBeDefined();
+    expect(result?.elements[0].data).toBeDefined();
+
+    const imageData = result?.elements[0].data[0];
+    expect(imageData.func).toBe("image_src_from_media_item");
+    expect(imageData.args).toEqual(["custom_image", false]);
+    expect(imageData.propName).toBe("uri");
+  });
+
+  it("should return null when secondary image is disabled", () => {
+    const config = {
+      secondary_image_switch: false,
+    };
+
+    const result = SecondaryImage({
+      value: mockValue(config),
+      currentPosition: "over_image",
+      state: "default",
+    });
+
+    expect(result).toBeNull();
+  });
+
+  it("should return null when position does not match currentPosition", () => {
+    const config = {
+      secondary_image_switch: true,
+      secondary_image_position: "above_text_label_1",
+      secondary_image_visibility: "always",
+    };
+
+    const result = SecondaryImage({
+      value: mockValue(config),
+      currentPosition: "over_image",
+      state: "default",
+    });
+
+    expect(result).toBeNull();
+  });
+
+  it("should return null when visibility does not match state", () => {
+    const config = {
+      secondary_image_switch: true,
+      secondary_image_position: "over_image",
+      secondary_image_visibility: "focused",
+    };
+
+    const result = SecondaryImage({
+      value: mockValue(config),
+      currentPosition: "over_image",
+      state: "default",
+    });
+
+    expect(result).toBeNull();
+  });
+
+  it("should include display mode and image sizing in additionalProps", () => {
+    const config = {
+      secondary_image_switch: true,
+      secondary_image_position: "over_image",
+      secondary_image_visibility: "always",
+      secondary_image_image_key: "logo",
+      secondary_image_display_mode: "fixed",
+      secondary_image_image_sizing: "fill",
+      secondary_image_fit_position: "center",
+      secondary_image_fixed_width: 200,
+      secondary_image_fixed_height: 150,
+    };
+
+    const result = SecondaryImage({
+      value: mockValue(config),
+      currentPosition: "over_image",
+      state: "default",
+    });
+
+    expect(result?.elements[0].additionalProps).toMatchObject({
+      displayMode: "fixed",
+      imageSizing: "fill",
+      fitPosition: "center",
+      fixedWidth: 200,
+      fixedHeight: 150,
+    });
+  });
+
+  it("should apply correct styles including margins and border radius", () => {
+    const config = {
+      secondary_image_switch: true,
+      secondary_image_position: "over_image",
+      secondary_image_visibility: "always",
+      secondary_image_display_mode: "fixed",
+      secondary_image_fixed_width: 100,
+      secondary_image_fixed_height: 100,
+      secondary_image_corner_radius: 12,
+      secondary_image_margin_top: 10,
+      secondary_image_margin_left: 5,
+      secondary_image_margin_right: 5,
+      secondary_image_margin_bottom: 10,
+    };
+
+    const result = SecondaryImage({
+      value: mockValue(config),
+      currentPosition: "over_image",
+      state: "default",
+    });
+
+    expect(result?.elements[0].style).toMatchObject({
+      width: 100,
+      height: 100,
+      borderRadius: 12,
+      marginTop: 10,
+      marginLeft: 5,
+      marginRight: 5,
+      marginBottom: 10,
+    });
+  });
+});

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/SecondaryImage/index.ts

@@ -103,7 +103,7 @@ export const SecondaryImage = ({ value, currentPosition, state }: Props) => {
         data: [
           {
             func: "image_src_from_media_item",
-            args: [imageKey],
+            args: [imageKey, false],
             propName: "uri",
           },
         ],

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/DefaultComponents/tv/TvActionButtons/index.ts

@@ -4,7 +4,7 @@ import { toNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/nu
 import { Button } from "./Button";
 import {
   getButtonsCount,
-  getPluginIdentifier,
+  memoizedGetPluginIdentifier,
   mapSelfAlignment,
 } from "./utils";
 
@@ -80,7 +80,11 @@ export const TvActionButtons = ({
           prefix: independentStyles ? prefixSpecificButton : buttonId(1),
           value,
           platformValue,
-          pluginIdentifier: getPluginIdentifier(configuration, PREFIX, index),
+          pluginIdentifier: memoizedGetPluginIdentifier(
+            configuration,
+            PREFIX,
+            index
+          ),
           suffixId: prefixSpecificButton,
           preferredFocus: index === 0,
         });

package/Components/MasterCell/DefaultComponents/tv/TvActionButtons/utils/__tests__/getPluginIdentifier.test.ts

@@ -1,9 +1,15 @@
-import { getPluginIdentifier } from "..";
+import { getPluginIdentifier, memoizedGetPluginIdentifier } from "..";
 
 describe("getPluginIdentifier", () => {
   const prefix = "tv_buttons";
 
-  it("get first plugin identifier", () => {
+  beforeAll(() => {
+    memoizedGetPluginIdentifier.clear();
+  });
+
+  it("returns the first valid plugin identifier", () => {
+    expect.assertions(2);
+
     const configuration = {
       tv_buttons_button_1_other: "value",
       tv_buttons_button_1_assign_action:
@@ -13,13 +19,21 @@ describe("getPluginIdentifier", () => {
     };
 
     const index = 0;
-
     const result = getPluginIdentifier(configuration, prefix, index);
 
+    const memoizedResult = memoizedGetPluginIdentifier(
+      configuration,
+      prefix,
+      index
+    );
+
     expect(result).toEqual(configuration.tv_buttons_button_1_assign_action);
+    expect(memoizedResult).toEqual(result);
   });
 
-  it("get second plugin identifier", () => {
+  it("returns the second valid plugin identifier", () => {
+    expect.assertions(2);
+
     const configuration = {
       tv_buttons_button_1_other: "value_1",
       tv_buttons_button_1_assign_action:
@@ -30,24 +44,216 @@ describe("getPluginIdentifier", () => {
     };
 
     const index = 1;
-
     const result = getPluginIdentifier(configuration, prefix, index);
 
+    const memoizedResult = memoizedGetPluginIdentifier(
+      configuration,
+      prefix,
+      index
+    );
+
     expect(result).toEqual(configuration.tv_buttons_button_2_assign_action);
+    expect(memoizedResult).toEqual(result);
   });
 
-  it("get undefined if no assign_actions at all", () => {
+  it("returns undefined when there are no assign_action keys", () => {
+    expect.assertions(2);
+
     const configuration = {};
+    const index = 0;
+
+    const result = getPluginIdentifier(configuration, prefix, index);
+
+    const memoizedResult = memoizedGetPluginIdentifier(
+      configuration,
+      prefix,
+      index
+    );
+
+    expect(result).toBeUndefined();
+    expect(memoizedResult).toBeUndefined();
+  });
+
+  it("skips undefined values and returns the correct plugin identifier", () => {
+    expect.assertions(2);
+
+    const configuration = {
+      tv_buttons_button_1_assign_action: "tv_buttons_button_1_assign_action",
+      tv_buttons_button_2_assign_action: undefined,
+      tv_buttons_button_3_assign_action: "tv_buttons_button_3_assign_action",
+    };
+
+    const index = 1;
+    const result = getPluginIdentifier(configuration, prefix, index);
+
+    const memoizedResult = memoizedGetPluginIdentifier(
+      configuration,
+      prefix,
+      index
+    );
+
+    expect(result).toEqual(configuration.tv_buttons_button_3_assign_action);
+    expect(memoizedResult).toEqual(result);
+  });
+
+  it("handles missing intermediate keys and returns the correct plugin identifier", () => {
+    expect.assertions(2);
+
+    const configuration = {
+      tv_buttons_button_1_assign_action: "tv_buttons_button_1_assign_action",
+      tv_buttons_button_3_assign_action: "tv_buttons_button_3_assign_action",
+    };
+
+    const index = 1;
+    const result = getPluginIdentifier(configuration, prefix, index);
+
+    const memoizedResult = memoizedGetPluginIdentifier(
+      configuration,
+      prefix,
+      index
+    );
+
+    expect(result).toEqual(configuration.tv_buttons_button_3_assign_action);
+    expect(memoizedResult).toEqual(result);
+  });
+
+  it("skips empty string values and returns the first non-empty assign_action", () => {
+    expect.assertions(2);
+
+    const configuration = {
+      tv_buttons_button_1_assign_action: "",
+      tv_buttons_button_2_assign_action: "tv_buttons_button_2_assign_action",
+    };
 
     const index = 0;
+    const result = getPluginIdentifier(configuration, prefix, index);
+
+    const memoizedResult = memoizedGetPluginIdentifier(
+      configuration,
+      prefix,
+      index
+    );
+
+    expect(result).toEqual(configuration.tv_buttons_button_2_assign_action);
+    expect(memoizedResult).toEqual(result);
+  });
+
+  it("returns undefined for negative index", () => {
+    expect.assertions(2);
+
+    const configuration = {
+      tv_buttons_button_1_assign_action: "a",
+      tv_buttons_button_2_assign_action: "b",
+    };
 
+    const index = -1;
     const result = getPluginIdentifier(configuration, prefix, index);
 
+    const memoizedResult = memoizedGetPluginIdentifier(
+      configuration,
+      prefix,
+      index
+    );
+
     expect(result).toBeUndefined();
+    expect(memoizedResult).toBeUndefined();
+  });
+
+  it("returns undefined for out-of-bounds index", () => {
+    expect.assertions(2);
+
+    const configuration = {
+      tv_buttons_button_1_assign_action: "a",
+      tv_buttons_button_2_assign_action: "b",
+    };
+
+    const index = 5;
+    const result = getPluginIdentifier(configuration, prefix, index);
+
+    const memoizedResult = memoizedGetPluginIdentifier(
+      configuration,
+      prefix,
+      index
+    );
+
+    expect(result).toBeUndefined();
+    expect(memoizedResult).toBeUndefined();
+  });
+
+  it("ignores keys with wrong prefix or format", () => {
+    expect.assertions(2);
+
+    const configuration = {
+      tv_buttons_button_1_assign_action: "a",
+      tv_buttons_wrongprefix_2_assign_action: "b",
+      tv_buttons_button_x_assign_action: "c",
+    };
+
+    const index = 1;
+    const result = getPluginIdentifier(configuration, prefix, index);
+
+    const memoizedResult = memoizedGetPluginIdentifier(
+      configuration,
+      prefix,
+      index
+    );
+
+    expect(result).toBeUndefined();
+    expect(memoizedResult).toBeUndefined();
+  });
+
+  it("returns undefined if all assign_actions are null or empty", () => {
+    expect.assertions(2);
+
+    const configuration = {
+      tv_buttons_button_1_assign_action: null,
+      tv_buttons_button_2_assign_action: undefined,
+      tv_buttons_button_3_assign_action: "",
+    };
+
+    const index = 0;
+    const result = getPluginIdentifier(configuration, prefix, index);
+
+    const memoizedResult = memoizedGetPluginIdentifier(
+      configuration,
+      prefix,
+      index
+    );
+
+    expect(result).toBeUndefined();
+    expect(memoizedResult).toBeUndefined();
+  });
+
+  it("handles non-string values correctly", () => {
+    expect.assertions(6);
+
+    const configuration = {
+      tv_buttons_button_1_assign_action: 123,
+      tv_buttons_button_2_assign_action: true,
+      tv_buttons_button_3_assign_action: { nested: "value" },
+    };
+
+    expect(getPluginIdentifier(configuration, prefix, 0)).toEqual(123);
+    expect(getPluginIdentifier(configuration, prefix, 1)).toEqual(true);
+
+    expect(getPluginIdentifier(configuration, prefix, 2)).toEqual({
+      nested: "value",
+    });
+
+    expect(memoizedGetPluginIdentifier(configuration, prefix, 0)).toEqual(123);
+    expect(memoizedGetPluginIdentifier(configuration, prefix, 1)).toEqual(true);
+
+    expect(memoizedGetPluginIdentifier(configuration, prefix, 2)).toEqual({
+      nested: "value",
+    });
   });
 });
 
-describe("getPluginIdentifier - when configuration has same values for different keys", () => {
+describe("getPluginIdentifier - when configuration has duplicate values", () => {
+  beforeAll(() => {
+    memoizedGetPluginIdentifier.clear();
+  });
+
   const prefix = "tv_buttons";
 
   const configuration = {
@@ -55,19 +261,35 @@ describe("getPluginIdentifier - when configuration has same values for different
     tv_buttons_button_2_assign_action: "navigation_action",
   };
 
-  it("get first plugin identifier", () => {
-    const index = 0;
+  it("returns the first plugin identifier when values are identical", () => {
+    expect.assertions(2);
 
+    const index = 0;
     const result = getPluginIdentifier(configuration, prefix, index);
 
+    const memoizedResult = memoizedGetPluginIdentifier(
+      configuration,
+      prefix,
+      index
+    );
+
     expect(result).toEqual(configuration.tv_buttons_button_1_assign_action);
+    expect(memoizedResult).toEqual(result);
   });
 
-  it("get second plugin identifier", () => {
-    const index = 1;
+  it("returns the second plugin identifier when values are identical", () => {
+    expect.assertions(2);
 
+    const index = 1;
     const result = getPluginIdentifier(configuration, prefix, index);
 
+    const memoizedResult = memoizedGetPluginIdentifier(
+      configuration,
+      prefix,
+      index
+    );
+
     expect(result).toEqual(configuration.tv_buttons_button_2_assign_action);
+    expect(memoizedResult).toEqual(result);
   });
 });

package/Components/MasterCell/DefaultComponents/tv/TvActionButtons/utils/index.ts

@@ -1,7 +1,7 @@
 import * as R from "ramda";
+import memoizee from "memoizee";
 
 import { isWeb } from "@applicaster/zapp-react-native-utils/reactUtils";
-import { isNotNil } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
 
 export const getButtonsCount = (
   configuration: Record<string, unknown>,
@@ -21,23 +21,27 @@ export const getPluginIdentifier = (
   configuration: Record<string, unknown>,
   prefix: string,
   index: number
-): string => {
-  const match = `${prefix}_button_\\d_assign_action`;
-  const re = new RegExp(match);
-
-  const rejectNils = R.compose(R.path([index]), R.filter(isNotNil));
-
-  return rejectNils(
-    R.toPairs(configuration)
-      .filter(([key]) => R.startsWith(`${prefix}_button`, key))
-      .map(([key, value]) => {
-        const matched = key.match(re);
+): string | undefined => {
+  const re = new RegExp(`${prefix}_button_\\d_assign_action`);
+  let count = 0;
+
+  for (const [key, value] of Object.entries(configuration)) {
+    if (
+      key.startsWith(`${prefix}_button`) &&
+      re.test(key) &&
+      value != null &&
+      value !== ""
+    ) {
+      if (count === index) return value as string;
+      count++;
+    }
+  }
 
-        return matched ? value : undefined;
-      })
-  );
+  return undefined;
 };
 
+export const memoizedGetPluginIdentifier = memoizee(getPluginIdentifier);
+
 type Label = {
   name: string;
 };