@applicaster/zapp-react-native-ui-components 15.1.5 → 15.1.6-alpha.2015591222

package/Components/ModalComponent/BottomSheetModalContent.tsx

@@ -1,17 +1,46 @@
 import React, { useCallback, useEffect, useMemo, useRef } from "react";
-import { View, ScrollView } from "react-native";
+import {
+  ActivityIndicator,
+  ScrollView,
+  StyleSheet,
+  View,
+  Text,
+} 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,
+  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 {
+  NowPlayingHeaderSection,
+  AudioPlayerButton,
+  VARIANT_WITH_ICON,
+} from "./AudioPlayer/Components";
 import { BottomSheetDragArea } from "./BottomSheetDragArea";
 
+const styles = StyleSheet.create({
+  centered: {
+    justifyContent: "center",
+    alignItems: "center",
+    padding: 16,
+  },
+  errorText: {
+    color: "#ff453a",
+    fontSize: 14,
+    textAlign: "center",
+  },
+});
+
 type ModalComponentProps = {
   items: any[];
   current_selection?: any;
@@ -23,12 +52,6 @@ type ModalComponentProps = {
   maxHeight?: number;
   dismiss: () => void;
   headerComponent?: React.ComponentType;
-
-  scrollViewContent?: {
-    renderItem: (item: any, index: number) => React.ReactNode;
-    items: any[];
-  } | null;
-
   buttonComponent?: React.ComponentType;
   iconProps?: ItemIconProps | ((theme: PluginConfiguration) => ItemIconProps);
   itemProps?:
@@ -37,13 +60,17 @@ 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>;
 };
 
 export function BottomSheetModalContent(props: ModalComponentProps) {
@@ -55,15 +82,16 @@ export function BottomSheetModalContent(props: ModalComponentProps) {
     dismiss,
     summary,
     title,
-    headerComponent = DefaultModalHeader,
-    scrollViewContent = null,
-
+    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 = {},
   } = props;
 
   const route = useRef(currentRoute);
@@ -71,7 +99,29 @@ 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,
+  } = useBottomSheetContent({
+    onPress,
+    viewModel,
+  });
+
+  const itemsToRender = viewModel ? fetchedItems : items;
+  const operations = editableCollection?.operations || [];
+  const isSortable = operations.includes("reorder");
+
+  const cell = getCell(
+    viewModel ? role : undefined,
+    viewModel ? behavior : undefined
+  );
+
+  const Header = headerComponent ?? DefaultModalHeader;
 
   useEffect(() => {
     if (currentRoute !== route.current) {
@@ -91,7 +141,7 @@ export function BottomSheetModalContent(props: ModalComponentProps) {
     return getItemLabelProps(theme, props.width, props.labelProps);
   }, [theme, props.width, props.labelProps]);
 
-  const handlePress = useCallback(
+  const handleStaticPress = useCallback(
     (item: any) => {
       onPress(item);
       dismiss();
@@ -99,58 +149,243 @@ 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;
+
+      console.log("[BottomSheetModalContent] handleDragEnd:", {
+        from,
+        to,
+        reorderedItemIds,
+        hasEditableCollection: !!editableCollection,
+        hasMove: !!editableCollection?.move,
+      });
+
+      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 = operations.includes("nowPlaying");
+  const hasClearAll = operations.includes("clearAll");
+  const hasAdd = operations.includes("add");
+
+  const handleDeleteCollection = useCallback(() => {
+    editableCollection?.deleteCollection?.();
+  }, [editableCollection]);
+
+  const handleCreatePlaylist = useCallback(() => {
+    editableCollection?.add?.({ title: "Create New Playlist" });
+  }, [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}
+          />
+        ),
+      });
+    }
+
+    if (hasAdd) {
+      list.push({
+        index: list.length,
+        component: () => (
+          <View
+            style={{ paddingHorizontal: 20, paddingTop: 8, paddingBottom: 12 }}
+          >
+            <AudioPlayerButton
+              configuration={VARIANT_WITH_ICON}
+              data={{ title: "Create New Playlist" }}
+              onPress={handleCreatePlaylist}
+            />
+          </View>
+        ),
+      });
+    }
+
+    return list.length > 0 ? list : undefined;
+  }, [
+    hasNowPlaying,
+    hasClearAll,
+    handleDeleteCollection,
+    hasAdd,
+    handleCreatePlaylist,
+  ]);
+
+  const renderBody = () => {
+    if (ContentComponent) {
+      return (
+        <ScrollView
+          contentContainerStyle={{
+            paddingBottom: paddingBottom + bottomInset,
+          }}
+        >
+          <ContentComponent
+            {...contentComponentProps}
             dismiss={dismiss}
-            configuration={theme}
-            summary={summary}
-            title={title}
+            width={props.width}
+            maxHeight={props.maxHeight}
           />
-        </BottomSheetDragArea>
-      ) : null}
+        </ScrollView>
+      );
+    }
+
+    if (showCentralLoading) {
+      return (
+        <View
+          style={[
+            styles.centered,
+            { backgroundColor: theme.modal_bottom_sheet_background_color },
+          ]}
+        >
+          <ActivityIndicator color="#aaaaaa" />
+        </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: "Create New Playlist" }}
+              onPress={handleCreatePlaylist}
+            />
+          </View>
+        ) : null}
+        {(itemsToRender || []).map((item, index) =>
+          cell.renderItem({
+            item,
+            index,
+            onPress: onItemPress,
+            context: renderContext,
+          })
+        )}
       </ScrollView>
+    );
+  };
+
+  return (
+    <View
+      style={{
+        maxHeight: props.maxHeight,
+        paddingTop: paddingTop,
+      }}
+    >
+      <BottomSheetDragArea>
+        <Header
+          dismiss={dismiss}
+          configuration={theme}
+          summary={summary}
+          title={title}
+        />
+      </BottomSheetDragArea>
+      {renderBody()}
     </View>
   );
 }

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/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/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={"sortable-item-" + index} style={itemStyle}>
+            {renderItem({
+              item,
+              index,
+              renderHandle: (children) => (
+                <Sortable.Handle>{children}</Sortable.Handle>
+              ),
+            })}
+          </View>
+        )}
+      />
+    </Animated.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>
+  );
+}