526 lines
14 KiB
JavaScript
526 lines
14 KiB
JavaScript
import { View, useWindowDimensions } from "react-native";
|
|
import { createDrawerNavigator } from "@react-navigation/drawer";
|
|
import {
|
|
MaterialCommunityIcons,
|
|
MaterialIcons,
|
|
Entypo,
|
|
} from "@expo/vector-icons";
|
|
import { useNavigation, CommonActions } from "@react-navigation/native";
|
|
|
|
import DrawerContent from "~/navigation/DrawerNav/DrawerContent";
|
|
import { useDrawerState } from "~/navigation/Context";
|
|
import getDefaultDrawerWidth from "~/navigation/DrawerNav/getDefaultDrawerWidth";
|
|
|
|
import Main from "~/scenes/Main";
|
|
import Profile from "~/scenes/Profile";
|
|
import Notifications from "~/scenes/Notifications";
|
|
import Params from "~/scenes/Params";
|
|
import Links from "~/scenes/Links";
|
|
import NumberLinks from "~/scenes/NumberLinks";
|
|
import Relatives from "~/scenes/Relatives";
|
|
import Sheets from "~/scenes/Sheets";
|
|
import AlertAggListArchived from "~/scenes/AlertAggListArchived";
|
|
import About from "~/scenes/About";
|
|
import Contribute from "~/scenes/Contribute";
|
|
import Location from "~/scenes/Location";
|
|
import Developer from "~/scenes/Developer";
|
|
import HelpSignal from "~/scenes/HelpSignal";
|
|
|
|
import Text from "~/components/Text";
|
|
// import ColoredDotLevel from "~/components/ColoredDotLevel";
|
|
|
|
// import SendAlertConfirm from "~/scenes/SendAlertConfirm";
|
|
import NullComponent from "~/components/NullComponent";
|
|
|
|
import Expired from "~/scenes/Expired";
|
|
import NotFound from "~/scenes/NotFound";
|
|
import NotFoundOrExpired from "~/scenes/NotFoundOrExpired";
|
|
|
|
import {
|
|
useAlertState,
|
|
navActions,
|
|
useParamsState,
|
|
useNotificationsState,
|
|
} from "~/stores";
|
|
|
|
import { useTheme } from "~/theme";
|
|
import React from "react";
|
|
|
|
import SendAlertConfirm from "~/scenes/SendAlertConfirm";
|
|
import SendAlertFinder from "~/scenes/SendAlertFinder";
|
|
|
|
const Drawer = createDrawerNavigator();
|
|
|
|
export default React.memo(function DrawerNav() {
|
|
// console.debug("Render Drawer", new Date());
|
|
const [drawerState, setDrawerState] = useDrawerState();
|
|
|
|
const { colors, custom } = useTheme();
|
|
|
|
const iconProps = {
|
|
size: 20,
|
|
color: colors.primary,
|
|
};
|
|
|
|
const iconFocusedProps = {
|
|
color: colors.onBackground,
|
|
};
|
|
|
|
const dimensions = useWindowDimensions();
|
|
|
|
const navigation = useNavigation();
|
|
|
|
const { maxAlertingLevel, alertingListLength } = useAlertState([
|
|
"maxAlertingLevel",
|
|
"alertingListLength",
|
|
]);
|
|
const { newCount } = useNotificationsState(["newCount"]);
|
|
const maxAlertingColor = maxAlertingLevel
|
|
? custom.appColors[maxAlertingLevel]
|
|
: null;
|
|
|
|
const { devModeEnabled } = useParamsState(["devModeEnabled"]);
|
|
|
|
return (
|
|
<Drawer.Navigator
|
|
drawerContent={(props) => <DrawerContent {...props} />}
|
|
drawerStyle={{
|
|
width: getDefaultDrawerWidth(dimensions),
|
|
}}
|
|
screenOptions={{
|
|
headerShown: false,
|
|
}}
|
|
screenListeners={{
|
|
state: (e) => {
|
|
navActions.updateRouteFromDrawer(e.data.state);
|
|
},
|
|
}}
|
|
>
|
|
{/* start Main section, names are related to ~/stores/nav */}
|
|
<Drawer.Screen
|
|
name="SendAlert"
|
|
component={Main}
|
|
options={{
|
|
tabScreen: "SendAlertTab",
|
|
tabScreenFocused: drawerState.topTabFocused === "SendAlert",
|
|
drawerLabel: "Lancer une Alerte",
|
|
drawerIcon: ({ focused }) => (
|
|
<Entypo
|
|
name="megaphone"
|
|
{...iconProps}
|
|
{...(focused ? iconFocusedProps : {})}
|
|
/>
|
|
),
|
|
}}
|
|
listeners={{
|
|
focus: () =>
|
|
setDrawerState({
|
|
topTabFocused: "SendAlert",
|
|
homeFocused: true,
|
|
}),
|
|
blur: () =>
|
|
setDrawerState({
|
|
topTabFocused: "",
|
|
homeFocused: false,
|
|
topTabPrev: "SendAlert",
|
|
}),
|
|
}}
|
|
/>
|
|
<Drawer.Screen
|
|
name="AlertAgg"
|
|
component={Main}
|
|
options={{
|
|
tabScreen: "AlertAggTab",
|
|
tabScreenFocused: drawerState.topTabFocused == "AlertAgg",
|
|
drawerLabel: (props) => (
|
|
<View style={{ flexDirection: "row" }}>
|
|
<Text style={{ color: props.color }}>Alertes </Text>
|
|
{maxAlertingLevel && (
|
|
<Text
|
|
style={{
|
|
color: maxAlertingColor,
|
|
fontSize: 11,
|
|
fontWeight: "bold",
|
|
}}
|
|
>
|
|
({alertingListLength})
|
|
</Text>
|
|
)}
|
|
</View>
|
|
),
|
|
drawerIcon: ({ focused }) => (
|
|
<>
|
|
<View style={{ flexDirection: "row" }}>
|
|
<MaterialCommunityIcons
|
|
name="message-bulleted"
|
|
{...iconProps}
|
|
{...(focused ? iconFocusedProps : {})}
|
|
/>
|
|
{/* <ColoredDotLevel level={maxAlertingLevel} /> */}
|
|
</View>
|
|
</>
|
|
),
|
|
unmountOnBlur: true,
|
|
}}
|
|
listeners={{
|
|
beforeRemove: (e) => {
|
|
// Prevent default navigation
|
|
e.preventDefault();
|
|
|
|
setDrawerState({
|
|
topTabFocused: "AlertAgg",
|
|
homeFocused: true,
|
|
});
|
|
|
|
// Handle navigation manually
|
|
navigation.dispatch(
|
|
CommonActions.navigate({
|
|
name: "AlertAgg",
|
|
params: {
|
|
screen: "AlertAggTab",
|
|
params: {
|
|
screen: "AlertAggList",
|
|
},
|
|
},
|
|
}),
|
|
);
|
|
},
|
|
blur: () =>
|
|
setDrawerState({
|
|
topTabFocused: "",
|
|
homeFocused: false,
|
|
topTabPrev: "AlertAgg",
|
|
}),
|
|
}}
|
|
/>
|
|
<Drawer.Screen
|
|
name="AlertCur"
|
|
component={Main}
|
|
options={{
|
|
tabScreen: "AlertCurTab",
|
|
tabScreenFocused: drawerState.topTabFocused == "AlertCur",
|
|
drawerLabel: "Alerte en cours",
|
|
drawerIcon: ({ focused }) => (
|
|
<Entypo
|
|
name="circular-graph"
|
|
{...iconProps}
|
|
{...(focused ? iconFocusedProps : {})}
|
|
/>
|
|
),
|
|
}}
|
|
listeners={{
|
|
focus: () =>
|
|
setDrawerState({
|
|
topTabFocused: "AlertCur",
|
|
homeFocused: true,
|
|
}),
|
|
blur: () =>
|
|
setDrawerState({
|
|
topTabFocused: "",
|
|
homeFocused: false,
|
|
topTabPrev: "AlertCur",
|
|
}),
|
|
}}
|
|
/>
|
|
{/* end Main section */}
|
|
|
|
<Drawer.Screen
|
|
name="CallEmergency"
|
|
// component={SendAlertConfirm}
|
|
// initialParams={{
|
|
// level: "yellow",
|
|
// confirmed: true,
|
|
// forceCallEmergency: true,
|
|
// }}
|
|
component={NullComponent}
|
|
options={{
|
|
drawerLabel: "Appeler les Secours",
|
|
drawerIcon: ({ focused }) => (
|
|
<MaterialCommunityIcons
|
|
// name={focused ? "phone-in-talk" : "phone"}
|
|
name={focused ? "phone-in-talk" : "cellphone"}
|
|
{...iconProps}
|
|
{...(focused ? iconFocusedProps : {})}
|
|
/>
|
|
),
|
|
onItemPress: () => {
|
|
navigation.navigate("SendAlertConfirm", {
|
|
level: "yellow",
|
|
confirmed: true,
|
|
forceCallEmergency: true,
|
|
});
|
|
},
|
|
}}
|
|
listeners={{}}
|
|
/>
|
|
<Drawer.Screen
|
|
name="AlertAggListArchived"
|
|
component={AlertAggListArchived}
|
|
options={{
|
|
drawerLabel: "Alertes archivées",
|
|
drawerIcon: ({ focused }) => (
|
|
<MaterialCommunityIcons
|
|
name="archive"
|
|
{...iconProps}
|
|
{...(focused ? iconFocusedProps : {})}
|
|
/>
|
|
),
|
|
unmountOnBlur: true,
|
|
}}
|
|
listeners={{}}
|
|
/>
|
|
<Drawer.Screen
|
|
name="Profile"
|
|
component={Profile}
|
|
options={{
|
|
drawerLabel: "Mon Profil",
|
|
drawerIcon: ({ focused }) => (
|
|
<MaterialIcons
|
|
name="face"
|
|
{...iconProps}
|
|
{...(focused ? iconFocusedProps : {})}
|
|
/>
|
|
),
|
|
unmountOnBlur: true,
|
|
}}
|
|
listeners={{}}
|
|
/>
|
|
<Drawer.Screen
|
|
name="Notifications"
|
|
component={Notifications}
|
|
options={{
|
|
drawerLabel: (props) => (
|
|
<View style={{ flexDirection: "row" }}>
|
|
<Text style={{ color: props.color }}>Notifications </Text>
|
|
{newCount > 0 && (
|
|
<Text
|
|
style={{
|
|
color: colors.blueLight,
|
|
fontSize: 11,
|
|
fontWeight: "bold",
|
|
}}
|
|
>
|
|
({newCount})
|
|
</Text>
|
|
)}
|
|
</View>
|
|
),
|
|
drawerIcon: ({ focused }) => (
|
|
<MaterialIcons
|
|
name={
|
|
newCount > 0 ? "notifications-active" : "notifications-none"
|
|
}
|
|
{...iconProps}
|
|
{...(focused ? iconFocusedProps : {})}
|
|
/>
|
|
),
|
|
unmountOnBlur: true,
|
|
}}
|
|
listeners={{}}
|
|
/>
|
|
<Drawer.Screen
|
|
name="Relatives"
|
|
component={Relatives}
|
|
options={{
|
|
drawerLabel: "Mes Proches",
|
|
drawerIcon: ({ focused }) => (
|
|
<MaterialIcons
|
|
name="quick-contacts-dialer"
|
|
{...iconProps}
|
|
{...(focused ? iconFocusedProps : {})}
|
|
/>
|
|
),
|
|
unmountOnBlur: true,
|
|
}}
|
|
listeners={{}}
|
|
/>
|
|
<Drawer.Screen
|
|
name="Params"
|
|
component={Params}
|
|
options={{
|
|
drawerLabel: "Paramètres",
|
|
drawerIcon: ({ focused }) => (
|
|
<MaterialCommunityIcons
|
|
name="cog"
|
|
{...iconProps}
|
|
{...(focused ? iconFocusedProps : {})}
|
|
/>
|
|
),
|
|
unmountOnBlur: true,
|
|
}}
|
|
listeners={{}}
|
|
/>
|
|
<Drawer.Screen
|
|
name="Location"
|
|
component={Location}
|
|
options={{
|
|
drawerLabel: "Ma Localisation",
|
|
drawerIcon: ({ focused }) => (
|
|
<MaterialCommunityIcons
|
|
name="map-marker-outline"
|
|
{...iconProps}
|
|
{...(focused ? iconFocusedProps : {})}
|
|
/>
|
|
),
|
|
unmountOnBlur: true,
|
|
}}
|
|
listeners={{}}
|
|
/>
|
|
<Drawer.Screen
|
|
name="Links"
|
|
component={Links}
|
|
options={{
|
|
drawerLabel: "Liens utiles",
|
|
drawerIcon: ({ focused }) => (
|
|
<MaterialCommunityIcons
|
|
name="web"
|
|
{...iconProps}
|
|
{...(focused ? iconFocusedProps : {})}
|
|
/>
|
|
),
|
|
unmountOnBlur: true,
|
|
}}
|
|
listeners={{}}
|
|
/>
|
|
<Drawer.Screen
|
|
name="NumberLinks"
|
|
component={NumberLinks}
|
|
options={{
|
|
drawerLabel: "Numéros utiles",
|
|
drawerIcon: ({ focused }) => (
|
|
<MaterialCommunityIcons
|
|
name="cellphone-information"
|
|
{...iconProps}
|
|
{...(focused ? iconFocusedProps : {})}
|
|
/>
|
|
),
|
|
unmountOnBlur: true,
|
|
}}
|
|
listeners={{}}
|
|
/>
|
|
<Drawer.Screen
|
|
name="HelpSignal"
|
|
component={HelpSignal}
|
|
options={{
|
|
drawerLabel: "Signal d'appel à l'aide",
|
|
drawerIcon: ({ focused }) => (
|
|
<MaterialCommunityIcons
|
|
name="hand-back-left"
|
|
{...iconProps}
|
|
{...(focused ? iconFocusedProps : {})}
|
|
/>
|
|
),
|
|
unmountOnBlur: true,
|
|
}}
|
|
listeners={{}}
|
|
/>
|
|
<Drawer.Screen
|
|
name="Contribute"
|
|
component={Contribute}
|
|
options={{
|
|
drawerLabel: "Faire un don",
|
|
drawerIcon: ({ focused }) => (
|
|
<MaterialCommunityIcons
|
|
name="hand-heart"
|
|
{...iconProps}
|
|
{...(focused ? iconFocusedProps : {})}
|
|
/>
|
|
),
|
|
unmountOnBlur: true,
|
|
}}
|
|
listeners={{}}
|
|
/>
|
|
<Drawer.Screen
|
|
name="Sheets"
|
|
component={Sheets}
|
|
options={{
|
|
drawerLabel: "Fiches d'aides",
|
|
drawerIcon: ({ focused }) => (
|
|
<MaterialCommunityIcons
|
|
// name="file-document-box-multiple"
|
|
name="file-document"
|
|
{...iconProps}
|
|
{...(focused ? iconFocusedProps : {})}
|
|
/>
|
|
),
|
|
unmountOnBlur: true,
|
|
}}
|
|
listeners={{}}
|
|
/>
|
|
<Drawer.Screen
|
|
name="About"
|
|
component={About}
|
|
options={{
|
|
drawerLabel: "À Propos",
|
|
drawerIcon: ({ focused }) => (
|
|
<MaterialCommunityIcons
|
|
name="information"
|
|
{...iconProps}
|
|
{...(focused ? iconFocusedProps : {})}
|
|
/>
|
|
),
|
|
unmountOnBlur: true,
|
|
}}
|
|
listeners={{}}
|
|
/>
|
|
<Drawer.Screen
|
|
name="Expired"
|
|
component={Expired}
|
|
options={{
|
|
hidden: true,
|
|
unmountOnBlur: true,
|
|
}}
|
|
/>
|
|
<Drawer.Screen
|
|
name="NotFound"
|
|
component={NotFound}
|
|
options={{
|
|
hidden: true,
|
|
unmountOnBlur: true,
|
|
}}
|
|
/>
|
|
<Drawer.Screen
|
|
name="NotFoundOrExpired"
|
|
component={NotFoundOrExpired}
|
|
options={{
|
|
hidden: true,
|
|
unmountOnBlur: true,
|
|
}}
|
|
/>
|
|
<Drawer.Screen
|
|
name="SendAlertConfirm"
|
|
options={{
|
|
hidden: true,
|
|
unmountOnBlur: true,
|
|
}}
|
|
component={SendAlertConfirm}
|
|
/>
|
|
<Drawer.Screen
|
|
name="SendAlertFinder"
|
|
options={{
|
|
hidden: true,
|
|
unmountOnBlur: true,
|
|
}}
|
|
component={SendAlertFinder}
|
|
/>
|
|
{devModeEnabled && (
|
|
<Drawer.Screen
|
|
name="Developer"
|
|
component={Developer}
|
|
options={{
|
|
drawerLabel: "Hack me",
|
|
drawerIcon: ({ focused }) => (
|
|
<MaterialCommunityIcons
|
|
name="dev-to"
|
|
{...iconProps}
|
|
{...(focused ? iconFocusedProps : {})}
|
|
/>
|
|
),
|
|
unmountOnBlur: true,
|
|
}}
|
|
listeners={{}}
|
|
/>
|
|
)}
|
|
</Drawer.Navigator>
|
|
);
|
|
});
|