@applicaster/zapp-react-native-ui-components 15.0.0-rc.14 → 15.0.0-rc.141

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

@@ -7,7 +7,6 @@ import {
 } from "@applicaster/zapp-react-native-utils/cellUtils";
 
 import { useTextLabel, withFocusedStyles } from "./hooks";
-import { withScaledLineHeight } from "./utils";
 import { toNumber } from "@applicaster/zapp-react-native-utils/numberUtils";
 import { MeasurementPortalContext } from "../../../MeasurmentsPortal";
 import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
@@ -52,14 +51,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]);
@@ -70,12 +69,9 @@ const _Text = ({
 
   return (
     <Text
-      style={[
-        withScaledLineHeight(withFocusedStyles({ style, otherProps })),
-        { height },
-      ]}
-      allowFontScaling={false}
+      style={[withFocusedStyles({ style, otherProps }), { height }]}
       {...withoutLabel(otherProps)}
+      allowFontScaling={false}
     >
       {textLabel}
     </Text>

package/Components/MasterCell/DefaultComponents/index.ts

@@ -16,12 +16,14 @@ import { CellBadge } from "./CellBadge";
 import { TvActionButtons } from "./tv/TvActionButtons";
 import { ButtonContainerView } from "./tv/ButtonContainerView";
 import { ImageBorderContainer } from "./ImageBorderContainer";
+import { PressableView } from "./PressableView";
 
 export const defaultComponents = {
   View,
   CollapsibleTextContainer,
   Text,
   Button,
+  PressableView,
   Image,
   PureImage,
   ButtonContainerView,

package/Components/MasterCell/DefaultComponents/mobile/MobileActionButtons/Asset.ts

@@ -0,0 +1,42 @@
+import { toNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/numberUtils";
+
+type Props = {
+  prefix: string;
+  value: Function;
+  testID?: string;
+};
+
+/** Asset used in conjunction with PressableView inside mobile action buttons, uri is provided by PressableView  */
+export const Asset = ({ prefix, value, testID }: Props) => {
+  if (!value(`${prefix}_asset_enabled`)) {
+    return null;
+  }
+
+  return {
+    type: "Image",
+    style: {
+      width: toNumberWithDefaultZero(value(`${prefix}_asset_width`)),
+      height: toNumberWithDefaultZero(value(`${prefix}_asset_height`)),
+      marginTop: toNumberWithDefaultZero(value(`${prefix}_asset_margin_top`)),
+      marginRight: toNumberWithDefaultZero(
+        value(`${prefix}_asset_margin_right`)
+      ),
+      marginBottom: toNumberWithDefaultZero(
+        value(`${prefix}_asset_margin_bottom`)
+      ),
+      marginLeft: toNumberWithDefaultZero(value(`${prefix}_asset_margin_left`)),
+      backgroundColor: "transparent",
+    },
+    data: [
+      {
+        func: (entry) => entry,
+        args: [],
+        propName: "entry",
+      },
+    ],
+    additionalProps: {
+      mobileActionRole: "asset",
+      testID: testID ? `${testID}-asset` : undefined,
+    },
+  };
+};

package/Components/MasterCell/DefaultComponents/mobile/MobileActionButtons/Button.ts

@@ -0,0 +1,127 @@
+import {
+  toNumberWithDefault,
+  toNumberWithDefaultZero,
+} from "@applicaster/zapp-react-native-utils/numberUtils";
+import { compact } from "@applicaster/zapp-react-native-utils/cellUtils";
+
+import { Asset } from "./Asset";
+import { Spacer } from "./Spacer";
+import { TextLabelsContainer } from "./TextLabelsContainer";
+import { getContentDirection, getContentsAlignment } from "./helpers";
+
+const displayModeStyle = ({ value, prefix }) => {
+  const mode = value(`${prefix}_display_mode`) || "dynamic";
+
+  if (mode === "fixed") {
+    return {
+      width: toNumberWithDefault(140, value(`${prefix}_width`)),
+    };
+  }
+
+  if (mode === "fill") {
+    return {
+      flex: 1,
+    };
+  }
+
+  return {};
+};
+
+type Props = {
+  index: number;
+  value: Function;
+  stylePrefix: string;
+  specificPrefix: string;
+  spacingStyle: Record<string, unknown>;
+};
+
+export const Button = ({
+  index,
+  value,
+  stylePrefix,
+  specificPrefix,
+  spacingStyle,
+}: Props) => {
+  if (!value(`${specificPrefix}_button_enabled`)) {
+    return null;
+  }
+
+  const testID = `mobile_action_button_${index + 1}`;
+  const actionIdentifier = value(`${specificPrefix}_assign_action`);
+  const assetAlignment = value(`${stylePrefix}_asset_alignment`) || "left";
+  const actionAssetFlavour = value(`${stylePrefix}_action_asset_flavour`);
+
+  const contentsAlignment =
+    value(`${stylePrefix}_contents_alignment`) || "center";
+
+  return {
+    type: "PressableView",
+    style: {
+      flexDirection: getContentDirection(assetAlignment),
+      alignItems: "center",
+      justifyContent: getContentsAlignment(contentsAlignment),
+
+      marginTop: toNumberWithDefaultZero(value(`${stylePrefix}_margin_top`)),
+      marginRight: toNumberWithDefaultZero(
+        value(`${stylePrefix}_margin_right`)
+      ),
+      marginBottom: toNumberWithDefaultZero(
+        value(`${stylePrefix}_margin_bottom`)
+      ),
+      marginLeft: toNumberWithDefaultZero(value(`${stylePrefix}_margin_left`)),
+
+      paddingTop: toNumberWithDefaultZero(value(`${stylePrefix}_padding_top`)),
+      paddingRight: toNumberWithDefaultZero(
+        value(`${stylePrefix}_padding_right`)
+      ),
+      paddingBottom: toNumberWithDefaultZero(
+        value(`${stylePrefix}_padding_bottom`)
+      ),
+      paddingLeft: toNumberWithDefaultZero(
+        value(`${stylePrefix}_padding_left`)
+      ),
+
+      borderWidth: toNumberWithDefaultZero(value(`${stylePrefix}_border_size`)),
+      borderRadius: toNumberWithDefaultZero(
+        value(`${stylePrefix}_corner_radius`)
+      ),
+      borderColor: value(`${stylePrefix}_border_color`),
+      backgroundColor: value(`${stylePrefix}_background_color`),
+
+      ...displayModeStyle({ value, prefix: stylePrefix }),
+      ...spacingStyle,
+    },
+    additionalProps: {
+      action: {
+        identifier: actionIdentifier,
+        flavour: actionAssetFlavour,
+      },
+      focusedStyles: {
+        backgroundColor: value(`${stylePrefix}_focused_background_color`),
+        borderColor: value(`${stylePrefix}_focused_border_color`),
+      },
+      testID,
+    },
+    elements: compact([
+      Asset({
+        prefix: stylePrefix,
+        value,
+        testID,
+      }),
+      Spacer(),
+      TextLabelsContainer({
+        prefix: stylePrefix,
+        value,
+        actionIdentifier,
+        testID,
+      }),
+    ]),
+    data: [
+      {
+        func: (x) => x,
+        args: [],
+        propName: "item",
+      },
+    ],
+  };
+};

package/Components/MasterCell/DefaultComponents/mobile/MobileActionButtons/ButtonContainerView.ts

@@ -0,0 +1,23 @@
+type Props = {
+  style: Record<string, unknown>;
+  contentStyle: Record<string, unknown>;
+  elements: Array<Record<string, unknown>>;
+};
+
+export const ButtonContainerView = ({
+  style,
+  contentStyle,
+  elements,
+}: Props) => {
+  return {
+    type: "View",
+    style,
+    elements: [
+      {
+        type: "View",
+        style: contentStyle,
+        elements,
+      },
+    ],
+  };
+};

package/Components/MasterCell/DefaultComponents/mobile/MobileActionButtons/Spacer.ts

@@ -0,0 +1,16 @@
+type Props = {
+  enabled?: boolean;
+};
+
+export const Spacer = ({ enabled = false }: Props = {}) => {
+  if (!enabled) {
+    return null;
+  }
+
+  return {
+    type: "View",
+    style: {
+      flex: 1,
+    },
+  };
+};

package/Components/MasterCell/DefaultComponents/mobile/MobileActionButtons/TextLabel.ts

@@ -0,0 +1,67 @@
+import { Platform } from "react-native";
+
+import { toNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/numberUtils";
+
+type Props = {
+  prefix: string;
+  value: Function;
+  actionIdentifier: string;
+  testID?: string;
+};
+
+export const TextLabel = ({
+  prefix,
+  value,
+  actionIdentifier,
+  testID,
+}: Props) => {
+  if (!value(`${prefix}_label_enabled`)) {
+    return null;
+  }
+
+  return {
+    type: "Text",
+    style: {
+      color: value(`${prefix}_font_color`),
+      fontSize: toNumberWithDefaultZero(value(`${prefix}_font_size`)),
+      lineHeight: toNumberWithDefaultZero(value(`${prefix}_line_height`)),
+      marginTop: toNumberWithDefaultZero(value(`${prefix}_margin_top`)),
+      marginRight: toNumberWithDefaultZero(value(`${prefix}_margin_right`)),
+      marginBottom: toNumberWithDefaultZero(value(`${prefix}_margin_bottom`)),
+      marginLeft: toNumberWithDefaultZero(value(`${prefix}_margin_left`)),
+      fontFamily:
+        Platform.OS === "ios"
+          ? value(`${prefix}_ios_font_family`)
+          : value(`${prefix}_android_font_family`),
+      letterSpacing: toNumberWithDefaultZero(
+        Platform.OS === "ios"
+          ? value(`${prefix}_ios_letter_spacing`)
+          : value(`${prefix}_android_letter_spacing`)
+      ),
+    },
+    data: [
+      {
+        func: (entry) => entry,
+        args: [],
+        propName: "entry",
+      },
+    ],
+    additionalProps: {
+      label: {
+        context: actionIdentifier,
+        name: "label_1",
+      },
+      normalStyles: {
+        color: value(`${prefix}_font_color`),
+      },
+      focusedStyles: {
+        color: value(`${prefix}_focused_font_color`),
+      },
+      state: "default",
+      mobileActionRole: "label",
+      transformText: value(`${prefix}_text_transform`) || "default",
+      numberOfLines: value(`${prefix}_number_of_lines`),
+      testID: testID ? `${testID}-label` : undefined,
+    },
+  };
+};

package/Components/MasterCell/DefaultComponents/mobile/MobileActionButtons/TextLabelsContainer.ts

@@ -0,0 +1,32 @@
+import { compact } from "@applicaster/zapp-react-native-utils/cellUtils";
+
+import { TextLabel } from "./TextLabel";
+
+type Props = {
+  prefix: string;
+  value: Function;
+  actionIdentifier: string;
+  testID?: string;
+};
+
+export const TextLabelsContainer = ({
+  prefix,
+  value,
+  actionIdentifier,
+  testID,
+}: Props) => {
+  return {
+    type: "View",
+    additionalProps: {
+      mobileActionRole: "label_container",
+    },
+    elements: compact([
+      TextLabel({
+        prefix,
+        value,
+        actionIdentifier,
+        testID,
+      }),
+    ]),
+  };
+};