@applicaster/zapp-react-native-ui-components 15.0.0-rc.99 → 16.0.0-alpha.6593152532

package/Components/MasterCell/DefaultComponents/ActionButtonsCore/components/__tests__/ActionButtonController.test.tsx

@@ -0,0 +1,405 @@
+import React from "react";
+import { Text } from "react-native";
+import { render, fireEvent } from "@testing-library/react-native";
+import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
+
+import { ActionButtonController } from "../ActionButtonController";
+
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/actions", () => ({
+  useActions: jest.fn(),
+}));
+
+const mockUseActions = useActions as jest.Mock;
+
+const entry = { id: "entry-1" } as ZappEntry;
+
+describe("ActionButtonController", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("returns null when action is unavailable", () => {
+    const actionContext = {
+      isActionAvailable: jest.fn(() => false),
+      initialEntryState: jest.fn(),
+    };
+
+    mockUseActions.mockReturnValue(actionContext);
+
+    const child = jest.fn(() => <Text testID="content">content</Text>);
+
+    const { queryByTestId } = render(
+      <ActionButtonController
+        action={{ identifier: "navigation_action" }}
+        entry={entry}
+      >
+        {child}
+      </ActionButtonController>
+    );
+
+    expect(queryByTestId("content")).toBeNull();
+    expect(child).not.toHaveBeenCalled();
+    expect(actionContext.isActionAvailable).toHaveBeenCalledWith(entry);
+  });
+
+  it("passes action context, action state and press handler to children", () => {
+    const actionContext = {
+      isActionAvailable: jest.fn(() => true),
+      initialEntryState: jest.fn(() => ({ active: true })),
+      invokeAction: jest.fn(),
+      addListener: jest.fn(() => jest.fn()),
+    };
+
+    mockUseActions.mockReturnValue(actionContext);
+
+    const child = jest.fn(({ actionState, onPress, isActive }) => (
+      <Text testID="content" onPress={onPress}>
+        {String(actionState?.active)}-{String(isActive)}
+      </Text>
+    ));
+
+    const { getByTestId } = render(
+      <ActionButtonController
+        action={{ identifier: "navigation_action" }}
+        entry={entry}
+      >
+        {child}
+      </ActionButtonController>
+    );
+
+    expect(actionContext.initialEntryState).toHaveBeenCalledWith(entry);
+
+    expect(child).toHaveBeenCalledWith(
+      expect.objectContaining({
+        actionContext,
+        actionState: { active: true },
+        entry,
+        isActive: true,
+        onPress: expect.any(Function),
+      })
+    );
+
+    fireEvent.press(getByTestId("content"));
+
+    expect(actionContext.invokeAction).toHaveBeenCalledWith(
+      entry,
+      expect.objectContaining({
+        updateState: expect.any(Function),
+      })
+    );
+  });
+
+  it("updates state from addListener", () => {
+    let listener;
+
+    const actionContext = {
+      isActionAvailable: jest.fn(() => true),
+      initialEntryState: jest.fn(() => ({ active: false })),
+      addListener: jest.fn((_entryId, callback) => {
+        listener = callback;
+
+        return jest.fn();
+      }),
+      invokeAction: jest.fn(),
+    };
+
+    mockUseActions.mockReturnValue(actionContext);
+
+    const { getByText } = render(
+      <ActionButtonController
+        action={{ identifier: "navigation_action" }}
+        entry={entry}
+      >
+        {({ actionState }) => <Text>{String(actionState?.active)}</Text>}
+      </ActionButtonController>
+    );
+
+    expect(getByText("false")).toBeTruthy();
+
+    listener({ active: true });
+
+    expect(getByText("true")).toBeTruthy();
+  });
+
+  it("subscribes via addListener and unsubscribes on unmount", () => {
+    const unsubscribe = jest.fn();
+
+    const actionContext = {
+      isActionAvailable: jest.fn(() => true),
+      initialEntryState: jest.fn(() => ({ active: false })),
+      addListener: jest.fn(() => unsubscribe),
+    };
+
+    mockUseActions.mockReturnValue(actionContext);
+
+    const { unmount } = render(
+      <ActionButtonController
+        action={{ identifier: "navigation_action" }}
+        entry={entry}
+      >
+        {() => <Text testID="content">content</Text>}
+      </ActionButtonController>
+    );
+
+    expect(actionContext.addListener).toHaveBeenCalledWith(
+      String(entry.id),
+      expect.any(Function)
+    );
+
+    unmount();
+
+    expect(unsubscribe).toHaveBeenCalledTimes(1);
+  });
+
+  it("subscribes via addListeners and unsubscribes on unmount when addListener is missing", () => {
+    const unsubscribe = jest.fn();
+
+    const actionContext = {
+      isActionAvailable: jest.fn(() => true),
+      addListeners: jest.fn(() => unsubscribe),
+      initialEntryState: undefined,
+    };
+
+    mockUseActions.mockReturnValue(actionContext);
+
+    const { unmount } = render(
+      <ActionButtonController
+        action={{ identifier: "navigation_action" }}
+        entry={entry}
+      >
+        {() => <Text testID="content">content</Text>}
+      </ActionButtonController>
+    );
+
+    expect(actionContext.addListeners).toHaveBeenCalledWith(
+      expect.any(Function)
+    );
+
+    unmount();
+
+    expect(unsubscribe).toHaveBeenCalledTimes(1);
+  });
+
+  it("subscribes when action context becomes available after initial render", () => {
+    const actionContext = {
+      isActionAvailable: jest.fn(() => true),
+      initialEntryState: jest.fn(() => ({ active: false })),
+      addListener: jest.fn(() => jest.fn()),
+      invokeAction: jest.fn(),
+    };
+
+    mockUseActions
+      .mockReturnValueOnce(undefined)
+      .mockReturnValue(actionContext);
+
+    const { rerender } = render(
+      <ActionButtonController
+        action={{ identifier: "navigation_action" }}
+        entry={entry}
+      >
+        {() => <Text testID="content">content</Text>}
+      </ActionButtonController>
+    );
+
+    expect(actionContext.addListener).not.toHaveBeenCalled();
+
+    rerender(
+      <ActionButtonController
+        action={{ identifier: "navigation_action" }}
+        entry={entry}
+      >
+        {() => <Text testID="content">content</Text>}
+      </ActionButtonController>
+    );
+
+    expect(actionContext.addListener).toHaveBeenCalledWith(
+      String(entry.id),
+      expect.any(Function)
+    );
+  });
+
+  it("falls back to legacy toggle behavior without initialEntryState", () => {
+    const addFavourite = jest.fn();
+    const removeFavourite = jest.fn();
+
+    const actionContext = {
+      state: [entry],
+      masterCell: {
+        isSelected: jest.fn(() => true),
+      },
+      addFavourite,
+      removeFavourite,
+      isActionAvailable: jest.fn(() => true),
+      addListeners: jest.fn(() => jest.fn()),
+    };
+
+    mockUseActions.mockReturnValue(actionContext);
+
+    const { getByTestId } = render(
+      <ActionButtonController
+        action={{ identifier: "navigation_action" }}
+        entry={entry}
+      >
+        {({ onPress, isActive }) => (
+          <Text testID="content" onPress={onPress}>
+            {String(isActive)}
+          </Text>
+        )}
+      </ActionButtonController>
+    );
+
+    expect(getByTestId("content").props.children).toBe("true");
+
+    fireEvent.press(getByTestId("content"));
+
+    expect(removeFavourite).toHaveBeenCalledWith(entry);
+    expect(addFavourite).not.toHaveBeenCalled();
+  });
+
+  it("uses legacy addFavourite when item is not selected", () => {
+    const addFavourite = jest.fn();
+    const removeFavourite = jest.fn();
+
+    const actionContext = {
+      state: [],
+      masterCell: {
+        isSelected: jest.fn(() => false),
+      },
+      addFavourite,
+      removeFavourite,
+      isActionAvailable: jest.fn(() => true),
+      addListeners: jest.fn(() => jest.fn()),
+    };
+
+    mockUseActions.mockReturnValue(actionContext);
+
+    const { getByTestId } = render(
+      <ActionButtonController
+        action={{ identifier: "navigation_action" }}
+        entry={entry}
+      >
+        {({ onPress, isActive }) => (
+          <Text testID="content" onPress={onPress}>
+            {String(isActive)}
+          </Text>
+        )}
+      </ActionButtonController>
+    );
+
+    expect(getByTestId("content").props.children).toBe("false");
+
+    fireEvent.press(getByTestId("content"));
+
+    expect(addFavourite).toHaveBeenCalledWith(entry);
+    expect(removeFavourite).not.toHaveBeenCalled();
+  });
+
+  it("prefers invokeAction over legacy favourites handlers in legacy mode", () => {
+    const invokeAction = jest.fn();
+    const addFavourite = jest.fn();
+    const removeFavourite = jest.fn();
+
+    const actionContext = {
+      state: [],
+      masterCell: {
+        isSelected: jest.fn(() => false),
+      },
+      invokeAction,
+      addFavourite,
+      removeFavourite,
+      isActionAvailable: jest.fn(() => true),
+      addListeners: jest.fn(() => jest.fn()),
+    };
+
+    mockUseActions.mockReturnValue(actionContext);
+
+    const { getByTestId } = render(
+      <ActionButtonController
+        action={{ identifier: "navigation_action" }}
+        entry={entry}
+      >
+        {({ onPress }) => (
+          <Text testID="content" onPress={onPress}>
+            press
+          </Text>
+        )}
+      </ActionButtonController>
+    );
+
+    fireEvent.press(getByTestId("content"));
+
+    expect(invokeAction).toHaveBeenCalledWith(entry);
+    expect(addFavourite).not.toHaveBeenCalled();
+    expect(removeFavourite).not.toHaveBeenCalled();
+  });
+
+  it("calls resolved legacy toggleAction onPress when invokeAction is missing", async () => {
+    const addFavourite = jest.fn(() => Promise.resolve("added"));
+    const removeFavourite = jest.fn();
+
+    const actionContext = {
+      state: [],
+      masterCell: {
+        isSelected: jest.fn(() => false),
+      },
+      addFavourite,
+      removeFavourite,
+      isActionAvailable: jest.fn(() => true),
+      addListeners: jest.fn(() => jest.fn()),
+    };
+
+    mockUseActions.mockReturnValue(actionContext);
+
+    let capturedOnPress: (() => Promise<unknown> | unknown) | undefined;
+
+    render(
+      <ActionButtonController
+        action={{ identifier: "navigation_action" }}
+        entry={entry}
+      >
+        {({ onPress }) => {
+          capturedOnPress = onPress;
+
+          return <Text testID="content">press</Text>;
+        }}
+      </ActionButtonController>
+    );
+
+    await capturedOnPress?.();
+
+    expect(addFavourite).toHaveBeenCalledWith(entry);
+    expect(removeFavourite).not.toHaveBeenCalled();
+  });
+
+  it("wires invokeAction updateState callback to update render state", () => {
+    const actionContext = {
+      isActionAvailable: jest.fn(() => true),
+      initialEntryState: jest.fn(() => ({ active: false })),
+      invokeAction: jest.fn((_entry, options) => {
+        options.updateState({ active: true });
+      }),
+      addListener: jest.fn(() => jest.fn()),
+    };
+
+    mockUseActions.mockReturnValue(actionContext);
+
+    const { getByTestId, getByText } = render(
+      <ActionButtonController
+        action={{ identifier: "navigation_action" }}
+        entry={entry}
+      >
+        {({ onPress, actionState }) => (
+          <Text testID="content" onPress={onPress}>
+            {String(actionState?.active)}
+          </Text>
+        )}
+      </ActionButtonController>
+    );
+
+    expect(getByText("false")).toBeTruthy();
+
+    fireEvent.press(getByTestId("content"));
+
+    expect(getByText("true")).toBeTruthy();
+  });
+});

package/Components/MasterCell/DefaultComponents/ActionButtonsCore/components/index.ts

@@ -0,0 +1 @@
+export { ActionButtonController } from "./ActionButtonController";

package/Components/MasterCell/DefaultComponents/ActionButtonsCore/model.ts

@@ -0,0 +1,47 @@
+import {
+  getButtonSlotPrefix,
+  getEnabledButtonSlots,
+  getStylePrefix,
+} from "./selectors";
+import { buildContainerLayout } from "./style";
+import { ActionButtonsModel, BuildActionButtonsModelOptions } from "./types";
+
+export const buildActionButtonsModel = ({
+  configuration,
+  value,
+  containerPrefix,
+  buttonPrefix,
+  maxButtons = 3,
+}: BuildActionButtonsModelOptions): ActionButtonsModel | null => {
+  if (!value(`${containerPrefix}_buttons_enabled`)) {
+    return null;
+  }
+
+  const enabledSlots = getEnabledButtonSlots(
+    configuration,
+    buttonPrefix,
+    maxButtons
+  );
+
+  if (enabledSlots.length === 0) {
+    return null;
+  }
+
+  const container = buildContainerLayout(value, containerPrefix);
+
+  return {
+    enabledSlots,
+    buttonsCount: enabledSlots.length,
+    container,
+    buttons: enabledSlots.map((slot, renderIndex) => ({
+      slot,
+      renderIndex,
+      specificPrefix: getButtonSlotPrefix(buttonPrefix, slot),
+      stylePrefix: getStylePrefix({
+        slot,
+        independentStyles: container.independentStyles,
+        buttonPrefix,
+      }),
+    })),
+  };
+};

package/Components/MasterCell/DefaultComponents/ActionButtonsCore/placement.ts

@@ -0,0 +1,170 @@
+type Label = {
+  name?: string;
+  elements?: Array<Label | unknown>;
+};
+
+type LabelContainer = {
+  elements?: Array<Label | unknown>;
+};
+
+type LabelExtraContainer = {
+  elements?: Array<LabelContainer | unknown>;
+};
+
+type InsertOptions = {
+  position?: string;
+  allowOnTop?: boolean;
+  appendWhenMissing?: boolean;
+};
+
+const hasLabelName = (value: unknown): value is Label =>
+  !!value &&
+  typeof value === "object" &&
+  typeof (value as Label).name === "string" &&
+  (value as Label).name !== "";
+
+const withButtons = (
+  labelName: string | undefined,
+  buttons: unknown,
+  labels: Label[]
+) =>
+  labels.reduce<Array<Label | unknown>>((acc, label) => {
+    if (!!label?.name && labelName?.includes(label.name)) {
+      // handle above_*
+      if (labelName?.startsWith("above_")) {
+        return [...acc, buttons, label];
+      }
+
+      // handle below_* or plain exact match (default: insert after (covers below_* AND plain names))
+      return [...acc, label, buttons];
+    }
+
+    return [...acc, label];
+  }, []);
+
+const withButtonsInNestedViews = (
+  labelName: string | undefined,
+  buttons: unknown,
+  views: Array<LabelContainer | unknown>
+) => {
+  const hasDirectLabels = views.some((view) => hasLabelName(view));
+
+  if (hasDirectLabels) {
+    return withButtons(labelName, buttons, views as Label[]);
+  }
+
+  return views.map((view) => {
+    if (
+      !view ||
+      typeof view !== "object" ||
+      !Array.isArray((view as LabelContainer).elements)
+    ) {
+      return view;
+    }
+
+    return {
+      ...(view as LabelContainer),
+      elements: withButtons(
+        labelName,
+        buttons,
+        (view as LabelContainer).elements || []
+      ),
+    };
+  });
+};
+
+const containsNestedLabel = (
+  labelName: string | undefined,
+  labelContainers: LabelExtraContainer[]
+) =>
+  labelContainers.some((labelContainer) =>
+    (labelContainer.elements || []).some((view) => {
+      if (hasLabelName(view)) {
+        return labelName?.includes(view.name) ?? false;
+      }
+
+      if (
+        !view ||
+        typeof view !== "object" ||
+        !Array.isArray((view as LabelContainer).elements)
+      ) {
+        return false;
+      }
+
+      return ((view as LabelContainer).elements || []).some((label) =>
+        hasLabelName(label) ? (labelName?.includes(label.name) ?? false) : false
+      );
+    })
+  );
+
+export const insertBetweenLabels = (
+  { position, allowOnTop = false, appendWhenMissing = false }: InsertOptions,
+  buttons: unknown,
+  labels: Label[] = []
+) => {
+  if (buttons == null) {
+    return labels;
+  }
+
+  if (allowOnTop && position === "on_top") {
+    return [buttons, ...labels];
+  }
+
+  const labelsWithButtons = withButtons(position, buttons, labels);
+  const inserted = labelsWithButtons.length !== labels.length;
+
+  if (!inserted && appendWhenMissing) {
+    return [...labels, buttons];
+  }
+
+  return inserted ? labelsWithButtons : [...labels];
+};
+
+export const insertBetweenLabelContainers = (
+  { position, allowOnTop = false, appendWhenMissing = false }: InsertOptions,
+  buttons: unknown,
+  labelContainers: LabelExtraContainer[] = []
+) => {
+  if (buttons == null) {
+    return labelContainers;
+  }
+
+  if (labelContainers.length === 0) {
+    return [buttons];
+  }
+
+  if (allowOnTop && position === "on_top") {
+    return labelContainers.map((labelContainer, index) =>
+      index === 0
+        ? {
+            ...labelContainer,
+            elements: [buttons, ...(labelContainer.elements || [])],
+          }
+        : labelContainer
+    );
+  }
+
+  const hasMatchingLabel = containsNestedLabel(position, labelContainers);
+
+  const labelContainersWithButtons = labelContainers.map((labelContainer) => ({
+    ...labelContainer,
+    elements: withButtonsInNestedViews(
+      position,
+      buttons,
+      labelContainer.elements || []
+    ),
+  }));
+
+  if (!hasMatchingLabel && appendWhenMissing) {
+    return labelContainers.map((labelContainer, index) =>
+      index === labelContainers.length - 1
+        ? {
+            ...labelContainer,
+            elements: [...(labelContainer.elements || []), buttons],
+          }
+        : labelContainer
+    );
+  }
+
+  return hasMatchingLabel ? labelContainersWithButtons : labelContainers;
+};

package/Components/MasterCell/DefaultComponents/ActionButtonsCore/selectors.ts

@@ -0,0 +1,26 @@
+export const getButtonSlotPrefix = (buttonPrefix: string, slot: number) =>
+  `${buttonPrefix}_${slot}`;
+
+export const getEnabledButtonSlots = (
+  configuration: Record<string, unknown>,
+  buttonPrefix: string,
+  maxButtons = 3
+): number[] =>
+  Array.from({ length: maxButtons }, (_, index) => index + 1).filter((slot) =>
+    Boolean(
+      configuration[`${getButtonSlotPrefix(buttonPrefix, slot)}_button_enabled`]
+    )
+  );
+
+export const getStylePrefix = ({
+  slot,
+  independentStyles,
+  buttonPrefix,
+}: {
+  slot: number;
+  independentStyles: boolean;
+  buttonPrefix: string;
+}) =>
+  independentStyles
+    ? getButtonSlotPrefix(buttonPrefix, slot)
+    : getButtonSlotPrefix(buttonPrefix, 1);

package/Components/MasterCell/DefaultComponents/ActionButtonsCore/style.ts

@@ -0,0 +1,29 @@
+import { mapSelfAlignment } from "@applicaster/zapp-react-native-utils/cellUtils";
+import { toNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/numberUtils";
+
+import { ActionButtonsContainerLayout } from "./types";
+
+export const getContainerMargins = (
+  value: (key: string) => unknown,
+  prefix: string
+) => ({
+  top: toNumberWithDefaultZero(value(`${prefix}_margin_top`)),
+  right: toNumberWithDefaultZero(value(`${prefix}_margin_right`)),
+  bottom: toNumberWithDefaultZero(value(`${prefix}_margin_bottom`)),
+  left: toNumberWithDefaultZero(value(`${prefix}_margin_left`)),
+});
+
+export const buildContainerLayout = (
+  value: (key: string) => unknown,
+  prefix: string
+): ActionButtonsContainerLayout => ({
+  horizontalAlign: mapSelfAlignment(value(`${prefix}_align`)),
+  margins: getContainerMargins(value, prefix),
+  stacking:
+    value(`${prefix}_stacking`) === "vertical" ? "vertical" : "horizontal",
+  horizontalGutter: toNumberWithDefaultZero(
+    value(`${prefix}_horizontal_gutter`)
+  ),
+  verticalGutter: toNumberWithDefaultZero(value(`${prefix}_vertical_gutter`)),
+  independentStyles: Boolean(value(`${prefix}_independent_styles`)),
+});