112 lines
2.5 KiB
TypeScript
112 lines
2.5 KiB
TypeScript
import { View, Text, Pressable, StyleSheet } from 'react-native'
|
|
import { colors, spacing, radii, typography } from '../theme/mobile-theme'
|
|
import { BottomDrawer } from './BottomDrawer'
|
|
|
|
type Props = {
|
|
visible: boolean
|
|
title: string
|
|
message?: string
|
|
confirmLabel?: string
|
|
cancelLabel?: string
|
|
destructive?: boolean
|
|
onConfirm: () => void
|
|
onCancel: () => void
|
|
}
|
|
|
|
export function ConfirmModal({
|
|
visible,
|
|
title,
|
|
message,
|
|
confirmLabel = 'Confirm',
|
|
cancelLabel = 'Cancel',
|
|
destructive = false,
|
|
onConfirm,
|
|
onCancel
|
|
}: Props) {
|
|
return (
|
|
<BottomDrawer visible={visible} onClose={onCancel}>
|
|
<View style={styles.content}>
|
|
<Text style={styles.title}>{title}</Text>
|
|
{message ? <Text style={styles.message}>{message}</Text> : null}
|
|
</View>
|
|
<View style={styles.buttons}>
|
|
<Pressable
|
|
style={({ pressed }) => [styles.button, styles.cancelButton, pressed && styles.pressed]}
|
|
onPress={onCancel}
|
|
>
|
|
<Text style={styles.cancelText}>{cancelLabel}</Text>
|
|
</Pressable>
|
|
<Pressable
|
|
style={({ pressed }) => [
|
|
styles.button,
|
|
destructive ? styles.destructiveButton : styles.confirmButton,
|
|
pressed && styles.pressed
|
|
]}
|
|
onPress={() => {
|
|
onConfirm()
|
|
onCancel()
|
|
}}
|
|
>
|
|
<Text style={destructive ? styles.destructiveText : styles.confirmText}>
|
|
{confirmLabel}
|
|
</Text>
|
|
</Pressable>
|
|
</View>
|
|
</BottomDrawer>
|
|
)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
content: {
|
|
paddingBottom: spacing.lg
|
|
},
|
|
title: {
|
|
fontSize: 16,
|
|
fontWeight: '700',
|
|
color: colors.textPrimary
|
|
},
|
|
message: {
|
|
fontSize: typography.bodySize,
|
|
color: colors.textSecondary,
|
|
marginTop: spacing.xs,
|
|
lineHeight: 20
|
|
},
|
|
buttons: {
|
|
flexDirection: 'row',
|
|
gap: spacing.sm
|
|
},
|
|
button: {
|
|
flex: 1,
|
|
paddingVertical: spacing.sm + 2,
|
|
borderRadius: radii.button,
|
|
alignItems: 'center'
|
|
},
|
|
cancelButton: {
|
|
backgroundColor: colors.bgPanel
|
|
},
|
|
confirmButton: {
|
|
backgroundColor: colors.textPrimary
|
|
},
|
|
destructiveButton: {
|
|
backgroundColor: colors.statusRed
|
|
},
|
|
pressed: {
|
|
opacity: 0.7
|
|
},
|
|
cancelText: {
|
|
fontSize: typography.bodySize,
|
|
fontWeight: '600',
|
|
color: colors.textSecondary
|
|
},
|
|
confirmText: {
|
|
fontSize: typography.bodySize,
|
|
fontWeight: '600',
|
|
color: colors.bgBase
|
|
},
|
|
destructiveText: {
|
|
fontSize: typography.bodySize,
|
|
fontWeight: '600',
|
|
color: '#fff'
|
|
}
|
|
})
|