138 lines
3.5 KiB
TypeScript
138 lines
3.5 KiB
TypeScript
import { StyleSheet, Platform } from 'react-native'
|
|
import {
|
|
AlertDialog,
|
|
AlertDialogContent,
|
|
AlertDialogHeader,
|
|
AlertDialogTitle,
|
|
AlertDialogDescription,
|
|
AlertDialogFooter,
|
|
DeleteAlertDialogAction,
|
|
CancelAlertDialogAction,
|
|
} from './alert-dialog'
|
|
|
|
interface DeleteConfirmDialogProps {
|
|
open: boolean
|
|
onOpenChange: (open: boolean) => void
|
|
onConfirm: () => void
|
|
title?: string
|
|
description?: string
|
|
}
|
|
|
|
export function DeleteConfirmDialog({
|
|
open,
|
|
onOpenChange,
|
|
onConfirm,
|
|
title = '删除该条记录?',
|
|
description = '删除后不可恢复',
|
|
}: DeleteConfirmDialogProps) {
|
|
const handleConfirm = () => {
|
|
onConfirm()
|
|
onOpenChange(false)
|
|
}
|
|
|
|
return (
|
|
<AlertDialog open={open} onOpenChange={onOpenChange}>
|
|
<AlertDialogContent style={styles.dialogContent}>
|
|
<AlertDialogHeader>
|
|
<AlertDialogTitle style={styles.dialogTitle}>
|
|
{title}
|
|
</AlertDialogTitle>
|
|
<AlertDialogDescription style={styles.dialogDescription}>
|
|
{description}
|
|
</AlertDialogDescription>
|
|
</AlertDialogHeader>
|
|
<AlertDialogFooter style={styles.dialogFooter}>
|
|
<CancelAlertDialogAction
|
|
onPress={() => onOpenChange(false)}
|
|
style={styles.cancelButton}
|
|
/>
|
|
<DeleteAlertDialogAction
|
|
onPress={handleConfirm}
|
|
style={styles.confirmDeleteButton}
|
|
/>
|
|
</AlertDialogFooter>
|
|
</AlertDialogContent>
|
|
</AlertDialog>
|
|
)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
dialogContent: {
|
|
backgroundColor: '#1C1E22',
|
|
borderRadius: 16,
|
|
padding: 24,
|
|
width: '90%',
|
|
maxWidth: 320,
|
|
borderWidth: 0,
|
|
// Android 阴影效果
|
|
...Platform.select({
|
|
android: {
|
|
elevation: 24,
|
|
},
|
|
ios: {
|
|
shadowColor: '#000',
|
|
shadowOffset: {
|
|
width: 0,
|
|
height: 8,
|
|
},
|
|
shadowOpacity: 0.3,
|
|
shadowRadius: 16,
|
|
},
|
|
}),
|
|
},
|
|
dialogTitle: {
|
|
color: '#F5F5F5',
|
|
fontSize: 15,
|
|
fontWeight: '500',
|
|
textAlign: 'center',
|
|
marginBottom: 8,
|
|
// iOS 字体渲染优化
|
|
...Platform.select({
|
|
ios: {
|
|
fontWeight: '600',
|
|
},
|
|
}),
|
|
},
|
|
dialogDescription: {
|
|
color: '#8A8A8A',
|
|
fontSize: 13,
|
|
textAlign: 'center',
|
|
lineHeight: 20,
|
|
},
|
|
dialogFooter: {
|
|
flexDirection: 'row',
|
|
gap: 12,
|
|
marginTop: 24,
|
|
justifyContent: 'center',
|
|
},
|
|
cancelButton: {
|
|
flex: 1,
|
|
height: 44,
|
|
borderRadius: 8,
|
|
backgroundColor: '#262A31',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
// Android 触摸反馈
|
|
...Platform.select({
|
|
android: {
|
|
elevation: 0,
|
|
},
|
|
}),
|
|
},
|
|
confirmDeleteButton: {
|
|
flex: 1,
|
|
height: 44,
|
|
borderRadius: 8,
|
|
backgroundColor: '#FA3F2C',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
// Android 触摸反馈
|
|
...Platform.select({
|
|
android: {
|
|
elevation: 0,
|
|
},
|
|
}),
|
|
},
|
|
})
|
|
|