@applicaster/zapp-react-native-ui-components 15.0.0-rc.143 → 15.0.0-rc.145

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/ButtonContainerView/components/HorizontalSeparator.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+import { View } from "react-native";
+
+import type { HorizontalSeparatorProps } from "../types";
+
+export const HorizontalSeparator = ({ width }: HorizontalSeparatorProps) => (
+  <View style={{ width }} />
+);

package/Components/MasterCell/DefaultComponents/ButtonContainerView/index.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { View } from "react-native";
+import { ContainerProps } from "./types";
+
+export function ButtonContainerView({
+  style,
+  contentStyle,
+  children,
+}: ContainerProps) {
+  return (
+    <View style={style}>
+      <View style={contentStyle}>{children}</View>
+    </View>
+  );
+}

package/Components/MasterCell/DefaultComponents/ButtonContainerView/index.tv.android.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import { View } from "react-native";
+import * as R from "ramda";
+import { useInitialFocus } from "@applicaster/zapp-react-native-utils/focusManager";
+import {
+  useIsRTL,
+  applyRTLStylesIfNeeded,
+} from "@applicaster/zapp-react-native-utils/localizationUtils";
+
+import {
+  cloneChildrenWithIds,
+  insertBetween,
+  unwrapDataProviderChild,
+  useFilterChildren,
+} from "../../utils";
+
+import type { ContainerProps, ContainerChildren } from "./types";
+import { HorizontalSeparator } from "./components/HorizontalSeparator";
+
+const generateId = (cellUUID, suffixId) => `${cellUUID}--${suffixId}`;
+
+export function ButtonContainerView({
+  style,
+  children,
+  ...otherProps
+}: ContainerProps) {
+  const isRTL = useIsRTL();
+
+  const horizontalGutter = R.pathOr(0, ["horizontalGutter"], otherProps);
+  const filteredChildren = useFilterChildren<ContainerChildren>(children);
+
+  const buttonIds = filteredChildren.map((child) => {
+    const wrappedChild = unwrapDataProviderChild(child) as ContainerChildren;
+    const { cellUUID, suffixId } = wrappedChild.props;
+
+    return generateId(cellUUID, suffixId);
+  });
+
+  useInitialFocus(otherProps.state === "focused", R.head(buttonIds));
+
+  if (R.isEmpty(filteredChildren)) {
+    return null;
+  }
+
+  return (
+    <View style={applyRTLStylesIfNeeded(style, isRTL)}>
+      {insertBetween(
+        (index) => (
+          <HorizontalSeparator
+            key={`separator_${index}`}
+            width={horizontalGutter}
+          />
+        ),
+        cloneChildrenWithIds(buttonIds, filteredChildren)
+      )}
+    </View>
+  );
+}

package/Components/MasterCell/DefaultComponents/{tv/ButtonContainerView/index.tsx → ButtonContainerView/index.tv.tsx}

@@ -1,20 +1,13 @@
 import React from "react";
 import { View } from "react-native";
 import * as R from "ramda";
-import { useFilterChildren, insertBetween } from "../../../utils";
-import type {
-  HorizontalSeparatorProps,
-  ContainerProps,
-  ContainerChildren,
-} from "./types";
+import { insertBetween, useFilterChildren } from "../../utils";
+import type { ContainerProps, ContainerChildren } from "./types";
 import {
   useIsRTL,
   applyRTLStylesIfNeeded,
 } from "@applicaster/zapp-react-native-utils/localizationUtils";
-
-const HorizontalSeparator = ({ width }: HorizontalSeparatorProps) => (
-  <View style={{ width }} />
-);
+import { HorizontalSeparator } from "./components/HorizontalSeparator";
 
 export function ButtonContainerView({
   style,
@@ -23,7 +16,6 @@ export function ButtonContainerView({
 }: ContainerProps) {
   const isRTL = useIsRTL();
   const horizontalGutter = R.pathOr(0, ["horizontalGutter"], otherProps);
-
   const filteredChildren = useFilterChildren<ContainerChildren>(children);
 
   if (R.isEmpty(filteredChildren)) {

package/Components/MasterCell/DefaultComponents/ButtonContainerView/index.web.ts

@@ -0,0 +1 @@
+export { ButtonContainerView } from "./index.tv";

package/Components/MasterCell/DefaultComponents/ButtonContainerView/types.ts

@@ -0,0 +1,40 @@
+import { ReactElement, ReactNode } from "react";
+import { ViewStyle } from "react-native";
+
+export type ContainerChildProps = {
+  item: any;
+  pluginIdentifier: string;
+  cellUUID: string;
+  suffixId: string;
+  nextFocusLeft?: string;
+  nextFocusRight?: string;
+};
+
+export type ContainerProps = Record<string, any> & {
+  buttonsToggleEnabled: boolean;
+  skipButtons: boolean;
+  style: ViewStyle;
+  contentStyle?: ViewStyle;
+  children: ContainerChildren[];
+};
+
+export type ButtonProps = Record<string, any> & {
+  style: ViewStyle;
+  children?: ReactNode;
+  item: any;
+  cellUUID: string;
+  groupId?: string;
+  suffixId: string;
+  normalStyles?: ViewStyle;
+  focusedStyles?: ViewStyle;
+  nextFocusLeft?: string;
+  nextFocusRight?: string;
+  pluginIdentifier: string;
+  disableFocus?: boolean;
+};
+
+export type HorizontalSeparatorProps = {
+  width: number;
+};
+
+export type ContainerChildren = ReactElement<ContainerChildProps>;