Linus Waldowsky
726334c155
- Add CardBase: reusable card with header, content, footer - Configurable via props: padding, border, text size, background - Add ModalBase: modal wrapper using CardBase internally - Provides backdrop, click-outside-to-close, Android back button - Refactor EventCardBase to use CardBase - Refactor DeleteEventModal to use ModalBase - Refactor EventOverlay (calendar.tsx) to use ModalBase - Update CLAUDE.md with component documentation
101 lines
2.4 KiB
TypeScript
101 lines
2.4 KiB
TypeScript
import { Pressable, Text, View } from "react-native";
|
|
import { RecurringDeleteMode } from "@calchat/shared";
|
|
import { useThemeStore } from "../stores/ThemeStore";
|
|
import { ModalBase } from "./ModalBase";
|
|
|
|
type DeleteEventModalProps = {
|
|
visible: boolean;
|
|
eventTitle: string;
|
|
isRecurring: boolean;
|
|
onConfirm: (mode: RecurringDeleteMode) => void;
|
|
onCancel: () => void;
|
|
};
|
|
|
|
type DeleteOption = {
|
|
mode: RecurringDeleteMode;
|
|
label: string;
|
|
};
|
|
|
|
const RECURRING_DELETE_OPTIONS: DeleteOption[] = [
|
|
{
|
|
mode: "single",
|
|
label: "Nur dieses Vorkommen",
|
|
},
|
|
{
|
|
mode: "future",
|
|
label: "Dieses und zukünftige",
|
|
},
|
|
{
|
|
mode: "all",
|
|
label: "Alle Vorkommen",
|
|
},
|
|
];
|
|
|
|
export const DeleteEventModal = ({
|
|
visible,
|
|
eventTitle,
|
|
isRecurring,
|
|
onConfirm,
|
|
onCancel,
|
|
}: DeleteEventModalProps) => {
|
|
const { theme } = useThemeStore();
|
|
|
|
const title = isRecurring
|
|
? "Wiederkehrenden Termin löschen"
|
|
: "Termin loeschen";
|
|
|
|
return (
|
|
<ModalBase
|
|
visible={visible}
|
|
onClose={onCancel}
|
|
title={title}
|
|
subtitle={eventTitle}
|
|
footer={{ label: "Abbrechen", onPress: onCancel }}
|
|
>
|
|
{isRecurring ? (
|
|
// Recurring event: show three options
|
|
RECURRING_DELETE_OPTIONS.map((option) => (
|
|
<Pressable
|
|
key={option.mode}
|
|
onPress={() => onConfirm(option.mode)}
|
|
className="py-3 px-4 rounded-lg mb-2"
|
|
style={{
|
|
backgroundColor: theme.secondaryBg,
|
|
borderWidth: 1,
|
|
borderColor: theme.borderPrimary,
|
|
}}
|
|
>
|
|
<Text
|
|
className="font-medium text-base"
|
|
style={{ color: theme.textPrimary }}
|
|
>
|
|
{option.label}
|
|
</Text>
|
|
</Pressable>
|
|
))
|
|
) : (
|
|
// Non-recurring event: simple confirmation
|
|
<View>
|
|
<Text className="text-base mb-4" style={{ color: theme.textPrimary }}>
|
|
Moechtest du diesen Termin wirklich loeschen?
|
|
</Text>
|
|
<Pressable
|
|
onPress={() => onConfirm("all")}
|
|
className="py-3 px-4 rounded-lg"
|
|
style={{
|
|
backgroundColor: theme.rejectButton,
|
|
}}
|
|
>
|
|
<Text
|
|
className="font-medium text-base text-center"
|
|
style={{ color: theme.buttonText }}
|
|
>
|
|
Loeschen
|
|
</Text>
|
|
</Pressable>
|
|
</View>
|
|
)}
|
|
</ModalBase>
|
|
);
|
|
};
|