@applicaster/zapp-react-native-ui-components 16.0.0-rc.7 → 16.0.0-rc.71

package/Components/ModalComponent/SortableList.tsx

@@ -0,0 +1,142 @@
+import React, { useCallback, useEffect, useState } from "react";
+import Sortable from "react-native-sortables";
+import { Text, View, ViewStyle } from "react-native";
+import Animated, { useAnimatedRef } from "react-native-reanimated";
+
+const DEFAULT_HEADERS: any[] = [];
+const DEFAULT_SORTABLE_DATA: any[] = [];
+
+const renderHeaderComponent = (component: any) => {
+  if (!component) return null;
+  if (React.isValidElement(component)) return component;
+
+  if (typeof component === "function") {
+    const HeaderComponent = component;
+
+    return <HeaderComponent />;
+  }
+
+  return null;
+};
+
+const SortableListHeader = ({
+  title,
+  style,
+}: {
+  title?: string;
+  style?: ViewStyle;
+}) => {
+  const displayTitle = typeof title === "string" ? title : String(title ?? "");
+
+  return (
+    <View style={style}>
+      {displayTitle ? <Text>{displayTitle}</Text> : null}
+    </View>
+  );
+};
+
+export type SortableListProps = {
+  scrollViewStyle?: ViewStyle;
+  contentContainerStyle?: ViewStyle;
+  itemStyle?: ViewStyle;
+  headerStyle?: ViewStyle;
+  columns?: number;
+  rowGap?: number;
+  columnGap?: number;
+  spacing?: number;
+  keyExtractor?: (item: any, index?: number) => string;
+  renderItem: ({
+    item,
+    index,
+    renderHandle,
+  }: {
+    item: any;
+    index: number;
+    renderHandle: (children: React.ReactElement) => React.ReactElement;
+  }) => React.ReactNode;
+  sortableData?: any[];
+  headers?: { index: number; title?: string; component: any }[];
+  onDragEnd?: (params: {
+    fromIndex?: number;
+    toIndex?: number;
+    from?: number;
+    to?: number;
+    data: any[];
+  }) => void;
+};
+
+export const SortableList = ({
+  scrollViewStyle,
+  contentContainerStyle,
+  itemStyle,
+  headerStyle,
+  columns = 1,
+  rowGap = 0,
+  columnGap = 0,
+  keyExtractor = (item, index) =>
+    `sortable-item-${item?.id ?? item?.title ?? index}`,
+  renderItem,
+  sortableData = DEFAULT_SORTABLE_DATA,
+  headers = DEFAULT_HEADERS,
+  onDragEnd,
+}: SortableListProps) => {
+  const scrollableRef = useAnimatedRef<Animated.ScrollView>();
+
+  const [localData, setLocalData] = useState(sortableData);
+
+  useEffect(() => {
+    setLocalData(sortableData);
+  }, [sortableData]);
+
+  const handleDragEnd = useCallback(
+    (params: any) => {
+      if (params?.data) {
+        setLocalData(params.data);
+      }
+
+      if (onDragEnd) {
+        onDragEnd(params);
+      }
+    },
+    [onDragEnd]
+  );
+
+  return (
+    <Animated.ScrollView
+      ref={scrollableRef}
+      style={scrollViewStyle}
+      contentContainerStyle={contentContainerStyle}
+    >
+      {(headers || []).map((header, idx) => (
+        <View key={`static-header-${idx}`} style={headerStyle}>
+          {header.title ? (
+            <SortableListHeader title={header.title} />
+          ) : (
+            renderHeaderComponent(header.component)
+          )}
+        </View>
+      ))}
+      <Sortable.Grid
+        scrollableRef={scrollableRef}
+        customHandle
+        columns={columns}
+        rowGap={rowGap}
+        columnGap={columnGap}
+        data={localData}
+        keyExtractor={keyExtractor}
+        onDragEnd={handleDragEnd}
+        renderItem={({ item, index }) => (
+          <View key={keyExtractor(item, index)} style={itemStyle}>
+            {renderItem({
+              item,
+              index,
+              renderHandle: (children) => (
+                <Sortable.Handle>{children}</Sortable.Handle>
+              ),
+            })}
+          </View>
+        )}
+      />
+    </Animated.ScrollView>
+  );
+};

package/Components/ModalComponent/SortableList.web.tsx

@@ -0,0 +1,102 @@
+import React from "react";
+import { Text, View, ViewStyle, ScrollView } from "react-native";
+
+const DEFAULT_HEADERS: any[] = [];
+const DEFAULT_SORTABLE_DATA: any[] = [];
+
+const renderHeaderComponent = (component: any) => {
+  if (!component) return null;
+  if (React.isValidElement(component)) return component;
+
+  if (typeof component === "function") {
+    const HeaderComponent = component;
+
+    return <HeaderComponent />;
+  }
+
+  return null;
+};
+
+const SortableListHeader = ({
+  title,
+  style,
+}: {
+  title?: string;
+  style?: ViewStyle;
+}) => {
+  const displayTitle = typeof title === "string" ? title : String(title ?? "");
+
+  return (
+    <View style={style}>
+      {displayTitle ? <Text>{displayTitle}</Text> : null}
+    </View>
+  );
+};
+
+export type SortableListProps = {
+  scrollViewStyle?: ViewStyle;
+  contentContainerStyle?: ViewStyle;
+  itemStyle?: ViewStyle;
+  headerStyle?: ViewStyle;
+  columns?: number;
+  rowGap?: number;
+  columnGap?: number;
+  spacing?: number;
+  keyExtractor?: (item: any, index?: number) => string;
+  renderItem: ({
+    item,
+    index,
+    renderHandle,
+  }: {
+    item: any;
+    index: number;
+    renderHandle: (children: React.ReactElement) => React.ReactElement;
+  }) => React.ReactNode;
+  sortableData?: any[];
+  headers?: { index: number; title?: string; component: any }[];
+  onDragEnd?: (params: {
+    fromIndex?: number;
+    toIndex?: number;
+    from?: number;
+    to?: number;
+    data: any[];
+  }) => void;
+};
+
+export const SortableList = ({
+  scrollViewStyle,
+  contentContainerStyle,
+  itemStyle,
+  headerStyle,
+  keyExtractor = (item, index) =>
+    `sortable-item-${item?.id ?? item?.title ?? index}`,
+  renderItem,
+  sortableData = DEFAULT_SORTABLE_DATA,
+  headers = DEFAULT_HEADERS,
+}: SortableListProps) => {
+  return (
+    <ScrollView
+      style={scrollViewStyle}
+      contentContainerStyle={contentContainerStyle}
+    >
+      {(headers || []).map((header, idx) => (
+        <View key={`static-header-${idx}`} style={headerStyle}>
+          {header.title ? (
+            <SortableListHeader title={header.title} />
+          ) : (
+            renderHeaderComponent(header.component)
+          )}
+        </View>
+      ))}
+      {(sortableData || []).map((item, index) => (
+        <View key={keyExtractor(item, index)} style={itemStyle}>
+          {renderItem({
+            item,
+            index,
+            renderHandle: (children) => children,
+          })}
+        </View>
+      ))}
+    </ScrollView>
+  );
+};

package/Components/ModalComponent/TextInputContent.tsx

@@ -0,0 +1,100 @@
+import React, { useCallback, useState } from "react";
+import { StyleSheet, View } from "react-native";
+import { actionExecutor } from "@applicaster/zapp-react-native-utils/actionsExecutor/ActionExecutor";
+import {
+  AudioPlayerInput,
+  VARIANT_NAME_PLAYLIST_INPUT,
+} from "./AudioPlayer/Components/Input";
+import {
+  AudioPlayerButton,
+  VARIANT_TEXT_ONLY,
+} from "./AudioPlayer/Components/Button";
+
+export type TextInputContentProps = {
+  /** Injected by the sheet host; unused for layout (header is owned by ModalComponent). */
+  dismiss?: () => void;
+  width?: number;
+  maxHeight?: number;
+  currentRoute?: boolean;
+  inputLabel?: string;
+  defaultValue?: string;
+  buttonLabel: string;
+  actions: ActionType[];
+};
+
+const styles = StyleSheet.create({
+  container: {
+    paddingHorizontal: 20,
+    paddingBottom: 8,
+  },
+  inputWrap: {
+    marginTop: 8,
+    marginBottom: 24,
+  },
+});
+
+/**
+ * Modal body only — input + submit.
+ * Standard dismiss header comes from BottomSheetModalContent / ModalHeader.
+ */
+export function TextInputContent(props: TextInputContentProps) {
+  const { inputLabel, defaultValue = "", buttonLabel, actions } = props;
+
+  const [textValue, setTextValue] = useState(defaultValue);
+  const [submitting, setSubmitting] = useState(false);
+
+  const onSubmit = useCallback(async () => {
+    if (submitting) {
+      return;
+    }
+
+    setSubmitting(true);
+
+    try {
+      const updatedActions = (actions || []).map((item) => {
+        if (item.type === "sendCloudEvent" || item.options?.data) {
+          return {
+            ...item,
+            options: {
+              ...item.options,
+              data: {
+                ...(item.options?.data || {}),
+                name: textValue,
+              },
+            },
+          };
+        }
+
+        return item;
+      });
+
+      await actionExecutor.handleActions(updatedActions);
+      await actionExecutor.handleAction({ type: "dismissBottomSheet" });
+    } finally {
+      setSubmitting(false);
+    }
+  }, [submitting, actions, textValue]);
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.inputWrap}>
+        <AudioPlayerInput
+          configuration={VARIANT_NAME_PLAYLIST_INPUT}
+          data={{
+            placeholder: inputLabel || "",
+            label: inputLabel,
+          }}
+          value={textValue}
+          onChangeText={setTextValue}
+          onClearPress={() => setTextValue("")}
+        />
+      </View>
+      <AudioPlayerButton
+        configuration={VARIANT_TEXT_ONLY}
+        data={{ title: buttonLabel }}
+        onPress={onSubmit}
+        disabled={submitting}
+      />
+    </View>
+  );
+}

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

@@ -0,0 +1,74 @@
+import React from "react";
+import { Text } from "react-native";
+import { render, screen } from "@testing-library/react-native";
+import { BottomSheetDragArea } from "../BottomSheetDragArea";
+import { BottomSheetContext } from "@applicaster/zapp-react-native-utils/bottomSheet";
+
+// Reveal PanGestureHandler and capture its props.
+jest.mock("react-native-gesture-handler", () => {
+  const { View } = require("react-native");
+  const actual = jest.requireActual("react-native-gesture-handler");
+
+  return {
+    __esModule: true,
+    ...actual,
+    PanGestureHandler: ({
+      children,
+      onGestureEvent,
+      onHandlerStateChange,
+      simultaneousHandlers,
+    }: any) => (
+      <View
+        testID="drag-pan"
+        onGestureEvent={onGestureEvent}
+        onHandlerStateChange={onHandlerStateChange}
+        simultaneousHandlers={simultaneousHandlers}
+      >
+        {children}
+      </View>
+    ),
+  };
+});
+
+const makeValue = () => ({
+  scrollRef: React.createRef<any>(),
+  masterDrawerRef: React.createRef<any>(),
+  drawerRef: React.createRef<any>(),
+  onScroll: jest.fn(),
+  setBodyDragEnabled: jest.fn(),
+  onDragGestureEvent: jest.fn(),
+  onDragStateChange: jest.fn(),
+});
+
+describe("BottomSheetDragArea", () => {
+  it("wraps children in a sheet-wired PanGestureHandler when inside a sheet", () => {
+    const value = makeValue();
+
+    render(
+      <BottomSheetContext.Provider value={value}>
+        <BottomSheetDragArea>
+          <Text testID="child">hi</Text>
+        </BottomSheetDragArea>
+      </BottomSheetContext.Provider>
+    );
+
+    const pan = screen.getByTestId("drag-pan");
+    expect(pan.props.onGestureEvent).toBe(value.onDragGestureEvent);
+    expect(pan.props.onHandlerStateChange).toBe(value.onDragStateChange);
+
+    expect(pan.props.simultaneousHandlers).toEqual([value.masterDrawerRef]);
+
+    expect(screen.getByTestId("child")).toBeTruthy();
+  });
+
+  it("renders children bare when used outside a sheet", () => {
+    render(
+      <BottomSheetDragArea>
+        <Text testID="child">hi</Text>
+      </BottomSheetDragArea>
+    );
+
+    expect(screen.queryByTestId("drag-pan")).toBeNull();
+    expect(screen.getByTestId("child")).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,238 @@
+import React from "react";
+import { render, screen } from "@testing-library/react-native";
+import { BottomSheetModalContent } from "../BottomSheetModalContent";
+import { ContentViewModel } from "@applicaster/zapp-react-native-utils/modalState";
+
+jest.mock("react-native-sortables", () => {
+  const { View } = require("react-native");
+
+  const Grid = ({ data, renderItem }: any) => (
+    <View testID="sortable-grid">
+      {(data || []).map((item: any, index: number) =>
+        renderItem({
+          item,
+          index,
+          renderHandle: (children: any) => (
+            <View testID={`sortable-handle-${index}`}>{children}</View>
+          ),
+        })
+      )}
+    </View>
+  );
+
+  const Handle = ({ children }: any) => (
+    <View testID="sortable-handle-wrapper">{children}</View>
+  );
+
+  return {
+    __esModule: true,
+    default: {
+      Grid,
+      Handle,
+    },
+    Grid,
+    Handle,
+  };
+});
+
+jest.mock("@applicaster/zapp-react-native-utils/theme", () => ({
+  useTheme: () => ({
+    modal_bottom_sheet_padding_top: 0,
+    modal_bottom_sheet_padding_bottom: 0,
+    modal_bottom_sheet_background_color: "#000",
+    modal_bottom_sheet_item_selected_icon: null,
+  }),
+}));
+
+jest.mock("@applicaster/zapp-react-native-redux/hooks", () => ({
+  usePlugins: () => [],
+}));
+
+jest.mock("@applicaster/zapp-react-native-utils/localizationUtils", () => ({
+  useLocalizedStrings: () => ({}),
+}));
+
+jest.mock("react-native-safe-area-context", () => ({
+  useSafeAreaInsets: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),
+}));
+
+jest.mock("../Header", () => ({
+  ModalHeader: ({ title }: any) => {
+    const { Text } = require("react-native");
+
+    return <Text testID="default-header">{title}</Text>;
+  },
+}));
+
+jest.mock("../Button", () => ({
+  Button: ({ label }: any) => {
+    const { Text } = require("react-native");
+
+    return <Text testID="generic-button">{label}</Text>;
+  },
+}));
+
+jest.mock("../AudioPlayer/Components/Item", () => ({
+  AudioPlayerTrackItem: ({ data }: any) => {
+    const { Text } = require("react-native");
+
+    return <Text testID="selectable-row">{data.textLabel1}</Text>;
+  },
+  mapMenuItemToPlaylistData: (item: any) => ({ textLabel1: item.title }),
+  VARIANT_PLAYLIST_ITEM: {},
+}));
+
+jest.mock("../AudioPlayer/Components", () => ({
+  NowPlayingHeaderSection: () => null,
+  AudioPlayerButton: ({ data, onPress }: any) => {
+    const { Text } = require("react-native");
+
+    return (
+      <Text testID="create-playlist-button" onPress={onPress}>
+        {data.title}
+      </Text>
+    );
+  },
+  VARIANT_WITH_ICON: {},
+}));
+
+const baseProps = {
+  items: [{ id: "track-a", title: "Track A", label: "Track A" }],
+  onPress: jest.fn(),
+  width: 320,
+  currentRoute: true,
+  dismiss: jest.fn(),
+  title: "Sheet Title",
+  maxHeight: 400,
+};
+
+describe("BottomSheetModalContent role/behavior cells", () => {
+  it("renders standard Button rows and default header when no viewModel/role", () => {
+    render(<BottomSheetModalContent {...baseProps} />);
+
+    expect(screen.getByTestId("default-header")).toBeTruthy();
+    expect(screen.getByTestId("generic-button")).toBeTruthy();
+    expect(screen.queryByTestId("selectable-row")).toBeNull();
+  });
+
+  it("renders selectable rows when viewModel has collection_selector role", () => {
+    const viewModel = new ContentViewModel({
+      title: "Playlists",
+      items: [{ id: "fav-1", title: "Favorites" }],
+      role: "collection_selector",
+      behavior: { selectMode: "multi", currentSelection: [] },
+    });
+
+    render(<BottomSheetModalContent {...baseProps} viewModel={viewModel} />);
+
+    expect(screen.getByTestId("default-header")).toBeTruthy();
+    expect(screen.getByTestId("selectable-row")).toBeTruthy();
+    expect(screen.queryByTestId("generic-button")).toBeNull();
+  });
+
+  it("does not accept styleVariant as a rendering input", () => {
+    render(
+      <BottomSheetModalContent
+        {...baseProps}
+        {...({ styleVariant: "audio_player" } as any)}
+      />
+    );
+
+    expect(screen.getByTestId("generic-button")).toBeTruthy();
+    expect(screen.queryByTestId("selectable-row")).toBeNull();
+  });
+
+  it("renders SortableList when viewModel has dynamic_collection role with reorder operation", () => {
+    const moveMock = jest.fn();
+    const { BehaviorSubject } = require("rxjs");
+
+    const viewModel = new ContentViewModel({
+      title: "Queue",
+      items: [
+        { id: "t1", title: "Track 1" },
+        { id: "t2", title: "Track 2" },
+      ],
+      role: "dynamic_collection",
+      dynamicCollection: { operations: ["remove", "reorder"] },
+    });
+
+    viewModel.editableCollection = {
+      items$: new BehaviorSubject([
+        { id: "t1", title: "Track 1" },
+        { id: "t2", title: "Track 2" },
+      ]),
+      operations: ["remove", "reorder"],
+      move: moveMock,
+    };
+
+    render(<BottomSheetModalContent {...baseProps} viewModel={viewModel} />);
+
+    expect(screen.getByTestId("sortable-grid")).toBeTruthy();
+  });
+
+  it("renders create playlist button when operations include add and calls editableCollection.add on press", () => {
+    const addMock = jest.fn();
+    const { BehaviorSubject } = require("rxjs");
+
+    const viewModel = new ContentViewModel({
+      title: "Playlists",
+      items: [{ id: "p1", title: "Playlist 1" }],
+      role: "collection_selector",
+      dynamicCollection: { operations: ["add"] },
+    });
+
+    viewModel.editableCollection = {
+      items$: new BehaviorSubject([{ id: "p1", title: "Playlist 1" }]),
+      operations: ["add"],
+      add: addMock,
+    };
+
+    render(<BottomSheetModalContent {...baseProps} viewModel={viewModel} />);
+
+    const createBtn = screen.getByTestId("create-playlist-button");
+    expect(createBtn).toBeTruthy();
+
+    const { fireEvent } = require("@testing-library/react-native");
+    fireEvent.press(createBtn);
+
+    expect(addMock).toHaveBeenCalledWith({
+      id: "create_new_playlist",
+      title: "Create New Playlist",
+    });
+  });
+
+  it("honors disableScrollViewWrap in contentComponentProps to bypass ScrollView wrapping", () => {
+    const CustomComponent = () => (
+      <React.Fragment>Custom Content</React.Fragment>
+    );
+
+    const { UNSAFE_getByType } = render(
+      <BottomSheetModalContent
+        {...baseProps}
+        contentComponent={CustomComponent}
+        contentComponentProps={{ disableScrollViewWrap: true }}
+      />
+    );
+
+    const { ScrollView } = require("react-native");
+    expect(() => UNSAFE_getByType(ScrollView)).toThrow();
+  });
+
+  it("honors static disableScrollViewWrap property on ContentComponent", () => {
+    const CustomSelfScrollingComponent: any = () => (
+      <React.Fragment>Self Scrolling</React.Fragment>
+    );
+
+    CustomSelfScrollingComponent.disableScrollViewWrap = true;
+
+    const { UNSAFE_getByType } = render(
+      <BottomSheetModalContent
+        {...baseProps}
+        contentComponent={CustomSelfScrollingComponent}
+      />
+    );
+
+    const { ScrollView } = require("react-native");
+    expect(() => UNSAFE_getByType(ScrollView)).toThrow();
+  });
+});