@applicaster/zapp-react-native-ui-components 15.1.4 → 16.0.0-alpha.1042942411

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

@@ -0,0 +1,129 @@
+import { compact } from "@applicaster/zapp-react-native-utils/cellUtils";
+import {
+  insertButtonsBetweenLabels,
+  insertButtonsBetweenLabelContainers,
+  mobileOverImagePositionStyles,
+} from "./utils";
+import { Button } from "./Button";
+import { buildActionButtonsModel } from "../../ActionButtonsCore/model";
+import { ViewStyle } from "react-native";
+
+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 {
+    container: { stacking, verticalGutter, horizontalGutter },
+  } = model;
+
+  const isVertical = stacking === "vertical";
+  const isOverImage = position === "over_image";
+  const gutter = isVertical ? verticalGutter : horizontalGutter;
+
+  const containerPaddings = {
+    paddingTop: model.container.margins.top,
+    paddingRight: model.container.margins.right,
+    paddingBottom: model.container.margins.bottom,
+    paddingLeft: model.container.margins.left,
+  };
+
+  const style = {
+    alignItems: "center",
+    ...(isOverImage
+      ? {
+          position: "absolute",
+          zIndex: 10,
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          ...mobileOverImagePositionStyles(
+            value(`${CONTAINER_PREFIX}_over_image_position`) as string
+          ),
+        }
+      : {}),
+  };
+
+  const contentStyle = {
+    ...containerPaddings,
+    flexDirection: isVertical ? "column" : "row",
+    width: isVertical ? "100%" : undefined,
+    alignSelf: !isOverImage ? model.container.horizontalAlign : undefined,
+    alignItems: model.container.horizontalAlign,
+  };
+
+  const elements = compact(
+    model.buttons.map(({ renderIndex, specificPrefix, stylePrefix }) => {
+      const isNotLast = renderIndex < model.buttons.length - 1;
+
+      const spacingStyle: ViewStyle = {
+        [isVertical ? "marginBottom" : "marginRight"]: isNotLast ? gutter : 0,
+      };
+
+      const button = Button({
+        index: renderIndex,
+        value,
+        stylePrefix,
+        specificPrefix,
+        spacingStyle,
+        isVertical,
+      });
+
+      if (!button) return null;
+
+      return {
+        type: "DataProvider",
+        data: [
+          {
+            func: "identity",
+            args: [],
+            propName: "entry",
+          },
+        ],
+        elements: [button],
+      };
+    })
+  );
+
+  return {
+    type: "ButtonContainerView",
+    style: style,
+    additionalProps: {
+      contentStyle,
+    },
+    elements,
+  };
+};
+
+export { insertButtonsBetweenLabels, insertButtonsBetweenLabelContainers };

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

@@ -0,0 +1,123 @@
+import {
+  insertButtonsBetweenLabelContainers,
+  insertButtonsBetweenLabels,
+  mobileOverImagePositionStyles,
+} from "..";
+
+describe("mobile action insertion helpers", () => {
+  const slots = [
+    { name: "text_label_1", element: { type: "View", id: "text_label_1" } },
+    { name: "text_label_2", element: { type: "View", id: "text_label_2" } },
+  ];
+
+  const labels = slots.map((slot) => slot.element);
+  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,
+      slots
+    );
+
+    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,
+      slots
+    );
+
+    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,238 @@
+import {
+  insertBetweenLabelContainers,
+  insertBetweenLabels,
+} from "../../../ActionButtonsCore/placement";
+import { toNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/numberUtils";
+import { Platform } from "react-native";
+
+export const insertButtonsBetweenLabels = (
+  configuration: Record<string, unknown>,
+  buttons,
+  slots = [] // { name, element } per canonical text label slot
+) =>
+  insertBetweenLabels(
+    {
+      position: configuration?.mobile_buttons_container_position as
+        | string
+        | undefined,
+      allowOnTop: false,
+      appendWhenMissing: false,
+    },
+    buttons,
+    slots
+  );
+
+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,
+      };
+  }
+};
+
+export function getContentDirection(alignment = "left") {
+  switch (alignment) {
+    case "right":
+      return "row-reverse";
+    case "above":
+      return "column";
+    case "below":
+      return "column-reverse";
+    case "left":
+    default:
+      return "row";
+  }
+}
+
+export function getContentsAlignment(alignment = "center", direction = "left") {
+  switch (alignment) {
+    case "left":
+      return direction === "left" ? "flex-start" : "flex-end";
+    case "right":
+      return direction === "left" ? "flex-end" : "flex-start";
+    case "center":
+    default:
+      return "center";
+  }
+}
+
+export function resolveLabelText(label) {
+  if (typeof label === "string") {
+    return label;
+  }
+
+  return label?.label_1 || "";
+}
+
+export function buildLegacySelection(item, actionContext) {
+  // Some state are not array. In this case we fallback to the default value provided by the action or false
+  const defaultIsSelected = Array.isArray(actionContext?.state)
+    ? (actionContext?.state || []).includes(item)
+    : false;
+
+  return actionContext?.masterCell?.isSelected
+    ? actionContext?.masterCell?.isSelected(item)
+    : defaultIsSelected;
+}
+
+export const getMarginStyles = (value) => ({
+  marginTop: toNumberWithDefaultZero(value("margin_top")),
+  marginRight: toNumberWithDefaultZero(value("margin_right")),
+  marginBottom: toNumberWithDefaultZero(value("margin_bottom")),
+  marginLeft: toNumberWithDefaultZero(value("margin_left")),
+});
+
+export const getPaddingStyles = (value) => ({
+  paddingTop: toNumberWithDefaultZero(value("padding_top")),
+  paddingRight: toNumberWithDefaultZero(value("padding_right")),
+  paddingBottom: toNumberWithDefaultZero(value("padding_bottom")),
+  paddingLeft: toNumberWithDefaultZero(value("padding_left")),
+});
+
+export const getBorderStyles = (value) => ({
+  borderWidth: toNumberWithDefaultZero(value("border_size")),
+  borderRadius: toNumberWithDefaultZero(value("corner_radius")),
+  borderColor: value("border_color"),
+});
+
+export const getPressableStyles = (value) => ({
+  ...getMarginStyles(value),
+  ...getPaddingStyles(value),
+  ...getBorderStyles(value),
+  backgroundColor: value("background_color"),
+});
+
+export const getAssetStyles = (value) => ({
+  ...getMarginStyles((suffix) => value(`asset_${suffix}`)),
+  width: toNumberWithDefaultZero(value("asset_width")),
+  height: toNumberWithDefaultZero(value("asset_height")),
+  backgroundColor: "transparent",
+});
+
+export const getTextLabelStyles = (value) => ({
+  color: value("font_color"),
+  fontSize: toNumberWithDefaultZero(value("font_size")),
+  lineHeight: toNumberWithDefaultZero(value("line_height")),
+  ...getMarginStyles(value),
+  fontFamily:
+    Platform.OS === "ios"
+      ? value("ios_font_family")
+      : value("android_font_family"),
+  letterSpacing: toNumberWithDefaultZero(
+    Platform.OS === "ios"
+      ? value("ios_letter_spacing")
+      : value("android_letter_spacing")
+  ),
+});
+
+/** retrieves asset uri for a given flavour,
+ * if flavour is not provided, returns the default asset from `asset` or selected state asset (if available)
+ * asset can be:
+ *  provided as asset path,
+ *  provided as [default || flavour_1, alternative || flavour_2] array.
+ * mobileButtonAssets asset can be:
+ *  provided as asset path,
+ *  provided as [default || flavour_1, alternative || flavour_2] array,
+ *  provided as [[] as flavour_1, [] as flavour_2] array for multiple flavours, where each flavour can be either a path or [default, alternative] array,
+ *  provided as a React component accepting flavour as prop.
+ *
+ * isActive reflect the state of the action and can be used to render different asset for active/inactive state if asset is provided as array
+ *
+ * */
+export const selectByAssetFlavour = (
+  actionState: {
+    asset?: string | [string, string] | CellActionAssetComponent;
+    mobileButtonAssets?:
+      | [string, string]
+      | [string, string][]
+      | CellActionAssetComponent;
+  },
+  flavour?: "flavour_1" | "flavour_2",
+  isActive?: boolean
+): string | CellActionAssetComponent => {
+  if (actionState.mobileButtonAssets) {
+    if (typeof actionState.mobileButtonAssets === "function") {
+      return actionState.mobileButtonAssets;
+    }
+
+    if (flavour) {
+      if (flavour === "flavour_1") {
+        if (typeof actionState.mobileButtonAssets[0] === "string") {
+          return actionState.mobileButtonAssets[0];
+        }
+
+        if (Array.isArray(actionState.mobileButtonAssets[0])) {
+          return actionState.mobileButtonAssets[0][isActive ? 1 : 0];
+        }
+
+        return actionState.mobileButtonAssets[0];
+      } else if (flavour === "flavour_2") {
+        if (typeof actionState.mobileButtonAssets[1] === "string") {
+          return actionState.mobileButtonAssets[1];
+        }
+
+        if (Array.isArray(actionState.mobileButtonAssets[1])) {
+          return actionState.mobileButtonAssets[1][isActive ? 1 : 0];
+        }
+
+        return actionState.mobileButtonAssets[1];
+      }
+    }
+
+    return Array.isArray(actionState.mobileButtonAssets[0])
+      ? actionState.mobileButtonAssets[0][isActive ? 1 : 0]
+      : actionState.mobileButtonAssets[0];
+  } else {
+    if (typeof actionState?.asset === "function") {
+      return actionState.asset;
+    }
+
+    return typeof actionState?.asset === "string"
+      ? actionState.asset
+      : actionState.asset[isActive ? 1 : 0];
+  }
+};

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

@@ -1,31 +1,17 @@
-import * as R from "ramda";
-import { toNumber } from "@applicaster/zapp-react-native-utils/numberUtils";
-
 const Image = "Image";
 
 type Props = {
-  prefix: string;
-  value: Function;
   pluginIdentifier: string;
+  style?: Record<string, unknown>;
 };
 
-export const Asset = ({ prefix, value, pluginIdentifier }: Props) => {
-  if (!value(`${prefix}_asset_enabled`)) return null;
-
+export const Asset = ({ pluginIdentifier, style }: Props) => {
   return {
     type: Image,
-    style: {
-      marginTop: value(`${prefix}_asset_margin_top`),
-      marginRight: value(`${prefix}_asset_margin_right`),
-      marginBottom: value(`${prefix}_asset_margin_bottom`),
-      marginLeft: value(`${prefix}_asset_margin_left`),
-
-      width: toNumber(value(`${prefix}_asset_width`)) || 40,
-      height: toNumber(value(`${prefix}_asset_height`)) || 40,
-    },
+    style: style,
     data: [
       {
-        func: R.identity,
+        func: "identity",
         args: [],
         propName: "entry",
       },

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

@@ -1,13 +1,14 @@
-import {
-  toNumberWithDefaultZero,
-  toNumberWithDefault,
-} from "@applicaster/zapp-react-native-utils/numberUtils";
-
 import { compact } from "@applicaster/zapp-react-native-utils/cellUtils";
 
 import { TextLabelsContainer } from "./TextLabelsContainer";
 import { Asset } from "./Asset";
 import { Spacer } from "./Spacer";
+import {
+  getAssetStyles,
+  getBorderStyles,
+  getDisplayModeStyles,
+  getPaddingStyles,
+} from "./utils";
 
 const compactAndSort = ({ value, prefix, asset, labels, spacer }) => {
   const assetAlignment = value(`${prefix}_asset_alignment`) || "left";
@@ -19,31 +20,6 @@ const compactAndSort = ({ value, prefix, asset, labels, spacer }) => {
   return compact([asset, labels]);
 };
 
-const displayMode = ({ value, prefix }) => {
-  const mode = value(`${prefix}_display_mode`) || "dynamic";
-
-  const width = toNumberWithDefault(
-    240,
-    value(`${prefix}_fixed_and_fixed_center_width`)
-  );
-
-  if (mode === "fixed") {
-    return {
-      width,
-    };
-  }
-
-  if (mode === "fixed_center") {
-    return {
-      width,
-      justifyContent: "center",
-    };
-  }
-
-  // dynamic mode
-  return {};
-};
-
 type Props = {
   prefix: string;
   value: Function;
@@ -63,55 +39,30 @@ export const Button = ({
 }: Props) => {
   if (!value(`${suffixId}_button_enabled`)) return null;
 
+  const getValue = (suffix: string) => value(`${prefix}_${suffix}`);
+
   return {
-    type: "FocusableView", // container
+    type: "TvActionButton",
     style: {
       flexDirection: "row",
       alignItems: "center",
       display: "flex",
-
-      paddingTop: toNumberWithDefaultZero(
-        value(`${prefix}_background_padding_top`)
-      ),
-      paddingRight: toNumberWithDefaultZero(
-        value(`${prefix}_background_padding_right`)
-      ),
-      paddingBottom: toNumberWithDefaultZero(
-        value(`${prefix}_background_padding_bottom`)
-      ),
-      paddingLeft: toNumberWithDefaultZero(
-        value(`${prefix}_background_padding_left`)
-      ),
-
-      // BORDER
-      borderRadius: toNumberWithDefaultZero(
-        value(`${prefix}_background_corner_radius`)
-      ),
-      borderWidth: value(`${prefix}_background_border_thickness`),
-      borderStyle: "solid",
-      // BORDER
-
-      ...displayMode({ value, prefix }),
+      ...getPaddingStyles((suffix) => getValue(`background_${suffix}`)),
+      ...getBorderStyles((suffix) => getValue(`background_${suffix}`)),
+      ...getDisplayModeStyles(getValue),
     },
-    data: [
-      {
-        func: (x) => x,
-        args: [],
-        propName: "item",
-      },
-    ],
     elements: compactAndSort({
       prefix,
       value,
-      asset: Asset({
-        prefix,
-        value,
-        pluginIdentifier,
-      }),
+      asset: getValue("asset_enabled")
+        ? Asset({
+            style: getAssetStyles((suffix) => getValue(`asset_${suffix}`)),
+            pluginIdentifier,
+          })
+        : null,
       labels: TextLabelsContainer({
-        prefix,
-        value,
-        platformValue,
+        value: getValue,
+        platformValue: (suffix: string) => platformValue(`${prefix}_${suffix}`),
         pluginIdentifier,
       }),
       spacer: Spacer(),
@@ -119,12 +70,12 @@ export const Button = ({
     additionalProps: {
       suffixId,
       focusedStyles: {
-        backgroundColor: value(`${prefix}_focused_background_color`),
-        borderColor: value(`${prefix}_focused_background_border_color`),
+        backgroundColor: getValue("focused_background_color"),
+        borderColor: getValue("focused_background_border_color"),
       },
       normalStyles: {
-        backgroundColor: value(`${prefix}_background_color`),
-        borderColor: value(`${prefix}_background_border_color`),
+        backgroundColor: getValue("background_color"),
+        borderColor: getValue("background_border_color"),
       },
       pluginIdentifier,
       preferredFocus,