@applicaster/zapp-react-native-ui-components 16.0.0-rc.12 → 16.0.0-rc.121

package/Components/ModalComponent/BottomSheetModalContent.tsx

@@ -1,16 +1,64 @@
-import React, { useCallback, useEffect, useMemo, useRef } from "react";
-import { View, ScrollView } from "react-native";
+import React, {
+  memo,
+  useCallback,
+  useDeferredValue,
+  useEffect,
+  useMemo,
+  useRef,
+} from "react";
+import {
+  ActivityIndicator,
+  ScrollView,
+  StyleSheet,
+  Text,
+  View,
+} from "react-native";
 import { Button } from "./Button";
 import { ItemIconProps } from "./Button/ItemIcon";
 import { ItemProps } from "./Button/Item";
 import { ItemLabelProps } from "./Button/ItemLabel";
 import { getItemIconProps, getItemLabelProps, getItemProps } from "./utils";
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
-
+import {
+  ContentViewModel,
+  OPERATIONS,
+  hasOperation,
+  useBottomSheetContent,
+} from "@applicaster/zapp-react-native-utils/modalState";
+import { getCell } from "./presets";
 import type { PluginConfiguration } from "./";
-
 import { ModalHeader as DefaultModalHeader } from "./Header";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { SortableList } from "./SortableList";
+import {
+  AudioPlayerButton,
+  NowPlayingHeaderSection,
+} from "./AudioPlayer/Components";
+import { BottomSheetDragArea } from "./BottomSheetDragArea";
+import { ModalBlocksStyleContext } from "./ModalBlocksStyleContext";
+import { usePlugins } from "@applicaster/zapp-react-native-redux/hooks";
+import {
+  ModalBlocksConfig,
+  parseModalBlocksConfiguration,
+} from "@applicaster/zapp-react-native-utils/configurationUtils/modalBlocksParser";
+import { useLocalizedStrings } from "@applicaster/zapp-react-native-utils/localizationUtils";
+
+const styles = StyleSheet.create({
+  centered: {
+    justifyContent: "center",
+    alignItems: "center",
+    padding: 16,
+  },
+  errorText: {
+    color: "#ff453a",
+    fontSize: 14,
+    textAlign: "center",
+  },
+  scrollView: {
+    flexShrink: 1,
+  },
+  someStyles: { paddingHorizontal: 20, paddingTop: 8, paddingBottom: 12 },
+});
 
 type ModalComponentProps = {
   items: any[];
@@ -22,7 +70,7 @@ type ModalComponentProps = {
   title?: string;
   maxHeight?: number;
   dismiss: () => void;
-  headerComponent?: React.ComponentType;
+  headerComponent?: React.ComponentType<any>;
   buttonComponent?: React.ComponentType;
   iconProps?: ItemIconProps | ((theme: PluginConfiguration) => ItemIconProps);
   itemProps?:
@@ -31,16 +79,25 @@ type ModalComponentProps = {
   labelProps?:
     | ItemLabelProps
     | ((theme: PluginConfiguration, width: number) => ItemLabelProps);
-  getSelectedItemIcon: (
+  getSelectedItemIcon?: (
     theme: PluginConfiguration
   ) => ItemIconProps["asset"] | null;
-  getDefaultItemIcon: (
+  getDefaultItemIcon?: (
     theme: PluginConfiguration
   ) => ItemIconProps["asset"] | null;
   iconPlacement?: "left" | "right";
+  viewModel?: ContentViewModel;
+  /** Optional body that replaces the items list (header stays DefaultModalHeader). */
+  contentComponent?: React.ComponentType<any>;
+  contentComponentProps?: Record<string, any>;
+  themePluginId?: string;
+  styleOverrides?: ModalBlocksConfig | Record<string, any>;
+  measurementPhase?: boolean;
+  /** Copy under Next Up when the queue has no upcoming items. */
+  emptyMessage?: string;
 };
 
-export function BottomSheetModalContent(props: ModalComponentProps) {
+function _BottomSheetModalContent(props: ModalComponentProps) {
   const {
     items,
     currentRoute,
@@ -49,20 +106,116 @@ export function BottomSheetModalContent(props: ModalComponentProps) {
     dismiss,
     summary,
     title,
-    headerComponent: ModalHeader = DefaultModalHeader,
+    headerComponent,
+    viewModel = null,
     buttonComponent: ButtonComponent = Button,
     getSelectedItemIcon = ({
       modal_bottom_sheet_item_selected_icon,
     }: BaseThemePropertiesMobile) => modal_bottom_sheet_item_selected_icon,
     getDefaultItemIcon = () => null,
     iconPlacement,
+    contentComponent: ContentComponent,
+    contentComponentProps = {},
+    themePluginId: themePluginIdProp,
+    measurementPhase = false,
+    emptyMessage,
   } = props;
 
   const route = useRef(currentRoute);
   const theme = useTheme<BaseThemePropertiesMobile>();
+  const bottomInset = useSafeAreaInsets().bottom;
   const paddingTop = Number(theme.modal_bottom_sheet_padding_top);
   const paddingBottom = Number(theme.modal_bottom_sheet_padding_bottom);
 
+  const calculatedcontentContainerStyle = useMemo(() => {
+    return {
+      paddingBottom: paddingBottom + bottomInset,
+    };
+  }, [paddingBottom, bottomInset]);
+
+  const {
+    items: fetchedItems,
+    showCentralLoading,
+    error,
+    handleItemPress,
+    role,
+    behavior,
+    editableCollection,
+    themePluginId: themePluginIdFromSheet,
+  } = useBottomSheetContent({
+    onPress,
+    viewModel,
+  });
+
+  const themePluginId = themePluginIdFromSheet || themePluginIdProp;
+
+  const plugins = usePlugins();
+
+  const plugin = useMemo(
+    () => plugins?.find((p) => p.identifier === themePluginId),
+    [plugins, themePluginId]
+  );
+
+  const styleOverrides = useMemo<ModalBlocksConfig | null>(() => {
+    const configuration =
+      plugin?.configuration || (plugin as any)?.configuration_json;
+
+    return configuration && themePluginId
+      ? parseModalBlocksConfiguration(configuration, themePluginId)
+      : null;
+  }, [plugin, themePluginId]);
+
+  const pluginLocalizations = useLocalizedStrings({
+    localizations:
+      plugin?.configuration?.localizations ||
+      (plugin as any)?.configuration_json?.localizations,
+  });
+
+  const normalizedPluginId = themePluginId?.replace(/-/g, "_");
+
+  const localizedHeaderTitle = normalizedPluginId
+    ? pluginLocalizations?.[`${normalizedPluginId}_header_title`]
+    : undefined;
+
+  const nextUpTitle =
+    pluginLocalizations?.next_up_title ||
+    (normalizedPluginId
+      ? pluginLocalizations?.[`${normalizedPluginId}_next_up_title`] ||
+        pluginLocalizations?.[`${normalizedPluginId}_label_next_up`]
+      : undefined) ||
+    "Next Up";
+
+  const nowPlayingTitle =
+    pluginLocalizations?.now_playing_title ||
+    (normalizedPluginId
+      ? pluginLocalizations?.[`${normalizedPluginId}_now_playing_title`] ||
+        pluginLocalizations?.[`${normalizedPluginId}_label_now_playing`]
+      : undefined) ||
+    "Now Playing";
+
+  const clearLabel =
+    pluginLocalizations?.clear_label ||
+    (normalizedPluginId
+      ? pluginLocalizations?.[`${normalizedPluginId}_label_clear`]
+      : undefined) ||
+    "Clear";
+
+  const resolvedTitle = props.title || localizedHeaderTitle || title;
+
+  const itemsToRender = viewModel ? fetchedItems : items;
+  const operations = editableCollection?.operations || [];
+
+  const isSortable = useDeferredValue(
+    !measurementPhase && hasOperation(operations, OPERATIONS.REORDER)
+  );
+
+  const cell = getCell(
+    viewModel ? role : undefined,
+    viewModel ? behavior : undefined
+  );
+
+  const Header = headerComponent ?? DefaultModalHeader;
+
   useEffect(() => {
     if (currentRoute !== route.current) {
       props.dismiss();
@@ -74,14 +227,24 @@ export function BottomSheetModalContent(props: ModalComponentProps) {
   }, [theme, props.iconProps]);
 
   const itemBaseProps = useMemo<ItemProps>(() => {
-    return getItemProps(theme, props.width, props.itemProps);
-  }, [theme, props.width, props.itemProps]);
+    return getItemProps(
+      theme,
+      props.width,
+      props.itemProps,
+      styleOverrides?.item
+    );
+  }, [theme, props.width, props.itemProps, styleOverrides?.item]);
 
   const labelBaseProps = useMemo<ItemLabelProps>(() => {
-    return getItemLabelProps(theme, props.width, props.labelProps);
-  }, [theme, props.width, props.labelProps]);
+    return getItemLabelProps(
+      theme,
+      props.width,
+      props.labelProps,
+      styleOverrides?.item
+    );
+  }, [theme, props.width, props.labelProps, styleOverrides?.item]);
 
-  const handlePress = useCallback(
+  const handleStaticPress = useCallback(
     (item: any) => {
       onPress(item);
       dismiss();
@@ -89,45 +252,272 @@ export function BottomSheetModalContent(props: ModalComponentProps) {
     [onPress, dismiss]
   );
 
-  const bottomInset = useSafeAreaInsets().bottom;
+  const onItemPress = viewModel ? handleItemPress : handleStaticPress;
 
-  return (
-    <View
-      style={{
-        maxHeight: props.maxHeight,
-        paddingTop: paddingTop,
-      }}
-    >
-      <ModalHeader
-        dismiss={dismiss}
-        configuration={theme}
-        summary={summary}
-        title={title}
-      />
+  const handleDragEnd = useCallback(
+    (params: any) => {
+      const from = params?.fromIndex ?? params?.from;
+      const to = params?.toIndex ?? params?.to;
+
+      const reorderedItemIds = Array.isArray(params?.data)
+        ? params.data
+            .filter((item: any) => !item?.isHeader)
+            .map((item: any) => item?.id)
+            .filter(Boolean)
+        : undefined;
+
+      if (
+        (reorderedItemIds?.length ||
+          (typeof from === "number" &&
+            typeof to === "number" &&
+            from !== to)) &&
+        editableCollection?.move
+      ) {
+        editableCollection.move(reorderedItemIds || []);
+      }
+    },
+    [editableCollection]
+  );
+
+  const renderContext = useMemo(
+    () => ({
+      theme,
+      ButtonComponent,
+      current_selection,
+      iconBaseProps,
+      itemBaseProps,
+      labelBaseProps,
+      getSelectedItemIcon,
+      getDefaultItemIcon,
+      iconPlacement,
+      editableCollection,
+      behavior,
+    }),
+    [
+      theme,
+      ButtonComponent,
+      current_selection,
+      iconBaseProps,
+      itemBaseProps,
+      labelBaseProps,
+      getSelectedItemIcon,
+      getDefaultItemIcon,
+      iconPlacement,
+      editableCollection,
+      behavior,
+    ]
+  );
+
+  const sortableListRenderItem = useCallback(
+    ({ item, index, renderHandle }) =>
+      cell.renderItem({
+        item,
+        index,
+        onPress: onItemPress,
+        context: renderContext,
+        renderHandle,
+      }),
+    [cell, onItemPress, renderContext]
+  );
+
+  const hasNowPlaying = hasOperation(operations, OPERATIONS.NOW_PLAYING);
+  const hasClearAll = hasOperation(operations, OPERATIONS.CLEAR_ALL);
+  const hasAdd = hasOperation(operations, OPERATIONS.ADD);
+  const isQueueEmpty = hasNowPlaying && (itemsToRender?.length ?? 0) === 0;
+
+  const handleDeleteCollection = useCallback(() => {
+    editableCollection?.deleteCollection?.();
+  }, [editableCollection]);
+
+  const handleCreatePlaylist = useCallback(() => {
+    editableCollection?.add?.({
+      id: "create_new_playlist",
+      title: "unknown title",
+    });
+  }, [editableCollection]);
+
+  const headers = useMemo(() => {
+    const list: Array<{ index: number; component: () => React.ReactElement }> =
+      [];
+
+    if (hasNowPlaying) {
+      list.push({
+        index: list.length,
+        component: () => (
+          <NowPlayingHeaderSection
+            onClear={hasClearAll ? handleDeleteCollection : undefined}
+            nextUpTitle={nextUpTitle}
+            nowPlayingTitle={nowPlayingTitle}
+            isEmpty={isQueueEmpty}
+            emptyMessage={emptyMessage}
+            clearLabel={clearLabel}
+          />
+        ),
+      });
+    }
+
+    if (hasAdd) {
+      list.push({
+        index: list.length,
+        component: () => (
+          <View
+            style={{ paddingHorizontal: 20, paddingTop: 8, paddingBottom: 12 }}
+          >
+            <AudioPlayerButton onPress={handleCreatePlaylist} />
+          </View>
+        ),
+      });
+    }
+
+    return list.length > 0 ? list : undefined;
+  }, [
+    hasNowPlaying,
+    hasClearAll,
+    handleDeleteCollection,
+    nextUpTitle,
+    nowPlayingTitle,
+    isQueueEmpty,
+    emptyMessage,
+    clearLabel,
+    hasAdd,
+    handleCreatePlaylist,
+  ]);
+
+  const _items = useMemo(() => {
+    return (itemsToRender || []).map((item, index) =>
+      cell.renderItem({
+        item,
+        index,
+        onPress: onItemPress,
+        context: renderContext,
+      })
+    );
+  }, [itemsToRender, cell, onItemPress, renderContext]);
+
+  const _styles = useMemo(() => {
+    return {
+      maxHeight: props.maxHeight,
+      paddingTop: paddingTop,
+    };
+  }, [props.maxHeight, paddingTop]);
+
+  const renderedBody = (() => {
+    if (ContentComponent) {
+      const shouldWrapInScrollView =
+        !contentComponentProps?.disableScrollViewWrap &&
+        !(ContentComponent as any)?.disableScrollViewWrap;
+
+      if (shouldWrapInScrollView) {
+        return (
+          <ScrollView
+            keyboardShouldPersistTaps="handled"
+            contentContainerStyle={calculatedcontentContainerStyle}
+          >
+            <ContentComponent
+              {...contentComponentProps}
+              dismiss={dismiss}
+              width={props.width}
+              maxHeight={props.maxHeight}
+            />
+          </ScrollView>
+        );
+      }
+
+      return (
+        <View style={[styles.scrollView, calculatedcontentContainerStyle]}>
+          <ContentComponent
+            {...contentComponentProps}
+            dismiss={dismiss}
+            width={props.width}
+            maxHeight={props.maxHeight}
+          />
+        </View>
+      );
+    }
+
+    if (showCentralLoading) {
+      const loaderColor =
+        (theme as any)?.modal_bottom_sheet_activity_indicator_color ||
+        (theme as any)?.cell_title_color ||
+        "#ffffff";
+
+      return (
+        <View
+          style={[
+            styles.centered,
+            { backgroundColor: theme.modal_bottom_sheet_background_color },
+          ]}
+        >
+          <ActivityIndicator color={loaderColor} />
+        </View>
+      );
+    }
+
+    if (error) {
+      return (
+        <View style={styles.centered}>
+          <Text style={styles.errorText}>
+            {typeof error === "string" ? error : error.message}
+          </Text>
+        </View>
+      );
+    }
+
+    if (isSortable) {
+      return (
+        <SortableList
+          sortableData={itemsToRender}
+          headers={headers}
+          scrollViewStyle={styles.scrollView}
+          contentContainerStyle={calculatedcontentContainerStyle}
+          onDragEnd={handleDragEnd}
+          renderItem={sortableListRenderItem}
+        />
+      );
+    }
+
+    return (
       <ScrollView
-        contentContainerStyle={{
-          paddingBottom: paddingBottom + bottomInset,
-        }}
+        keyboardShouldPersistTaps="handled"
+        overScrollMode="never"
+        bounces={false}
+        contentContainerStyle={calculatedcontentContainerStyle}
       >
-        {items.map((item, index) =>
-          item ? (
-            <ButtonComponent
-              key={index}
-              configuration={theme}
-              selectedItem={current_selection}
-              item={item}
-              onPress={handlePress}
-              label={theme[item?.label] ?? item?.label}
-              iconBaseProps={iconBaseProps}
-              itemBaseProps={itemBaseProps}
-              labelBaseProps={labelBaseProps}
-              selectedItemIcon={getSelectedItemIcon(theme)}
-              defaultItemIcon={getDefaultItemIcon(theme)}
-              iconPlacement={iconPlacement}
-            />
-          ) : null
-        )}
+        {hasNowPlaying ? (
+          <NowPlayingHeaderSection
+            onClear={hasClearAll ? handleDeleteCollection : undefined}
+            nextUpTitle={nextUpTitle}
+            nowPlayingTitle={nowPlayingTitle}
+            isEmpty={isQueueEmpty}
+            emptyMessage={emptyMessage}
+            clearLabel={clearLabel}
+          />
+        ) : null}
+        {hasAdd ? (
+          <View style={styles.someStyles}>
+            <AudioPlayerButton onPress={handleCreatePlaylist} />
+          </View>
+        ) : null}
+        {_items}
       </ScrollView>
-    </View>
+    );
+  })();
+
+  return (
+    <ModalBlocksStyleContext.Provider value={styleOverrides as any}>
+      <View style={_styles}>
+        <BottomSheetDragArea>
+          <Header
+            dismiss={dismiss}
+            configuration={theme}
+            summary={summary}
+            title={resolvedTitle}
+          />
+        </BottomSheetDragArea>
+        {renderedBody}
+      </View>
+    </ModalBlocksStyleContext.Provider>
   );
 }
+
+export const BottomSheetModalContent = memo(_BottomSheetModalContent);

package/Components/ModalComponent/Button/index.tsx

@@ -43,11 +43,13 @@ export function Button({
 }: ButtonProps) {
   const [focused, setFocused] = useState(false);
 
-  const selected = selectedItem && item.value === selectedItem?.value;
+  const selected = selectedItem && item?.value === selectedItem?.value;
 
   const itemIconPropsAssets = useMemo<ItemIconProps["asset"]>(
-    () => configuration[item.asset] ?? item.asset ?? defaultItemIcon,
-    [item.asset, defaultItemIcon]
+    () =>
+      (item ? (configuration[item.asset] ?? item.asset) : undefined) ??
+      defaultItemIcon,
+    [item?.asset, defaultItemIcon]
   );
 
   const selectedItemIconPropsAssets = useMemo<ItemIconProps["asset"]>(

package/Components/ModalComponent/Header/CloseButton.tsx

@@ -1,6 +1,7 @@
 import React, { useMemo } from "react";
 import { TouchableOpacity } from "react-native";
 import { QBImage } from "@applicaster/zapp-react-native-ui-components/Components";
+import { AccessibilityManager } from "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager";
 // @ts-ignore
 import { defaultCloseAsset } from "./assets";
 
@@ -40,9 +41,20 @@ export function CloseButton(props: CloseButtonProps) {
 
   if (!enabled) return null;
 
+  // Expose the close button as its own accessible control so screen readers
+  // (e.g. iOS VoiceOver) can focus and activate it. The image-only button
+  // otherwise has no label/role, leaving it unreachable/unannounced. Uses the
+  // framework's localized "close" button config (label + hint + button role).
+  // Computed each render (not memoized) so runtime localization updates via
+  // AccessibilityManager.updateLocalizations() are picked up on re-render.
+  const accessibilityProps =
+    AccessibilityManager.getInstance().getButtonAccessibilityProps("close");
+
   return (
     <TouchableOpacity
       activeOpacity={1}
+      testID="closeButton"
+      {...accessibilityProps}
       style={{
         marginBottom,
         marginTop,

package/Components/ModalComponent/Header/__tests__/CloseButton.test.tsx

@@ -0,0 +1,72 @@
+import React from "react";
+import { fireEvent, render, screen } from "@testing-library/react-native";
+import { CloseButton, CloseButtonProps } from "../CloseButton";
+
+jest.mock("@applicaster/zapp-react-native-ui-components/Components", () => {
+  const { Image } = require("react-native");
+
+  return { QBImage: Image };
+});
+
+const mockGetButtonA11yProps = jest.fn(() => ({
+  accessible: true,
+  accessibilityLabel: "Close",
+  accessibilityHint: "Closes the sheet",
+  accessibilityRole: "button",
+}));
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager",
+  () => ({
+    AccessibilityManager: {
+      getInstance: () => ({
+        getButtonAccessibilityProps: mockGetButtonA11yProps,
+      }),
+    },
+  })
+);
+
+const baseProps: CloseButtonProps = {
+  enabled: true,
+  close: jest.fn(),
+  asset: "close.png",
+  assetFocused: "close_focused.png",
+  height: 24,
+  width: 24,
+  marginTop: 0,
+  marginBottom: 0,
+  marginLeft: 0,
+  marginRight: 0,
+};
+
+describe("ModalComponent Header CloseButton", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("renders as an accessible button reachable by screen readers", () => {
+    render(<CloseButton {...baseProps} />);
+
+    const button = screen.getByTestId("closeButton");
+
+    expect(button.props.accessible).toBe(true);
+    expect(button.props.accessibilityRole).toBe("button");
+    expect(button.props.accessibilityLabel).toBe("Close");
+    expect(mockGetButtonA11yProps).toHaveBeenCalledWith("close");
+  });
+
+  it("invokes close on press", () => {
+    const close = jest.fn();
+    render(<CloseButton {...baseProps} close={close} />);
+
+    fireEvent.press(screen.getByTestId("closeButton"));
+
+    expect(close).toHaveBeenCalledTimes(1);
+  });
+
+  it("renders nothing when disabled", () => {
+    render(<CloseButton {...baseProps} enabled={false} />);
+
+    expect(screen.queryByTestId("closeButton")).toBeNull();
+  });
+});