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

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

@@ -0,0 +1,165 @@
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
+
+type ActionDefinition = {
+  identifier?: string;
+};
+
+type ControllerRenderProps = {
+  actionContext: any;
+  actionState: any;
+  entry: any;
+  isActive: boolean;
+  onPress: () => Promise<unknown> | unknown;
+};
+
+type Props = {
+  action?: ActionDefinition;
+  pluginIdentifier?: string;
+  entry?: any;
+  onMissingActionContext?: (identifier?: string) => void;
+  children: (props: ControllerRenderProps) => React.ReactNode;
+};
+
+const resolveIsActive = (actionState: any, fallbackSelected = false) => {
+  if (actionState == null) {
+    return fallbackSelected;
+  }
+
+  return Boolean(
+    actionState?.active ??
+      actionState?.isActive ??
+      actionState?.selected ??
+      actionState?.isSelected ??
+      fallbackSelected
+  );
+};
+
+const buildLegacySelection = (entry: any, actionContext: any) => {
+  const defaultIsSelected = Array.isArray(actionContext?.state)
+    ? (actionContext?.state || []).includes(entry)
+    : false;
+
+  return actionContext?.masterCell?.isSelected
+    ? actionContext.masterCell.isSelected(entry)
+    : defaultIsSelected;
+};
+
+export function ActionButtonController({
+  action,
+  pluginIdentifier,
+  entry,
+  onMissingActionContext,
+  children,
+}: Props) {
+  const resolvedEntry = entry;
+  const resolvedIdentifier = action?.identifier || pluginIdentifier || "";
+  const actionContext = useActions(resolvedIdentifier);
+
+  const actionDisabled =
+    typeof actionContext?.isActionAvailable === "function" &&
+    !actionContext.isActionAvailable(resolvedEntry);
+
+  const supportsEntryState =
+    typeof actionContext?.initialEntryState === "function" && !actionDisabled;
+
+  const hydrationKey = `${resolvedIdentifier}::${String(resolvedEntry?.id ?? "")}`;
+  const lastHydratedKeyRef = useRef<string | null>(null);
+
+  const [actionState, setActionState] = useState(() =>
+    supportsEntryState ? actionContext.initialEntryState(resolvedEntry) : null
+  );
+
+  useEffect(() => {
+    if (supportsEntryState) {
+      if (lastHydratedKeyRef.current === hydrationKey) {
+        return;
+      }
+
+      lastHydratedKeyRef.current = hydrationKey;
+      setActionState(actionContext.initialEntryState(resolvedEntry));
+    }
+  }, [supportsEntryState, actionContext, resolvedEntry, hydrationKey]);
+
+  useEffect(() => {
+    if (typeof actionContext?.addListener === "function") {
+      return actionContext.addListener(String(resolvedEntry?.id), (nextState) =>
+        setActionState(nextState)
+      );
+    }
+
+    if (typeof actionContext?.addListeners === "function") {
+      return actionContext.addListeners(
+        ({ entryState, entry: updatedEntry }) => {
+          if (updatedEntry?.id === resolvedEntry?.id) {
+            setActionState(entryState);
+          }
+        }
+      );
+    }
+
+    return undefined;
+  }, [
+    actionContext,
+    resolvedEntry?.id,
+    resolvedIdentifier,
+    actionContext?.addListener,
+    actionContext?.addListeners,
+  ]);
+
+  const legacySelected = useMemo(() => {
+    if (!actionContext || supportsEntryState) {
+      return false;
+    }
+
+    return buildLegacySelection(resolvedEntry, actionContext);
+  }, [actionContext, supportsEntryState, resolvedEntry]);
+
+  const isActive = resolveIsActive(actionState, legacySelected);
+
+  const onPress = useCallback(async () => {
+    if (!actionContext) {
+      return;
+    }
+
+    if (supportsEntryState) {
+      return actionContext.invokeAction?.(resolvedEntry, {
+        updateState: setActionState,
+      });
+    }
+
+    const favouritesAction = legacySelected
+      ? actionContext.removeFavourite
+      : actionContext.addFavourite;
+
+    const toggleAction = actionContext?.invokeAction ?? favouritesAction;
+
+    return toggleAction?.(resolvedEntry);
+  }, [actionContext, supportsEntryState, resolvedEntry, legacySelected]);
+
+  if (!actionContext || actionDisabled) {
+    if (!actionContext) {
+      onMissingActionContext?.(resolvedIdentifier);
+    }
+
+    return null;
+  }
+
+  return (
+    <>
+      {children({
+        actionContext,
+        actionState,
+        entry: resolvedEntry,
+        isActive,
+        onPress,
+      })}
+    </>
+  );
+}

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,
+      }),
+    })),
+  };
+};