Skip to content

Commit

Permalink
feat: add go back button
Browse files Browse the repository at this point in the history
purrseus committed Jan 5, 2025
1 parent e2befeb commit 18f29f4
Showing 3 changed files with 50 additions and 16 deletions.
18 changes: 15 additions & 3 deletions src/ui/Xenon.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,12 @@
import { enableMapSet } from 'immer';
import { createRef, memo, useImperativeHandle, useRef, type NamedExoticComponent } from 'react';
import {
createRef,
memo,
useImperativeHandle,
useMemo,
useRef,
type NamedExoticComponent,
} from 'react';
import { Animated, StyleSheet, useWindowDimensions } from 'react-native';
import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
import { useImmer } from 'use-immer';
@@ -48,6 +55,11 @@ const XenonComponent = memo<XenonComponentProps>(
selectedPanel: DebuggerPanel.Network,
});

const detailsShown = useMemo(
() => !debuggerState.selectedPanel && !!detailsData.value,
[debuggerState.selectedPanel],
);

const networkInterceptor = useNetworkInterceptor({
autoEnabled: autoInspectNetworkEnabled,
});
@@ -103,10 +115,10 @@ const XenonComponent = memo<XenonComponentProps>(
]}
>
<SafeAreaView style={styles.safeArea}>
<DebuggerHeader />
<DebuggerHeader detailsShown={detailsShown} />
{debuggerState.selectedPanel === DebuggerPanel.Network && <NetworkPanel />}
{debuggerState.selectedPanel === DebuggerPanel.Console && <ConsolePanel />}
{!debuggerState.selectedPanel && !!detailsData.value && <DetailsViewer />}
{detailsShown && <DetailsViewer />}
</SafeAreaView>
</SafeAreaProvider>
);
46 changes: 33 additions & 13 deletions src/ui/components/headers/DebuggerHeader.tsx
Original file line number Diff line number Diff line change
@@ -1,15 +1,23 @@
import { useContext } from 'react';
import { useContext, useRef } from 'react';
import { ScrollView, StyleSheet, View } from 'react-native';
import { MainContext } from '../../../contexts';
import colors from '../../../theme/colors';
import icons from '../../../theme/icons';
import { DebuggerPanel } from '../../../types';
import DebuggerHeaderItem from '../items/DebuggerHeaderItem';
import icons from '../../../theme/icons';
import colors from '../../../theme/colors';

export default function DebuggerHeader() {
interface DebuggerHeaderProps {
detailsShown: boolean;
}

export default function DebuggerHeader({ detailsShown }: DebuggerHeaderProps) {
const { debuggerState, setDebuggerState, networkInterceptor, logInterceptor } =
useContext(MainContext)!;

const lastSelectedPanel = useRef<DebuggerPanel>(
debuggerState.selectedPanel ?? DebuggerPanel.Network,
);

const hideDebugger = () => {
setDebuggerState(draft => {
draft.visibility = 'bubble';
@@ -34,17 +42,29 @@ export default function DebuggerHeader() {
});
};

const switchToNetworkPanel = () => {
const switchTo = (debuggerPanel: DebuggerPanel) => {
setDebuggerState(draft => {
draft.selectedPanel = DebuggerPanel.Network;
draft.selectedPanel = debuggerPanel;
lastSelectedPanel.current = debuggerPanel;
});
};

const switchToConsolePanel = () => {
setDebuggerState(draft => {
draft.selectedPanel = DebuggerPanel.Console;
});
};
if (detailsShown) {
return (
<View style={styles.contentContainer}>
<DebuggerHeaderItem
isLabel
isActive
content="Go Back"
onPress={() => {
setDebuggerState(draft => {
draft.selectedPanel = lastSelectedPanel.current;
});
}}
/>
</View>
);
}

return (
<ScrollView
@@ -61,7 +81,7 @@ export default function DebuggerHeader() {
isLabel
isActive={debuggerState.selectedPanel === DebuggerPanel.Network}
content="Network Panel"
onPress={switchToNetworkPanel}
onPress={() => switchTo(DebuggerPanel.Network)}
/>

<DebuggerHeaderItem
@@ -81,7 +101,7 @@ export default function DebuggerHeader() {
isLabel
isActive={debuggerState.selectedPanel === DebuggerPanel.Console}
content="Log Panel"
onPress={switchToConsolePanel}
onPress={() => switchTo(DebuggerPanel.Console)}
/>

<DebuggerHeaderItem
2 changes: 2 additions & 0 deletions src/ui/components/items/DebuggerHeaderItem.tsx
Original file line number Diff line number Diff line change
@@ -46,6 +46,8 @@ const styles = StyleSheet.create({
backgroundColor: colors.gray,
borderWidth: 1,
borderColor: 'transparent',
justifyContent: 'center',
alignItems: 'center',
},
labelContainer: {
backgroundColor: 'transparent',

0 comments on commit 18f29f4

Please sign in to comment.