import { RefObject, useMemo } from "react"; import { GestureResponderEvent, Pressable, StyleSheet, Text, View } from "react-native"; import Animated from "react-native-reanimated"; import { useSafeAreaInsets } from "react-native-safe-area-context"; import { IOVisualCostants, enterTransitionAlertEdgeToEdge, enterTransitionAlertEdgeToEdgeContent, exitTransitionAlertEdgeToEdge } from "../../core"; import { IOColors, IOColorsStatusBackground, IOColorsStatusForeground } from "../../core/IOColors"; import { IOAlertSpacing } from "../../core/IOSpacing"; import { useScaleAnimation } from "../../hooks"; import { makeFontStyleObject } from "../../utils/fonts"; import { WithTestID } from "../../utils/types"; import { IOIconSizeScale, IOIcons, Icon } from "../icons"; import { Body } from "../typography"; const iconSize: IOIconSizeScale = 24; const [spacingDefault] = IOAlertSpacing; const styles = StyleSheet.create({ alert: { flexDirection: "row", alignItems: "flex-start", alignContent: "center", padding: spacingDefault } }); type AlertProps = WithTestID<{ variant: "error" | "warning" | "info" | "success"; content: string; viewRef?: RefObject; accessibilityLabel?: string; accessibilityHint?: string; }>; type AlertActionProps = | { action?: string; onPress: (event: GestureResponderEvent) => void; } | { action?: never; onPress?: never; }; export type AlertEdgeToEdgeProps = AlertProps & AlertActionProps; type VariantStates = { icon: IOIcons; background: IOColorsStatusBackground; foreground: IOColorsStatusForeground; }; // COMPONENT CONFIGURATION const mapVariantStates: Record< NonNullable, VariantStates > = { error: { icon: "errorFilled", background: "error-100", foreground: "error-850" }, warning: { icon: "warningFilled", background: "warning-100", foreground: "warning-850" }, info: { icon: "infoFilled", background: "info-100", foreground: "info-850" }, success: { icon: "success", background: "success-100", foreground: "success-850" } }; export const AlertEdgeToEdge = ({ variant, content, action, onPress, accessibilityHint, testID }: AlertEdgeToEdgeProps) => { const { onPressIn, onPressOut, scaleAnimatedStyle } = useScaleAnimation("slight"); const insets = useSafeAreaInsets(); const backgroundColor = useMemo( () => IOColors[mapVariantStates[variant].background], [variant] ); const renderMainBlock = () => ( <> {content} {action && ( {` ${action}`} )} ); const PressableButton = () => ( {renderMainBlock()} ); const StaticComponent = () => ( {renderMainBlock()} ); return ( {action ? PressableButton() : StaticComponent()} ); };