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

package/Components/ModalComponent/BottomSheetModalContent.tsx

@@ -1,46 +1,17 @@
 import React, { useCallback, useEffect, useMemo, useRef } from "react";
-import {
-  ActivityIndicator,
-  ScrollView,
-  StyleSheet,
-  View,
-  Text,
-} from "react-native";
+import { View, ScrollView } 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;
@@ -52,6 +23,12 @@ 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?:
@@ -60,17 +37,13 @@ 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) {
@@ -82,16 +55,15 @@ export function BottomSheetModalContent(props: ModalComponentProps) {
     dismiss,
     summary,
     title,
-    headerComponent,
-    viewModel = null,
+    headerComponent = DefaultModalHeader,
+    scrollViewContent = 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);
@@ -99,29 +71,7 @@ export function BottomSheetModalContent(props: ModalComponentProps) {
   const paddingTop = Number(theme.modal_bottom_sheet_padding_top);
   const paddingBottom = Number(theme.modal_bottom_sheet_padding_bottom);
 
-  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;
+  const Header = headerComponent;
 
   useEffect(() => {
     if (currentRoute !== route.current) {
@@ -141,7 +91,7 @@ export function BottomSheetModalContent(props: ModalComponentProps) {
     return getItemLabelProps(theme, props.width, props.labelProps);
   }, [theme, props.width, props.labelProps]);
 
-  const handleStaticPress = useCallback(
+  const handlePress = useCallback(
     (item: any) => {
       onPress(item);
       dismiss();
@@ -149,243 +99,58 @@ 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;
 
-  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}
+  return (
+    <View
+      style={{
+        maxHeight: props.maxHeight,
+        paddingTop: paddingTop,
+      }}
+    >
+      {Header ? (
+        <BottomSheetDragArea>
+          <Header
             dismiss={dismiss}
-            width={props.width}
-            maxHeight={props.maxHeight}
+            configuration={theme}
+            summary={summary}
+            title={title}
           />
-        </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 (
+        </BottomSheetDragArea>
+      ) : null}
       <ScrollView
         overScrollMode="never"
         bounces={false}
+        showsVerticalScrollIndicator={false}
         contentContainerStyle={{
           paddingBottom: paddingBottom + bottomInset,
         }}
       >
-        {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,
-          })
-        )}
+        {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
+          )}
       </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,13 +43,11 @@ 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"]>(
-    () =>
-      (item ? (configuration[item.asset] ?? item.asset) : undefined) ??
-      defaultItemIcon,
-    [item?.asset, defaultItemIcon]
+    () => configuration[item.asset] ?? item.asset ?? 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 !== false,
+    enabled: modal_bottom_sheet_close_switch,
     width: modal_bottom_sheet_close_width,
     height: modal_bottom_sheet_close_height,
     marginTop: modal_bottom_sheet_close_margin_top,

package/Components/ModalComponent/index.tsx

@@ -1,18 +1,7 @@
 import React, { useCallback, useState } from "react";
-import { actionExecutor } from "@applicaster/zapp-react-native-utils/actionsExecutor/ActionExecutor";
 
 import { BasicMeasurementsPortal as MeasurementsPortal } from "@applicaster/zapp-react-native-ui-components/Components/MeasurmentsPortal";
 import { BottomSheetModalContent } from "./BottomSheetModalContent";
-import { showTextInputAction } from "./showTextInput";
-
-actionExecutor.registerAction("showTextInput", showTextInputAction);
-
-export { SortableList, type SortableListProps } from "./SortableList";
-
-export {
-  TextInputContent,
-  type TextInputContentProps,
-} from "./TextInputContent";
 
 export type PluginConfiguration = {
   [key: string]: any;

package/Components/OfflineHandler/__tests__/__snapshots__/index.test.tsx.snap

@@ -1,88 +1,19 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`OfflineHandler renders 1`] = `
-<View
+exports[`OfflineHandler renders its children without wrapping them in a notification view 1`] = `
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
   style={
-    {
-      "flex": 1,
-      "position": "relative",
-    }
+    [
+      {
+        "flex": 1,
+      },
+      undefined,
+    ]
   }
 >
-  <View
-    style={
-      {
-        "bottom": 0,
-        "left": 0,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
-      }
-    }
-  >
-    <View
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": undefined,
-          "expanded": undefined,
-          "selected": undefined,
-        }
-      }
-      accessible={true}
-      collapsable={false}
-      focusable={true}
-      onClick={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
-      style={
-        {
-          "alignItems": "center",
-          "backgroundColor": undefined,
-          "flex": 1,
-          "height": 88,
-          "justifyContent": "center",
-          "left": 0,
-          "opacity": 0,
-          "position": "absolute",
-          "right": 0,
-          "top": 0,
-          "transform": [
-            {
-              "translateY": -88,
-            },
-          ],
-          "width": "100%",
-        }
-      }
-    >
-      <View
-        style={
-          {
-            "backgroundColor": undefined,
-            "height": 44,
-          }
-        }
-      />
-      <Text
-        style={
-          {
-            "color": undefined,
-            "fontFamily": undefined,
-            "fontSize": undefined,
-            "letterSpacing": undefined,
-            "lineHeight": undefined,
-          }
-        }
-      >
-        You are back online
-      </Text>
-    </View>
-  </View>
-</View>
+  <Text>
+    child content
+  </Text>
+</RNCSafeAreaProvider>
 `;