@applicaster/zapp-react-native-ui-components 16.0.0-rc.57 → 16.0.0-rc.58

package/Components/ModalComponent/BottomSheetModalContent.tsx

@@ -1,16 +1,54 @@
 import React, { useCallback, useEffect, useMemo, useRef } from "react";
-import { View, ScrollView } from "react-native";
+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,
+  VARIANT_WITH_ICON,
+} 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",
+  },
+});
 
 type ModalComponentProps = {
   items: any[];
@@ -22,13 +60,8 @@ type ModalComponentProps = {
   title?: string;
   maxHeight?: number;
   dismiss: () => void;
-  headerComponent?: React.ComponentType;
-
-  scrollViewContent?: {
-    renderItem: (item: any, index: number) => React.ReactNode;
-    items: any[];
-  } | null;
-
+  headerComponent?: React.ComponentType<any>;
+  headerComponentProps?: Record<string, any>;
   buttonComponent?: React.ComponentType;
   iconProps?: ItemIconProps | ((theme: PluginConfiguration) => ItemIconProps);
   itemProps?:
@@ -37,13 +70,18 @@ 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>;
+  styleOverrides?: ModalBlocksConfig | Record<string, any>;
 };
 
 export function BottomSheetModalContent(props: ModalComponentProps) {
@@ -55,15 +93,18 @@ export function BottomSheetModalContent(props: ModalComponentProps) {
     dismiss,
     summary,
     title,
-    headerComponent = DefaultModalHeader,
-    scrollViewContent = null,
-
+    headerComponent,
+    headerComponentProps,
+    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 = {},
+    styleOverrides: propStyleOverrides,
   } = props;
 
   const route = useRef(currentRoute);
@@ -71,7 +112,67 @@ export function BottomSheetModalContent(props: ModalComponentProps) {
   const paddingTop = Number(theme.modal_bottom_sheet_padding_top);
   const paddingBottom = Number(theme.modal_bottom_sheet_padding_bottom);
 
-  const Header = headerComponent;
+  const {
+    items: fetchedItems,
+    showCentralLoading,
+    error,
+    handleItemPress,
+    role,
+    behavior,
+    editableCollection,
+    themePluginId,
+  } = useBottomSheetContent({
+    onPress,
+    viewModel,
+  });
+
+  const plugins = usePlugins();
+
+  const plugin = useMemo(
+    () => plugins?.find((p) => p.identifier === themePluginId),
+    [plugins, themePluginId]
+  );
+
+  const styleOverrides = useMemo(() => {
+    if (propStyleOverrides) {
+      return propStyleOverrides;
+    }
+
+    const configuration =
+      plugin?.configuration || (plugin as any)?.configuration_json;
+
+    if (!configuration || !themePluginId) return null;
+
+    return parseModalBlocksConfiguration(configuration, themePluginId);
+  }, [propStyleOverrides, 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 createPlaylistTitle =
+    pluginLocalizations?.create_new_playlist_title || "Create New Playlist";
+
+  const resolvedTitle = props.title || localizedHeaderTitle || title;
+
+  const itemsToRender = viewModel ? fetchedItems : items;
+  const operations = editableCollection?.operations || [];
+  const isSortable = hasOperation(operations, OPERATIONS.REORDER);
+
+  const cell = getCell(
+    viewModel ? role : undefined,
+    viewModel ? behavior : undefined
+  );
+
+  const Header = headerComponent ?? DefaultModalHeader;
 
   useEffect(() => {
     if (currentRoute !== route.current) {
@@ -84,14 +185,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();
@@ -99,58 +210,268 @@ export function BottomSheetModalContent(props: ModalComponentProps) {
     [onPress, dismiss]
   );
 
+  const onItemPress = viewModel ? handleItemPress : handleStaticPress;
+
+  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 bottomInset = useSafeAreaInsets().bottom;
 
-  return (
-    <View
-      style={{
-        maxHeight: props.maxHeight,
-        paddingTop: paddingTop,
-      }}
-    >
-      {Header ? (
-        <BottomSheetDragArea>
-          <Header
+  const hasNowPlaying = hasOperation(operations, OPERATIONS.NOW_PLAYING);
+  const hasClearAll = hasOperation(operations, OPERATIONS.CLEAR_ALL);
+  const hasAdd = hasOperation(operations, OPERATIONS.ADD);
+
+  const handleDeleteCollection = useCallback(() => {
+    editableCollection?.deleteCollection?.();
+  }, [editableCollection]);
+
+  const handleCreatePlaylist = useCallback(() => {
+    editableCollection?.add?.({
+      id: "create_new_playlist",
+      title: createPlaylistTitle,
+    });
+  }, [editableCollection, createPlaylistTitle]);
+
+  const headers = useMemo(() => {
+    const list: Array<{ index: number; component: () => React.ReactElement }> =
+      [];
+
+    if (hasNowPlaying) {
+      list.push({
+        index: list.length,
+        component: () => (
+          <NowPlayingHeaderSection
+            onClear={hasClearAll ? handleDeleteCollection : undefined}
+          />
+        ),
+      });
+    }
+
+    if (hasAdd) {
+      list.push({
+        index: list.length,
+        component: () => (
+          <View
+            style={{ paddingHorizontal: 20, paddingTop: 8, paddingBottom: 12 }}
+          >
+            <AudioPlayerButton
+              configuration={VARIANT_WITH_ICON}
+              data={{ title: createPlaylistTitle }}
+              onPress={handleCreatePlaylist}
+            />
+          </View>
+        ),
+      });
+    }
+
+    return list.length > 0 ? list : undefined;
+  }, [
+    hasNowPlaying,
+    hasClearAll,
+    handleDeleteCollection,
+    hasAdd,
+    handleCreatePlaylist,
+  ]);
+
+  const renderBody = () => {
+    if (ContentComponent) {
+      const shouldWrapInScrollView =
+        !contentComponentProps?.disableScrollViewWrap &&
+        !(ContentComponent as any)?.disableScrollViewWrap;
+
+      if (shouldWrapInScrollView) {
+        return (
+          <ScrollView
+            contentContainerStyle={{
+              paddingBottom: paddingBottom + bottomInset,
+            }}
+          >
+            <ContentComponent
+              {...contentComponentProps}
+              dismiss={dismiss}
+              width={props.width}
+              maxHeight={props.maxHeight}
+            />
+          </ScrollView>
+        );
+      }
+
+      return (
+        <View
+          style={{
+            flexShrink: 1,
+            paddingBottom: paddingBottom + bottomInset,
+          }}
+        >
+          <ContentComponent
+            {...contentComponentProps}
             dismiss={dismiss}
-            configuration={theme}
-            summary={summary}
-            title={title}
+            width={props.width}
+            maxHeight={props.maxHeight}
           />
-        </BottomSheetDragArea>
-      ) : null}
+        </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={{
+            flexShrink: 1,
+          }}
+          contentContainerStyle={{
+            paddingBottom: paddingBottom + bottomInset,
+          }}
+          onDragEnd={handleDragEnd}
+          renderItem={({ item, index, renderHandle }) =>
+            cell.renderItem({
+              item,
+              index,
+              onPress: onItemPress,
+              context: renderContext,
+              renderHandle,
+            })
+          }
+        />
+      );
+    }
+
+    return (
       <ScrollView
         overScrollMode="never"
         bounces={false}
-        showsVerticalScrollIndicator={false}
         contentContainerStyle={{
           paddingBottom: paddingBottom + bottomInset,
         }}
       >
-        {scrollViewContent
-          ? scrollViewContent.items.map((item, index) =>
-              scrollViewContent.renderItem(item, index)
-            )
-          : null}
-        {!scrollViewContent &&
-          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}
+          />
+        ) : null}
+        {hasAdd ? (
+          <View
+            style={{ paddingHorizontal: 20, paddingTop: 8, paddingBottom: 12 }}
+          >
+            <AudioPlayerButton
+              configuration={VARIANT_WITH_ICON}
+              data={{ title: createPlaylistTitle }}
+              onPress={handleCreatePlaylist}
+            />
+          </View>
+        ) : null}
+        {(itemsToRender || []).map((item, index) =>
+          cell.renderItem({
+            item,
+            index,
+            onPress: onItemPress,
+            context: renderContext,
+          })
+        )}
       </ScrollView>
-    </View>
+    );
+  };
+
+  return (
+    <ModalBlocksStyleContext.Provider value={styleOverrides as any}>
+      <View
+        style={{
+          maxHeight: props.maxHeight,
+          paddingTop: paddingTop,
+        }}
+      >
+        <BottomSheetDragArea>
+          <Header
+            {...(headerComponentProps || {})}
+            dismiss={dismiss}
+            configuration={theme}
+            summary={summary}
+            title={resolvedTitle}
+          />
+        </BottomSheetDragArea>
+        {renderBody()}
+      </View>
+    </ModalBlocksStyleContext.Provider>
   );
 }

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/index.tsx

@@ -4,6 +4,7 @@ import { Title, TitleProps } from "./Title";
 import { CloseButton, CloseButtonProps } from "./CloseButton";
 import { getCloseButtonProps, getTitleProps } from "./utils";
 import { PluginConfiguration } from "../index";
+import { useModalBlocksStyle } from "../ModalBlocksStyleContext";
 
 type Props = {
   dismiss: () => void;
@@ -28,6 +29,14 @@ const styles = StyleSheet.create({
 
 export function ModalHeader(props: Props) {
   const { configuration, dismiss, onLayout, summary, title } = props;
+  const modalBlocksStyle = useModalBlocksStyle();
+  const headerBlock = modalBlocksStyle?.header;
+
+  const containerStyle = useMemo(() => {
+    const bg = headerBlock?.container?.default?.backgroundColor;
+
+    return [styles.container, bg ? { backgroundColor: bg } : null];
+  }, [headerBlock?.container?.default?.backgroundColor]);
 
   const closeButtonProps = useMemo<CloseButtonProps>(
     () => ({
@@ -37,13 +46,17 @@ export function ModalHeader(props: Props) {
     [configuration, dismiss]
   );
 
-  const titleProps = useMemo<TitleProps>(
-    () => ({
-      ...getTitleProps(configuration, "title"),
+  const titleProps = useMemo<TitleProps>(() => {
+    const baseProps = getTitleProps(configuration, "title");
+    const titleOverride = headerBlock?.title?.default;
+
+    return {
+      ...baseProps,
       text: title,
-    }),
-    [configuration, title]
-  );
+      ...(titleOverride?.fontColor ? { color: titleOverride.fontColor } : {}),
+      ...(titleOverride?.fontSize ? { fontSize: titleOverride.fontSize } : {}),
+    };
+  }, [configuration, title, headerBlock?.title?.default]);
 
   const summaryProps = useMemo<TitleProps>(
     () => ({
@@ -59,7 +72,7 @@ export function ModalHeader(props: Props) {
     configuration.modal_bottom_sheet_close_margin_right;
 
   return (
-    <View onLayout={onLayout} style={styles.container}>
+    <View onLayout={onLayout} style={containerStyle}>
       <View style={styles.flex}>
         {title ? <Title {...titleProps} /> : null}
         {summary ? <Title {...summaryProps} /> : null}

package/Components/ModalComponent/Header/utils.ts

@@ -18,7 +18,7 @@ export function getCloseButtonProps(config: PluginConfiguration) {
   return {
     asset: modal_bottom_sheet_close_asset,
     assetFocused: modal_bottom_sheet_close_focus_asset,
-    enabled: modal_bottom_sheet_close_switch,
+    enabled: modal_bottom_sheet_close_switch !== false,
     width: modal_bottom_sheet_close_width,
     height: modal_bottom_sheet_close_height,
     marginTop: modal_bottom_sheet_close_margin_top,

package/Components/ModalComponent/ModalBlocksStyleContext.tsx

@@ -0,0 +1,10 @@
+import React, { useContext } from "react";
+import type { ModalBlocksConfig } from "@applicaster/zapp-react-native-utils/configurationUtils/modalBlocksParser";
+
+export const ModalBlocksStyleContext = React.createContext<
+  ModalBlocksConfig | Record<string, any> | undefined
+>(undefined);
+
+export const useModalBlocksStyle = () => {
+  return useContext(ModalBlocksStyleContext);
+};