112 lines
3.0 KiB
TypeScript
112 lines
3.0 KiB
TypeScript
import React from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { Pressable, StyleSheet, Text, View } from 'react-native';
|
|
|
|
interface PermissionAlertProps {
|
|
visible: boolean;
|
|
onConfirm: () => void;
|
|
onCancel: () => void;
|
|
title: string;
|
|
message: string;
|
|
confirmText?: string;
|
|
cancelText?: string;
|
|
}
|
|
|
|
const PermissionAlert: React.FC<PermissionAlertProps> = ({ visible, onConfirm, onCancel, title, message, confirmText, cancelText }) => {
|
|
const { t } = useTranslation();
|
|
|
|
if (!visible) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<View style={styles.overlay}>
|
|
<View style={styles.centeredView}>
|
|
<View style={styles.modalView}>
|
|
<Text style={styles.modalTitle}>{title}</Text>
|
|
<Text style={styles.modalMessage}>{message}</Text>
|
|
<View style={styles.buttonContainer}>
|
|
<Pressable style={[styles.button, styles.cancelButton]} onPress={onCancel}>
|
|
<Text style={styles.buttonText}>{cancelText || t('cancel', { ns: 'permission' })}</Text>
|
|
</Pressable>
|
|
<Pressable style={[styles.button, styles.confirmButton]} onPress={onConfirm}>
|
|
<Text style={styles.confirmButtonText}>{confirmText || t('goToSettings', { ns: 'permission' })}</Text>
|
|
</Pressable>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
overlay: {
|
|
position: 'absolute',
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
zIndex: 99,
|
|
},
|
|
centeredView: {
|
|
flex: 1,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
backgroundColor: 'rgba(0,0,0,0.5)',
|
|
zIndex: 9999,
|
|
},
|
|
modalView: {
|
|
width: '80%',
|
|
backgroundColor: 'white',
|
|
borderRadius: 16,
|
|
padding: 24,
|
|
alignItems: 'center',
|
|
shadowColor: '#000',
|
|
shadowOffset: { width: 0, height: 2 },
|
|
shadowOpacity: 0.25,
|
|
shadowRadius: 4,
|
|
elevation: 5,
|
|
},
|
|
modalTitle: {
|
|
fontSize: 20,
|
|
fontWeight: 'bold',
|
|
color: '#4C320C',
|
|
marginBottom: 12,
|
|
},
|
|
modalMessage: {
|
|
fontSize: 16,
|
|
color: '#4C320C',
|
|
textAlign: 'center',
|
|
marginBottom: 24,
|
|
},
|
|
buttonContainer: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
width: '100%',
|
|
},
|
|
button: {
|
|
borderRadius: 20,
|
|
paddingVertical: 12,
|
|
flex: 1,
|
|
alignItems: 'center',
|
|
},
|
|
cancelButton: {
|
|
backgroundColor: '#F5F5F5',
|
|
marginRight: 8,
|
|
},
|
|
confirmButton: {
|
|
backgroundColor: '#E2793F',
|
|
marginLeft: 8,
|
|
},
|
|
buttonText: {
|
|
color: '#4C320C',
|
|
fontWeight: '600',
|
|
},
|
|
confirmButtonText: {
|
|
color: 'white',
|
|
fontWeight: '600',
|
|
},
|
|
});
|
|
|
|
export default PermissionAlert;
|