fix: add support for custom start/end and breaking points + improve e…

…xample
web-ridge · Jul 16, 2021 · 2664e70 · 2664e70
1 parent ee53b03
commit 2664e70
Show file tree

Hide file tree

Showing 12 changed files with 222 additions and 155 deletions.
diff --git a/example/src/Account/AccountScreen.tsx b/example/src/Account/AccountScreen.tsx
@@ -1,76 +1,90 @@
 import * as React from 'react';
-import { Appbar, Button, Text } from 'react-native-paper';
+import { Button, Paragraph, Text } from 'react-native-paper';
 import authState, { reset } from '../Auth/AuthState';
 
 import { createSimpleTheme, setTheme, updateBadge } from '../../../src';
-import { ScrollView } from 'react-native';
+import { View, ScrollView } from 'react-native';
 import { BottomRoots } from '../Navigator';
+import Header from '../Header';
 
 export default function AccountScreen() {
   const [{ user }] = authState.use();
 
+  if (!user) {
+    return <Text>No user logged in</Text>;
+  }
   return (
     <>
-      <Appbar.Header>
-        <Appbar.Content title="Account" />
-      </Appbar.Header>
-      <ScrollView style={{ padding: 24 }}>
-        <Button
-          onPress={() => {
-            updateBadge(BottomRoots.Posts, '10');
-          }}
-        >
-          +1 post
-        </Button>
-        <Text>{user?.username}</Text>
-        <Button
-          onPress={() => {
-            setTheme(
-              createSimpleTheme({
-                light: {
-                  primary: '#2003fc',
-                  accent: '#2003fc',
-                  text: '#000',
-                },
-                dark: {
-                  primary: '#52a6fa',
-                  accent: '#52a6fa',
-                  text: '#fff',
-                },
-              })
-            );
-          }}
-        >
-          Blue theme
-        </Button>
-        <Button
-          onPress={() => {
-            setTheme(
-              createSimpleTheme({
-                light: {
-                  primary: '#fc0303',
-                  accent: '#fc0303',
-                  text: '#000',
-                },
-                dark: {
-                  primary: '#ff9191',
-                  accent: '#ff9191',
-                  text: '#fff',
-                },
-              })
-            );
-          }}
-        >
-          Red theme
-        </Button>
-        <Button
-          mode="contained"
-          onPress={() => {
-            reset();
-          }}
-        >
-          Logout
-        </Button>
+      <Header title={user?.name} />
+      <ScrollView style={{ padding: 12, paddingTop: 0 }}>
+        <View style={{ alignItems: 'flex-start' }}>
+          <Paragraph>{user.email}</Paragraph>
+          <Paragraph>{user.website}</Paragraph>
+          <Paragraph>{user.phone}</Paragraph>
+          <Button
+            style={{ marginTop: 12 }}
+            mode="outlined"
+            onPress={() => {
+              updateBadge(BottomRoots.Posts, '10');
+            }}
+          >
+            +1 bottom-tab post badge
+          </Button>
+
+          <Button
+            style={{ marginTop: 12 }}
+            mode="outlined"
+            onPress={() => {
+              setTheme(
+                createSimpleTheme({
+                  light: {
+                    primary: '#2003fc',
+                    accent: '#2003fc',
+                    text: '#000',
+                  },
+                  dark: {
+                    primary: '#52a6fa',
+                    accent: '#52a6fa',
+                    text: '#fff',
+                  },
+                })
+              );
+            }}
+          >
+            Blue (only navigation) theme
+          </Button>
+          <Button
+            style={{ marginTop: 12 }}
+            mode="outlined"
+            onPress={() => {
+              setTheme(
+                createSimpleTheme({
+                  light: {
+                    primary: '#fc0303',
+                    accent: '#fc0303',
+                    text: '#000',
+                  },
+                  dark: {
+                    primary: '#ff9191',
+                    accent: '#ff9191',
+                    text: '#fff',
+                  },
+                })
+              );
+            }}
+          >
+            Red (only navigation) theme
+          </Button>
+          <Button
+            style={{ marginTop: 12 }}
+            mode="contained"
+            onPress={() => {
+              reset();
+            }}
+          >
+            Logout
+          </Button>
+        </View>
       </ScrollView>
     </>
   );

diff --git a/example/src/Header.tsx b/example/src/Header.tsx
@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { Appbar } from 'react-native-paper';
+
+import { BackLink } from '../../src';
+import { useColorScheme } from 'react-native';
+
+function Header({ title, withBack }: { title: string; withBack?: boolean }) {
+  const colorScheme = useColorScheme();
+  const isDark = colorScheme === 'dark';
+  return (
+    <Appbar.Header
+      dark={isDark}
+      style={{ backgroundColor: 'transparent', elevation: 0 }}
+    >
+      {withBack ? (
+        <BackLink>
+          {(linkProps) => (
+            <Appbar.BackAction
+              {...linkProps}
+              color={isDark ? '#fff' : '#000'}
+            />
+          )}
+        </BackLink>
+      ) : null}
+      <Appbar.Content title={title} />
+    </Appbar.Header>
+  );
+}
+export default React.memo(Header);
diff --git a/example/src/Navigator.ts b/example/src/Navigator.ts
@@ -40,10 +40,15 @@ const Navigator = createNavigation(
   defaultTheme,
   createScreens(routes),
   {
-    [NavigationRoots.RootHome]: createBottomTabsRoot([
-      BottomRoots.Posts,
-      BottomRoots.Account,
-    ]),
+    [NavigationRoots.RootHome]: createBottomTabsRoot(
+      [BottomRoots.Posts, BottomRoots.Account],
+      {
+        breakingPointWidth: 500,
+        components: {
+          // start:
+        },
+      }
+    ),
     [NavigationRoots.RootAuth]: createNormalRoot(routes.AuthScreen),
   },
   AppHOC

diff --git a/example/src/NavigatorRoutes.ts b/example/src/NavigatorRoutes.ts
@@ -15,7 +15,11 @@ import {
 } from './Post/PostScreen';
 
 const AuthScreen = registerScreen('/auth', AuthScreenLazy, () => {});
-const AccountScreen = registerScreen('/account', AccountScreenLazy, () => {});
+const AccountScreen = registerScreen(
+  '/account',
+  RequireAuthHOC(AccountScreenLazy),
+  () => {}
+);
 
 const PostsScreen = registerScreen(
   '/posts',

diff --git a/example/src/Post/PostScreen.tsx b/example/src/Post/PostScreen.tsx
@@ -1,11 +1,12 @@
 import * as React from 'react';
-import { Appbar, Paragraph, Title } from 'react-native-paper';
+import { Paragraph } from 'react-native-paper';
 
-import { BackLink, useParams } from '../../../src';
+import { useParams } from '../../../src';
 import api from '../api';
 import { useQuery } from 'react-query';
 import routes from '../NavigatorRoutes';
 import { ScrollView } from 'react-native';
+import Header from '../Header';
 
 export interface PostType {
   userId: number;
@@ -32,14 +33,8 @@ export default function PostScreen(props: any) {
 
   return (
     <>
-      <Appbar.Header>
-        <BackLink>
-          {(linkProps) => <Appbar.BackAction {...linkProps} color={'pink'} />}
-        </BackLink>
-        <Appbar.Content title={data!.title} />
-      </Appbar.Header>
-      <ScrollView style={{ padding: 24 }}>
-        <Title>{data!.title}</Title>
+      <Header title={data!.title} withBack />
+      <ScrollView style={{ padding: 12 }}>
         <Paragraph>{data!.body}</Paragraph>
       </ScrollView>
     </>

diff --git a/example/src/Post/PostsScreen.tsx b/example/src/Post/PostsScreen.tsx
@@ -1,12 +1,13 @@
 import * as React from 'react';
-import { Appbar, List } from 'react-native-paper';
+import { List } from 'react-native-paper';
 
 import { Link } from '../../../src';
 import routes from '../NavigatorRoutes';
 import RidgeList from 'react-native-ridge-list';
 import { useQuery } from 'react-query';
 import api from '../api';
 import type { PostType } from './PostScreen';
+import Header from '../Header';
 
 const ITEM_HEIGHT = 65;
 
@@ -27,9 +28,7 @@ export default function PostsScreen() {
 
   return (
     <>
-      <Appbar.Header>
-        <Appbar.Content title="Posts" />
-      </Appbar.Header>
+      <Header title="Posts" />
       <RidgeList
         style={{ flex: 1 }}
         data={data}

diff --git a/example/src/helpers/LimitedView.web.tsx b/example/src/helpers/LimitedView.web.tsx
@@ -30,7 +30,7 @@ export default function LimitedView({ children }: { children: any }) {
 const styles = StyleSheet.create({
   root: {
     flex: 1,
-    backgroundColor: '#f2efe9',
+    backgroundColor: '#EDEDED',
     justifyContent: 'center',
     alignItems: 'center',
     padding: 16,
@@ -48,7 +48,7 @@ const styles = StyleSheet.create({
     backgroundColor: '#fff',
     borderRadius: 5,
     overflow: 'hidden',
-    shadowColor: '#8c5e00',
+    shadowColor: '#525252',
     shadowOffset: {
       width: 0,
       height: 6,

diff --git a/example/src/index.css b/example/src/index.css
@@ -8,7 +8,9 @@ html {
   width: 100%;
   flex-direction: column;
   flex: 1;
-  font-family: 'Montserrat', sans-serif;
+  font-family:
+    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
+
 }
 @media (prefers-color-scheme: dark) {
   body,html{

diff --git a/src/BottomTab.tsx b/src/BottomTab.tsx
@@ -9,7 +9,11 @@ import {
   Platform,
 } from 'react-native';
 import Link from './Link';
-import type { BottomTabType, ThemeSettings } from './navigationUtils';
+import type {
+  BottomTabType,
+  Orientation,
+  ThemeSettings,
+} from './navigationUtils';
 import { bottomTabRenderIndex } from './Navigation';
 import BottomTabBadge from './BottomTabBadge';
 
@@ -18,10 +22,10 @@ function BottomTab({
   bottomTab: { path, child, selectedIcon, icon, title },
   colorScheme,
   count,
-  isBigScreen,
+  orientation,
   theme,
 }: {
-  isBigScreen: boolean;
+  orientation: Orientation;
   isSelected: boolean;
   bottomTab: BottomTabType;
   colorScheme: 'light' | 'dark';
@@ -30,7 +34,6 @@ function BottomTab({
 }) {
   bottomTabRenderIndex.use();
 
-  console.log({ colorScheme });
   return (
     <Link key={path} to={child} params={{}}>
       {(linkProps) => (
@@ -71,7 +74,8 @@ function BottomTab({
             <Image
               source={isSelected ? selectedIcon.default : icon.default}
               style={[
-                isBigScreen ? styles.iconBig : styles.icon,
+                orientation === 'horizontal' && styles.horizontalIcon,
+                orientation === 'vertical' && styles.verticalIcon,
                 {
                   tintColor: isSelected
                     ? (theme[colorScheme].bottomBar
@@ -135,12 +139,12 @@ const styles = StyleSheet.create({
     top: 12,
     right: 3,
   },
-  icon: {
+  verticalIcon: {
     width: 20,
     height: 20,
     margin: 6,
   },
-  iconBig: {
+  horizontalIcon: {
     width: 24,
     height: 24,
     margin: 10,