@applicaster/zapp-react-native-ui-components 15.1.10 → 15.1.11-alpha.7557142055

package/Components/ModalComponent/AudioPlayer/Components/Action.tsx

@@ -11,31 +11,20 @@
  */
 
 import React from "react";
-import { Image, Platform, StyleSheet, Text, View } from "react-native";
+import {
+  Image,
+  Platform,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+} from "react-native";
 
 const styles = StyleSheet.create({
   row: {
     flexDirection: "row",
     alignItems: "center",
   },
-  demoScreen: {
-    flex: 1,
-    backgroundColor: "#1C1C1E",
-    paddingTop: 64,
-    paddingHorizontal: 16,
-    gap: 12,
-  },
-  demoHeading: {
-    color: "#FFFFFF",
-    fontSize: 20,
-    fontWeight: "600",
-    marginBottom: 8,
-  },
-  demoLabel: {
-    color: "#999999",
-    fontSize: 13,
-    marginTop: 8,
-  },
 });
 
 // ---------------------------------------------------------------------------
@@ -123,10 +112,11 @@ export type ActionData = {
   showTrailingChevron?: boolean;
 };
 
-export type ItemProps = {
+export type AudioPlayerActionProps = {
   configuration: ActionConfiguration;
   data: ActionData;
   focused?: boolean;
+  onPress?: () => void;
 };
 
 // ---------------------------------------------------------------------------
@@ -187,28 +177,32 @@ type ActionContainerProps = {
   configuration: BackgroundConfiguration;
   focused: boolean;
   children: React.ReactNode;
+  onPress?: () => void;
 };
 
 function ActionContainer({
   configuration,
   focused,
   children,
+  onPress,
 }: ActionContainerProps) {
   return (
-    <View
-      style={{
-        backgroundColor: focused
-          ? configuration.focusedColor
-          : configuration.defaultColor,
+    <Pressable
+      onPress={onPress}
+      style={({ pressed }) => ({
+        backgroundColor:
+          pressed || focused
+            ? configuration.focusedColor
+            : configuration.defaultColor,
         borderRadius: configuration.cornerRadius,
         paddingTop: CONTAINER_SPEC.paddingTop,
         paddingRight: CONTAINER_SPEC.paddingRight,
         paddingBottom: CONTAINER_SPEC.paddingBottom,
         paddingLeft: CONTAINER_SPEC.paddingLeft,
-      }}
+      })}
     >
       {children}
-    </View>
+    </Pressable>
   );
 }
 
@@ -279,10 +273,15 @@ function ActionTrailingIcon({ configuration }: ActionTrailingIconProps) {
 }
 
 // ---------------------------------------------------------------------------
-// Item
+// AudioPlayerAction
 // ---------------------------------------------------------------------------
 
-export function Item({ configuration, data, focused = false }: ItemProps) {
+export function AudioPlayerAction({
+  configuration,
+  data,
+  focused = false,
+  onPress,
+}: AudioPlayerActionProps) {
   const { background, title, trailingIcon } = configuration;
   const { title: label, leadingActionType, showTrailingChevron } = data;
 
@@ -290,7 +289,11 @@ export function Item({ configuration, data, focused = false }: ItemProps) {
   const showTrailing = shouldShowTrailingIcon(showTrailingChevron);
 
   return (
-    <ActionContainer configuration={background} focused={focused}>
+    <ActionContainer
+      configuration={background}
+      focused={focused}
+      onPress={onPress}
+    >
       <View style={styles.row}>
         {showLeading ? (
           <>
@@ -309,60 +312,3 @@ export function Item({ configuration, data, focused = false }: ItemProps) {
     </ActionContainer>
   );
 }
-
-// ---------------------------------------------------------------------------
-// Demo
-// ---------------------------------------------------------------------------
-
-export default function App() {
-  return (
-    <View style={styles.demoScreen}>
-      <Text style={styles.demoHeading}>Modal Action Building Block</Text>
-
-      <Text style={styles.demoLabel}>
-        Leading icon + text — Add To Queue (focused)
-      </Text>
-      <Item
-        configuration={DEFAULT_ACTION_CONFIGURATION}
-        data={{ title: "Add To Queue", leadingActionType: "addToQueue" }}
-        focused
-      />
-
-      <Text style={styles.demoLabel}>
-        Leading icon + text + trailing chevron — Add To Playlist
-      </Text>
-      <Item
-        configuration={DEFAULT_ACTION_CONFIGURATION}
-        data={{
-          title: "Add To Playlist",
-          leadingActionType: "addToPlaylist",
-          showTrailingChevron: true,
-        }}
-      />
-
-      <Text style={styles.demoLabel}>Text only — Go To Playlist</Text>
-      <Item
-        configuration={DEFAULT_ACTION_CONFIGURATION}
-        data={{ title: "Go To Playlist" }}
-      />
-
-      <Text style={styles.demoLabel}>Leading icon + text — Favorite</Text>
-      <Item
-        configuration={DEFAULT_ACTION_CONFIGURATION}
-        data={{ title: "Favorite", leadingActionType: "favorite" }}
-      />
-
-      <Text style={styles.demoLabel}>Leading icon + text — Share</Text>
-      <Item
-        configuration={DEFAULT_ACTION_CONFIGURATION}
-        data={{ title: "Share", leadingActionType: "share" }}
-      />
-
-      <Text style={styles.demoLabel}>Text only — Go To Artist</Text>
-      <Item
-        configuration={DEFAULT_ACTION_CONFIGURATION}
-        data={{ title: "Go To Artist" }}
-      />
-    </View>
-  );
-}

package/Components/ModalComponent/AudioPlayer/Components/Button.tsx

@@ -9,7 +9,14 @@
  */
 
 import React from "react";
-import { Image, Platform, StyleSheet, Text, View } from "react-native";
+import {
+  Image,
+  Platform,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+} from "react-native";
 
 const styles = StyleSheet.create({
   container: {
@@ -25,24 +32,6 @@ const styles = StyleSheet.create({
   title: {
     textAlign: "center",
   },
-  demoScreen: {
-    flex: 1,
-    backgroundColor: "#1C1C1E",
-    paddingTop: 64,
-    paddingHorizontal: 24,
-    gap: 12,
-  },
-  demoHeading: {
-    color: "#FFFFFF",
-    fontSize: 20,
-    fontWeight: "600",
-    marginBottom: 8,
-  },
-  demoLabel: {
-    color: "#999999",
-    fontSize: 13,
-    marginTop: 8,
-  },
 });
 
 // ---------------------------------------------------------------------------
@@ -148,11 +137,12 @@ export type ButtonData = {
   disabled?: boolean;
 };
 
-export type ItemProps = {
+export type AudioPlayerButtonProps = {
   configuration: ButtonConfiguration;
   data: ButtonData;
   disabled?: boolean;
   focused?: boolean;
+  onPress?: () => void;
 };
 
 // ---------------------------------------------------------------------------
@@ -170,7 +160,7 @@ const ACTION_ICON_ASSETS: Record<ButtonActionType, string> = {
   confirm:
     "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAJElEQVR42mNgGAWjYBSQCv4TwKMWDHELho/hNE/3o2AUDDcAAPv0QMAyy1CtAAAAAElFTkSuQmCC",
   cancel:
-    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAASElEQVR42mNgGAUjGvynkVoUTf+pqA6nxv8UqiHbEooNx2cQ1QzHZiDVDcdlCcOQsoCmQUTTSKZpMqV5RqNLUUHTwm4UDBMAALBLQ73LTvoyAAAAAElFTkSuQmCC",
+    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAASElEQVR42mNgGAWjGvynkVoUTf+pqA6nxv8UqiHbEooNx2cQ1QzHZiDVDcdlCcOQsoCmQUTTSKZpMqV5RqNLUUHTwm4UDBMAALBLQ73LTvoyAAAAAElFTkSuQmCC",
 };
 
 function getTextTransformStyle(
@@ -192,6 +182,7 @@ type ButtonContainerProps = {
   disabled: boolean;
   configuration: BackgroundConfiguration;
   children: React.ReactNode;
+  onPress?: () => void;
 };
 
 function ButtonContainer({
@@ -199,19 +190,22 @@ function ButtonContainer({
   disabled,
   configuration,
   children,
+  onPress,
 }: ButtonContainerProps) {
-  const backgroundColor = disabled
+  const defaultBgColor = disabled
     ? configuration.inactiveColor
     : focused
       ? configuration.focusedColor
       : configuration.defaultColor;
 
   return (
-    <View
-      style={[
+    <Pressable
+      onPress={disabled ? undefined : onPress}
+      style={({ pressed }) => [
         styles.container,
         {
-          backgroundColor,
+          backgroundColor:
+            pressed && !disabled ? configuration.focusedColor : defaultBgColor,
           borderRadius: configuration.cornerRadius,
           paddingTop: configuration.paddingTop,
           paddingRight: configuration.paddingRight,
@@ -221,7 +215,7 @@ function ButtonContainer({
       ]}
     >
       {children}
-    </View>
+    </Pressable>
   );
 }
 
@@ -295,20 +289,32 @@ function ButtonLeadingIcon({
 }
 
 // ---------------------------------------------------------------------------
-// Item — single building block driven by configuration + data
+// AudioPlayerButton — single building block driven by configuration + data
 // ---------------------------------------------------------------------------
 
-export function Item({
+import { useModalBlocksStyle } from "../../ModalBlocksStyleContext";
+import { mergeButtonConfiguration } from "../utils/mergeStyles";
+
+export function AudioPlayerButton({
   configuration,
   data,
   disabled,
   focused = false,
-}: ItemProps) {
+  onPress,
+}: AudioPlayerButtonProps) {
+  const modalBlocksStyle = useModalBlocksStyle();
+  const buttonBlock = modalBlocksStyle?.button;
+  const actionBlock = modalBlocksStyle?.action;
+
+  const effectiveConfig = React.useMemo(() => {
+    return mergeButtonConfiguration(configuration, buttonBlock, actionBlock);
+  }, [configuration, buttonBlock, actionBlock]);
+
   const {
-    background: backgroundConfiguration,
-    title: titleConfiguration,
+    background: effectiveBgConfig,
+    title: effectiveTitleConfig,
     icons: iconsConfiguration,
-  } = configuration;
+  } = effectiveConfig;
 
   const { title } = data;
   const isDisabled = disabled ?? data.disabled ?? false;
@@ -320,7 +326,8 @@ export function Item({
     <ButtonContainer
       focused={focused}
       disabled={isDisabled}
-      configuration={backgroundConfiguration}
+      configuration={effectiveBgConfig}
+      onPress={onPress}
     >
       <View style={styles.contentRow}>
         {showIcon ? (
@@ -329,14 +336,14 @@ export function Item({
               actionType={leadingIcon.actionType}
               configuration={iconsConfiguration}
             />
-            <View style={{ width: backgroundConfiguration.horizontalGutter }} />
+            <View style={{ width: effectiveBgConfig.horizontalGutter }} />
           </>
         ) : null}
         <ButtonTitle
           title={title}
           focused={focused}
           disabled={isDisabled}
-          configuration={titleConfiguration}
+          configuration={effectiveTitleConfig}
         />
       </View>
     </ButtonContainer>
@@ -386,39 +393,3 @@ export const VARIANT_LARGE_ICON: ButtonConfiguration = {
     },
   },
 };
-
-export default function App() {
-  return (
-    <View style={styles.demoScreen}>
-      <Text style={styles.demoHeading}>Modal Button Building Block</Text>
-
-      <Text style={styles.demoLabel}>Variant 1 — Text only (confirmation)</Text>
-      <Item configuration={VARIANT_TEXT_ONLY} data={{ title: "Confirm" }} />
-
-      <Text style={styles.demoLabel}>Variant 2 — Leading icon + text</Text>
-      <Item
-        configuration={VARIANT_WITH_ICON}
-        data={{ title: "Add To Playlist" }}
-      />
-
-      <Text style={styles.demoLabel}>Inactive state</Text>
-      <Item
-        configuration={VARIANT_TEXT_ONLY}
-        data={{ title: "Unavailable" }}
-        disabled
-      />
-
-      <Text style={styles.demoLabel}>Custom title config — uppercase</Text>
-      <Item
-        configuration={VARIANT_UPPERCASE_TITLE}
-        data={{ title: "Save Changes" }}
-      />
-
-      <Text style={styles.demoLabel}>Custom icons config — 32×32</Text>
-      <Item
-        configuration={VARIANT_LARGE_ICON}
-        data={{ title: "Add To Queue" }}
-      />
-    </View>
-  );
-}