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

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

@@ -12,7 +12,20 @@
  */
 
 import React from "react";
-import { Image, Platform, StyleSheet, Text, View } from "react-native";
+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";
 
 const styles = StyleSheet.create({
   row: {
@@ -27,25 +40,6 @@ 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,
-  },
 });
 
 // ---------------------------------------------------------------------------
@@ -62,6 +56,10 @@ export type BackgroundConfiguration = {
   defaultColor: string;
   focusedColor: string;
   cornerRadius: number;
+  paddingTop?: number;
+  paddingRight?: number;
+  paddingBottom?: number;
+  paddingLeft?: number;
 };
 
 export type ImageConfiguration = {
@@ -88,6 +86,20 @@ 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;
@@ -95,52 +107,10 @@ 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",
@@ -191,14 +161,19 @@ export type ItemData = {
   leadingButton?: ItemButtonAction;
   /** Button 1 (right most) — hardcoded action decides icon. */
   trailingButton?: ItemButtonAction;
+  isSelected?: boolean;
 };
 
-export type ItemProps = {
+export type AudioPlayerTrackItemProps = {
   configuration: ItemConfiguration;
   data: ItemData;
   focused?: boolean;
   focusedLeadingButton?: boolean;
   focusedTrailingButton?: boolean;
+  onPress?: () => void;
+  onLeadingButtonPress?: () => void;
+  onTrailingButtonPress?: () => void;
+  renderHandle?: (element: React.ReactElement) => React.ReactElement;
 };
 
 // ---------------------------------------------------------------------------
@@ -234,9 +209,9 @@ const CONTAINER_SPEC_LARGE_IMAGE: ContainerSpec = {
 
 const CONTAINER_SPEC_DEFAULT: ContainerSpec = {
   paddingTop: 8,
-  paddingRight: 10,
+  paddingRight: 20,
   paddingBottom: 8,
-  paddingLeft: 10,
+  paddingLeft: 20,
   horizontalGutter: 12,
   verticalGutter: 2,
 };
@@ -297,16 +272,6 @@ 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" {
@@ -324,32 +289,49 @@ function resolveContainerSpec(image: ImageConfiguration): ContainerSpec {
     : CONTAINER_SPEC_DEFAULT;
 }
 
-function mapMenuItemToNowPlayingData(item: MenuItem): ItemData {
+export function mapMenuItemToNowPlayingData(
+  item: MenuItem,
+  isPaused?: boolean
+): ItemData {
   return {
     imageUri: item.icon,
     textLabel1: item.title,
     textLabel2: item.summary ?? "",
     nowPlayingLabel: "Now Playing",
     trailingButton: "playPause",
+    isSelected: isPaused !== undefined ? !isPaused : item.isSelected,
   };
 }
 
-function mapMenuItemToQueuedData(item: MenuItem): ItemData {
+export function mapMenuItemToQueuedData(item: MenuItem): ItemData {
   return {
     imageUri: item.icon,
     textLabel1: item.title,
     textLabel2: item.summary ?? "",
     leadingButton: "remove",
     trailingButton: "drag",
+    isSelected: item.isSelected,
   };
 }
 
-function mapMenuItemToPlaylistData(item: MenuItem): ItemData {
+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;
+
   return {
     imageUri: item.icon,
     textLabel1: item.title,
-    textLabel2: item.summary ?? "",
-    trailingButton: "multiSelect",
+    textLabel2: summary || "",
+    trailingButton: showSelectionWidget
+      ? item.trailingButton || ("multiSelect" as ItemButtonAction)
+      : undefined,
+    isSelected: item.isSelected,
   };
 }
 
@@ -362,6 +344,7 @@ type ItemContainerProps = {
   background: BackgroundConfiguration;
   focused: boolean;
   children: React.ReactNode;
+  onPress?: () => void;
 };
 
 function ItemContainer({
@@ -369,23 +352,25 @@ function ItemContainer({
   background,
   focused,
   children,
+  onPress,
 }: ItemContainerProps) {
   const container = resolveContainerSpec(image);
   const bg = focused ? background.focusedColor : background.defaultColor;
 
   return (
-    <View
-      style={{
-        backgroundColor: bg,
+    <Pressable
+      onPress={onPress}
+      style={({ pressed }) => ({
+        backgroundColor: pressed ? background.focusedColor : bg,
         borderRadius: background.cornerRadius,
-        paddingTop: container.paddingTop,
-        paddingRight: container.paddingRight,
-        paddingBottom: container.paddingBottom,
-        paddingLeft: container.paddingLeft,
-      }}
+        paddingTop: background.paddingTop ?? container.paddingTop,
+        paddingRight: background.paddingRight ?? container.paddingRight,
+        paddingBottom: background.paddingBottom ?? container.paddingBottom,
+        paddingLeft: background.paddingLeft ?? container.paddingLeft,
+      })}
     >
       {children}
-    </View>
+    </Pressable>
   );
 }
 
@@ -486,27 +471,259 @@ function NowPlayingRow({
 type ItemButtonProps = {
   action: ItemButtonAction;
   focused?: boolean;
+  onPress?: () => void;
+  isSelected?: boolean;
+  checkboxAssets?: CheckboxAssetsConfiguration;
+  actionButtonAssets?: ActionButtonAssetsConfiguration;
 };
 
-function ItemButton({ action, focused = false }: ItemButtonProps) {
+function ItemButton({
+  action,
+  focused = false,
+  onPress,
+  isSelected = false,
+  checkboxAssets,
+  actionButtonAssets,
+}: 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 (
-    <View
-      style={{
-        paddingTop: layout.paddingTop,
-        paddingRight: layout.paddingRight,
-        paddingBottom: layout.paddingBottom,
-        paddingLeft: layout.paddingLeft,
-        opacity: focused ? 0.7 : 1,
+    <Pressable
+      onPress={(e: any) => {
+        e?.stopPropagation?.();
+        onPress?.();
       }}
+      style={({ pressed }) => [
+        {
+          paddingTop: layout.paddingTop,
+          paddingRight: layout.paddingRight,
+          paddingBottom: layout.paddingBottom,
+          paddingLeft: layout.paddingLeft,
+          opacity: pressed || focused ? 0.7 : 1,
+        },
+      ]}
     >
-      <Image
-        source={{ uri: BUTTON_ASSETS[action] }}
-        style={{ width: layout.assetWidth, height: layout.assetHeight }}
-        resizeMode="contain"
-      />
-    </View>
+      {renderIcon()}
+    </Pressable>
   );
 }
 
@@ -515,6 +732,12 @@ 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({
@@ -522,6 +745,12 @@ function ItemButtons({
   trailingButton,
   focusedLeadingButton = false,
   focusedTrailingButton = false,
+  onLeadingButtonPress,
+  onTrailingButtonPress,
+  isSelected = false,
+  renderHandle,
+  checkboxAssets,
+  actionButtonAssets,
 }: ItemButtonsProps) {
   if (!leadingButton && !trailingButton) {
     return null;
@@ -531,42 +760,102 @@ function ItemButtons({
     <View style={styles.buttonsRow}>
       {leadingButton ? (
         <>
-          <ItemButton action={leadingButton} focused={focusedLeadingButton} />
+          <ItemButton
+            action={leadingButton}
+            focused={focusedLeadingButton}
+            onPress={onLeadingButtonPress}
+            isSelected={isSelected}
+            checkboxAssets={checkboxAssets}
+            actionButtonAssets={actionButtonAssets}
+          />
           <View style={{ width: BUTTONS_CONTAINER_HORIZONTAL_GUTTER }} />
         </>
       ) : null}
       {trailingButton ? (
-        <ItemButton action={trailingButton} focused={focusedTrailingButton} />
+        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}
+          />
+        )
       ) : null}
     </View>
   );
 }
 
 // ---------------------------------------------------------------------------
-// Item
+// AudioPlayerTrackItem
 // ---------------------------------------------------------------------------
 
-export function Item({
+export function AudioPlayerTrackItem({
   configuration,
   data,
   focused = false,
   focusedLeadingButton = false,
   focusedTrailingButton = false,
-}: ItemProps) {
+  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]);
+
   const {
     background,
     image,
-    nowPlayingAsset,
-    nowPlayingLabel,
     textLabel1,
     textLabel2,
-  } = configuration;
+    nowPlayingLabel,
+    nowPlayingAsset,
+    checkboxAssets,
+    actionButtonAssets,
+  } = effectiveConfig;
 
   const container = resolveContainerSpec(image);
-  const showNowPlaying = !!data.nowPlayingLabel;
 
   return (
-    <ItemContainer image={image} background={background} focused={focused}>
+    <ItemContainer
+      image={image}
+      background={background}
+      focused={focused}
+      onPress={onPress}
+    >
       <View style={styles.row}>
         <ItemThumbnail configuration={image} imageUri={data.imageUri} />
         <View style={{ width: container.horizontalGutter }} />
@@ -594,6 +883,12 @@ export function Item({
           trailingButton={data.trailingButton}
           focusedLeadingButton={focusedLeadingButton}
           focusedTrailingButton={focusedTrailingButton}
+          onLeadingButtonPress={onLeadingButtonPress}
+          onTrailingButtonPress={onTrailingButtonPress}
+          isSelected={data.isSelected}
+          renderHandle={renderHandle}
+          checkboxAssets={checkboxAssets}
+          actionButtonAssets={actionButtonAssets}
         />
       </View>
     </ItemContainer>
@@ -663,47 +958,3 @@ 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>
-  );
-}