@applicaster/zapp-react-native-ui-components 15.0.0-alpha.1257410812 → 15.0.0-alpha.1305114721

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

@@ -0,0 +1,104 @@
+import { compact } from "@applicaster/zapp-react-native-utils/cellUtils";
+import {
+  insertButtonsBetweenLabels,
+  insertButtonsBetweenLabelContainers,
+  mobileOverImagePositionStyles,
+} from "./utils";
+import { Button } from "./Button";
+import { ButtonContainerView } from "./ButtonContainerView";
+import { buildActionButtonsModel } from "../../ActionButtonsCore/model";
+
+const CONTAINER_PREFIX = "mobile_buttons_container";
+const BUTTON_PREFIX = "mobile_button";
+
+type MobileActionButtonsProps = {
+  value: (key: string) => unknown;
+  configuration: Record<string, unknown>;
+  placement: "labels" | "over_image"; // Indicates where the component was placed, to apply specific display rules
+};
+
+export const MobileActionButtons = ({
+  value,
+  configuration,
+  placement,
+}: MobileActionButtonsProps) => {
+  const position = value(`${CONTAINER_PREFIX}_position`);
+
+  if (placement === "labels" && position === "over_image") {
+    return null;
+  }
+
+  if (placement === "over_image" && position !== "over_image") {
+    return null;
+  }
+
+  const model = buildActionButtonsModel({
+    configuration,
+    value,
+    containerPrefix: CONTAINER_PREFIX,
+    buttonPrefix: BUTTON_PREFIX,
+  });
+
+  if (!model) {
+    return null;
+  }
+
+  const elements = compact(
+    model.buttons.map(({ renderIndex, specificPrefix, stylePrefix }) => {
+      const isNotLast = renderIndex < model.buttons.length - 1;
+
+      const {
+        container: { stacking, verticalGutter, horizontalGutter },
+      } = model;
+
+      const isVertical = stacking === "vertical";
+      const gutter = isVertical ? verticalGutter : horizontalGutter;
+
+      const spacingStyle = {
+        [isVertical ? "marginBottom" : "marginRight"]: isNotLast ? gutter : 0,
+      };
+
+      return Button({
+        index: renderIndex,
+        value,
+        stylePrefix,
+        specificPrefix,
+        spacingStyle,
+      });
+    })
+  );
+
+  return ButtonContainerView({
+    style: {
+      alignItems: "center",
+      ...(placement === "over_image"
+        ? {
+            position: "absolute",
+            zIndex: 10,
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            ...mobileOverImagePositionStyles(
+              value(`${CONTAINER_PREFIX}_over_image_position`) as string
+            ),
+          }
+        : {}),
+    },
+    contentStyle: {
+      flexDirection: model.container.stacking === "vertical" ? "column" : "row",
+      alignSelf:
+        placement !== "over_image"
+          ? model.container.horizontalAlign
+          : undefined,
+      alignItems: model.container.horizontalAlign,
+      marginTop: model.container.margins.top,
+      marginRight: model.container.margins.right,
+      marginBottom: model.container.margins.bottom,
+      marginLeft: model.container.margins.left,
+    },
+    elements,
+  });
+};
+
+export { insertButtonsBetweenLabels, insertButtonsBetweenLabelContainers };

package/Components/MasterCell/DefaultComponents/mobile/MobileActionButtons/utils/__tests__/insertButtons.test.ts

@@ -0,0 +1,118 @@
+import {
+  insertButtonsBetweenLabelContainers,
+  insertButtonsBetweenLabels,
+  mobileOverImagePositionStyles,
+} from "..";
+
+describe("mobile action insertion helpers", () => {
+  const labels = [{ name: "text_label_1" }, { name: "text_label_2" }];
+  const buttons = { type: "View", name: "buttons" };
+
+  it("inserts label buttons below target label", () => {
+    const result = insertButtonsBetweenLabels(
+      { mobile_buttons_container_position: "below_text_label_1" },
+      buttons,
+      labels
+    );
+
+    expect(result).toEqual([labels[0], buttons, labels[1]]);
+  });
+
+  it("returns labels unchanged when the flat-label target is unknown", () => {
+    const result = insertButtonsBetweenLabels(
+      { mobile_buttons_container_position: "unknown" },
+      buttons,
+      labels
+    );
+
+    expect(result).toEqual([labels[0], labels[1]]);
+  });
+
+  it("inserts label-container buttons below nested target", () => {
+    const labelContainers = [
+      {
+        elements: [{ elements: [{ name: "top_text_label_1" }] }],
+      },
+    ];
+
+    const result = insertButtonsBetweenLabelContainers(
+      { mobile_buttons_container_position: "top_text_label_1" },
+      buttons,
+      labelContainers
+    );
+
+    expect(result).toEqual([
+      {
+        elements: [{ elements: [{ name: "top_text_label_1" }, buttons] }],
+      },
+    ]);
+  });
+
+  it("inserts label-container buttons below direct target in two-level structure", () => {
+    const labelContainers = [
+      {
+        elements: [{ name: "top_text_label_1" }],
+      },
+    ];
+
+    const result = insertButtonsBetweenLabelContainers(
+      { mobile_buttons_container_position: "top_text_label_1" },
+      buttons,
+      labelContainers
+    );
+
+    expect(result).toEqual([
+      {
+        elements: [{ name: "top_text_label_1" }, buttons],
+      },
+    ]);
+  });
+
+  it("appends container buttons into the last container when target is unknown", () => {
+    const labelContainers = [
+      {
+        elements: [{ elements: [{ name: "top_text_label_1" }] }],
+      },
+      {
+        elements: [{ elements: [{ name: "bottom_text_label_1" }] }],
+      },
+    ];
+
+    const result = insertButtonsBetweenLabelContainers(
+      { mobile_buttons_container_position: "unknown" },
+      buttons,
+      labelContainers
+    );
+
+    expect(result).toEqual([
+      labelContainers[0],
+      {
+        elements: [...labelContainers[1].elements, buttons],
+      },
+    ]);
+  });
+});
+
+describe("mobileOverImagePositionStyles", () => {
+  it("maps bottom left anchor to absolute positioning", () => {
+    const result = mobileOverImagePositionStyles("bottom_left");
+
+    expect(result).toEqual({
+      justifyContent: "flex-end",
+      alignItems: "flex-start",
+    });
+  });
+
+  it("maps center anchor to absolute center positioning", () => {
+    const result = mobileOverImagePositionStyles("center");
+
+    expect(result).toEqual({
+      justifyContent: "center",
+      alignItems: "center",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+    });
+  });
+});

package/Components/MasterCell/DefaultComponents/mobile/MobileActionButtons/utils/index.ts

@@ -0,0 +1,73 @@
+import {
+  insertBetweenLabelContainers,
+  insertBetweenLabels,
+} from "../../../ActionButtonsCore/placement";
+
+export const insertButtonsBetweenLabels = (
+  configuration: Record<string, unknown>,
+  buttons,
+  labels = []
+) =>
+  insertBetweenLabels(
+    {
+      position: configuration?.mobile_buttons_container_position as
+        | string
+        | undefined,
+      allowOnTop: false,
+      appendWhenMissing: false,
+    },
+    buttons,
+    labels // "text_label_1", "text_label_2", "text_label_3", "text_label_4"
+  );
+
+export const insertButtonsBetweenLabelContainers = (
+  configuration: Record<string, unknown>,
+  buttons,
+  labelContainers = []
+) =>
+  insertBetweenLabelContainers(
+    {
+      position: configuration?.mobile_buttons_container_position as
+        | string
+        | undefined,
+      allowOnTop: false,
+      appendWhenMissing: true,
+    },
+    buttons,
+    labelContainers // top_label_1, top_label_2, bottom_label_1, bottom_label_2, etc.
+  );
+
+export const mobileOverImagePositionStyles = (position: string) => {
+  switch (position) {
+    case "top_left":
+      return {
+        justifyContent: "flex-start",
+        alignItems: "flex-start",
+      };
+    case "top_right":
+      return {
+        justifyContent: "flex-start",
+        alignItems: "flex-end",
+      };
+    case "bottom_left":
+      return {
+        justifyContent: "flex-end",
+        alignItems: "flex-start",
+      };
+    case "bottom_right":
+      return {
+        justifyContent: "flex-end",
+        alignItems: "flex-end",
+      };
+    case "center":
+    default:
+      return {
+        justifyContent: "center",
+        alignItems: "center",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+      };
+  }
+};

package/Components/MasterCell/DefaultComponents/tv/TvActionButtons/__tests__/index.test.ts

@@ -0,0 +1,86 @@
+import { TvActionButtons } from "..";
+
+describe("TvActionButtons", () => {
+  const baseConfiguration = {
+    tv_buttons_container_buttons_enabled: true,
+    tv_buttons_container_align: "middle",
+    tv_buttons_container_margin_top: 1,
+    tv_buttons_container_margin_right: 2,
+    tv_buttons_container_margin_bottom: 3,
+    tv_buttons_container_margin_left: 4,
+    tv_buttons_container_horizontal_gutter: 10,
+    tv_buttons_container_independent_styles: false,
+    tv_buttons_button_1_button_enabled: true,
+    tv_buttons_button_1_assign_action: "action_1",
+    tv_buttons_button_1_background_padding_top: 11,
+    tv_buttons_button_1_background_padding_right: 12,
+    tv_buttons_button_1_background_padding_bottom: 13,
+    tv_buttons_button_1_background_padding_left: 14,
+    tv_buttons_button_3_button_enabled: true,
+    tv_buttons_button_3_assign_action: "action_3",
+    tv_buttons_button_3_background_padding_top: 31,
+    tv_buttons_button_3_background_padding_right: 32,
+    tv_buttons_button_3_background_padding_bottom: 33,
+    tv_buttons_button_3_background_padding_left: 34,
+  };
+
+  const platformValue = jest.fn();
+
+  it("renders sparse enabled slots with slot-based action lookup and ids", () => {
+    const value = (key) => baseConfiguration[key];
+
+    const result = TvActionButtons({
+      value,
+      platformValue,
+      configuration: baseConfiguration,
+      state: "focused",
+      skipButtons: false,
+    });
+
+    expect(result.style.justifyContent).toBe("center");
+    expect(result.additionalProps.buttonsCount).toBe(2);
+    expect(result.elements).toHaveLength(2);
+
+    expect(result.elements[0].additionalProps.pluginIdentifier).toBe(
+      "action_1"
+    );
+
+    expect(result.elements[0].additionalProps.suffixId).toBe(
+      "tv_buttons_button_1"
+    );
+
+    expect(result.elements[0].additionalProps.preferredFocus).toBe(true);
+
+    expect(result.elements[1].additionalProps.pluginIdentifier).toBe(
+      "action_3"
+    );
+
+    expect(result.elements[1].additionalProps.suffixId).toBe(
+      "tv_buttons_button_3"
+    );
+
+    expect(result.elements[1].additionalProps.preferredFocus).toBe(false);
+  });
+
+  it("keeps shared button styles from slot 1 while preserving slot 3 identity", () => {
+    const value = (key) => baseConfiguration[key];
+
+    const result = TvActionButtons({
+      value,
+      platformValue,
+      configuration: baseConfiguration,
+      state: "focused",
+      skipButtons: false,
+    });
+
+    expect(result.elements[1].style.paddingTop).toBe(11);
+
+    expect(result.elements[1].additionalProps.pluginIdentifier).toBe(
+      "action_3"
+    );
+
+    expect(result.elements[1].additionalProps.suffixId).toBe(
+      "tv_buttons_button_3"
+    );
+  });
+});

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

@@ -1,12 +1,6 @@
-import { times } from "@applicaster/zapp-react-native-utils/utils";
-import { toNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/numberUtils";
-
 import { Button } from "./Button";
-import {
-  getButtonsCount,
-  memoizedGetPluginIdentifier,
-  mapSelfAlignment,
-} from "./utils";
+import { memoizedGetPluginIdentifier } from "./utils";
+import { buildActionButtonsModel } from "../../ActionButtonsCore/model";
 
 import { compact } from "@applicaster/zapp-react-native-utils/cellUtils";
 import { PREFIX, BUTTON_PREFIX } from "./const";
@@ -16,11 +10,9 @@ export {
   insertButtonsBetweenLabelContainers,
 } from "./utils";
 
-const buttonId = (index: number) => `${BUTTON_PREFIX}_${index}`;
-
 type Props = {
-  value: Function;
-  platformValue: Function;
+  value: (key: string) => unknown;
+  platformValue: (key: string) => unknown;
   configuration: Record<string, unknown>;
   state: string;
   skipButtons: boolean;
@@ -33,62 +25,53 @@ export const TvActionButtons = ({
   state,
   skipButtons,
 }: Props) => {
-  if (skipButtons || !value(`${PREFIX}_container_buttons_enabled`)) {
+  if (skipButtons) {
     return null;
   }
 
-  const buttonsCount = getButtonsCount(configuration, PREFIX);
+  const model = buildActionButtonsModel({
+    configuration,
+    value,
+    containerPrefix: `${PREFIX}_container`,
+    buttonPrefix: BUTTON_PREFIX,
+  });
 
-  if (buttonsCount <= 0) {
+  if (!model) {
     return null;
   }
 
-  const independentStyles = value(`${PREFIX}_container_independent_styles`);
-
   return {
     type: "ButtonContainerView",
     style: {
       flexDirection: "row",
-
-      justifyContent: mapSelfAlignment(value(`${PREFIX}_container_align`)),
-
-      marginTop: toNumberWithDefaultZero(
-        value(`${PREFIX}_container_margin_top`)
-      ),
-      marginRight: toNumberWithDefaultZero(
-        value(`${PREFIX}_container_margin_right`)
-      ),
-      marginBottom: toNumberWithDefaultZero(
-        value(`${PREFIX}_container_margin_bottom`)
-      ),
-      marginLeft: toNumberWithDefaultZero(
-        value(`${PREFIX}_container_margin_left`)
-      ),
+      justifyContent: model.container.horizontalAlign,
+      marginTop: model.container.margins.top,
+      marginRight: model.container.margins.right,
+      marginBottom: model.container.margins.bottom,
+      marginLeft: model.container.margins.left,
     },
     additionalProps: {
-      horizontalGutter: toNumberWithDefaultZero(
-        value(`${PREFIX}_container_horizontal_gutter`)
-      ),
+      horizontalGutter: model.container.horizontalGutter,
       state,
-      buttonsCount,
+      buttonsCount: model.buttonsCount,
     },
     elements: compact(
-      times((index) => {
-        const prefixSpecificButton = buttonId(index + 1);
-
-        return Button({
-          prefix: independentStyles ? prefixSpecificButton : buttonId(1),
-          value,
-          platformValue,
-          pluginIdentifier: memoizedGetPluginIdentifier(
-            configuration,
-            PREFIX,
-            index
-          ),
-          suffixId: prefixSpecificButton,
-          preferredFocus: index === 0,
-        });
-      }, buttonsCount)
+      model.buttons.map(
+        ({ slot, renderIndex, specificPrefix, stylePrefix }) => {
+          return Button({
+            prefix: stylePrefix,
+            value,
+            platformValue,
+            pluginIdentifier: memoizedGetPluginIdentifier(
+              configuration,
+              PREFIX,
+              slot
+            ) as string,
+            suffixId: specificPrefix,
+            preferredFocus: renderIndex === 0,
+          });
+        }
+      )
     ),
   };
 };