@applicaster/zapp-react-native-ui-components 15.1.14 → 15.1.15-rc.0

package/Components/ModalComponent/AudioPlayer/Components/Header.tsx

@@ -9,7 +9,8 @@
  */
 
 import React, { useCallback, useState } from "react";
-import { Image, Platform, StyleSheet, Text, View } from "react-native";
+import { Platform, Pressable, StyleSheet, Text, View } from "react-native";
+import { isApplePlatform } from "@applicaster/zapp-react-native-utils/reactUtils";
 
 const styles = StyleSheet.create({
   row: {
@@ -45,29 +46,6 @@ const styles = StyleSheet.create({
     alignItems: "center",
     justifyContent: "center",
   },
-  demoScreen: {
-    flex: 1,
-    backgroundColor: "#1C1C1E",
-    paddingTop: 64,
-    paddingHorizontal: 0,
-    gap: 24,
-  },
-  demoBlock: {
-    gap: 8,
-    paddingHorizontal: 0,
-  },
-  demoHeading: {
-    color: "#FFFFFF",
-    fontSize: 20,
-    fontWeight: "600",
-    marginBottom: 8,
-    paddingHorizontal: 24,
-  },
-  demoLabel: {
-    color: "#999999",
-    fontSize: 13,
-    paddingHorizontal: 24,
-  },
 });
 
 // ---------------------------------------------------------------------------
@@ -85,11 +63,7 @@ export type TextTransform =
 export type TitleAlignment = "left" | "center";
 
 /** Selects hardcoded container + action layout (white fields). */
-export type HeaderVariant =
-  | "singleLine"
-  | "headerWithActions"
-  | "headerWithActionsCancelOnly"
-  | "section";
+export type HeaderVariant = "singleLine" | "headerWithActions" | "section";
 
 export type TitleConfiguration = {
   fontColor: string;
@@ -123,6 +97,7 @@ export type ActionButtonsStyleConfiguration = {
 };
 
 export type HeaderConfiguration = {
+  paddingTop?: number;
   variant: HeaderVariant;
   title: TitleConfiguration;
   closeButton: CloseButtonConfiguration;
@@ -168,12 +143,17 @@ export type HeaderData = {
   title: string;
 };
 
-export type ItemProps = {
+export type AudioPlayerHeaderProps = {
   configuration: HeaderConfiguration;
   data: HeaderData;
   focusedCloseButton?: boolean;
   focusedLeadingAction?: boolean;
   focusedTrailingAction?: boolean;
+  onClose?: () => void;
+  onBack?: () => void;
+  onCancel?: () => void;
+  onDone?: () => void;
+  onClear?: () => void;
 };
 
 // ---------------------------------------------------------------------------
@@ -202,19 +182,12 @@ type ActionButtonsBehaviorSpec = {
 const CONTAINER_SPEC: Record<HeaderVariant, ContainerSpec> = {
   singleLine: {
     horizontalGutter: 16,
-    paddingTop: 0,
-    paddingRight: 14,
-    paddingBottom: 8,
-    paddingLeft: 20,
-  },
-  headerWithActions: {
-    horizontalGutter: 12,
-    paddingTop: 0,
+    paddingTop: 24,
     paddingRight: 20,
-    paddingBottom: 8,
+    paddingBottom: 12,
     paddingLeft: 20,
   },
-  headerWithActionsCancelOnly: {
+  headerWithActions: {
     horizontalGutter: 12,
     paddingTop: 0,
     paddingRight: 20,
@@ -244,11 +217,6 @@ const ACTION_BUTTONS_BEHAVIOR: Record<
     leading: { enabled: true, actionType: "cancel" },
     trailing: { enabled: true, actionType: "done" },
   },
-  headerWithActionsCancelOnly: {
-    sectionEnabled: true,
-    leading: { enabled: true, actionType: "cancel" },
-    trailing: { enabled: false },
-  },
   section: {
     sectionEnabled: true,
     leading: { enabled: false },
@@ -256,9 +224,6 @@ const ACTION_BUTTONS_BEHAVIOR: Record<
   },
 };
 
-const DEFAULT_CLOSE_BUTTON_ASSET =
-  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAYAAAAehFoBAAAAl0lEQVR42u2YQQ7AIAgE/f+naQ899dDYyiLT7DyAnRijwBjGGLNEnKCy4qJCNlVYKZ2aETeUshLhTGlZbUVh5UGkB8hlM4PKZDMCy2VXgrfJfhHYLvtGpI3sjFA72SextrKz0m1bUYwsTvhX97f9C4F8g5G/HLKPQHZqyF4YOW0g5znkxCytjV6koFZVqGVg5Yc0jDFmiQNENiwNUMoCZAAAAABJRU5ErkJggg==";
-
 const CLOSE_BUTTON_SPEC = {
   width: 44,
   height: 44,
@@ -298,19 +263,34 @@ function shouldShowActionSlot(slot: ActionSlotSpec, sectionEnabled: boolean) {
 
 type HeaderContainerProps = {
   variant: HeaderVariant;
+  configuration: HeaderConfiguration;
   children: React.ReactNode;
 };
 
-function HeaderContainer({ variant, children }: HeaderContainerProps) {
+const TRANSPARENT = "transparent";
+
+function HeaderContainer({
+  variant,
+  configuration,
+  children,
+}: HeaderContainerProps) {
   const container = CONTAINER_SPEC[variant];
 
+  const paddingTop =
+    configuration.paddingTop !== undefined
+      ? configuration.paddingTop
+      : container.paddingTop;
+
+  const backgroundColor = (configuration as any).backgroundColor || TRANSPARENT;
+
   return (
     <View
       style={{
-        paddingTop: container.paddingTop,
+        paddingTop: paddingTop,
         paddingRight: container.paddingRight,
         paddingBottom: container.paddingBottom,
         paddingLeft: container.paddingLeft,
+        backgroundColor: backgroundColor,
       }}
     >
       {children}
@@ -325,17 +305,18 @@ type HeaderTitleProps = {
 };
 
 function HeaderTitle({ title, configuration, centered }: HeaderTitleProps) {
-  const letterSpacing =
-    Platform.OS === "ios"
-      ? configuration.iosLetterSpacing
-      : configuration.androidLetterSpacing;
+  const { fontColor, fontSize } = configuration;
+
+  const letterSpacing = isApplePlatform()
+    ? configuration.iosLetterSpacing
+    : configuration.androidLetterSpacing;
 
   return (
     <Text
       style={{
         flex: centered ? undefined : 1,
-        color: configuration.fontColor,
-        fontSize: configuration.fontSize,
+        color: fontColor,
+        fontSize: fontSize,
         lineHeight: configuration.lineHeight,
         letterSpacing,
         fontFamily: Platform.select({
@@ -356,21 +337,80 @@ function HeaderTitle({ title, configuration, centered }: HeaderTitleProps) {
 type HeaderCloseButtonProps = {
   configuration: CloseButtonConfiguration;
   focused?: boolean;
+  onPress?: () => void;
 };
 
 function HeaderCloseButton({
   configuration,
   focused = false,
+  onPress,
 }: HeaderCloseButtonProps) {
   if (!configuration.enabled) {
     return null;
   }
 
-  const asset = configuration.asset ?? DEFAULT_CLOSE_BUTTON_ASSET;
+  const buttonSize = 32;
 
   return (
-    <View
-      style={[
+    <Pressable
+      onPress={onPress}
+      style={({ pressed }) => [
+        styles.closeButton,
+        {
+          width: buttonSize,
+          height: buttonSize,
+          borderRadius: buttonSize / 2,
+          borderWidth: 1.5,
+          borderColor: "rgba(255, 255, 255, 0.4)",
+          opacity: pressed || focused ? 0.7 : 1,
+          justifyContent: "center",
+          alignItems: "center",
+        },
+      ]}
+    >
+      <View
+        style={{
+          width: 14,
+          height: 14,
+          justifyContent: "center",
+          alignItems: "center",
+        }}
+      >
+        <View
+          style={{
+            position: "absolute",
+            width: 14,
+            height: 1.5,
+            backgroundColor: "#FFFFFF",
+            transform: [{ rotate: "45deg" }],
+            borderRadius: 1,
+          }}
+        />
+        <View
+          style={{
+            position: "absolute",
+            width: 14,
+            height: 1.5,
+            backgroundColor: "#FFFFFF",
+            transform: [{ rotate: "-45deg" }],
+            borderRadius: 1,
+          }}
+        />
+      </View>
+    </Pressable>
+  );
+}
+
+type HeaderBackButtonProps = {
+  focused?: boolean;
+  onPress?: () => void;
+};
+
+function HeaderBackButton({ focused = false, onPress }: HeaderBackButtonProps) {
+  return (
+    <Pressable
+      onPress={onPress}
+      style={({ pressed }) => [
         styles.closeButton,
         {
           width: CLOSE_BUTTON_SPEC.width,
@@ -382,19 +422,14 @@ function HeaderCloseButton({
           borderRadius: CLOSE_BUTTON_SPEC.width / 2,
           borderWidth: 1,
           borderColor: "#FFFFFF",
-          opacity: focused ? 0.7 : 1,
+          opacity: pressed || focused ? 0.7 : 1,
         },
       ]}
     >
-      <Image
-        source={{ uri: asset }}
-        style={{
-          width: CLOSE_BUTTON_SPEC.width * 0.55,
-          height: CLOSE_BUTTON_SPEC.height * 0.55,
-        }}
-        resizeMode="contain"
-      />
-    </View>
+      <Text style={{ color: "#FFFFFF", fontSize: 20, fontWeight: "bold" }}>
+        ‹
+      </Text>
+    </Pressable>
   );
 }
 
@@ -402,25 +437,29 @@ type HeaderActionButtonProps = {
   actionType: HeaderActionType;
   configuration: ActionButtonsStyleConfiguration;
   focused?: boolean;
+  onPress?: () => void;
 };
 
 function HeaderActionButton({
   actionType,
   configuration,
   focused = false,
+  onPress,
 }: HeaderActionButtonProps) {
   return (
-    <View
-      style={{
-        backgroundColor: focused
-          ? configuration.focusedBackgroundColor
-          : configuration.defaultBackgroundColor,
+    <Pressable
+      onPress={onPress}
+      style={({ pressed }) => ({
+        backgroundColor:
+          pressed || focused
+            ? configuration.focusedBackgroundColor
+            : configuration.defaultBackgroundColor,
         borderRadius: ACTION_BUTTON_LAYOUT_SPEC.cornerRadius,
         paddingTop: ACTION_BUTTON_LAYOUT_SPEC.paddingTop,
         paddingRight: ACTION_BUTTON_LAYOUT_SPEC.paddingRight,
         paddingBottom: ACTION_BUTTON_LAYOUT_SPEC.paddingBottom,
         paddingLeft: ACTION_BUTTON_LAYOUT_SPEC.paddingLeft,
-      }}
+      })}
     >
       <Text
         style={{
@@ -444,7 +483,7 @@ function HeaderActionButton({
       >
         {ACTION_LABELS[actionType]}
       </Text>
-    </View>
+    </Pressable>
   );
 }
 
@@ -536,17 +575,32 @@ function CenterAlignedHeaderLayout({
 }
 
 // ---------------------------------------------------------------------------
-// Item
+// AudioPlayerHeader
 // ---------------------------------------------------------------------------
 
-export function Item({
+import { useModalBlocksStyle } from "../../ModalBlocksStyleContext";
+import { mergeHeaderConfiguration } from "../utils/mergeStyles";
+
+export function AudioPlayerHeader({
   configuration,
   data,
   focusedCloseButton = false,
   focusedLeadingAction = false,
   focusedTrailingAction = false,
-}: ItemProps) {
-  const { variant, title, closeButton, actionButtons } = configuration;
+  onClose,
+  onBack,
+  onCancel,
+  onDone,
+  onClear,
+}: AudioPlayerHeaderProps) {
+  const modalBlocksStyle = useModalBlocksStyle();
+  const headerBlock = modalBlocksStyle?.header;
+
+  const effectiveConfig = React.useMemo(() => {
+    return mergeHeaderConfiguration(configuration, headerBlock);
+  }, [configuration, headerBlock]);
+
+  const { variant, title, closeButton, actionButtons } = effectiveConfig;
   const { title: titleText } = data;
 
   const container = CONTAINER_SPEC[variant];
@@ -568,7 +622,10 @@ export function Item({
       actionType={behavior.leading.actionType}
       configuration={actionButtons}
       focused={focusedLeadingAction}
+      onPress={onCancel}
     />
+  ) : onBack ? (
+    <HeaderBackButton focused={focusedCloseButton} onPress={onBack} />
   ) : null;
 
   const trailingContent = showTrailingAction ? (
@@ -576,17 +633,19 @@ export function Item({
       actionType={behavior.trailing.actionType}
       configuration={actionButtons}
       focused={focusedTrailingAction}
+      onPress={behavior.trailing.actionType === "done" ? onDone : onClear}
     />
   ) : closeButton.enabled && !isCenterAligned ? (
     <HeaderCloseButton
       configuration={closeButton}
       focused={focusedCloseButton}
+      onPress={onClose}
     />
   ) : null;
 
   if (isCenterAligned) {
     return (
-      <HeaderContainer variant={variant}>
+      <HeaderContainer variant={variant} configuration={configuration}>
         <CenterAlignedHeaderLayout
           horizontalGutter={container.horizontalGutter}
           title={title}
@@ -599,7 +658,7 @@ export function Item({
   }
 
   return (
-    <HeaderContainer variant={variant}>
+    <HeaderContainer variant={variant} configuration={configuration}>
       <View style={styles.row}>
         {leadingContent ? (
           <>
@@ -647,24 +706,7 @@ export const VARIANT_HEADER_WITH_ACTIONS: HeaderConfiguration = {
   },
   closeButton: { enabled: false },
   actionButtons: DEFAULT_ACTION_BUTTONS_STYLE_CONFIGURATION,
-};
-
-/** Variant 2 — single side action (layout rule demo) */
-export const VARIANT_HEADER_WITH_CANCEL_ONLY: HeaderConfiguration = {
-  variant: "headerWithActionsCancelOnly",
-  title: {
-    fontColor: "#FFFFFF",
-    iosFontFamily: "SFProText-Bold",
-    androidFontFamily: "Roboto-Bold",
-    fontSize: 22,
-    lineHeight: 28,
-    iosLetterSpacing: -0.6,
-    androidLetterSpacing: 0,
-    textTransform: "default",
-    alignment: "center",
-  },
-  closeButton: { enabled: false },
-  actionButtons: DEFAULT_ACTION_BUTTONS_STYLE_CONFIGURATION,
+  paddingTop: 16,
 };
 
 /** Variant 3 — Section Header */
@@ -684,45 +726,3 @@ export const VARIANT_SECTION_HEADER: HeaderConfiguration = {
   closeButton: { enabled: false },
   actionButtons: DEFAULT_ACTION_BUTTONS_STYLE_CONFIGURATION,
 };
-
-export default function App() {
-  return (
-    <View style={styles.demoScreen}>
-      <Text style={styles.demoHeading}>Modal Header Building Block</Text>
-
-      <View style={styles.demoBlock}>
-        <Text style={styles.demoLabel}>Single Line Header</Text>
-        <Item
-          configuration={VARIANT_SINGLE_LINE_HEADER}
-          data={{ title: "Playback Speed" }}
-        />
-      </View>
-
-      <View style={styles.demoBlock}>
-        <Text style={styles.demoLabel}>Header With Actions</Text>
-        <Item
-          configuration={VARIANT_HEADER_WITH_ACTIONS}
-          data={{ title: "Playback Speed" }}
-        />
-      </View>
-
-      <View style={styles.demoBlock}>
-        <Text style={styles.demoLabel}>
-          Header With Actions — single side action
-        </Text>
-        <Item
-          configuration={VARIANT_HEADER_WITH_CANCEL_ONLY}
-          data={{ title: "Playback Speed" }}
-        />
-      </View>
-
-      <View style={styles.demoBlock}>
-        <Text style={styles.demoLabel}>Section Header</Text>
-        <Item
-          configuration={VARIANT_SECTION_HEADER}
-          data={{ title: "Next in Queue" }}
-        />
-      </View>
-    </View>
-  );
-}