Add indicator for being in debug mode

This commit is contained in:
Brandon Presley 2024-02-15 14:10:40 +13:00
parent a9acc6f216
commit 183d609bea
1 changed files with 82 additions and 55 deletions

View File

@ -1,6 +1,6 @@
import { createDrawerNavigator } from "@react-navigation/drawer"; import { createDrawerNavigator } from "@react-navigation/drawer";
import { StackScreenProps } from "@react-navigation/stack"; import { StackScreenProps } from "@react-navigation/stack";
import { IconButton, useTheme } from "react-native-paper"; import { IconButton, useTheme, Banner } from "react-native-paper";
import { DrawerParams } from "./drawer-params"; import { DrawerParams } from "./drawer-params";
import ExerciseList from "./ExerciseList"; import ExerciseList from "./ExerciseList";
import GraphsList from "./GraphsList"; import GraphsList from "./GraphsList";
@ -10,6 +10,7 @@ import SetList from "./SetList";
import SettingsPage from "./SettingsPage"; import SettingsPage from "./SettingsPage";
import TimerPage from "./TimerPage"; import TimerPage from "./TimerPage";
import WeightList from "./WeightList"; import WeightList from "./WeightList";
import { StyleSheet, Text, View } from "react-native";
const Drawer = createDrawerNavigator<DrawerParams>(); const Drawer = createDrawerNavigator<DrawerParams>();
@ -23,60 +24,86 @@ export default function AppDrawer({
const { dark } = useTheme(); const { dark } = useTheme();
return ( return (
<Drawer.Navigator <>
screenOptions={{ {__DEV__ && (
headerTintColor: dark ? "white" : "black", <View style={styles.debugBanner}>
swipeEdgeWidth: 1000, <Text style={styles.debugText}>DEBUG</Text>
headerShown: false, </View>
}} )}
initialRouteName={ <Drawer.Navigator
(route.params.startup as keyof DrawerParams) || "History" screenOptions={{
} headerTintColor: dark ? "white" : "black",
> swipeEdgeWidth: 1000,
<Drawer.Screen headerShown: false,
name="History"
component={SetList}
options={{ drawerIcon: () => <IconButton icon="history" /> }}
/>
<Drawer.Screen
name="Exercises"
component={ExerciseList}
options={{ drawerIcon: () => <IconButton icon="dumbbell" /> }}
/>
<Drawer.Screen
name="Plans"
component={PlanList}
options={{ drawerIcon: () => <IconButton icon="calendar-outline" /> }}
/>
<Drawer.Screen
name="Graphs"
component={GraphsList}
options={{
drawerIcon: () => <IconButton icon="chart-bell-curve-cumulative" />,
}} }}
/> initialRouteName={
<Drawer.Screen (route.params.startup as keyof DrawerParams) || "History"
name="Timer" }
component={TimerPage} >
options={{ drawerIcon: () => <IconButton icon="timer-outline" /> }} <Drawer.Screen
/> name="History"
<Drawer.Screen component={SetList}
name="Weight" options={{ drawerIcon: () => <IconButton icon="history" /> }}
component={WeightList} />
options={{ drawerIcon: () => <IconButton icon="scale-bathroom" /> }} <Drawer.Screen
/> name="Exercises"
<Drawer.Screen component={ExerciseList}
name="Insights" options={{ drawerIcon: () => <IconButton icon="dumbbell" /> }}
component={InsightsPage} />
options={{ <Drawer.Screen
drawerIcon: () => <IconButton icon="lightbulb-on-outline" />, name="Plans"
}} component={PlanList}
/> options={{ drawerIcon: () => <IconButton icon="calendar-outline" /> }}
<Drawer.Screen />
name="Settings" <Drawer.Screen
component={SettingsPage} name="Graphs"
options={{ drawerIcon: () => <IconButton icon="cog-outline" /> }} component={GraphsList}
/> options={{
</Drawer.Navigator> drawerIcon: () => <IconButton icon="chart-bell-curve-cumulative" />,
}}
/>
<Drawer.Screen
name="Timer"
component={TimerPage}
options={{ drawerIcon: () => <IconButton icon="timer-outline" /> }}
/>
<Drawer.Screen
name="Weight"
component={WeightList}
options={{ drawerIcon: () => <IconButton icon="scale-bathroom" /> }}
/>
<Drawer.Screen
name="Insights"
component={InsightsPage}
options={{
drawerIcon: () => <IconButton icon="lightbulb-on-outline" />,
}}
/>
<Drawer.Screen
name="Settings"
component={SettingsPage}
options={{ drawerIcon: () => <IconButton icon="cog-outline" /> }}
/>
</Drawer.Navigator>
</>
); );
} }
const styles = StyleSheet.create({
container: {
flex: 1,
},
debugBanner: {
position: 'absolute',
top: 0,
right: 0,
transform: [{ rotate: '45deg' }],
backgroundColor: 'red',
zIndex: 1000,
},
debugText: {
color: 'white',
padding: 5,
fontSize: 10,
},
});