diff --git a/packages/react-navigation-visualizer/package.json b/packages/react-navigation-visualizer/package.json index 19b901e..b4c84e4 100644 --- a/packages/react-navigation-visualizer/package.json +++ b/packages/react-navigation-visualizer/package.json @@ -1,6 +1,6 @@ { "name": "@bam.tech/react-navigation-visualizer-dev-plugin", - "version": "0.1.1", + "version": "0.1.2", "description": "Visualization Tool based on Expo DevTools Plugin for React Navigation", "main": "build/index.js", "types": "build/index.d.ts", diff --git a/packages/react-navigation-visualizer/webui/src/NavigationTree.tsx b/packages/react-navigation-visualizer/webui/src/NavigationTree.tsx index ae80410..bdb2259 100644 --- a/packages/react-navigation-visualizer/webui/src/NavigationTree.tsx +++ b/packages/react-navigation-visualizer/webui/src/NavigationTree.tsx @@ -3,7 +3,7 @@ import { Layout, Typography } from 'antd'; import * as React from 'react'; import { Sidebar } from './Sidebar'; -import type { NavigationRoute, StoreType } from './types'; +import type { NavigationState, StoreType } from './types'; type Props = StoreType; @@ -11,8 +11,11 @@ export function NavigationTree({ logs }: Props) { const currentNavigationItem = logs[logs.length - 1]; const previousNavigationItem = logs[logs.length - 2]; - const hasCurrentItem = !!currentNavigationItem; - const hasPreviousItem = !!previousNavigationItem; + const currentNavigationItemState = currentNavigationItem?.state; + const previousNavigationItemState = previousNavigationItem?.state; + + const hasCurrentItem = !!currentNavigationItem && currentNavigationItemState; + const hasPreviousItem = !!previousNavigationItem && previousNavigationItemState; return ( @@ -21,15 +24,13 @@ export function NavigationTree({ logs }: Props) { Previous state - {hasPreviousItem && ( - - )} + {hasPreviousItem && } Current state - {hasCurrentItem && } + {hasCurrentItem && } @@ -86,14 +87,16 @@ const LeafContainer = styled.div(({ theme: antdTheme }) => ({ padding: 8, })); -const LeafTitle = styled(Typography)({ +const LeafTitle = styled(Typography.Text)({ color: 'white', }); -const Leaf = ({ title }: { title: string }) => { +const Leaf = ({ title, isSelectedTab }: { title: string; isSelectedTab?: boolean }) => { return ( - {title} + + {title} + ); }; @@ -113,7 +116,8 @@ const NodeTitle = styled(Typography)(({ theme }) => ({ alignSelf: 'flex-start', })); -const Node = ({ name, routes }: { name: string; routes: NavigationRoute[] | undefined }) => { +const Node = ({ name, state }: { name: string; state: NavigationState }) => { + const routes = state.routes; if (!routes || !routes.length) { return ; } @@ -122,7 +126,14 @@ const Node = ({ name, routes }: { name: string; routes: NavigationRoute[] | unde {routes.toReversed().map((route, index) => ( - + {route.state?.routes && route.state.routes.length ? ( + + ) : ( + + )} ))} diff --git a/packages/react-navigation-visualizer/webui/src/types.ts b/packages/react-navigation-visualizer/webui/src/types.ts index 02dc5b1..9ad7a42 100644 --- a/packages/react-navigation-visualizer/webui/src/types.ts +++ b/packages/react-navigation-visualizer/webui/src/types.ts @@ -9,6 +9,7 @@ export type NavigationState = { key: string; index: number; routes: NavigationRoute[]; + type: string; }; export type NavigationAction = {