@applicaster/zapp-react-native-ui-components 16.0.0-alpha.1593888345 → 16.0.0-alpha.1701179921

package/Components/ModalComponent/BottomSheetModalContent.tsx

@@ -1,4 +1,11 @@
-import React, { useCallback, useEffect, useMemo, useRef } from "react";
+import React, {
+  memo,
+  useCallback,
+  useDeferredValue,
+  useEffect,
+  useMemo,
+  useRef,
+} from "react";
 import {
   ActivityIndicator,
   ScrollView,
@@ -26,7 +33,6 @@ import { SortableList } from "./SortableList";
 import {
   AudioPlayerButton,
   NowPlayingHeaderSection,
-  VARIANT_WITH_ICON,
 } from "./AudioPlayer/Components";
 import { BottomSheetDragArea } from "./BottomSheetDragArea";
 import { ModalBlocksStyleContext } from "./ModalBlocksStyleContext";
@@ -48,6 +54,10 @@ const styles = StyleSheet.create({
     fontSize: 14,
     textAlign: "center",
   },
+  scrollView: {
+    flexShrink: 1,
+  },
+  someStyles: { paddingHorizontal: 20, paddingTop: 8, paddingBottom: 12 },
 });
 
 type ModalComponentProps = {
@@ -81,9 +91,12 @@ type ModalComponentProps = {
   contentComponent?: React.ComponentType<any>;
   contentComponentProps?: Record<string, any>;
   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,
@@ -103,13 +116,22 @@ export function BottomSheetModalContent(props: ModalComponentProps) {
     contentComponent: ContentComponent,
     contentComponentProps = {},
     styleOverrides: propStyleOverrides,
+    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,
@@ -131,17 +153,81 @@ export function BottomSheetModalContent(props: ModalComponentProps) {
     [plugins, themePluginId]
   );
 
-  const styleOverrides = useMemo(() => {
-    if (propStyleOverrides) {
-      return propStyleOverrides;
-    }
-
+  const styleOverrides = useMemo<ModalBlocksConfig | null>(() => {
     const configuration =
       plugin?.configuration || (plugin as any)?.configuration_json;
 
-    if (!configuration || !themePluginId) return null;
+    const parsed =
+      configuration && themePluginId
+        ? parseModalBlocksConfiguration(configuration, themePluginId)
+        : null;
+
+    if (!propStyleOverrides) {
+      return parsed;
+    }
+
+    // hydrate(QueueStyles) only emits sectionHeader after the plugin class
+    // includes it. Until then, Studio/local keys in configuration_json still
+    // apply via the parser.
+    const hydratedSection = propStyleOverrides.sectionHeader;
+
+    const hasTitleStyle = (style?: Record<string, any>) =>
+      Boolean(
+        style &&
+          (style.fontColor ||
+            style.fontSize !== undefined ||
+            style.lineHeight !== undefined ||
+            style.fontFamily ||
+            style.iosFontFamily ||
+            style.androidFontFamily ||
+            style.letterSpacing !== undefined ||
+            style.iosLetterSpacing !== undefined ||
+            style.androidLetterSpacing !== undefined ||
+            style.textTransform ||
+            style.alignment)
+      );
+
+    const hasActionStyle = (style?: Record<string, any>) =>
+      Boolean(
+        style &&
+          (style.backgroundColor ||
+            style.fontColor ||
+            style.fontSize !== undefined ||
+            style.lineHeight !== undefined ||
+            style.fontFamily ||
+            style.iosFontFamily ||
+            style.androidFontFamily ||
+            style.letterSpacing !== undefined ||
+            style.iosLetterSpacing !== undefined ||
+            style.androidLetterSpacing !== undefined ||
+            style.textTransform ||
+            style.borderRadius !== undefined ||
+            style.cornerRadius !== undefined ||
+            style.paddingTop !== undefined ||
+            style.paddingRight !== undefined ||
+            style.paddingBottom !== undefined ||
+            style.paddingLeft !== undefined)
+      );
 
-    return parseModalBlocksConfiguration(configuration, themePluginId);
+    const actionNode = hydratedSection?.actionButtons;
+
+    // An empty `default: {}` is truthy and would hide fields set on the flat
+    // object or on the focused bucket.
+    const hasHydratedSection =
+      hasTitleStyle(hydratedSection?.title?.default) ||
+      hasTitleStyle(hydratedSection?.title) ||
+      hasActionStyle(actionNode?.default) ||
+      hasActionStyle(actionNode?.focused) ||
+      hasActionStyle(actionNode?.focus) ||
+      hasActionStyle(actionNode);
+
+    return {
+      ...parsed,
+      ...propStyleOverrides,
+      sectionHeader: hasHydratedSection
+        ? hydratedSection
+        : parsed?.sectionHeader,
+    };
   }, [propStyleOverrides, plugin, themePluginId]);
 
   const pluginLocalizations = useLocalizedStrings({
@@ -156,14 +242,37 @@ export function BottomSheetModalContent(props: ModalComponentProps) {
     ? pluginLocalizations?.[`${normalizedPluginId}_header_title`]
     : undefined;
 
-  const createPlaylistTitle =
-    pluginLocalizations?.create_new_playlist_title || "Create New Playlist";
+  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 = hasOperation(operations, OPERATIONS.REORDER);
+
+  const isSortable = useDeferredValue(
+    !measurementPhase && hasOperation(operations, OPERATIONS.REORDER)
+  );
 
   const cell = getCell(
     viewModel ? role : undefined,
@@ -264,11 +373,22 @@ export function BottomSheetModalContent(props: ModalComponentProps) {
     ]
   );
 
-  const bottomInset = useSafeAreaInsets().bottom;
+  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?.();
@@ -277,9 +397,9 @@ export function BottomSheetModalContent(props: ModalComponentProps) {
   const handleCreatePlaylist = useCallback(() => {
     editableCollection?.add?.({
       id: "create_new_playlist",
-      title: createPlaylistTitle,
+      title: "unknown title",
     });
-  }, [editableCollection, createPlaylistTitle]);
+  }, [editableCollection]);
 
   const headers = useMemo(() => {
     const list: Array<{ index: number; component: () => React.ReactElement }> =
@@ -291,6 +411,11 @@ export function BottomSheetModalContent(props: ModalComponentProps) {
         component: () => (
           <NowPlayingHeaderSection
             onClear={hasClearAll ? handleDeleteCollection : undefined}
+            nextUpTitle={nextUpTitle}
+            nowPlayingTitle={nowPlayingTitle}
+            isEmpty={isQueueEmpty}
+            emptyMessage={emptyMessage}
+            clearLabel={clearLabel}
           />
         ),
       });
@@ -303,11 +428,7 @@ export function BottomSheetModalContent(props: ModalComponentProps) {
           <View
             style={{ paddingHorizontal: 20, paddingTop: 8, paddingBottom: 12 }}
           >
-            <AudioPlayerButton
-              configuration={VARIANT_WITH_ICON}
-              data={{ title: createPlaylistTitle }}
-              onPress={handleCreatePlaylist}
-            />
+            <AudioPlayerButton onPress={handleCreatePlaylist} />
           </View>
         ),
       });
@@ -318,11 +439,34 @@ export function BottomSheetModalContent(props: ModalComponentProps) {
     hasNowPlaying,
     hasClearAll,
     handleDeleteCollection,
+    nextUpTitle,
+    nowPlayingTitle,
+    isQueueEmpty,
+    emptyMessage,
+    clearLabel,
     hasAdd,
     handleCreatePlaylist,
   ]);
 
-  const renderBody = () => {
+  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 &&
@@ -331,9 +475,8 @@ export function BottomSheetModalContent(props: ModalComponentProps) {
       if (shouldWrapInScrollView) {
         return (
           <ScrollView
-            contentContainerStyle={{
-              paddingBottom: paddingBottom + bottomInset,
-            }}
+            keyboardShouldPersistTaps="handled"
+            contentContainerStyle={calculatedcontentContainerStyle}
           >
             <ContentComponent
               {...contentComponentProps}
@@ -346,12 +489,7 @@ export function BottomSheetModalContent(props: ModalComponentProps) {
       }
 
       return (
-        <View
-          style={{
-            flexShrink: 1,
-            paddingBottom: paddingBottom + bottomInset,
-          }}
-        >
+        <View style={[styles.scrollView, calculatedcontentContainerStyle]}>
           <ContentComponent
             {...contentComponentProps}
             dismiss={dismiss}
@@ -395,70 +533,44 @@ export function BottomSheetModalContent(props: ModalComponentProps) {
         <SortableList
           sortableData={itemsToRender}
           headers={headers}
-          scrollViewStyle={{
-            flexShrink: 1,
-          }}
-          contentContainerStyle={{
-            paddingBottom: paddingBottom + bottomInset,
-          }}
+          scrollViewStyle={styles.scrollView}
+          contentContainerStyle={calculatedcontentContainerStyle}
           onDragEnd={handleDragEnd}
-          renderItem={({ item, index, renderHandle }) =>
-            cell.renderItem({
-              item,
-              index,
-              onPress: onItemPress,
-              context: renderContext,
-              renderHandle,
-            })
-          }
+          renderItem={sortableListRenderItem}
         />
       );
     }
 
     return (
       <ScrollView
+        keyboardShouldPersistTaps="handled"
         overScrollMode="never"
         bounces={false}
-        contentContainerStyle={{
-          paddingBottom: paddingBottom + bottomInset,
-        }}
+        contentContainerStyle={calculatedcontentContainerStyle}
       >
         {hasNowPlaying ? (
           <NowPlayingHeaderSection
             onClear={hasClearAll ? handleDeleteCollection : undefined}
+            nextUpTitle={nextUpTitle}
+            nowPlayingTitle={nowPlayingTitle}
+            isEmpty={isQueueEmpty}
+            emptyMessage={emptyMessage}
+            clearLabel={clearLabel}
           />
         ) : null}
         {hasAdd ? (
-          <View
-            style={{ paddingHorizontal: 20, paddingTop: 8, paddingBottom: 12 }}
-          >
-            <AudioPlayerButton
-              configuration={VARIANT_WITH_ICON}
-              data={{ title: createPlaylistTitle }}
-              onPress={handleCreatePlaylist}
-            />
+          <View style={styles.someStyles}>
+            <AudioPlayerButton onPress={handleCreatePlaylist} />
           </View>
         ) : null}
-        {(itemsToRender || []).map((item, index) =>
-          cell.renderItem({
-            item,
-            index,
-            onPress: onItemPress,
-            context: renderContext,
-          })
-        )}
+        {_items}
       </ScrollView>
     );
-  };
+  })();
 
   return (
     <ModalBlocksStyleContext.Provider value={styleOverrides as any}>
-      <View
-        style={{
-          maxHeight: props.maxHeight,
-          paddingTop: paddingTop,
-        }}
-      >
+      <View style={_styles}>
         <BottomSheetDragArea>
           <Header
             dismiss={dismiss}
@@ -467,8 +579,10 @@ export function BottomSheetModalContent(props: ModalComponentProps) {
             title={resolvedTitle}
           />
         </BottomSheetDragArea>
-        {renderBody()}
+        {renderedBody}
       </View>
     </ModalBlocksStyleContext.Provider>
   );
 }
+
+export const BottomSheetModalContent = memo(_BottomSheetModalContent);

package/Components/ModalComponent/SortableList.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import Sortable from "react-native-sortables";
 import { Text, View, ViewStyle } from "react-native";
 import Animated, { useAnimatedRef } from "react-native-reanimated";
@@ -65,6 +65,9 @@ export type SortableListProps = {
   }) => void;
 };
 
+const defaultKeyExtractor = (item, index) =>
+  `sortable-item-${item?.id ?? item?.title ?? index}`;
+
 export const SortableList = ({
   scrollViewStyle,
   contentContainerStyle,
@@ -73,8 +76,7 @@ export const SortableList = ({
   columns = 1,
   rowGap = 0,
   columnGap = 0,
-  keyExtractor = (item, index) =>
-    `sortable-item-${item?.id ?? item?.title ?? index}`,
+  keyExtractor = defaultKeyExtractor,
   renderItem,
   sortableData = DEFAULT_SORTABLE_DATA,
   headers = DEFAULT_HEADERS,
@@ -101,13 +103,24 @@ export const SortableList = ({
     [onDragEnd]
   );
 
-  return (
-    <Animated.ScrollView
-      ref={scrollableRef}
-      style={scrollViewStyle}
-      contentContainerStyle={contentContainerStyle}
-    >
-      {(headers || []).map((header, idx) => (
+  const _renderItem = useCallback(
+    ({ item, index }) => (
+      <View key={keyExtractor(item, index)} style={itemStyle}>
+        {renderItem({
+          item,
+          index,
+          renderHandle: (children) => (
+            <Sortable.Handle>{children}</Sortable.Handle>
+          ),
+        })}
+      </View>
+    ),
+    [itemStyle, keyExtractor, renderItem]
+  );
+
+  const renderHeader = useMemo(
+    () =>
+      (headers || []).map((header, idx) => (
         <View key={`static-header-${idx}`} style={headerStyle}>
           {header.title ? (
             <SortableListHeader title={header.title} />
@@ -115,8 +128,19 @@ export const SortableList = ({
             renderHeaderComponent(header.component)
           )}
         </View>
-      ))}
+      )),
+    [headers, headerStyle]
+  );
+
+  return (
+    <Animated.ScrollView
+      ref={scrollableRef}
+      style={scrollViewStyle}
+      contentContainerStyle={contentContainerStyle}
+    >
+      {renderHeader}
       <Sortable.Grid
+        key={`sortable-grid-${localData.length}`}
         scrollableRef={scrollableRef}
         customHandle
         columns={columns}
@@ -125,17 +149,7 @@ export const SortableList = ({
         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>
-        )}
+        renderItem={_renderItem}
       />
     </Animated.ScrollView>
   );

package/Components/ModalComponent/TextInputContent.tsx

@@ -9,6 +9,7 @@ import {
   AudioPlayerButton,
   VARIANT_TEXT_ONLY,
 } from "./AudioPlayer/Components/Button";
+import { logger } from "@applicaster/zapp-react-native-utils/logger";
 
 export type TextInputContentProps = {
   /** Injected by the sheet host; unused for layout (header is owned by ModalComponent). */
@@ -19,16 +20,25 @@ export type TextInputContentProps = {
   inputLabel?: string;
   defaultValue?: string;
   buttonLabel: string;
+  validationLabel?: string;
+  maxLength?: number;
   actions: ActionType[];
+  actionContext?: Record<string, any>;
 };
 
+// Spacing mirrors the `component_style_*` keys in text input component.
 const styles = StyleSheet.create({
   container: {
-    paddingHorizontal: 20,
-    paddingBottom: 8,
+    backgroundColor: "transparent", // component_style_background_color
+    paddingLeft: 40, // component_style_padding_left
+    paddingRight: 40, // component_style_padding_right
+    paddingTop: 0, // component_style_padding_top
+    paddingBottom: 0, // component_style_padding_bottom
+    marginTop: 20, // component_style_margin_top
+    marginBottom: 20, // component_style_margin_bottom
   },
   inputWrap: {
-    marginTop: 8,
+    // Gap down to the submit button; owned by the modal, not the reference.
     marginBottom: 24,
   },
 });
@@ -38,11 +48,30 @@ const styles = StyleSheet.create({
  * Standard dismiss header comes from BottomSheetModalContent / ModalHeader.
  */
 export function TextInputContent(props: TextInputContentProps) {
-  const { inputLabel, defaultValue = "", buttonLabel, actions } = props;
+  const {
+    inputLabel,
+    defaultValue = "",
+    buttonLabel,
+    actions,
+    actionContext,
+    maxLength = 255,
+    validationLabel,
+  } = props;
 
   const [textValue, setTextValue] = useState(defaultValue);
   const [submitting, setSubmitting] = useState(false);
 
+  const validationMessage =
+    textValue.length > maxLength
+      ? validationLabel || "Too many characters"
+      : undefined;
+
+  if (!validationLabel) {
+    logger.warn(
+      "Modal/TextInputContent: Validation label (validationLabel) is not provided, using default message 'Too many characters'."
+    );
+  }
+
   const onSubmit = useCallback(async () => {
     if (submitting) {
       return;
@@ -68,12 +97,17 @@ export function TextInputContent(props: TextInputContentProps) {
         return item;
       });
 
-      await actionExecutor.handleActions(updatedActions);
+      if (actionContext) {
+        await actionExecutor.handleActions(updatedActions, actionContext);
+      } else {
+        await actionExecutor.handleActions(updatedActions);
+      }
+
       await actionExecutor.handleAction({ type: "dismissBottomSheet" });
     } finally {
       setSubmitting(false);
     }
-  }, [submitting, actions, textValue]);
+  }, [submitting, actions, textValue, actionContext]);
 
   return (
     <View style={styles.container}>
@@ -85,6 +119,7 @@ export function TextInputContent(props: TextInputContentProps) {
             label: inputLabel,
           }}
           value={textValue}
+          validationMessage={validationMessage}
           onChangeText={setTextValue}
           onClearPress={() => setTextValue("")}
         />
@@ -93,7 +128,7 @@ export function TextInputContent(props: TextInputContentProps) {
         configuration={VARIANT_TEXT_ONLY}
         data={{ title: buttonLabel }}
         onPress={onSubmit}
-        disabled={submitting}
+        disabled={!!validationMessage || submitting}
       />
     </View>
   );