alerte-secours/src/scenes/Relatives/RelativeModalDelete.js

86 lines
2.2 KiB
JavaScript

import React from "react";
import { View } from "react-native";
import { Button, Portal, Modal } from "react-native-paper";
import Text from "~/components/Text";
import PhoneNumberReadOnly from "~/containers/PhoneNumberReadOnly";
import { useTheme } from "~/theme";
export default function RelativeModalDelete({ modalState, action }) {
const [deletePhoneNumberModalState, setDeletePhoneNumberModalState] =
modalState;
const closeDeletePhoneNumberModal = () => {
setDeletePhoneNumberModalState({
visible: false,
});
};
const { field, visible } = deletePhoneNumberModalState;
const { colors } = useTheme();
return (
<Portal>
<Modal
visible={visible}
onDismiss={closeDeletePhoneNumberModal}
contentContainerStyle={{ backgroundColor: colors.surface, padding: 20 }}
>
<Text>
Vous êtes sur le point de supprimer le numéro de téléphone suivant de
vos contacts en cas d'urgence:
</Text>
{field && (
<View style={{ alignItems: "center" }}>
<PhoneNumberReadOnly
phoneNumber={field.number}
phoneCountry={field.country}
/>
</View>
)}
<Text style={{ textAlign: "center" }}>Êtes-vous sûr ?</Text>
<View
style={{
flexDirection: "row",
justifyContent: "space-evenly",
paddingTop: 20,
}}
>
<Button
onPress={() => closeDeletePhoneNumberModal()}
mode="outlined"
// mode="contained"
// style={{
// backgroundColor: colors.no,
// marginHorizontal: 3,
// }}
// labelStyle={{
// color: colors.surface,
// }}
>
Annuler
</Button>
<Button
onPress={action}
mode="outlined"
// mode="contained"
// style={{
// backgroundColor: colors.ok,
// marginHorizontal: 3,
// }}
// labelStyle={{
// color: colors.surface,
// }}
>
OK
</Button>
</View>
</Modal>
</Portal>
);
}