File size: 1,762 Bytes
5c876be | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | import React from 'react';
import { useTheme, Dialog, Paragraph, Button, Portal } from 'react-native-paper';
export interface ConfirmDialogProps {
/** Whether the dialog is visible */
visible: boolean;
/** Dialog title */
title: string;
/** Dialog body message */
message: string;
/** Label for the confirm button (default: "Confirm") */
confirmLabel?: string;
/** Label for the cancel button (default: "Cancel") */
cancelLabel?: string;
/** Callback when confirm is pressed */
onConfirm: () => void;
/** Callback when cancel / dismiss is pressed */
onCancel: () => void;
/** If true, the confirm button uses error colour (destructive action) */
destructive?: boolean;
}
/**
* Reusable confirmation dialog using Paper's Dialog + Portal.
* Supports both normal and destructive (error-coloured) confirm actions.
*/
export function ConfirmDialog({
visible,
title,
message,
confirmLabel = 'Confirm',
cancelLabel = 'Cancel',
onConfirm,
onCancel,
destructive = false,
}: ConfirmDialogProps) {
const theme = useTheme();
return (
<Portal>
<Dialog visible={visible} onDismiss={onCancel}>
<Dialog.Title>{title}</Dialog.Title>
<Dialog.Content>
<Paragraph style={{ color: theme.colors.onSurfaceVariant }}>
{message}
</Paragraph>
</Dialog.Content>
<Dialog.Actions>
<Button onPress={onCancel} textColor={theme.colors.onSurfaceVariant}>
{cancelLabel}
</Button>
<Button
onPress={onConfirm}
textColor={destructive ? theme.colors.error : theme.colors.primary}
>
{confirmLabel}
</Button>
</Dialog.Actions>
</Dialog>
</Portal>
);
}
|