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

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

@@ -1,10 +1,10 @@
-import { TextLabel } from "./TextLabel";
 import { compact } from "@applicaster/zapp-react-native-utils/cellUtils";
+import { getTextLabelStyles } from "./utils";
 
 const View = "View";
+const Text = "Text";
 
 export const TextLabelsContainer = ({
-  prefix,
   value,
   platformValue,
   pluginIdentifier,
@@ -14,21 +14,40 @@ export const TextLabelsContainer = ({
     style: {
       flexDirection: "column",
     },
-    elements: compact([
-      TextLabel({
-        prefix: `${prefix}_label_1`,
-        value,
-        platformValue,
-        pluginIdentifier,
-        name: "label_1",
-      }),
-      TextLabel({
-        prefix: `${prefix}_label_2`,
-        value,
-        platformValue,
-        pluginIdentifier,
-        name: "label_2",
-      }),
-    ]),
+    elements: compact(
+      ["label_1", "label_2"].map((name) => {
+        const getValue = (suffix: string) => value(`${name}_${suffix}`);
+
+        const getPlatformValue = (suffix: string) =>
+          platformValue(`${name}_${suffix}`);
+
+        return getValue("toggle")
+          ? {
+              type: Text,
+              style: getTextLabelStyles(getValue, getPlatformValue),
+              data: [
+                {
+                  func: "identity",
+                  args: [],
+                  propName: "entry",
+                },
+              ],
+              additionalProps: {
+                label: { context: pluginIdentifier, name },
+                numberOfLines: getValue("number_of_lines"),
+                transformText: getValue("text_transform"),
+                focusedStyles: {
+                  backgroundColor: getValue("focused_background_color"),
+                  color: getValue("focused_font_color"),
+                },
+                normalStyles: {
+                  backgroundColor: getValue("background_color"),
+                  color: getValue("font_color"),
+                },
+              },
+            }
+          : null;
+      })
+    ),
   };
 };

package/Components/MasterCell/DefaultComponents/tv/TvActionButtons/TvActionButton.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { ActionButtonController } from "../../ActionButtonsCore/components";
+import { FocusableView } from "../../FocusableView";
+
+type Props = Record<string, any> & {
+  children?: React.ReactNode;
+  style?: object;
+  entry?: any;
+};
+
+export function TvActionButton({
+  children,
+  pluginIdentifier,
+  style,
+  entry,
+  ...props
+}: Props) {
+  return (
+    <ActionButtonController pluginIdentifier={pluginIdentifier} entry={entry}>
+      {({ onPress }) => (
+        <FocusableView {...props} style={style} onPress={onPress}>
+          {children}
+        </FocusableView>
+      )}
+    </ActionButtonController>
+  );
+}

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

@@ -0,0 +1,89 @@
+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.type).toBe("ButtonContainerView");
+    expect(result.style.justifyContent).toBe("center");
+    expect(result.additionalProps.buttonsCount).toBe(2);
+    expect(result.elements).toHaveLength(2);
+    expect(result.elements[0].type).toBe("DataProvider");
+
+    expect(result.elements[0].data).toEqual([
+      {
+        func: "identity",
+        args: [],
+        propName: "entry",
+      },
+    ]);
+
+    const firstButton = result.elements[0].elements[0];
+    const secondButton = result.elements[1].elements[0];
+
+    expect(firstButton.additionalProps.pluginIdentifier).toBe("action_1");
+
+    expect(firstButton.additionalProps.suffixId).toBe("tv_buttons_button_1");
+
+    expect(firstButton.additionalProps.preferredFocus).toBe(true);
+
+    expect(secondButton.additionalProps.pluginIdentifier).toBe("action_3");
+
+    expect(secondButton.additionalProps.suffixId).toBe("tv_buttons_button_3");
+
+    expect(secondButton.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,
+    });
+
+    const secondButton = result.elements[1].elements[0];
+
+    expect(secondButton.style.paddingTop).toBe(11);
+
+    expect(secondButton.additionalProps.pluginIdentifier).toBe("action_3");
+
+    expect(secondButton.additionalProps.suffixId).toBe("tv_buttons_button_3");
+  });
+});

package/Components/MasterCell/DefaultComponents/tv/TvActionButtons/__tests__/renderedTree.test.tsx

@@ -0,0 +1,231 @@
+import React from "react";
+import { Text as RNText, View } from "react-native";
+import { render } from "@testing-library/react-native";
+import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
+
+import { configInflater } from "../../../../dataAdapter";
+import { elementMapper } from "../../../../elementMapper";
+import { defaultComponents } from "../../../index";
+import { TvActionButtons } from "..";
+
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/actions", () => ({
+  useActions: jest.fn(),
+}));
+
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks", () => ({
+  useIsScreenActive: jest.fn(() => false),
+}));
+
+jest.mock("@applicaster/zapp-react-native-utils/theme", () => ({
+  useTheme: () => ({}),
+}));
+
+jest.mock("@applicaster/zapp-react-native-utils/localizationUtils", () => ({
+  useIsRTL: jest.fn(() => false),
+  applyRTLStylesIfNeeded: jest.fn((style) => style),
+}));
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager/hooks",
+  () => ({
+    useAccessibilityManager: jest.fn(() => ({
+      addHeading: jest.fn(),
+    })),
+  })
+);
+
+jest.mock(
+  "@applicaster/zapp-react-native-ui-components/Components/Focusable",
+  () => ({
+    Focusable: ({ children, ...props }) => {
+      const { View: MockView } = require("react-native");
+
+      return (
+        <MockView testID="tv-focusable" {...props}>
+          {typeof children === "function" ? children(false) : children}
+        </MockView>
+      );
+    },
+  })
+);
+
+const mockUseActions = useActions as jest.Mock;
+
+const item = {
+  id: "entry-1",
+} as ZappEntry;
+
+const buildActionContext = (entryState = {}) => ({
+  initialEntryState: jest.fn(() => ({
+    label: {
+      label_1: "Play",
+    },
+    ...entryState,
+  })),
+  invokeAction: jest.fn(),
+  addListener: jest.fn(() => jest.fn()),
+  addListeners: jest.fn(() => jest.fn()),
+});
+
+const tvConfiguration = {
+  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: true,
+  tv_buttons_button_1_button_enabled: true,
+  tv_buttons_button_1_assign_action: "navigation_action",
+  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_1_background_color: "rgba(1,1,1,1)",
+  tv_buttons_button_1_background_border_color: "rgba(2,2,2,1)",
+  tv_buttons_button_1_background_border_thickness: 1,
+  tv_buttons_button_1_background_corner_radius: 8,
+  tv_buttons_button_1_focused_background_color: "rgba(3,3,3,1)",
+  tv_buttons_button_1_focused_background_border_color: "rgba(4,4,4,1)",
+  tv_buttons_button_1_display_mode: "dynamic",
+  tv_buttons_button_1_asset_enabled: true,
+  tv_buttons_button_1_asset_width: 40,
+  tv_buttons_button_1_asset_height: 40,
+  tv_buttons_button_1_asset_margin_top: 0,
+  tv_buttons_button_1_asset_margin_right: 0,
+  tv_buttons_button_1_asset_margin_bottom: 0,
+  tv_buttons_button_1_asset_margin_left: 0,
+  tv_buttons_button_1_asset_alignment: "left",
+  tv_buttons_button_1_label_1_toggle: true,
+  tv_buttons_button_1_label_1_margin_top: 0,
+  tv_buttons_button_1_label_1_margin_right: 0,
+  tv_buttons_button_1_label_1_margin_bottom: 0,
+  tv_buttons_button_1_label_1_margin_left: 0,
+  tv_buttons_button_1_label_1_padding_top: 0,
+  tv_buttons_button_1_label_1_padding_right: 0,
+  tv_buttons_button_1_label_1_padding_bottom: 0,
+  tv_buttons_button_1_label_1_padding_left: 0,
+  tv_buttons_button_1_label_1_text_alignment: "left",
+  tv_buttons_button_1_label_1_text_transform: "default",
+  tv_buttons_button_1_label_1_font_color: "rgba(10,10,10,1)",
+  tv_buttons_button_1_label_1_focused_font_color: "rgba(20,20,20,1)",
+  tv_buttons_button_1_label_1_font_size: 18,
+  tv_buttons_button_1_label_1_line_height: 24,
+  tv_buttons_button_1_label_1_font_family: "Ubuntu-Bold",
+  tv_buttons_button_1_label_1_letter_spacing: -0.2,
+};
+
+const mergeStyle = (style) =>
+  (Array.isArray(style) ? style : [style]).reduce(
+    (acc, part) => ({ ...acc, ...(part || {}) }),
+    {}
+  );
+
+describe("TvActionButtons rendered tree", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("preserves the rendered primitive tree when the tv builder is wrapped with DataProvider", () => {
+    mockUseActions.mockImplementation((identifier) => {
+      if (identifier === "") {
+        return {
+          actions: {
+            navigation_action: {
+              module: {
+                context: {
+                  _currentValue: {
+                    isActionAvailable: jest.fn(() => true),
+                  },
+                },
+              },
+            },
+          },
+        };
+      }
+
+      return buildActionContext();
+    });
+
+    const node = configInflater(
+      item,
+      TvActionButtons({
+        value: (key) => tvConfiguration[key],
+        platformValue: (key) => tvConfiguration[key],
+        configuration: tvConfiguration,
+        state: "focused",
+        skipButtons: false,
+      })
+    );
+
+    const { UNSAFE_getAllByType, getByText } = render(
+      <React.Fragment>
+        {elementMapper(defaultComponents)(node as never)}
+      </React.Fragment>
+    );
+
+    const views = UNSAFE_getAllByType(View);
+    const text = getByText("Play");
+
+    const labelContainer = views.find(
+      (view) => mergeStyle(view.props.style).flexDirection === "column"
+    );
+
+    const buttonView = views.find((view) => {
+      const style = mergeStyle(view.props.style);
+
+      return style.display === "flex" && style.alignItems === "center";
+    });
+
+    const outerContainer = views.find((view) => {
+      const style = mergeStyle(view.props.style);
+
+      return style.flexDirection === "row" && style.justifyContent === "center";
+    });
+
+    expect(mergeStyle(outerContainer?.props.style)).toEqual(
+      expect.objectContaining({
+        flexDirection: "row",
+        justifyContent: "center",
+        marginTop: 1,
+        marginRight: 2,
+        marginBottom: 3,
+        marginLeft: 4,
+      })
+    );
+
+    expect(mergeStyle(buttonView?.props.style)).toEqual(
+      expect.objectContaining({
+        display: "flex",
+        alignItems: "center",
+        paddingTop: 11,
+        paddingRight: 12,
+        paddingBottom: 13,
+        paddingLeft: 14,
+        backgroundColor: "rgba(1,1,1,1)",
+        borderColor: "rgba(2,2,2,1)",
+        borderWidth: 1,
+        borderRadius: 8,
+      })
+    );
+
+    expect(mergeStyle(labelContainer?.props.style)).toEqual(
+      expect.objectContaining({
+        flexDirection: "column",
+      })
+    );
+
+    expect(UNSAFE_getAllByType(RNText)).toHaveLength(1);
+
+    expect(mergeStyle(text.props.style)).toEqual(
+      expect.objectContaining({
+        fontSize: 18,
+        lineHeight: 24,
+        letterSpacing: -0.2,
+        fontFamily: "Ubuntu-Bold",
+        color: "rgba(10,10,10,1)",
+      })
+    );
+  });
+});

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,65 @@ 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 {
+            type: "DataProvider",
+            data: [
+              {
+                func: "identity",
+                args: [],
+                propName: "entry",
+              },
+            ],
+            elements: [
+              Button({
+                prefix: stylePrefix,
+                value,
+                platformValue,
+                pluginIdentifier: memoizedGetPluginIdentifier(
+                  configuration,
+                  PREFIX,
+                  slot
+                ) as string,
+                suffixId: specificPrefix,
+                preferredFocus: renderIndex === 0,
+              }),
+            ],
+          };
+        }
+      )
     ),
   };
 };