@applicaster/zapp-react-native-ui-components 15.1.13-alpha.1034774223 → 15.1.13

package/Components/ModalComponent/AudioPlayer/Components/Item.tsx

@@ -12,20 +12,7 @@
  */
 
 import React from "react";
-import {
-  Image,
-  Platform,
-  Pressable,
-  StyleSheet,
-  Text,
-  View,
-} from "react-native";
-import {
-  MenuItem,
-  SelectionBehavior,
-} from "@applicaster/zapp-react-native-utils/modalState/types";
-import { useModalBlocksStyle } from "../../ModalBlocksStyleContext";
-import { mergeItemConfiguration } from "../utils/mergeStyles";
+import { Image, Platform, StyleSheet, Text, View } from "react-native";
 
 const styles = StyleSheet.create({
   row: {
@@ -40,6 +27,25 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
   },
+  demoScreen: {
+    flex: 1,
+    backgroundColor: "#1C1C1E",
+    paddingTop: 64,
+    paddingHorizontal: 0,
+    gap: 16,
+  },
+  demoHeading: {
+    color: "#FFFFFF",
+    fontSize: 20,
+    fontWeight: "600",
+    marginBottom: 8,
+    paddingHorizontal: 16,
+  },
+  demoLabel: {
+    color: "#999999",
+    fontSize: 13,
+    paddingHorizontal: 16,
+  },
 });
 
 // ---------------------------------------------------------------------------
@@ -56,10 +62,6 @@ export type BackgroundConfiguration = {
   defaultColor: string;
   focusedColor: string;
   cornerRadius: number;
-  paddingTop?: number;
-  paddingRight?: number;
-  paddingBottom?: number;
-  paddingLeft?: number;
 };
 
 export type ImageConfiguration = {
@@ -86,20 +88,6 @@ export type NowPlayingAssetConfiguration = {
   asset?: string;
 };
 
-export type CheckboxAssetsConfiguration = {
-  /** Unchecked multiSelect control (item.checkbox_asset). */
-  asset?: string;
-  /** Checked multiSelect control (item.checked_checkbox_asset). */
-  checkedAsset?: string;
-};
-
-export type ActionButtonAssetsConfiguration = {
-  /** Leading remove control on Edit Order rows. */
-  removeAsset?: string;
-  /** Trailing drag handle on Edit Order / queue rows. */
-  dragAsset?: string;
-};
-
 export type ItemConfiguration = {
   background: BackgroundConfiguration;
   image: ImageConfiguration;
@@ -107,10 +95,52 @@ export type ItemConfiguration = {
   nowPlayingLabel: LabelConfiguration;
   textLabel1: LabelConfiguration;
   textLabel2: LabelConfiguration;
-  checkboxAssets?: CheckboxAssetsConfiguration;
-  actionButtonAssets?: ActionButtonAssetsConfiguration;
 };
 
+export interface Action {
+  type: string;
+  payload?: any;
+  options?: any;
+}
+
+export interface Header {
+  title: string;
+  subtitle?: string;
+  icon?: string;
+}
+
+export interface Content {
+  title: string;
+  stickyTitle?: boolean;
+  items: MenuItem[];
+  itemsUrl?: string;
+  action?: Action;
+}
+
+export interface Menu {
+  header?: Header;
+  content: Content;
+  closeButton?: boolean;
+}
+
+export interface PresentSubMenuAction extends Action {
+  menu: Menu;
+}
+
+export interface SecondaryAction {
+  action: Action | PresentSubMenuAction;
+  icon?: string;
+}
+
+export interface MenuItem {
+  title: string;
+  summary?: string;
+  icon?: string;
+  isSelected?: boolean;
+  action?: Action | PresentSubMenuAction;
+  secondaryAction?: SecondaryAction;
+}
+
 export const DEFAULT_TEXT_LABEL_1_CONFIGURATION: LabelConfiguration = {
   fontColor: "#FFFFFF",
   focusedFontColor: "#FFFFFF",
@@ -161,19 +191,14 @@ export type ItemData = {
   leadingButton?: ItemButtonAction;
   /** Button 1 (right most) — hardcoded action decides icon. */
   trailingButton?: ItemButtonAction;
-  isSelected?: boolean;
 };
 
-export type AudioPlayerTrackItemProps = {
+export type ItemProps = {
   configuration: ItemConfiguration;
   data: ItemData;
   focused?: boolean;
   focusedLeadingButton?: boolean;
   focusedTrailingButton?: boolean;
-  onPress?: () => void;
-  onLeadingButtonPress?: () => void;
-  onTrailingButtonPress?: () => void;
-  renderHandle?: (element: React.ReactElement) => React.ReactElement;
 };
 
 // ---------------------------------------------------------------------------
@@ -209,9 +234,9 @@ const CONTAINER_SPEC_LARGE_IMAGE: ContainerSpec = {
 
 const CONTAINER_SPEC_DEFAULT: ContainerSpec = {
   paddingTop: 8,
-  paddingRight: 20,
+  paddingRight: 10,
   paddingBottom: 8,
-  paddingLeft: 20,
+  paddingLeft: 10,
   horizontalGutter: 12,
   verticalGutter: 2,
 };
@@ -272,6 +297,16 @@ const DEFAULT_THUMB_ASSET =
 const DEFAULT_EQUALIZER_ASSET =
   "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAI0lEQVR42mNgGNTgPxTQzwB0DVQ3gKCBowbQwYAhkBIHBAAA9TvPMeOFaLMAAAAASUVORK5CYII=";
 
+const BUTTON_ASSETS: Record<ItemButtonAction, string> = {
+  playPause:
+    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAYAAAAehFoBAAAAdklEQVR42u3ZwRUAERAEUfkn3TaF5TFTrSuCf3CgjZGg6ast7G8YaAlcB8JAj8F1MRR2G63CUNglNAqsRvmB1TAfsBoXcMABV4MFKEci4IADNrkAed2H80R66SHqvUvglh/ktoZcL5H7MHKBx/5xYH+RsP90t5t2UpF6+22a+AAAAABJRU5ErkJggg==",
+  drag: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAIklEQVR42mNgGAWjYGiC/2SCwWPBaByMxsFoHIyCUTDYAAAqhk7AVXdZJwAAAABJRU5ErkJggg==",
+  multiSelect:
+    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAWklEQVR42t2VUQ4AIAhCvf+lrQsULJJZbH7GM1cS0Uk5dd0Qqcz4GJSCSs0pSCkAHNoWBfkTgIxpgGK+ujyEKABqRGyn9FO1A+yfrf+qsGxTSx5YEs2WyU9oAKBJKg8Kfq4dAAAAAElFTkSuQmCC",
+  remove:
+    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAUklEQVR42mNgGPbgPx5AVYOJlSPJcGqrJU8DKXooCVui9FIacXj1UyNl4DWDLhYgc8nA+INpeFgwtCOZ5vmALjmZ5mURXUpTutQHdKnRRgEMAACwjWWprU1B+AAAAABJRU5ErkJggg==",
+};
+
 function getTextTransformStyle(
   textTransform: TextTransform
 ): "none" | "lowercase" | "uppercase" | "capitalize" {
@@ -289,49 +324,32 @@ function resolveContainerSpec(image: ImageConfiguration): ContainerSpec {
     : CONTAINER_SPEC_DEFAULT;
 }
 
-export function mapMenuItemToNowPlayingData(
-  item: MenuItem,
-  isPaused?: boolean
-): ItemData {
+function mapMenuItemToNowPlayingData(item: MenuItem): ItemData {
   return {
     imageUri: item.icon,
     textLabel1: item.title,
     textLabel2: item.summary ?? "",
     nowPlayingLabel: "Now Playing",
     trailingButton: "playPause",
-    isSelected: isPaused !== undefined ? !isPaused : item.isSelected,
   };
 }
 
-export function mapMenuItemToQueuedData(item: MenuItem): ItemData {
+function mapMenuItemToQueuedData(item: MenuItem): ItemData {
   return {
     imageUri: item.icon,
     textLabel1: item.title,
     textLabel2: item.summary ?? "",
     leadingButton: "remove",
     trailingButton: "drag",
-    isSelected: item.isSelected,
   };
 }
 
-export function mapMenuItemToPlaylistData(
-  item: MenuItem,
-  behavior?: SelectionBehavior
-): ItemData {
-  const showSelectionWidget =
-    behavior?.selectMode !== "none" && item.trailingButton !== "none";
-
-  const summary =
-    typeof item.summary === "string" ? item.summary.trim() : item.summary;
-
+function mapMenuItemToPlaylistData(item: MenuItem): ItemData {
   return {
     imageUri: item.icon,
     textLabel1: item.title,
-    textLabel2: summary || "",
-    trailingButton: showSelectionWidget
-      ? item.trailingButton || ("multiSelect" as ItemButtonAction)
-      : undefined,
-    isSelected: item.isSelected,
+    textLabel2: item.summary ?? "",
+    trailingButton: "multiSelect",
   };
 }
 
@@ -344,7 +362,6 @@ type ItemContainerProps = {
   background: BackgroundConfiguration;
   focused: boolean;
   children: React.ReactNode;
-  onPress?: () => void;
 };
 
 function ItemContainer({
@@ -352,25 +369,23 @@ function ItemContainer({
   background,
   focused,
   children,
-  onPress,
 }: ItemContainerProps) {
   const container = resolveContainerSpec(image);
   const bg = focused ? background.focusedColor : background.defaultColor;
 
   return (
-    <Pressable
-      onPress={onPress}
-      style={({ pressed }) => ({
-        backgroundColor: pressed ? background.focusedColor : bg,
+    <View
+      style={{
+        backgroundColor: bg,
         borderRadius: background.cornerRadius,
-        paddingTop: background.paddingTop ?? container.paddingTop,
-        paddingRight: background.paddingRight ?? container.paddingRight,
-        paddingBottom: background.paddingBottom ?? container.paddingBottom,
-        paddingLeft: background.paddingLeft ?? container.paddingLeft,
-      })}
+        paddingTop: container.paddingTop,
+        paddingRight: container.paddingRight,
+        paddingBottom: container.paddingBottom,
+        paddingLeft: container.paddingLeft,
+      }}
     >
       {children}
-    </Pressable>
+    </View>
   );
 }
 
@@ -471,259 +486,27 @@ function NowPlayingRow({
 type ItemButtonProps = {
   action: ItemButtonAction;
   focused?: boolean;
-  onPress?: () => void;
-  isSelected?: boolean;
-  checkboxAssets?: CheckboxAssetsConfiguration;
-  actionButtonAssets?: ActionButtonAssetsConfiguration;
 };
 
-function ItemButton({
-  action,
-  focused = false,
-  onPress,
-  isSelected = false,
-  checkboxAssets,
-  actionButtonAssets,
-}: ItemButtonProps) {
+function ItemButton({ action, focused = false }: ItemButtonProps) {
   const layout = BUTTON_LAYOUT_SPEC[action];
 
-  if (!layout) {
-    return null;
-  }
-
-  const renderIcon = () => {
-    switch (action) {
-      case "playPause": {
-        const iconSize = layout.assetWidth;
-        const iconRadius = iconSize / 2;
-
-        return (
-          <View
-            style={{
-              width: iconSize,
-              height: iconSize,
-              borderRadius: iconRadius,
-              backgroundColor: "#FFFFFF",
-              justifyContent: "center",
-              alignItems: "center",
-            }}
-          >
-            {isSelected ? (
-              <View
-                style={{
-                  flexDirection: "row",
-                  justifyContent: "space-between",
-                  width: 10,
-                  height: 16,
-                }}
-              >
-                <View
-                  style={{
-                    width: 3.5,
-                    height: 16,
-                    backgroundColor: "#1e1e1e",
-                    borderRadius: 1,
-                  }}
-                />
-                <View
-                  style={{
-                    width: 3.5,
-                    height: 16,
-                    backgroundColor: "#1e1e1e",
-                    borderRadius: 1,
-                  }}
-                />
-              </View>
-            ) : (
-              <View
-                style={{
-                  width: 0,
-                  height: 0,
-                  backgroundColor: "transparent",
-                  borderStyle: "solid",
-                  borderLeftWidth: 14,
-                  borderRightWidth: 0,
-                  borderTopWidth: 8,
-                  borderBottomWidth: 8,
-                  borderLeftColor: "#1e1e1e",
-                  borderRightColor: "transparent",
-                  borderTopColor: "transparent",
-                  borderBottomColor: "transparent",
-                  marginLeft: 3,
-                }}
-              />
-            )}
-          </View>
-        );
-      }
-
-      case "drag": {
-        if (actionButtonAssets?.dragAsset) {
-          return (
-            <Image
-              source={{ uri: actionButtonAssets.dragAsset }}
-              style={{
-                width: layout.assetWidth,
-                height: layout.assetHeight,
-              }}
-              resizeMode="contain"
-            />
-          );
-        }
-
-        return (
-          <View
-            style={{
-              width: 20,
-              height: 12,
-              justifyContent: "space-between",
-            }}
-          >
-            <View
-              style={{
-                height: 2,
-                backgroundColor: "rgba(255, 255, 255, 0.7)",
-                borderRadius: 1,
-              }}
-            />
-            <View
-              style={{
-                height: 2,
-                backgroundColor: "rgba(255, 255, 255, 0.7)",
-                borderRadius: 1,
-              }}
-            />
-            <View
-              style={{
-                height: 2,
-                backgroundColor: "rgba(255, 255, 255, 0.7)",
-                borderRadius: 1,
-              }}
-            />
-          </View>
-        );
-      }
-
-      case "remove": {
-        if (actionButtonAssets?.removeAsset) {
-          return (
-            <Image
-              source={{ uri: actionButtonAssets.removeAsset }}
-              style={{
-                width: layout.assetWidth,
-                height: layout.assetHeight,
-              }}
-              resizeMode="contain"
-            />
-          );
-        }
-
-        return (
-          <View
-            style={{
-              width: 24,
-              height: 24,
-              borderRadius: 12,
-              borderWidth: 1.5,
-              borderColor: "rgba(255, 255, 255, 0.7)",
-              justifyContent: "center",
-              alignItems: "center",
-            }}
-          >
-            <View
-              style={{
-                width: 10,
-                height: 1.5,
-                backgroundColor: "rgba(255, 255, 255, 0.7)",
-                borderRadius: 1,
-              }}
-            />
-          </View>
-        );
-      }
-
-      case "multiSelect": {
-        const studioAsset = isSelected
-          ? checkboxAssets?.checkedAsset
-          : checkboxAssets?.asset;
-
-        if (studioAsset) {
-          return (
-            <Image
-              source={{ uri: studioAsset }}
-              style={{
-                width: layout.assetWidth,
-                height: layout.assetHeight,
-              }}
-              resizeMode="contain"
-            />
-          );
-        }
-
-        if (!isSelected) {
-          return (
-            <View
-              style={{
-                width: layout.assetWidth,
-                height: layout.assetHeight,
-                borderRadius: layout.assetWidth / 2,
-                borderWidth: 1.5,
-                borderColor: "rgba(255, 255, 255, 0.7)",
-                backgroundColor: "transparent",
-              }}
-            />
-          );
-        }
-
-        return (
-          <View
-            style={{
-              width: 24,
-              height: 24,
-              borderRadius: 12,
-              backgroundColor: "#FFFFFF",
-              justifyContent: "center",
-              alignItems: "center",
-            }}
-          >
-            <View
-              style={{
-                width: 6,
-                height: 10,
-                borderBottomWidth: 2,
-                borderRightWidth: 2,
-                borderColor: "#1e1e1e",
-                transform: [{ rotate: "45deg" }],
-                marginTop: -2,
-              }}
-            />
-          </View>
-        );
-      }
-
-      default:
-        return null;
-    }
-  };
-
   return (
-    <Pressable
-      onPress={(e: any) => {
-        e?.stopPropagation?.();
-        onPress?.();
+    <View
+      style={{
+        paddingTop: layout.paddingTop,
+        paddingRight: layout.paddingRight,
+        paddingBottom: layout.paddingBottom,
+        paddingLeft: layout.paddingLeft,
+        opacity: focused ? 0.7 : 1,
       }}
-      style={({ pressed }) => [
-        {
-          paddingTop: layout.paddingTop,
-          paddingRight: layout.paddingRight,
-          paddingBottom: layout.paddingBottom,
-          paddingLeft: layout.paddingLeft,
-          opacity: pressed || focused ? 0.7 : 1,
-        },
-      ]}
     >
-      {renderIcon()}
-    </Pressable>
+      <Image
+        source={{ uri: BUTTON_ASSETS[action] }}
+        style={{ width: layout.assetWidth, height: layout.assetHeight }}
+        resizeMode="contain"
+      />
+    </View>
   );
 }
 
@@ -732,12 +515,6 @@ type ItemButtonsProps = {
   trailingButton?: ItemButtonAction;
   focusedLeadingButton?: boolean;
   focusedTrailingButton?: boolean;
-  onLeadingButtonPress?: () => void;
-  onTrailingButtonPress?: () => void;
-  isSelected?: boolean;
-  renderHandle?: (element: React.ReactElement) => React.ReactElement;
-  checkboxAssets?: CheckboxAssetsConfiguration;
-  actionButtonAssets?: ActionButtonAssetsConfiguration;
 };
 
 function ItemButtons({
@@ -745,12 +522,6 @@ function ItemButtons({
   trailingButton,
   focusedLeadingButton = false,
   focusedTrailingButton = false,
-  onLeadingButtonPress,
-  onTrailingButtonPress,
-  isSelected = false,
-  renderHandle,
-  checkboxAssets,
-  actionButtonAssets,
 }: ItemButtonsProps) {
   if (!leadingButton && !trailingButton) {
     return null;
@@ -760,102 +531,42 @@ function ItemButtons({
     <View style={styles.buttonsRow}>
       {leadingButton ? (
         <>
-          <ItemButton
-            action={leadingButton}
-            focused={focusedLeadingButton}
-            onPress={onLeadingButtonPress}
-            isSelected={isSelected}
-            checkboxAssets={checkboxAssets}
-            actionButtonAssets={actionButtonAssets}
-          />
+          <ItemButton action={leadingButton} focused={focusedLeadingButton} />
           <View style={{ width: BUTTONS_CONTAINER_HORIZONTAL_GUTTER }} />
         </>
       ) : null}
       {trailingButton ? (
-        trailingButton === "drag" ? (
-          renderHandle ? (
-            renderHandle(
-              <ItemButton
-                action={trailingButton}
-                focused={focusedTrailingButton}
-                onPress={onTrailingButtonPress}
-                isSelected={isSelected}
-                checkboxAssets={checkboxAssets}
-                actionButtonAssets={actionButtonAssets}
-              />
-            )
-          ) : (
-            <ItemButton
-              action={trailingButton}
-              focused={focusedTrailingButton}
-              onPress={onTrailingButtonPress}
-              isSelected={isSelected}
-              checkboxAssets={checkboxAssets}
-              actionButtonAssets={actionButtonAssets}
-            />
-          )
-        ) : (
-          <ItemButton
-            action={trailingButton}
-            focused={focusedTrailingButton}
-            onPress={onTrailingButtonPress}
-            isSelected={isSelected}
-            checkboxAssets={checkboxAssets}
-            actionButtonAssets={actionButtonAssets}
-          />
-        )
+        <ItemButton action={trailingButton} focused={focusedTrailingButton} />
       ) : null}
     </View>
   );
 }
 
 // ---------------------------------------------------------------------------
-// AudioPlayerTrackItem
+// Item
 // ---------------------------------------------------------------------------
 
-export function AudioPlayerTrackItem({
+export function Item({
   configuration,
   data,
   focused = false,
   focusedLeadingButton = false,
   focusedTrailingButton = false,
-  onPress,
-  onLeadingButtonPress,
-  onTrailingButtonPress,
-  renderHandle,
-}: AudioPlayerTrackItemProps) {
-  const modalBlocksStyle = useModalBlocksStyle();
-  const showNowPlaying = !!data.nowPlayingLabel;
-
-  const itemBlock =
-    showNowPlaying && modalBlocksStyle?.nowPlayingItem
-      ? modalBlocksStyle.nowPlayingItem
-      : modalBlocksStyle?.item;
-
-  const effectiveConfig = React.useMemo(() => {
-    return mergeItemConfiguration(configuration, itemBlock);
-  }, [configuration, itemBlock]);
-
+}: ItemProps) {
   const {
     background,
     image,
+    nowPlayingAsset,
+    nowPlayingLabel,
     textLabel1,
     textLabel2,
-    nowPlayingLabel,
-    nowPlayingAsset,
-    checkboxAssets,
-    actionButtonAssets,
-  } = effectiveConfig;
+  } = configuration;
 
   const container = resolveContainerSpec(image);
+  const showNowPlaying = !!data.nowPlayingLabel;
 
   return (
-    <ItemContainer
-      image={image}
-      background={background}
-      focused={focused}
-      onPress={onPress}
-    >
+    <ItemContainer image={image} background={background} focused={focused}>
       <View style={styles.row}>
         <ItemThumbnail configuration={image} imageUri={data.imageUri} />
         <View style={{ width: container.horizontalGutter }} />
@@ -883,12 +594,6 @@ export function AudioPlayerTrackItem({
           trailingButton={data.trailingButton}
           focusedLeadingButton={focusedLeadingButton}
           focusedTrailingButton={focusedTrailingButton}
-          onLeadingButtonPress={onLeadingButtonPress}
-          onTrailingButtonPress={onTrailingButtonPress}
-          isSelected={data.isSelected}
-          renderHandle={renderHandle}
-          checkboxAssets={checkboxAssets}
-          actionButtonAssets={actionButtonAssets}
         />
       </View>
     </ItemContainer>
@@ -958,3 +663,47 @@ export const VARIANT_PLAYLIST_ITEM: ItemConfiguration = {
   textLabel1: DEFAULT_TEXT_LABEL_1_CONFIGURATION,
   textLabel2: DEFAULT_TEXT_LABEL_2_CONFIGURATION,
 };
+
+export default function App() {
+  // Hardcoded core mock data objects matching user types framework
+  const sharedMockItem: MenuItem = {
+    title: "Content Title",
+    summary: "Artist",
+    icon: "https://picsum.photos/200",
+    action: { type: "PLAY_AUDIO" },
+    secondaryAction: { action: { type: "OPEN_CONTEXT_MENU" } },
+  };
+
+  const playlistMockItem: MenuItem = {
+    title: "Playlist Name",
+    summary: "12 Songs",
+    icon: "https://picsum.photos/201",
+    isSelected: true,
+    action: { type: "NAVIGATE_PLAYLIST" },
+  };
+
+  return (
+    <View style={styles.demoScreen}>
+      <Text style={styles.demoHeading}>Modal Item Building Block</Text>
+
+      <Text style={styles.demoLabel}>Now Playing</Text>
+      <Item
+        configuration={VARIANT_NOW_PLAYING}
+        data={mapMenuItemToNowPlayingData(sharedMockItem)}
+      />
+
+      <Text style={styles.demoLabel}>Queued Item</Text>
+      <Item
+        configuration={VARIANT_QUEUED_ITEM}
+        data={mapMenuItemToQueuedData(sharedMockItem)}
+        focused
+      />
+
+      <Text style={styles.demoLabel}>Playlist Item</Text>
+      <Item
+        configuration={VARIANT_PLAYLIST_ITEM}
+        data={mapMenuItemToPlaylistData(playlistMockItem)}
+      />
+    </View>
+  );
+}