alerte-secours/src/containers/DaeSuggestModal/index.js

71 lines
2 KiB
JavaScript

import React, { useMemo } from "react";
import { View } from "react-native";
import { Button, Modal, Portal } from "react-native-paper";
import Text from "~/components/Text";
import { useRootNav } from "~/navigation/Context";
import { defibsActions, useDefibsState } from "~/stores";
import { useTheme } from "~/theme";
export default function DaeSuggestModal() {
const { showDaeSuggestModal } = useDefibsState(["showDaeSuggestModal"]);
const navigationRef = useRootNav();
const { colors } = useTheme();
const styles = useMemo(
() => ({
container: {
backgroundColor: colors.surface,
padding: 20,
marginHorizontal: 16,
borderRadius: 12,
},
title: { fontSize: 20, fontWeight: "bold" },
paragraph: { marginTop: 10, fontSize: 16 },
actionsColumn: {
marginTop: 18,
gap: 10,
},
}),
[colors.surface],
);
const dismiss = () => {
defibsActions.setShowDaeSuggestModal(false);
};
const goToDaeList = () => {
dismiss();
// DAEList is inside the Drawer navigator which is the RootStack "Main" screen.
// Using the root navigation ref makes this modal independent from current route.
navigationRef?.current?.navigate("Main", {
screen: "DAEList",
});
};
return (
<Portal>
<Modal
visible={!!showDaeSuggestModal}
onDismiss={dismiss}
contentContainerStyle={styles.container}
>
<Text style={styles.title}>Défibrillateur à proximité</Text>
<Text style={styles.paragraph}>
En cas d'arrêt cardiaque, un défibrillateur (DAE) à proximité peut
sauver une vie.
</Text>
<View style={styles.actionsColumn}>
<Button mode="contained" onPress={goToDaeList}>
Chercher un défibrillateur
</Button>
<Button mode="outlined" onPress={dismiss}>
Non merci
</Button>
</View>
</Modal>
</Portal>
);
}