83 lines
2.5 KiB
TypeScript
83 lines
2.5 KiB
TypeScript
import Styles from '@/constants/Styles';
|
|
import { useTheme } from '@/providers/ThemeProvider';
|
|
import React from 'react';
|
|
import { Modal, TouchableOpacity, View } from 'react-native';
|
|
import Text from './Text';
|
|
|
|
interface ModalConfirmationProps {
|
|
visible: boolean;
|
|
title: string;
|
|
message: string;
|
|
onConfirm: () => void;
|
|
onCancel: () => void;
|
|
confirmText?: string;
|
|
cancelText?: string;
|
|
isDestructive?: boolean;
|
|
}
|
|
|
|
const ModalConfirmation: React.FC<ModalConfirmationProps> = ({
|
|
visible,
|
|
title,
|
|
message,
|
|
onConfirm,
|
|
onCancel,
|
|
confirmText = 'Ya',
|
|
cancelText = 'Batal',
|
|
isDestructive = false,
|
|
}) => {
|
|
const { colors } = useTheme();
|
|
|
|
return (
|
|
<Modal
|
|
transparent
|
|
visible={visible}
|
|
animationType="fade"
|
|
onRequestClose={onCancel}
|
|
>
|
|
<View style={Styles.modalOverlay}>
|
|
<View style={[Styles.modalConfirmContainer, { backgroundColor: colors.modalBackground }]}>
|
|
<View style={Styles.modalConfirmContent}>
|
|
<Text style={Styles.modalConfirmTitle}>{title}</Text>
|
|
<Text style={[Styles.modalConfirmMessage, { color: colors.text }]}>
|
|
{message}
|
|
</Text>
|
|
</View>
|
|
|
|
<View style={[Styles.modalConfirmDivider, { backgroundColor: colors.icon + '20' }]} />
|
|
|
|
<View style={Styles.modalConfirmFooter}>
|
|
<TouchableOpacity
|
|
style={Styles.modalConfirmButton}
|
|
onPress={onCancel}
|
|
activeOpacity={0.7}
|
|
>
|
|
<Text style={[Styles.modalConfirmButtonText, { color: colors.text }]}>
|
|
{cancelText}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
|
|
<View style={[Styles.modalConfirmVerticalDivider, { backgroundColor: colors.icon + '20' }]} />
|
|
|
|
<TouchableOpacity
|
|
style={Styles.modalConfirmButton}
|
|
onPress={onConfirm}
|
|
activeOpacity={0.7}
|
|
>
|
|
<Text
|
|
style={[
|
|
Styles.modalConfirmButtonText,
|
|
{ color: isDestructive ? colors.error : colors.text }
|
|
]}
|
|
>
|
|
{confirmText}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
export default ModalConfirmation;
|