@applicaster/zapp-react-native-ui-components 15.0.0-rc.13 → 15.0.0-rc.132

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,
-  getPluginIdentifier,
-  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,58 +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: getPluginIdentifier(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,
+          });
+        }
+      )
     ),
   };
 };

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

@@ -1,53 +1,123 @@
-import { getPluginIdentifier } from "..";
+import { getPluginIdentifier, memoizedGetPluginIdentifier } from "..";
 
 describe("getPluginIdentifier", () => {
   const prefix = "tv_buttons";
 
-  it("get first plugin identifier", () => {
+  beforeAll(() => {
+    memoizedGetPluginIdentifier.clear();
+  });
+
+  it("returns the requested slot action identifier", () => {
+    expect.assertions(2);
+
     const configuration = {
-      tv_buttons_button_1_other: "value",
       tv_buttons_button_1_assign_action:
         "tv_buttons_button_1_assign_action_value",
-      tv_buttons_button_2_assign_action:
-        "tv_buttons_button_2_assign_action_value",
+      tv_buttons_button_3_assign_action:
+        "tv_buttons_button_3_assign_action_value",
     };
 
-    const index = 0;
+    const slot = 3;
+    const result = getPluginIdentifier(configuration, prefix, slot);
 
-    const result = getPluginIdentifier(configuration, prefix, index);
+    const memoizedResult = memoizedGetPluginIdentifier(
+      configuration,
+      prefix,
+      slot
+    );
 
-    expect(result).toEqual(configuration.tv_buttons_button_1_assign_action);
+    expect(result).toEqual(configuration.tv_buttons_button_3_assign_action);
+    expect(memoizedResult).toEqual(result);
   });
 
-  it("get second plugin identifier", () => {
+  it("returns undefined for a disabled or missing slot", () => {
+    expect.assertions(2);
+
     const configuration = {
-      tv_buttons_button_1_other: "value_1",
-      tv_buttons_button_1_assign_action:
-        "tv_buttons_button_1_assign_action_value",
-      tv_buttons_button_2_other: "value_2",
-      tv_buttons_button_2_assign_action:
-        "tv_buttons_button_2_assign_action_value",
+      tv_buttons_button_1_assign_action: "tv_buttons_button_1_assign_action",
     };
 
-    const index = 1;
+    const slot = 2;
+    const result = getPluginIdentifier(configuration, prefix, slot);
 
-    const result = getPluginIdentifier(configuration, prefix, index);
+    const memoizedResult = memoizedGetPluginIdentifier(
+      configuration,
+      prefix,
+      slot
+    );
 
-    expect(result).toEqual(configuration.tv_buttons_button_2_assign_action);
+    expect(result).toBeUndefined();
+    expect(memoizedResult).toEqual(result);
+  });
+
+  it("returns undefined for empty string values", () => {
+    expect.assertions(2);
+
+    const configuration = {
+      tv_buttons_button_2_assign_action: "",
+    };
+
+    const slot = 2;
+
+    const result = getPluginIdentifier(configuration, prefix, slot);
+
+    const memoizedResult = memoizedGetPluginIdentifier(
+      configuration,
+      prefix,
+      slot
+    );
+
+    expect(result).toBeUndefined();
+    expect(memoizedResult).toBeUndefined();
   });
 
-  it("get undefined if no assign_actions at all", () => {
-    const configuration = {};
+  it("returns undefined for negative slots", () => {
+    expect.assertions(2);
+
+    const configuration = {
+      tv_buttons_button_1_assign_action: "a",
+      tv_buttons_button_2_assign_action: "b",
+    };
 
-    const index = 0;
+    const slot = -1;
+    const result = getPluginIdentifier(configuration, prefix, slot);
 
-    const result = getPluginIdentifier(configuration, prefix, index);
+    const memoizedResult = memoizedGetPluginIdentifier(
+      configuration,
+      prefix,
+      slot
+    );
 
     expect(result).toBeUndefined();
+    expect(memoizedResult).toBeUndefined();
+  });
+
+  it("handles non-string values by returning the configured slot value", () => {
+    expect.assertions(2);
+
+    const configuration = {
+      tv_buttons_button_2_assign_action: true,
+    };
+
+    const slot = 2;
+    const result = getPluginIdentifier(configuration, prefix, slot);
+
+    const memoizedResult = memoizedGetPluginIdentifier(
+      configuration,
+      prefix,
+      slot
+    );
+
+    expect(result).toBe(true);
+    expect(memoizedResult).toBe(true);
   });
 });
 
-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 +125,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 requested slot even when values are identical", () => {
+    expect.assertions(2);
 
-    const result = getPluginIdentifier(configuration, prefix, index);
+    const slot = 1;
+    const result = getPluginIdentifier(configuration, prefix, slot);
+
+    const memoizedResult = memoizedGetPluginIdentifier(
+      configuration,
+      prefix,
+      slot
+    );
 
     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 slot when values are identical", () => {
+    expect.assertions(2);
+
+    const slot = 2;
+    const result = getPluginIdentifier(configuration, prefix, slot);
 
-    const result = getPluginIdentifier(configuration, prefix, index);
+    const memoizedResult = memoizedGetPluginIdentifier(
+      configuration,
+      prefix,
+      slot
+    );
 
     expect(result).toEqual(configuration.tv_buttons_button_2_assign_action);
+    expect(memoizedResult).toEqual(result);
   });
 });

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

@@ -1,173 +1,68 @@
-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";
+import { getEnabledButtonSlots } from "../../../ActionButtonsCore/selectors";
+import {
+  insertBetweenLabelContainers,
+  insertBetweenLabels,
+} from "../../../ActionButtonsCore/placement";
 
 export const getButtonsCount = (
   configuration: Record<string, unknown>,
   prefix: string
 ): number => {
-  const button1Key = `${prefix}_button_1_button_enabled`;
-  const button2Key = `${prefix}_button_2_button_enabled`;
-  const button3Key = `${prefix}_button_3_button_enabled`;
-
-  return R.toPairs(configuration).filter(
-    ([key, value]) =>
-      [button1Key, button2Key, button3Key].includes(key) && value
-  ).length;
+  return getEnabledButtonSlots(configuration, `${prefix}_button`).length;
 };
 
 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);
-
-        return matched ? value : undefined;
-      })
-  );
-};
-
-type Label = {
-  name: string;
-};
+  slot: number
+): string | undefined => {
+  const value = configuration[
+    `${prefix}_button_${slot}_assign_action`
+  ] as string;
 
-type LabelContainer = {
-  elements: Array<Label>;
+  return value == null || value === "" ? undefined : value;
 };
 
-type LabelExtraContainer = {
-  elements: Array<LabelContainer>;
-};
-
-const withButtons = (labelName, buttons, labels) => {
-  return labels.reduce((acc, label) => {
-    if (label.name === labelName) {
-      return [...acc, label, buttons];
-    }
-
-    return [...acc, label];
-  }, []);
-};
-
-const withButtonsInContainer = (labelName, buttons, views) => {
-  return views.map((view) => {
-    return {
-      ...view,
-      elements: view.elements.reduce((acc, label) => {
-        if (label.name === labelName) {
-          return [...acc, label, buttons];
-        }
-
-        return [...acc, label];
-      }, []),
-    };
-  });
-};
+export const memoizedGetPluginIdentifier = memoizee(getPluginIdentifier);
 
 export const insertButtonsBetweenLabels = (
   configuration: Record<string, unknown>,
   buttons,
-  labels: Label[] = []
-) => {
-  if (R.isNil(buttons)) {
-    return labels;
-  }
-
-  const position = R.pathOr(
-    undefined,
-    ["tv_buttons_container_position"],
-    configuration
+  labels = []
+) =>
+  insertBetweenLabels(
+    {
+      position: configuration.tv_buttons_container_position as
+        | string
+        | undefined,
+      allowOnTop: true,
+      appendWhenMissing: true,
+    },
+    buttons,
+    labels
   );
 
-  if (position === "on_top") {
-    return [buttons, ...labels];
-  }
-
-  const labelsWithButtons = withButtons(position, buttons, labels);
-
-  if (R.equals(labelsWithButtons, labels)) {
-    // put buttons after all labels by default
-    return [...labels, buttons];
-  }
-
-  return labelsWithButtons;
-};
-
 export const insertButtonsBetweenLabelContainers = (
   configuration: Record<string, unknown>,
   buttons,
-  labelContainers: Array<LabelExtraContainer> = []
-) => {
-  if (R.isNil(buttons)) {
-    return labelContainers;
-  }
-
-  if (R.isEmpty(labelContainers)) {
-    return [buttons];
-  }
-
-  const position = R.pathOr(
-    undefined,
-    ["tv_buttons_container_position"],
-    configuration
+  labelContainers = []
+) =>
+  insertBetweenLabelContainers(
+    {
+      position: configuration.tv_buttons_container_position as
+        | string
+        | undefined,
+      allowOnTop: true,
+      appendWhenMissing: true,
+    },
+    buttons,
+    labelContainers
   );
 
-  if (position === "on_top") {
-    const firstContainerLabels = R.lensPath([0, "elements"]);
-
-    return R.over(firstContainerLabels, R.prepend(buttons), labelContainers);
-  }
-
-  const labelContainersWithButtons = labelContainers.map((labelContainer) => {
-    return {
-      ...labelContainer,
-      elements: withButtonsInContainer(
-        position,
-        buttons,
-        labelContainer.elements
-      ),
-    };
-  });
-
-  if (R.equals(labelContainersWithButtons, labelContainers)) {
-    // put buttons in last container
-    const lastContainerLabels = R.lensPath([
-      labelContainers.length - 1,
-      "elements",
-    ]);
-
-    return R.over(lastContainerLabels, R.append(buttons), labelContainers);
-  }
-
-  return labelContainersWithButtons;
-};
-
-export const mapSelfAlignment = (horizontalPosition) => {
-  switch (horizontalPosition) {
-    case "left":
-      return "flex-start";
-    case "right":
-      return "flex-end";
-    case "center":
-      return "center";
-    default:
-      return "flex-start";
-  }
-};
-
 export const getTextTransform = (textTransform: string) => {
-  if (R.isNil(textTransform) || R.isEmpty(textTransform)) {
+  if (textTransform == null || textTransform === "") {
     return "none";
   }
 

package/Components/MasterCell/elementMapper.tsx

@@ -19,6 +19,7 @@ const focusableTypes = new Set([
   "View",
   "ButtonContainerView",
   "FocusableView",
+  "PressableView",
   "CollapsibleTextContainer",
   "BorderContainerView",
 ]);