From a37282664dcff336e2be45a3bbb0138286cf0c8e Mon Sep 17 00:00:00 2001
From: Bart Akeley <bart.akeley@gmail.com>
Date: Sat, 11 Mar 2017 21:58:47 -0600
Subject: [PATCH] top tabs

---
 js/App.js                |  2 +-
 js/components/TopTabs.js | 53 ++++++++++++++++++++++++++++++++++++++++
 js/pages/DrawerMenu.js   |  6 ++---
 js/pages/Food.js         |  6 ++++-
 js/pages/Places.js       |  3 +++
 js/routes.js             |  7 ++++++
 js/ui-theme.js           | 15 +++++++++++-
 7 files changed, 86 insertions(+), 6 deletions(-)
 create mode 100644 js/components/TopTabs.js

diff --git a/js/App.js b/js/App.js
index f49e99a..ed44e61 100644
--- a/js/App.js
+++ b/js/App.js
@@ -56,7 +56,7 @@ export default class App extends Component {
                                 placeholder: 'Search (todo)',
                             }}
                         />
-                        <route.component />
+                        <route.component route={route} navigator={navigator} />
                     </View>
                 </SideMenu>
             </ThemeProvider>
diff --git a/js/components/TopTabs.js b/js/components/TopTabs.js
new file mode 100644
index 0000000..726bf38
--- /dev/null
+++ b/js/components/TopTabs.js
@@ -0,0 +1,53 @@
+// @flow
+import React, { Component } from 'react';
+import Routes, { Route } from '../routes';
+import { Text, View, TouchableHighlight } from 'react-native';
+import theme from '../ui-theme.js';
+import { COLOR } from 'react-native-material-ui';
+
+type TopTabProps = { title: string, selected: boolean, onPress?: Function };
+const TopTab = ({ title, selected, onPress }: TopTabProps) => {
+    const borderColor = selected ? COLOR.black : 'transparent';
+    return (
+        <TouchableHighlight
+            onPress={onPress}
+            style={{ flex: 2, borderBottomWidth: 2, borderBottomColor: borderColor, alignItems: 'center' }}
+        >
+            <Text
+                style={{
+                    marginVertical: 20,
+                    fontSize: theme.topTabs.tabTitleSize,
+                }}
+            >
+                {title}
+            </Text>
+        </TouchableHighlight>
+    );
+};
+
+export default class TopTabs extends Component {
+    static displayName = 'TopTabs';
+
+    props: {
+        route: Route,
+        navigator: {
+            replace: (route: Route) => void,
+        },
+    };
+
+    render() {
+        const { route, navigator } = this.props;
+        return (
+            <View style={{ ...theme.topTabs.container, flexDirection: 'row' }}>
+                {[Routes.food, Routes.places].map(tabRoute => (
+                    <TopTab
+                        key={tabRoute.title}
+                        title={tabRoute.title.toUpperCase()}
+                        selected={tabRoute === route}
+                        onPress={() => navigator.replace(tabRoute)}
+                    />
+                ))}
+            </View>
+        );
+    }
+}
diff --git a/js/pages/DrawerMenu.js b/js/pages/DrawerMenu.js
index a26318b..e5922b4 100644
--- a/js/pages/DrawerMenu.js
+++ b/js/pages/DrawerMenu.js
@@ -1,14 +1,14 @@
 // @flow
 import React, { Component } from 'react';
 import { Drawer, Avatar } from 'react-native-material-ui';
-import routes from '../routes';
+import routes, { Route } from '../routes';
 
 type Props = {
     navigator: Object,
-    route: Object,
+    route: Route,
 };
 
-export default class DrawerMenu extends Component {
+export default class DrawerMenu extends Component<void, Props, void> {
     static displayName = 'DrawerMenu';
 
     props: Props;
diff --git a/js/pages/Food.js b/js/pages/Food.js
index 2954fca..8dec511 100644
--- a/js/pages/Food.js
+++ b/js/pages/Food.js
@@ -2,9 +2,11 @@
 import React, { Component } from 'react';
 import { Text, View } from 'react-native';
 import theme from '../ui-theme';
+import type { Route } from '../routes';
+import TopTabs from '../components/TopTabs';
 
 type Props = {
-    route: Object,
+    route: Route,
     navigator: Object,
 };
 
@@ -14,8 +16,10 @@ export default class Food extends Component {
     props: Props;
 
     render() {
+        const { route, navigator } = this.props;
         return (
             <View style={theme.page.container}>
+                <TopTabs route={route} navigator={navigator} />
                 <Text>Food!</Text>
             </View>
         );
diff --git a/js/pages/Places.js b/js/pages/Places.js
index a15605a..b386323 100644
--- a/js/pages/Places.js
+++ b/js/pages/Places.js
@@ -2,6 +2,7 @@
 import React, { Component } from 'react';
 import { Text, View } from 'react-native';
 import theme from '../ui-theme';
+import TopTabs from '../components/TopTabs';
 
 type Props = {
     route: Object,
@@ -14,8 +15,10 @@ export default class Places extends Component {
     props: Props;
 
     render() {
+        const { route, navigator } = this.props;
         return (
             <View style={theme.page.container}>
+                <TopTabs route={route} navigator={navigator} />
                 <Text>Places!</Text>
             </View>
         );
diff --git a/js/routes.js b/js/routes.js
index 1218f62..b14f41f 100644
--- a/js/routes.js
+++ b/js/routes.js
@@ -1,4 +1,5 @@
 // @flow
+import React from 'react';
 import { PropTypes } from 'react';
 import Food from './pages/Food';
 import Places from './pages/Places';
@@ -10,6 +11,12 @@ const {
     string,
 } = PropTypes;
 
+export type Route = {
+    title: string,
+    component: React.Component<any, any, any>,
+    icon: string,
+};
+
 export default {
     food: {
         title: 'Food',
diff --git a/js/ui-theme.js b/js/ui-theme.js
index d5e327f..fb49ac3 100644
--- a/js/ui-theme.js
+++ b/js/ui-theme.js
@@ -15,9 +15,22 @@ export default {
         titleText: { color: COLOR.grey800 },
         leftElement: { color: COLOR.grey800 },
         rightElement: { color: COLOR.grey800 },
-        container: { backgroundColor: COLOR.grey200, height: 50 },
+        container: {
+            backgroundColor: COLOR.grey200,
+            height: 50,
+            elevation: 0,
+        },
     },
     page: {
         container: { flex: 1, backgroundColor: COLOR.white },
     },
+    topTabs: {
+        selectedTabColor: COLOR.black,
+        tabTitleSize: 16,
+        container: {
+            backgroundColor: COLOR.grey200,
+            height: 50,
+            elevation: 5,
+        },
+    },
 };