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

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

@@ -1,332 +0,0 @@
-/**
- * Modal Building Block — Action
- *
- * Single-file Expo Snack demo for the Action list item building block spec.
- * Three forms (text only / leading icon + text / leading + text + trailing)
- * are driven by data — no separate variants.
- *
- * Green (configurable): background, title, trailingIcon.chevronAsset
- * White (hardcoded): container padding/gutter, icon size, leading icon assets,
- *   leading/trailing visibility logic from data
- */
-
-import React from "react";
-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,
-  },
-});
-
-// ---------------------------------------------------------------------------
-// Configuration (green / editable fields from spec)
-// ---------------------------------------------------------------------------
-
-export type TextTransform =
-  | "default"
-  | "lowercase"
-  | "uppercase"
-  | "capitalize";
-
-export type BackgroundConfiguration = {
-  defaultColor: string;
-  focusedColor: string;
-  cornerRadius: number;
-};
-
-export type TitleConfiguration = {
-  fontColor: string;
-  focusedFontColor: string;
-  iosFontFamily: string;
-  androidFontFamily: string;
-  fontSize: number;
-  lineHeight: number;
-  iosLetterSpacing: number;
-  androidLetterSpacing: number;
-  textTransform: TextTransform;
-};
-
-export type TrailingIconConfiguration = {
-  chevronAsset?: string;
-};
-
-export type ActionConfiguration = {
-  background: BackgroundConfiguration;
-  title: TitleConfiguration;
-  trailingIcon: TrailingIconConfiguration;
-};
-
-export const DEFAULT_BACKGROUND_CONFIGURATION: BackgroundConfiguration = {
-  defaultColor: "transparent",
-  focusedColor: "rgba(62, 62, 62, 1)",
-  cornerRadius: 12,
-};
-
-export const DEFAULT_TITLE_CONFIGURATION: TitleConfiguration = {
-  fontColor: "#FFFFFF",
-  focusedFontColor: "#FFFFFF",
-  iosFontFamily: "SFProText-Semibold",
-  androidFontFamily: "Roboto-Medium",
-  fontSize: 15,
-  lineHeight: 24,
-  iosLetterSpacing: -0.2,
-  androidLetterSpacing: 0,
-  textTransform: "default",
-};
-
-export const DEFAULT_TRAILING_ICON_CONFIGURATION: TrailingIconConfiguration =
-  {};
-
-export const DEFAULT_ACTION_CONFIGURATION: ActionConfiguration = {
-  background: DEFAULT_BACKGROUND_CONFIGURATION,
-  title: DEFAULT_TITLE_CONFIGURATION,
-  trailingIcon: DEFAULT_TRAILING_ICON_CONFIGURATION,
-};
-
-// ---------------------------------------------------------------------------
-// Data (runtime — controls which elements are shown)
-// ---------------------------------------------------------------------------
-
-export type LeadingActionType =
-  | "addToQueue"
-  | "addToPlaylist"
-  | "favorite"
-  | "share"
-  | "sleepTimer"
-  | "playbackSpeed";
-
-export type ActionData = {
-  title: string;
-  /** When set, leading icon is shown (Enable: On). */
-  leadingActionType?: LeadingActionType;
-  /** When true, trailing chevron is shown (Enable: On). */
-  showTrailingChevron?: boolean;
-};
-
-export type AudioPlayerActionProps = {
-  configuration: ActionConfiguration;
-  data: ActionData;
-  focused?: boolean;
-  onPress?: () => void;
-};
-
-// ---------------------------------------------------------------------------
-// Hardcoded spec values (white fields)
-// ---------------------------------------------------------------------------
-
-const CONTAINER_SPEC = {
-  paddingTop: 13,
-  paddingRight: 10,
-  paddingBottom: 13,
-  paddingLeft: 10,
-  horizontalGutter: 12,
-};
-
-const ICON_SPEC = {
-  width: 24,
-  height: 24,
-};
-
-const DEFAULT_CHEVRON_ASSET =
-  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAALElEQVR42mNgGAXUBlu2bPmPjIeWBeiGDy0Lhrbrh1/qGXqZaxSMglEw0gEA4c+IpUrpYX4AAAAASUVORK5CYII=";
-
-/** Hardcoded: action type → leading icon asset (base64 PNG). */
-const LEADING_ICON_ASSETS: Record<LeadingActionType, string> = {
-  addToQueue:
-    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAALElEQVR42mNgGAUjE/xHAzS3gFgweC0Y+nEwGslkBRFFwTj8LBjNyaNgmAMAJTf+EEEZcS0AAAAASUVORK5CYII=",
-  addToPlaylist:
-    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAKUlEQVR42mNgGAVDBvxHA6MWjFpAvEGkglELKLdgNJmOWkA7C0YBzQAAivu+UKRR1ZIAAAAASUVORK5CYII=",
-  favorite:
-    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAKklEQVR42mNgGAWjYBTgBP+xAGLkRi0YQhbgM4wqBo9aMHgsGAWjgCAAALyAZqh4yyZZAAAAAElFTkSuQmCC",
-  share:
-    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAK0lEQVR42mNgGAVDDvxHAqMWjFowUiz4TwQYgRYQYxBFlo1aMPAWjAK6AgD2g7pUUT7VeAAAAABJRU5ErkJggg==",
-  sleepTimer:
-    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAYUlEQVR42tWUSQ4AIAgD+f+n8eJRliIQ6MmEZTSxJZokvipdXgZpAbzOO17AglIXI7XULxmCoEMwRGuWam6AdRsN4IJYTRH4PIDkhxTA92zUPNBcFDDHaOVR0RJ2LXG9QgemFVK8tpo4PwAAAABJRU5ErkJggg==",
-  playbackSpeed:
-    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAK0lEQVR42mNgGAVDDvxHAqMWjFowUiz4TwQYgRYQYxBFlo1aMPAWjAK6AgD2g7pUUT7VeAAAAABJRU5ErkJggg==",
-};
-
-function getTextTransformStyle(
-  textTransform: TextTransform
-): "none" | "lowercase" | "uppercase" | "capitalize" {
-  return textTransform === "default" ? "none" : textTransform;
-}
-
-function shouldShowLeadingIcon(leadingActionType?: LeadingActionType) {
-  return !!leadingActionType;
-}
-
-function shouldShowTrailingIcon(showTrailingChevron?: boolean) {
-  return !!showTrailingChevron;
-}
-
-// ---------------------------------------------------------------------------
-// Inner components
-// ---------------------------------------------------------------------------
-
-type ActionContainerProps = {
-  configuration: BackgroundConfiguration;
-  focused: boolean;
-  children: React.ReactNode;
-  onPress?: () => void;
-};
-
-function ActionContainer({
-  configuration,
-  focused,
-  children,
-  onPress,
-}: ActionContainerProps) {
-  return (
-    <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}
-    </Pressable>
-  );
-}
-
-type ActionTitleProps = {
-  title: string;
-  configuration: TitleConfiguration;
-  focused: boolean;
-};
-
-function ActionTitle({ title, configuration, focused }: ActionTitleProps) {
-  const letterSpacing =
-    Platform.OS === "ios"
-      ? configuration.iosLetterSpacing
-      : configuration.androidLetterSpacing;
-
-  return (
-    <Text
-      style={{
-        flex: 1,
-        color: focused
-          ? configuration.focusedFontColor
-          : configuration.fontColor,
-        fontSize: configuration.fontSize,
-        lineHeight: configuration.lineHeight,
-        letterSpacing,
-        fontFamily: Platform.select({
-          ios: configuration.iosFontFamily,
-          android: configuration.androidFontFamily,
-          default: configuration.androidFontFamily,
-        }),
-        textTransform: getTextTransformStyle(configuration.textTransform),
-      }}
-      numberOfLines={1}
-    >
-      {title}
-    </Text>
-  );
-}
-
-type ActionLeadingIconProps = {
-  actionType: LeadingActionType;
-};
-
-function ActionLeadingIcon({ actionType }: ActionLeadingIconProps) {
-  return (
-    <Image
-      source={{ uri: LEADING_ICON_ASSETS[actionType] }}
-      style={{ width: ICON_SPEC.width, height: ICON_SPEC.height }}
-      resizeMode="contain"
-    />
-  );
-}
-
-type ActionTrailingIconProps = {
-  configuration: TrailingIconConfiguration;
-};
-
-function ActionTrailingIcon({ configuration }: ActionTrailingIconProps) {
-  const asset = configuration.chevronAsset ?? DEFAULT_CHEVRON_ASSET;
-
-  return (
-    <Image
-      source={{ uri: asset }}
-      style={{ width: ICON_SPEC.width, height: ICON_SPEC.height }}
-      resizeMode="contain"
-    />
-  );
-}
-
-// ---------------------------------------------------------------------------
-// AudioPlayerAction
-// ---------------------------------------------------------------------------
-
-export function AudioPlayerAction({
-  configuration,
-  data,
-  focused = false,
-  onPress,
-}: AudioPlayerActionProps) {
-  const { background, title, trailingIcon } = configuration;
-  const { title: label, leadingActionType, showTrailingChevron } = data;
-
-  const showLeading = shouldShowLeadingIcon(leadingActionType);
-  const showTrailing = shouldShowTrailingIcon(showTrailingChevron);
-
-  return (
-    <ActionContainer
-      configuration={background}
-      focused={focused}
-      onPress={onPress}
-    >
-      <View style={styles.row}>
-        {showLeading ? (
-          <>
-            <ActionLeadingIcon actionType={leadingActionType} />
-            <View style={{ width: CONTAINER_SPEC.horizontalGutter }} />
-          </>
-        ) : null}
-        <ActionTitle title={label} configuration={title} focused={focused} />
-        {showTrailing ? (
-          <>
-            <View style={{ width: CONTAINER_SPEC.horizontalGutter }} />
-            <ActionTrailingIcon configuration={trailingIcon} />
-          </>
-        ) : null}
-      </View>
-    </ActionContainer>
-  );
-}