upd: modal konfirmasi
Deskripsi: - menerapkan semua modal baru pada semua fitur No Issues''
This commit is contained in:
82
components/ModalConfirmation.tsx
Normal file
82
components/ModalConfirmation.tsx
Normal file
@@ -0,0 +1,82 @@
|
||||
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;
|
||||
Reference in New Issue
Block a user