Merge pull request #274 from zallo-labs/Z-328-panes-nav

feat(app): Panes navigator

Author: hbriese

app/src/app/(nav)/[account]/(home)/_layout.tsx

@@ -1,14 +1,9 @@
-import { Panes } from '#/layout/Panes';
-import { Slot } from 'expo-router';
-import { HomePane } from './index';
+import { createPanesNavigator } from '#/layout/PanesNavigator';
+
+const Panes = createPanesNavigator();
 
 export default function HomeLayout() {
-  return (
-    <Panes>
-      <HomePane />
-      <Slot />
-    </Panes>
-  );
+  return <Panes />;
 }
 
 export { ErrorBoundary } from '#/ErrorBoundary';

app/src/app/(nav)/[account]/(home)/activity/_layout.tsx

@@ -60,7 +60,7 @@ const Query = graphql`
   }
 `;
 
-function ActivityPane_() {
+function ActivityPane() {
   const { styles } = useStyles(stylesheet);
   const { account } = useLocalParams(AccountParams);
 
@@ -210,10 +210,6 @@ function withFirstAndLast<T>(items: T[]) {
   }));
 }
 
-export const ActivityPane = withSuspense(ActivityPane_, <PaneSkeleton />);
-
-export default function ActivityScreen() {
-  return null;
-}
+export default withSuspense(ActivityPane, <PaneSkeleton />);
 
 export { ErrorBoundary } from '#/ErrorBoundary';

app/src/app/(nav)/[account]/(home)/activity/index.tsx

@@ -18,6 +18,7 @@ import { graphql } from 'relay-runtime';
 import { HomePaneQuery } from '~/api/__generated__/HomePaneQuery.graphql';
 import { useLazyQuery } from '~/api/useLazyQuery';
 import { Pane } from '#/layout/Pane';
+import { PaneOptions } from '#/Appbar/PaneOptions';
 
 const Query = graphql`
   query HomePaneQuery($account: UAddress!, $chain: Chain!) {
@@ -45,7 +46,7 @@ const Query = graphql`
   }
 `;
 
-function HomePane_() {
+function HomePane() {
   const { styles } = useStyles(stylesheet);
   const address = useLocalParams(AccountParams).account;
   const chain = asChain(address);
@@ -122,10 +123,6 @@ const stylesheet = createStyles(({ colors, padding }) => ({
   },
 }));
 
-export const HomePane = withSuspense(HomePane_, <PaneSkeleton />);
-
-export default function HomeScreen() {
-  return null;
-}
+export default withSuspense(HomePane, <PaneSkeleton />);
 
 export { ErrorBoundary } from '#/ErrorBoundary/ErrorBoundary';

app/src/app/(nav)/[account]/(home)/index.tsx

@@ -1,13 +1,7 @@
-import { Panes } from '#/layout/Panes';
-import { Slot } from 'expo-router';
-import _ from 'lodash';
-import { AccountSettingsPane } from './index';
+import { createPanesNavigator } from '#/layout/PanesNavigator';
+
+const Panes = createPanesNavigator();
 
 export default function AccountSettingsLayout() {
-  return (
-    <Panes>
-      <AccountSettingsPane />
-      <Slot />
-    </Panes>
-  );
+  return <Panes />;
 }

app/src/app/(nav)/[account]/settings/_layout.tsx

@@ -60,7 +60,7 @@ const Query = graphql`
 
 export const AccountSettingsParams = AccountParams;
 
-function AccountSettingsPane_() {
+function AccountSettings() {
   const { styles } = useStyles(stylesheet);
   const { account } = useLocalParams(AccountSettingsParams);
   const router = useRouter();
@@ -78,8 +78,9 @@ function AccountSettingsPane_() {
     .sort((a, b) => a.key - b.key);
   const upgradePolicy = a.policies.find((p) => p.key === PolicyPresetKey.upgrade);
 
+  // TODO: Pane fixed
   return (
-    <Pane fixed>
+    <Pane flex>
       <ScrollView contentContainerStyle={styles.pane} showsVerticalScrollIndicator={false}>
         <Searchbar
           leading={MenuOrSearchIcon}
@@ -208,8 +209,4 @@ const stylesheet = createStyles(({ colors }) => ({
   },
 }));
 
-export const AccountSettingsPane = withSuspense(AccountSettingsPane_, <PaneSkeleton />);
-
-export default function AccountSettings() {
-  return null;
-}
+export default withSuspense(AccountSettings, <PaneSkeleton />);

app/src/app/(nav)/[account]/settings/index.tsx

@@ -99,6 +99,7 @@ function ContactScreen_(props: ContactScreenProps) {
       <Appbar
         mode="small"
         headline="Contact"
+        noPadding
         {...(remove && {
           trailing: [
             (props) => <FormResetIcon control={control} reset={reset} {...props} />,

app/src/app/(nav)/contacts/[address].tsx

@@ -1,16 +1,7 @@
-import { Panes } from '#/layout/Panes';
-import { Slot } from 'expo-router';
-import { ContactsPane } from './index';
-import { Pane } from '#/layout/Pane';
+import { createPanesNavigator } from '#/layout/PanesNavigator';
 
-export default function ContactsLayout() {
-  return (
-    <Panes>
-      <Pane fixed>
-        <ContactsPane />
-      </Pane>
+const Panes = createPanesNavigator();
 
-      <Slot />
-    </Panes>
-  );
+export default function ContactsLayout() {
+  return <Panes />;
 }

app/src/app/(nav)/contacts/_layout.tsx

@@ -18,6 +18,7 @@ import { MenuOrSearchIcon } from '#/Appbar/MenuOrSearchIcon';
 import { graphql } from 'relay-runtime';
 import { useLazyQuery } from '~/api';
 import { contacts_ContactsPaneQuery } from '~/api/__generated__/contacts_ContactsPaneQuery.graphql';
+import { Pane } from '#/layout/Pane';
 
 const Query = graphql`
   query contacts_ContactsPaneQuery($query: String) {
@@ -29,7 +30,7 @@ const Query = graphql`
   }
 `;
 
-function ContactsPane_() {
+function ContactsPane() {
   const { styles } = useStyles(stylesheet);
   const router = useRouter();
   const contactSelected = usePath().includes('/(nav)/contacts/[address]');
@@ -43,7 +44,7 @@ function ContactsPane_() {
   });
 
   return (
-    <>
+    <Pane flex>
       <Searchbar
         leading={MenuOrSearchIcon}
         placeholder="Search contacts"
@@ -92,7 +93,7 @@ function ContactsPane_() {
       )}
 
       <Fab icon={AddIcon} label="Add contact" onPress={async () => router.push(`/contacts/add`)} />
-    </>
+    </Pane>
   );
 }
 
@@ -117,10 +118,6 @@ const stylesheet = createStyles(({ colors }) => ({
   },
 }));
 
-export const ContactsPane = withSuspense(ContactsPane_, <PaneSkeleton />);
-
-export default function ContactsScreen() {
-  return null;
-}
+export default withSuspense(ContactsPane, <PaneSkeleton />);
 
 export { ErrorBoundary } from '#/ErrorBoundary';

app/src/app/(nav)/contacts/index.tsx

@@ -0,0 +1,16 @@
+import { PaneProps } from '#/layout/Pane';
+import { PanesNavigationOptions } from '#/layout/PanesNavigator';
+import { useNavigation } from 'expo-router';
+import { useLayoutEffect } from 'react';
+
+export type PaneOptionsProps = PaneProps;
+
+export function PaneOptions(options: PaneOptionsProps) {
+  const navigation = useNavigation();
+
+  useLayoutEffect(() => {
+    navigation.setOptions({ pane: options } satisfies Partial<PanesNavigationOptions>);
+  }, [navigation, options]);
+
+  return null;
+}

app/src/components/Appbar/PaneOptions.tsx

@@ -1,42 +1,36 @@
 import { createStyles, useStyles } from '@theme/styles';
 import { useAtomValue, useSetAtom } from 'jotai';
 import { useLayoutEffect, useRef } from 'react';
-import { ViewProps } from 'react-native';
+import { View, ViewProps } from 'react-native';
 import { PANES_MOUNTED } from './Panes';
-import { BREAKPOINTS } from '@theme/styles';
-import Animated, { FadeIn } from 'react-native-reanimated';
-
-const MAX_PANES: Record<keyof typeof BREAKPOINTS, number> = {
-  compact: 1,
-  medium: 1,
-  expanded: 2,
-  large: 2,
-  extraLarge: 3,
-  // Injected by unistyles; never actually used
-  landscape: 1,
-  portrait: 1,
-};
+import { useNavigationState, useRoute } from '@react-navigation/native';
 
 export type PaneProps = ViewProps & {
   padding?: boolean;
 } & ({ fixed: true; flex?: never } | { fixed?: never; flex: true });
 
 export function Pane({ padding = true, flex, fixed: _, ...props }: PaneProps) {
-  const { styles, breakpoint } = useStyles(stylesheet);
-  const order = usePaneMounted();
-  const maxPanes = MAX_PANES[breakpoint];
-  const count = useAtomValue(PANES_MOUNTED);
+  const { styles } = useStyles(stylesheet);
+  // const order = usePaneMounted();
+  // const maxPanes = MAX_PANES[breakpoint];
+  // const count = useAtomValue(PANES_MOUNTED);
+
+  // const withinWindow = (order.current ?? 0) < count - maxPanes;
+  // const hidden = count > maxPanes && withinWindow;
+  // if (count > maxPanes && withinWindow)
+  //   return <View style={{ width: 20, backgroundColor: 'red' }} />;
+
+  const route = useRoute();
+  const isSelected = useNavigationState((state) => state.routes[state.index].key === route.key);
 
-  const withinWindow = (order.current ?? 0) < count - maxPanes;
-  if (count > maxPanes && withinWindow) return null;
+  console.warn(route.name, { isSelected });
 
   // Flex a fixed pane when it is the only one visible
-  const fixed = !flex && count !== 1;
+  const fixed = !flex && !isSelected;
 
   return (
-    <Animated.View
+    <View
       {...props}
-      entering={FadeIn.duration(200)}
       // exiting depends on how the pane was removed
       style={[styles.flex, fixed && styles.fixed, padding && styles.margins, props.style]}
     />
@@ -68,11 +62,9 @@ function usePaneMounted() {
   useLayoutEffect(() => {
     if (order.current === null) order.current = count;
 
-    setCount((count) => {
-      return count + 1;
-    });
+    setCount((count) => count + 1);
 
-    return () => setCount((c) => c - 1);
+    return () => setCount((count) => count - 1);
   }, [count, setCount]);
 
   return order;

app/src/components/layout/Pane.tsx

@@ -0,0 +1,101 @@
+// PaneNavigator.tsx
+import {
+  createNavigatorFactory,
+  DefaultNavigatorOptions,
+  ParamListBase,
+  TabNavigationState,
+  useNavigationBuilder,
+  StackRouter,
+} from '@react-navigation/native';
+import { Screen } from '@react-navigation/elements';
+import { Panes } from './Panes';
+import { PaneProps } from './Pane';
+import { withLayoutContext } from 'expo-router';
+import { BREAKPOINTS, createStyles, useStyles } from '@theme/styles';
+
+const MAX_PANES: Record<keyof typeof BREAKPOINTS, number> = {
+  compact: 1,
+  medium: 1,
+  expanded: 2,
+  large: 2,
+  extraLarge: 3,
+  // Injected by unistyles; never actually used
+  landscape: 1,
+  portrait: 1,
+};
+
+// eslint-disable-next-line @typescript-eslint/ban-types
+export type PanesNavigationEventMap = {};
+
+export interface PanesNavigationOptions {
+  pane?: PaneProps;
+  maxPanes?: number;
+}
+
+export type PanesNavigatorProps = DefaultNavigatorOptions<
+  ParamListBase,
+  TabNavigationState<ParamListBase>,
+  PanesNavigationOptions,
+  PanesNavigationEventMap
+>;
+
+function PanesNavigator({ initialRouteName, screenOptions, children }: PanesNavigatorProps) {
+  const { state, descriptors, navigation, NavigationContent } = useNavigationBuilder(StackRouter, {
+    children,
+    screenOptions,
+    initialRouteName,
+  });
+  const { breakpoint } = useStyles();
+
+  const maxPanes = MAX_PANES[breakpoint];
+  const routes = state.routes
+    .map((route) => ({
+      ...route,
+      position: state.routeNames.indexOf(route.name),
+    }))
+    .sort((a, b) => a.position - b.position);
+
+  return (
+    <NavigationContent>
+      <Panes>
+        {routes.map((route, i) => {
+          const { navigation, render, options } = descriptors[route.key];
+
+          const focussed = state.index === i;
+          const shown = routes.length - maxPanes <= i;
+
+          return (
+            <Screen
+              key={route.key}
+              focused={focussed}
+              route={route}
+              navigation={navigation}
+              header={null}
+              headerShown={false}
+              style={shown ? styles.visible : styles.hidden}
+            >
+              {render()}
+            </Screen>
+          );
+        })}
+      </Panes>
+    </NavigationContent>
+  );
+}
+
+export const createPanesNavigator = () =>
+  withLayoutContext(
+    createNavigatorFactory<
+      TabNavigationState<ParamListBase>,
+      PanesNavigationOptions,
+      PanesNavigationEventMap,
+      typeof PanesNavigator
+    >(PanesNavigator)().Navigator,
+  );
+
+const styles = createStyles({
+  visible: {},
+  hidden: {
+    display: 'none',
+  },
+});