@applicaster/zapp-react-native-ui-components 16.0.0-rc.83 → 16.0.0-rc.85

package/Components/MasterCell/DefaultComponents/ActionButton.tsx

@@ -2,6 +2,7 @@ import React, { useCallback, useEffect } from "react";
 import { TouchableOpacity, ViewStyle } from "react-native";
 
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
+import { useUIComponentContext } from "@applicaster/zapp-react-native-ui-components/Contexts/UIComponentContext";
 
 import Image from "./Image";
 type Props = {
@@ -57,6 +58,7 @@ export const ActionButton = React.memo(function ActionButtonComponent(
 ) {
   const { item, action, asset, flavour = "flavour_1", cellUUID } = props;
   const actionContext = useActions(action?.identifier);
+  const component = useUIComponentContext();
 
   // TODO: add subscription API for action availability
   const actionDisabled =
@@ -81,8 +83,9 @@ export const ActionButton = React.memo(function ActionButtonComponent(
       updateState: (state) => {
         setActionState(state);
       },
+      ...(component ? { component } : {}),
     });
-  }, [actionState, actionContext?.state, item?.id]);
+  }, [actionState, actionContext?.state, item, component]);
 
   useEffect(() => {
     if (typeof actionContext?.addListener === "function") {

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

@@ -6,6 +6,7 @@ import React, {
   useState,
 } from "react";
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
+import { useUIComponentContext } from "@applicaster/zapp-react-native-ui-components/Contexts/UIComponentContext";
 
 type ActionDefinition = {
   identifier?: string;
@@ -61,6 +62,7 @@ export function ActionButtonController({
   const resolvedEntry = entry;
   const resolvedIdentifier = action?.identifier || pluginIdentifier || "";
   const actionContext = useActions(resolvedIdentifier);
+  const component = useUIComponentContext();
 
   const actionDisabled =
     typeof actionContext?.isActionAvailable === "function" &&
@@ -128,20 +130,33 @@ export function ActionButtonController({
       return;
     }
 
+    const invokeOptions: InvokeArgsOptions = {
+      ...(component ? { component } : {}),
+    };
+
     if (supportsEntryState) {
       return actionContext.invokeAction?.(resolvedEntry, {
+        ...invokeOptions,
         updateState: setActionState,
       });
     }
 
+    if (typeof actionContext.invokeAction === "function") {
+      return actionContext.invokeAction(resolvedEntry, invokeOptions);
+    }
+
     const favouritesAction = legacySelected
       ? actionContext.removeFavourite
       : actionContext.addFavourite;
 
-    const toggleAction = actionContext?.invokeAction ?? favouritesAction;
-
-    return toggleAction?.(resolvedEntry);
-  }, [actionContext, supportsEntryState, resolvedEntry, legacySelected]);
+    return favouritesAction?.(resolvedEntry);
+  }, [
+    actionContext,
+    supportsEntryState,
+    resolvedEntry,
+    legacySelected,
+    component,
+  ]);
 
   if (!actionContext || actionDisabled) {
     if (!actionContext) {

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

@@ -2,6 +2,7 @@ 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 { UIComponentContext } from "@applicaster/zapp-react-native-ui-components/Contexts/UIComponentContext";
 
 import { ActionButtonController } from "../ActionButtonController";
 
@@ -89,6 +90,47 @@ describe("ActionButtonController", () => {
     );
   });
 
+  it("passes the List UIComponentContext into invokeAction so the sheet can refresh it", () => {
+    const listComponent = {
+      id: "list-1",
+      data: { source: "https://example.com/user/collections/abc" },
+    };
+
+    const actionContext = {
+      isActionAvailable: jest.fn(() => true),
+      initialEntryState: jest.fn(() => ({ active: false })),
+      invokeAction: jest.fn(),
+      addListener: jest.fn(() => jest.fn()),
+    };
+
+    mockUseActions.mockReturnValue(actionContext);
+
+    const { getByTestId } = render(
+      <UIComponentContext.Provider value={listComponent}>
+        <ActionButtonController
+          action={{ identifier: "open-modal-bottom-sheet-cell-action" }}
+          entry={entry}
+        >
+          {({ onPress }) => (
+            <Text testID="content" onPress={onPress}>
+              press
+            </Text>
+          )}
+        </ActionButtonController>
+      </UIComponentContext.Provider>
+    );
+
+    fireEvent.press(getByTestId("content"));
+
+    expect(actionContext.invokeAction).toHaveBeenCalledWith(
+      entry,
+      expect.objectContaining({
+        updateState: expect.any(Function),
+        component: listComponent,
+      })
+    );
+  });
+
   it("updates state from addListener", () => {
     let listener;
 
@@ -328,7 +370,7 @@ describe("ActionButtonController", () => {
 
     fireEvent.press(getByTestId("content"));
 
-    expect(invokeAction).toHaveBeenCalledWith(entry);
+    expect(invokeAction).toHaveBeenCalledWith(entry, {});
     expect(addFavourite).not.toHaveBeenCalled();
     expect(removeFavourite).not.toHaveBeenCalled();
   });

package/Components/ModalComponent/ActionsBottomSheet/ActionButton.tsx

@@ -12,6 +12,7 @@ export type ActionButtonProps = {
   item: RegisteredAction;
   configuration: any;
   width: number;
+  component?: ZappUIComponent & { parent?: ZappUIComponent };
 };
 
 type Props = ActionButtonProps & {
@@ -27,7 +28,7 @@ type Props = ActionButtonProps & {
  * (backed by the action's observable / `addListener`).
  */
 export function ActionButton(props: Props) {
-  const { item, entry, onPress: onItemPress } = props;
+  const { item, entry, onPress: onItemPress, component } = props;
 
   const action = item?.action;
 
@@ -38,9 +39,10 @@ export function ActionButton(props: Props) {
       invokeAction({
         context: "toast",
         dismiss: () => onItemPress?.(item),
+        ...(component ? { component } : {}),
       });
     },
-    [invokeAction, item, onItemPress]
+    [invokeAction, item, onItemPress, component]
   );
 
   if (!isActionAvailableFor(action, entry as ZappEntry)) return null;

package/Components/ModalComponent/ActionsBottomSheet/__tests__/openActionsBottomSheet.test.ts

@@ -0,0 +1,38 @@
+import { openBottomSheetModal } from "@applicaster/zapp-react-native-utils/modalState";
+import { boundActionButton } from "../boundActionButton";
+import { openActionsBottomSheet } from "../openActionsBottomSheet";
+
+jest.mock("@applicaster/zapp-react-native-utils/modalState", () => ({
+  openBottomSheetModal: jest.fn(),
+}));
+
+jest.mock("../boundActionButton", () => ({
+  boundActionButton: jest.fn(() => jest.fn()),
+}));
+
+describe("openActionsBottomSheet", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("binds the List component into the sheet row button", () => {
+    const entry = { id: "entry-1" } as ZappEntry;
+
+    const component = {
+      data: { source: "https://example.com/user/collections/abc" },
+    };
+
+    const actions = [
+      { identifier: "entry_action_0", action: { invokeAction: jest.fn() } },
+    ];
+
+    openActionsBottomSheet({
+      entry,
+      actions: actions as any,
+      component: component as any,
+    });
+
+    expect(boundActionButton).toHaveBeenCalledWith(entry, component);
+    expect(openBottomSheetModal).toHaveBeenCalledTimes(1);
+  });
+});

package/Components/ModalComponent/ActionsBottomSheet/boundActionButton.tsx

@@ -8,9 +8,12 @@ import { ActionButton, ActionButtonProps } from "./ActionButton";
  * `BottomSheetModalContent` renders `buttonComponent` per item and does not
  * know about entries, so the entry is closed over here instead.
  */
-export const boundActionButton = (entry: ZappEntry | ZappFeed) => {
+export const boundActionButton = (
+  entry: ZappEntry | ZappFeed,
+  component?: ZappUIComponent & { parent?: ZappUIComponent }
+) => {
   const ActionButtonWithEntry = (props: ActionButtonProps) => (
-    <ActionButton {...props} entry={entry as ZappEntry} />
+    <ActionButton {...props} entry={entry as ZappEntry} component={component} />
   );
 
   ActionButtonWithEntry.displayName = "ActionButtonWithEntry";

package/Components/ModalComponent/ActionsBottomSheet/openActionsBottomSheet.ts

@@ -17,6 +17,8 @@ export type OpenActionsBottomSheetArgs = {
   actions: RegisteredAction[];
   title?: string;
   summary?: string;
+  /** List that opened the sheet; forwarded into row invokeAction context. */
+  component?: ZappUIComponent & { parent?: ZappUIComponent };
 };
 
 /**
@@ -32,6 +34,7 @@ export function openActionsBottomSheet({
   actions,
   title,
   summary,
+  component,
 }: OpenActionsBottomSheetArgs): void {
   if (!actions?.length) {
     // Every action resolved away - unavailable for this entry, or not
@@ -50,7 +53,7 @@ export function openActionsBottomSheet({
       //  BottomSheetModalContent still requires an onPress.
       onPress: noop,
       items: actions,
-      buttonComponent: boundActionButton(entry),
+      buttonComponent: boundActionButton(entry, component),
       title,
       summary,
     },

package/Components/ModalComponent/AudioPlayer/Components/Item.tsx

@@ -706,18 +706,31 @@ function ItemButton({
     }
   };
 
+  const buttonPadding = {
+    paddingTop: layout.paddingTop,
+    paddingRight: layout.paddingRight,
+    paddingBottom: layout.paddingBottom,
+    paddingLeft: layout.paddingLeft,
+  };
+
+  // A nested Pressable with no handler swallows the parent row press.
+  if (!onPress) {
+    return (
+      <View pointerEvents="none" style={buttonPadding}>
+        {renderIcon()}
+      </View>
+    );
+  }
+
   return (
     <Pressable
       onPress={(e: any) => {
         e?.stopPropagation?.();
-        onPress?.();
+        onPress();
       }}
       style={({ pressed }) => [
+        buttonPadding,
         {
-          paddingTop: layout.paddingTop,
-          paddingRight: layout.paddingRight,
-          paddingBottom: layout.paddingBottom,
-          paddingLeft: layout.paddingLeft,
           opacity: pressed || focused ? 0.7 : 1,
         },
       ]}
@@ -849,6 +862,10 @@ export function AudioPlayerTrackItem({
 
   const container = resolveContainerSpec(image);
 
+  const handleTrailingButtonPress =
+    onTrailingButtonPress ??
+    (data.trailingButton === "multiSelect" ? onPress : undefined);
+
   return (
     <ItemContainer
       image={image}
@@ -884,7 +901,7 @@ export function AudioPlayerTrackItem({
           focusedLeadingButton={focusedLeadingButton}
           focusedTrailingButton={focusedTrailingButton}
           onLeadingButtonPress={onLeadingButtonPress}
-          onTrailingButtonPress={onTrailingButtonPress}
+          onTrailingButtonPress={handleTrailingButtonPress}
           isSelected={data.isSelected}
           renderHandle={renderHandle}
           checkboxAssets={checkboxAssets}

package/Components/ModalComponent/AudioPlayer/Components/__tests__/Item.test.tsx

@@ -0,0 +1,66 @@
+import React from "react";
+import { Pressable } from "react-native";
+import { fireEvent, render, screen } from "@testing-library/react-native";
+import { AudioPlayerTrackItem, VARIANT_PLAYLIST_ITEM } from "../Item";
+
+const playlistItemData = {
+  textLabel1: "Queue",
+  textLabel2: "",
+  trailingButton: "multiSelect" as const,
+  isSelected: false,
+};
+
+describe("AudioPlayerTrackItem multiSelect checkbox", () => {
+  it("invokes onPress when the checkbox is pressed even if onTrailingButtonPress is omitted", () => {
+    const onPress = jest.fn();
+
+    render(
+      <AudioPlayerTrackItem
+        configuration={VARIANT_PLAYLIST_ITEM}
+        data={playlistItemData}
+        onPress={onPress}
+      />
+    );
+
+    const pressables = screen.UNSAFE_getAllByType(Pressable);
+    fireEvent.press(pressables[pressables.length - 1]);
+
+    expect(onPress).toHaveBeenCalledTimes(1);
+  });
+
+  it("invokes onTrailingButtonPress instead of onPress when a dedicated trailing handler is provided", () => {
+    const onPress = jest.fn();
+    const onTrailingButtonPress = jest.fn();
+
+    render(
+      <AudioPlayerTrackItem
+        configuration={VARIANT_PLAYLIST_ITEM}
+        data={playlistItemData}
+        onPress={onPress}
+        onTrailingButtonPress={onTrailingButtonPress}
+      />
+    );
+
+    const pressables = screen.UNSAFE_getAllByType(Pressable);
+    fireEvent.press(pressables[pressables.length - 1]);
+
+    expect(onTrailingButtonPress).toHaveBeenCalledTimes(1);
+    expect(onPress).not.toHaveBeenCalled();
+  });
+
+  it("invokes onPress when the row is pressed", () => {
+    const onPress = jest.fn();
+
+    render(
+      <AudioPlayerTrackItem
+        configuration={VARIANT_PLAYLIST_ITEM}
+        data={playlistItemData}
+        onPress={onPress}
+      />
+    );
+
+    fireEvent.press(screen.UNSAFE_getAllByType(Pressable)[0]);
+
+    expect(onPress).toHaveBeenCalledTimes(1);
+  });
+});

package/Components/ModalComponent/TextInputContent.tsx

@@ -20,6 +20,7 @@ export type TextInputContentProps = {
   defaultValue?: string;
   buttonLabel: string;
   actions: ActionType[];
+  actionContext?: Record<string, any>;
 };
 
 const styles = StyleSheet.create({
@@ -38,7 +39,13 @@ const styles = StyleSheet.create({
  * Standard dismiss header comes from BottomSheetModalContent / ModalHeader.
  */
 export function TextInputContent(props: TextInputContentProps) {
-  const { inputLabel, defaultValue = "", buttonLabel, actions } = props;
+  const {
+    inputLabel,
+    defaultValue = "",
+    buttonLabel,
+    actions,
+    actionContext,
+  } = props;
 
   const [textValue, setTextValue] = useState(defaultValue);
   const [submitting, setSubmitting] = useState(false);
@@ -68,12 +75,17 @@ export function TextInputContent(props: TextInputContentProps) {
         return item;
       });
 
-      await actionExecutor.handleActions(updatedActions);
+      if (actionContext) {
+        await actionExecutor.handleActions(updatedActions, actionContext);
+      } else {
+        await actionExecutor.handleActions(updatedActions);
+      }
+
       await actionExecutor.handleAction({ type: "dismissBottomSheet" });
     } finally {
       setSubmitting(false);
     }
-  }, [submitting, actions, textValue]);
+  }, [submitting, actions, textValue, actionContext]);
 
   return (
     <View style={styles.container}>

package/Components/ModalComponent/__tests__/TextInputContent.test.tsx

@@ -117,4 +117,40 @@ describe("TextInputContent", () => {
       type: "dismissBottomSheet",
     });
   });
+
+  it("forwards actionContext into handleActions so rename can refresh the List", async () => {
+    const actionContext = {
+      component: {
+        id: "list-1",
+        data: { source: "https://example.com/user/collections/abc" },
+      },
+      screenData: { id: "playlist-screen" },
+    };
+
+    render(<TextInputContent {...baseProps} actionContext={actionContext} />);
+
+    fireEvent.press(screen.getByTestId("submit-button"));
+
+    await waitFor(() => {
+      expect(actionExecutor.handleActions).toHaveBeenCalledTimes(1);
+    });
+
+    expect(actionExecutor.handleActions).toHaveBeenCalledWith(
+      [
+        {
+          type: "sendCloudEvent",
+          options: {
+            url: "https://server.com/cloud-events",
+            type: "com.applicaster.collection.create.v1",
+            subject: "edit_collection",
+            data: {
+              collectionId: "playlist-123",
+              name: "Summer Hits",
+            },
+          },
+        },
+      ],
+      actionContext
+    );
+  });
 });

package/Components/ModalComponent/presets/__tests__/getCell.test.ts

@@ -1,3 +1,6 @@
+import React from "react";
+import { Pressable } from "react-native";
+import { fireEvent, render, screen } from "@testing-library/react-native";
 import { getCell } from "../index";
 import { standardCell } from "../standardCell";
 import { selectableCell } from "../selectableCell";
@@ -64,3 +67,24 @@ describe("mapMenuItemToPlaylistData", () => {
     expect(data.trailingButton).toBeUndefined();
   });
 });
+
+describe("selectableCell checkbox press", () => {
+  it("invokes onPress with the playlist item when the checkbox is pressed", () => {
+    const onPress = jest.fn();
+    const item = { id: "queue", title: "Queue" };
+
+    render(
+      selectableCell.renderItem({
+        item,
+        index: 0,
+        onPress,
+        context: { behavior: { selectMode: "multi" } } as any,
+      }) as React.ReactElement
+    );
+
+    const pressables = screen.UNSAFE_getAllByType(Pressable);
+    fireEvent.press(pressables[pressables.length - 1]);
+
+    expect(onPress).toHaveBeenCalledWith(item);
+  });
+});

package/Components/ModalComponent/presets/selectableCell.tsx

@@ -21,7 +21,7 @@ export const selectableCell: CellRenderer = {
                 title: item.title,
                 action: item.secondaryAction!.action,
               })
-          : undefined
+          : () => onPress(item)
       }
     />
   ),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "16.0.0-rc.83",
+  "version": "16.0.0-rc.85",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,10 +28,10 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "16.0.0-rc.83",
-    "@applicaster/zapp-react-native-bridge": "16.0.0-rc.83",
-    "@applicaster/zapp-react-native-redux": "16.0.0-rc.83",
-    "@applicaster/zapp-react-native-utils": "16.0.0-rc.83",
+    "@applicaster/applicaster-types": "16.0.0-rc.85",
+    "@applicaster/zapp-react-native-bridge": "16.0.0-rc.85",
+    "@applicaster/zapp-react-native-redux": "16.0.0-rc.85",
+    "@applicaster/zapp-react-native-utils": "16.0.0-rc.85",
     "fast-json-stable-stringify": "^2.1.0",
     "promise": "^8.3.0",
     "react-native-sortables": "1.7.1",