@applicaster/zapp-react-native-ui-components 16.0.0-alpha.1593888345 → 16.0.0-alpha.1701179921

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

@@ -82,18 +82,26 @@ jest.mock("../AudioPlayer/Components/Item", () => ({
   VARIANT_PLAYLIST_ITEM: {},
 }));
 
+const mockAudioPlayerButtonProps: Array<any> = [];
+const mockNowPlayingHeaderProps: Array<any> = [];
+
 jest.mock("../AudioPlayer/Components", () => ({
-  NowPlayingHeaderSection: () => null,
-  AudioPlayerButton: ({ data, onPress }: any) => {
+  NowPlayingHeaderSection: (props: any) => {
+    mockNowPlayingHeaderProps.push(props);
+
+    return null;
+  },
+  AudioPlayerButton: (props: any) => {
     const { Text } = require("react-native");
 
+    mockAudioPlayerButtonProps.push(props);
+
     return (
-      <Text testID="create-playlist-button" onPress={onPress}>
-        {data.title}
+      <Text testID="create-playlist-button" onPress={props.onPress}>
+        {props.data?.title}
       </Text>
     );
   },
-  VARIANT_WITH_ICON: {},
 }));
 
 const baseProps = {
@@ -171,6 +179,8 @@ describe("BottomSheetModalContent role/behavior cells", () => {
   });
 
   it("renders create playlist button when operations include add and calls editableCollection.add on press", () => {
+    mockAudioPlayerButtonProps.length = 0;
+
     const addMock = jest.fn();
     const { BehaviorSubject } = require("rxjs");
 
@@ -192,13 +202,91 @@ describe("BottomSheetModalContent role/behavior cells", () => {
     const createBtn = screen.getByTestId("create-playlist-button");
     expect(createBtn).toBeTruthy();
 
+    // The button is rendered bare: styling comes from the modal blocks theme
+    // and the title from the button block, so no configuration/data is passed.
+    expect(mockAudioPlayerButtonProps.length).toBeGreaterThan(0);
+
+    for (const props of mockAudioPlayerButtonProps) {
+      expect(props.configuration).toBeUndefined();
+      expect(props.data).toBeUndefined();
+      expect(typeof props.onPress).toBe("function");
+    }
+
     const { fireEvent } = require("@testing-library/react-native");
     fireEvent.press(createBtn);
 
     expect(addMock).toHaveBeenCalledWith({
       id: "create_new_playlist",
-      title: "Create New Playlist",
+      title: "unknown title",
+    });
+  });
+
+  it("shows the empty Next Up message only when now playing is on and the list is empty", () => {
+    mockNowPlayingHeaderProps.length = 0;
+    const { BehaviorSubject } = require("rxjs");
+
+    const emptyQueue = new ContentViewModel({
+      title: "Queue",
+      items: [],
+      role: "dynamic_collection",
+      dynamicCollection: {
+        operations: ["nowPlaying", "remove", "reorder", "clearAll"],
+      },
+    });
+
+    emptyQueue.editableCollection = {
+      items$: new BehaviorSubject([]),
+      operations: ["nowPlaying", "remove", "reorder", "clearAll"],
+      move: jest.fn(),
+    };
+
+    const { rerender } = render(
+      <BottomSheetModalContent
+        {...baseProps}
+        items={[]}
+        emptyMessage="Queued items will be added here"
+        viewModel={emptyQueue}
+      />
+    );
+
+    expect(mockNowPlayingHeaderProps.at(-1)).toMatchObject({
+      isEmpty: true,
+      emptyMessage: "Queued items will be added here",
+    });
+
+    const withItem = new ContentViewModel({
+      title: "Queue",
+      items: [{ id: "t1", title: "Track 1" }],
+      role: "dynamic_collection",
+      dynamicCollection: {
+        operations: ["nowPlaying", "remove", "reorder", "clearAll"],
+      },
     });
+
+    withItem.editableCollection = {
+      items$: new BehaviorSubject([{ id: "t1", title: "Track 1" }]),
+      operations: ["nowPlaying", "remove", "reorder", "clearAll"],
+      move: jest.fn(),
+    };
+
+    rerender(
+      <BottomSheetModalContent
+        {...baseProps}
+        items={[{ id: "t1", title: "Track 1", label: "Track 1" }]}
+        emptyMessage="Queued items will be added here"
+        viewModel={withItem}
+      />
+    );
+
+    expect(mockNowPlayingHeaderProps.at(-1)).toMatchObject({
+      isEmpty: false,
+    });
+
+    mockNowPlayingHeaderProps.length = 0;
+
+    render(<BottomSheetModalContent {...baseProps} />);
+
+    expect(mockNowPlayingHeaderProps).toHaveLength(0);
   });
 
   it("honors disableScrollViewWrap in contentComponentProps to bypass ScrollView wrapping", () => {
@@ -235,4 +323,21 @@ describe("BottomSheetModalContent role/behavior cells", () => {
     const { ScrollView } = require("react-native");
     expect(() => UNSAFE_getByType(ScrollView)).toThrow();
   });
+
+  it("sets keyboardShouldPersistTaps='handled' on ScrollView wrapping contentComponent", () => {
+    const CustomComponent = () => (
+      <React.Fragment>Custom Content</React.Fragment>
+    );
+
+    const { UNSAFE_getByType } = render(
+      <BottomSheetModalContent
+        {...baseProps}
+        contentComponent={CustomComponent}
+      />
+    );
+
+    const { ScrollView } = require("react-native");
+    const scrollView = UNSAFE_getByType(ScrollView);
+    expect(scrollView.props.keyboardShouldPersistTaps).toBe("handled");
+  });
 });

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

@@ -19,7 +19,7 @@ jest.mock(
 );
 
 jest.mock("../AudioPlayer/Components/Input", () => ({
-  AudioPlayerInput: ({ value, onChangeText, data }: any) => {
+  AudioPlayerInput: ({ value, onChangeText, data, validationMessage }: any) => {
     const { TextInput, Text } = require("react-native");
 
     return (
@@ -31,6 +31,9 @@ jest.mock("../AudioPlayer/Components/Input", () => ({
           onChangeText={onChangeText}
           placeholder={data?.placeholder}
         />
+        {validationMessage ? (
+          <Text testID="input-validation-message">{validationMessage}</Text>
+        ) : null}
       </>
     );
   },
@@ -87,6 +90,16 @@ describe("TextInputContent", () => {
     expect(screen.getByText("Update")).toBeTruthy();
   });
 
+  it("shows validation below the input when its value is too long", () => {
+    render(<TextInputContent maxLength={100} {...baseProps} />);
+
+    fireEvent.changeText(screen.getByTestId("playlist-input"), "x".repeat(101));
+
+    expect(screen.getByTestId("input-validation-message")).toHaveTextContent(
+      "Too many characters"
+    );
+  });
+
   it("on submit merges name into sendCloudEvent data then dismisses", async () => {
     render(<TextInputContent {...baseProps} />);
 
@@ -117,4 +130,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/index.tsx

@@ -26,20 +26,18 @@ type Props = {
 export function ModalComponent(props: ModalBottomSheetContentProps & Props) {
   const [height, setHeight] = useState(0);
 
-  const onLayout = useCallback(
-    ({ nativeEvent }) => {
-      if (height === 0) {
-        setHeight(nativeEvent.layout.height);
-      }
-    },
-    [height]
-  );
+  const onLayout = useCallback(({ nativeEvent }) => {
+    setHeight((value) => (value === 0 ? nativeEvent.layout.height : value));
+  }, []);
 
   if (height === 0) {
     return (
       <MeasurementsPortal
         Component={BottomSheetModalContent}
-        componentProps={props}
+        componentProps={{
+          ...props,
+          measurementPhase: true,
+        }}
         onLayout={onLayout}
       />
     );

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/Components/ModalComponent/showTextInput.ts

@@ -13,8 +13,15 @@ export async function showTextInputAction(
   action: ActionType,
   context?: Record<string, any>
 ): Promise<ActionResult> {
-  const { headerTitle, inputLabel, defaultValue, buttonLabel, actions } =
-    action.options || {};
+  const {
+    headerTitle,
+    inputLabel,
+    defaultValue,
+    buttonLabel,
+    validationLabel,
+    actions,
+    maxLength,
+  } = action.options || {};
 
   if (!headerTitle || !buttonLabel || !actions || !actions.length) {
     return ActionResult.Error;
@@ -30,10 +37,12 @@ export async function showTextInputAction(
         content: {
           component: TextInputContent,
           props: {
+            maxLength,
             inputLabel,
             defaultValue: defaultValue ?? "",
             buttonLabel,
             actions,
+            validationLabel,
           },
         },
       },

package/Components/PlayerContainer/PlayerContainer.tsx

@@ -404,10 +404,17 @@ const PlayerContainerComponent = (props: Props) => {
         const { eventType } = event;
 
         if (!isLanguageOverlayVisible && eventType === "menu") {
+          // First Back dismisses Play Next, the next one closes the player
+          if (playNextOverlayState) {
+            playNextOverlayState.handleUserCancelPlayNext();
+
+            return;
+          }
+
           close();
         }
       },
-    [close]
+    [close, playNextOverlayState]
   );
 
   // Effects

package/Components/River/ComponentsMap/ComponentsMap.tsx

@@ -1,5 +1,4 @@
 import * as React from "react";
-import * as R from "ramda";
 import { FlatList, StyleSheet, View } from "react-native";
 import { SafeAreaView, EdgeMode, Edge } from "react-native-safe-area-context";
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
@@ -59,7 +58,7 @@ const getNearestValue = (value, optionA, optionB) =>
   Math.abs(value - optionA) < Math.abs(value - optionB) ? optionA : optionB;
 
 const scrollIndicatorInsets = { right: 1 };
-const keyExtractor = R.compose(String, R.prop("id"));
+const keyExtractor = (item) => item.id.toString();
 
 function ComponentsMapComponent(props: Props) {
   const {
@@ -85,7 +84,7 @@ function ComponentsMapComponent(props: Props) {
 
   const riverComponents = React.useMemo(() => {
     if (feed?.entry?.length < components.length) {
-      return R.slice(0, feed?.entry?.length, components);
+      return components.slice(0, feed?.entry?.length);
     }
 
     return components;
@@ -100,7 +99,7 @@ function ComponentsMapComponent(props: Props) {
   const { loadingState, onLoadFinished, onLoadFailed, shouldShowLoadingError } =
     useLoadingState(riverComponents.length, onLoadDone);
 
-  const theme = useTheme();
+  const theme = useTheme<BaseThemePropertiesMobile>();
 
   const renderRiverItem = React.useCallback(
     ({ item, index }) => {
@@ -131,11 +130,11 @@ function ComponentsMapComponent(props: Props) {
     () => ({
       paddingLeft: ifEmptyUseFallback(
         screenConfig.paddingLeft,
-        R.prop("screen_padding_left")(theme)
+        theme.screen_padding_left
       ),
       paddingRight: ifEmptyUseFallback(
         screenConfig.paddingRight,
-        R.prop("screen_padding_right")(theme)
+        theme.screen_padding_right
       ),
     }),
     [riverId]
@@ -270,11 +269,11 @@ function ComponentsMapComponent(props: Props) {
                 <FlatList
                   ListHeaderComponent={
                     <SafeAreaView
-                      mode="margin"
+                      mode={safeArea?.mode ?? "margin"}
                       style={{
                         paddingTop: ifEmptyUseFallback(
                           screenConfig.paddingTop,
-                          R.prop("screen_padding_top")(theme)
+                          theme.screen_padding_top
                         ),
                         height: StyleSheet.hairlineWidth,
                       }}
@@ -307,11 +306,11 @@ function ComponentsMapComponent(props: Props) {
                         loadingState={loadingState}
                       />
                       <SafeAreaView
-                        mode="margin"
+                        mode={safeArea?.mode ?? "margin"}
                         style={{
                           paddingBottom: ifEmptyUseFallback(
                             screenConfig.paddingBottom,
-                            R.prop("screen_padding_bottom")(theme)
+                            theme.screen_padding_bottom
                           ),
                           height: StyleSheet.hairlineWidth,
                         }}
@@ -348,6 +347,5 @@ function ComponentsMapComponent(props: Props) {
 }
 
 export const ComponentsMap = React.memo(
-  withComponentsMapProvider(ComponentsMapComponent),
-  R.equals
+  withComponentsMapProvider(ComponentsMapComponent)
 );

package/Components/River/__tests__/__snapshots__/componentsMap.test.js.snap

@@ -14,95 +14,125 @@ exports[`componentsMap renders renders components map correctly 1`] = `
   >
     <RCTScrollView
       ListFooterComponent={
-        <Memo(RiverFooterComponent)
-          flatListHeight={null}
-          loadingState={
-            BehaviorSubject {
-              "_value": {
-                "done": false,
-                "index": -1,
-                "waitForAllComponents": false,
-              },
-              "closed": false,
-              "currentObservers": null,
-              "hasError": false,
-              "isStopped": false,
-              "observers": [
-                SafeSubscriber {
-                  "_finalizers": [
-                    Subscription {
-                      "_finalizers": null,
-                      "_parentage": [Circular],
-                      "closed": false,
-                      "initialTeardown": [Function],
-                    },
-                  ],
-                  "_parentage": null,
-                  "closed": false,
-                  "destination": ConsumerObserver {
-                    "partialObserver": {
-                      "complete": undefined,
-                      "error": undefined,
-                      "next": [Function],
-                    },
-                  },
-                  "initialTeardown": undefined,
-                  "isStopped": false,
+        <React.Fragment>
+          <Memo(RiverFooterComponent)
+            flatListHeight={null}
+            loadingState={
+              BehaviorSubject {
+                "_value": {
+                  "done": false,
+                  "index": -1,
+                  "waitForAllComponents": false,
                 },
-                SafeSubscriber {
-                  "_finalizers": [
-                    Subscription {
-                      "_finalizers": null,
-                      "_parentage": [Circular],
-                      "closed": false,
-                      "initialTeardown": [Function],
-                    },
-                  ],
-                  "_parentage": null,
-                  "closed": false,
-                  "destination": ConsumerObserver {
-                    "partialObserver": {
-                      "complete": undefined,
-                      "error": undefined,
-                      "next": [Function],
+                "closed": false,
+                "currentObservers": null,
+                "hasError": false,
+                "isStopped": false,
+                "observers": [
+                  SafeSubscriber {
+                    "_finalizers": [
+                      Subscription {
+                        "_finalizers": null,
+                        "_parentage": [Circular],
+                        "closed": false,
+                        "initialTeardown": [Function],
+                      },
+                    ],
+                    "_parentage": null,
+                    "closed": false,
+                    "destination": ConsumerObserver {
+                      "partialObserver": {
+                        "complete": undefined,
+                        "error": undefined,
+                        "next": [Function],
+                      },
                     },
+                    "initialTeardown": undefined,
+                    "isStopped": false,
                   },
-                  "initialTeardown": undefined,
-                  "isStopped": false,
-                },
-                SafeSubscriber {
-                  "_finalizers": [
-                    Subscription {
-                      "_finalizers": null,
-                      "_parentage": [Circular],
-                      "closed": false,
-                      "initialTeardown": [Function],
+                  SafeSubscriber {
+                    "_finalizers": [
+                      Subscription {
+                        "_finalizers": null,
+                        "_parentage": [Circular],
+                        "closed": false,
+                        "initialTeardown": [Function],
+                      },
+                    ],
+                    "_parentage": null,
+                    "closed": false,
+                    "destination": ConsumerObserver {
+                      "partialObserver": {
+                        "complete": undefined,
+                        "error": undefined,
+                        "next": [Function],
+                      },
                     },
-                  ],
-                  "_parentage": null,
-                  "closed": false,
-                  "destination": ConsumerObserver {
-                    "partialObserver": {
-                      "complete": undefined,
-                      "error": undefined,
-                      "next": [Function],
+                    "initialTeardown": undefined,
+                    "isStopped": false,
+                  },
+                  SafeSubscriber {
+                    "_finalizers": [
+                      Subscription {
+                        "_finalizers": null,
+                        "_parentage": [Circular],
+                        "closed": false,
+                        "initialTeardown": [Function],
+                      },
+                    ],
+                    "_parentage": null,
+                    "closed": false,
+                    "destination": ConsumerObserver {
+                      "partialObserver": {
+                        "complete": undefined,
+                        "error": undefined,
+                        "next": [Function],
+                      },
                     },
+                    "initialTeardown": undefined,
+                    "isStopped": false,
                   },
-                  "initialTeardown": undefined,
-                  "isStopped": false,
-                },
-              ],
-              "thrownError": null,
+                ],
+                "thrownError": null,
+              }
+            }
+          />
+          <View
+            edges={
+              {
+                "bottom": "off",
+              }
+            }
+            mode="margin"
+            style={
+              {
+                "height": 0.5,
+                "paddingBottom": undefined,
+              }
+            }
+          />
+        </React.Fragment>
+      }
+      ListHeaderComponent={
+        <View
+          edges={
+            {
+              "top": "off",
+            }
+          }
+          mode="margin"
+          style={
+            {
+              "height": 0.5,
+              "paddingTop": undefined,
             }
           }
         />
       }
       contentContainerStyle={
         {
-          "paddingBottom": undefined,
           "paddingLeft": undefined,
           "paddingRight": undefined,
-          "paddingTop": undefined,
         }
       }
       data={
@@ -156,6 +186,25 @@ exports[`componentsMap renders renders components map correctly 1`] = `
       windowSize={12}
     >
       <View>
+        <View
+          collapsable={false}
+          onLayout={[Function]}
+        >
+          <View
+            edges={
+              {
+                "top": "off",
+              }
+            }
+            mode="margin"
+            style={
+              {
+                "height": 0.5,
+                "paddingTop": undefined,
+              }
+            }
+          />
+        </View>
         <View
           onFocusCapture={[Function]}
           onLayout={[Function]}
@@ -200,6 +249,20 @@ exports[`componentsMap renders renders components map correctly 1`] = `
               size="large"
             />
           </View>
+          <View
+            edges={
+              {
+                "bottom": "off",
+              }
+            }
+            mode="margin"
+            style={
+              {
+                "height": 0.5,
+                "paddingBottom": undefined,
+              }
+            }
+          />
         </View>
       </View>
     </RCTScrollView>