- [Base] - Upgrade Left drawer

ignite-base/App/Components/DrawerButton.js

@@ -0,0 +1,20 @@
+import React, { Component, PropTypes } from 'react'
+import { Text, TouchableOpacity } from 'react-native'
+import styles from './Styles/DrawerButtonStyles'
+
+class DrawerButton extends Component {
+  render () {
+    return (
+      <TouchableOpacity onPress={this.props.onPress}>
+        <Text style={styles.text}>{this.props.text}</Text>
+      </TouchableOpacity>
+    )
+  }
+}
+
+DrawerButton.propTypes = {
+  text: PropTypes.string.isRequired,
+  onPress: PropTypes.func.isRequired
+}
+
+export default DrawerButton

ignite-base/App/Components/DrawerContent.js

@@ -0,0 +1,36 @@
+import React, { PropTypes } from 'react'
+import { ScrollView, Image } from 'react-native'
+import { Images } from '../Themes'
+import DrawerButton from '../Components/DrawerButton'
+import styles from './Styles/DrawerContentStyle'
+import Routes from '../Navigation/Routes'
+
+class DrawerContent extends React.Component {
+  constructor (props) {
+    super(props)
+    this.handlePressComponent = props.onPushRoute.bind(this, Routes.AllComponentsScreen)
+    this.handlePressUsage = props.onPushRoute.bind(this, Routes.UsageExamplesScreen)
+    this.handlePressApi = props.onPushRoute.bind(this, Routes.APITestingScreen)
+    this.handlePressTheme = props.onPushRoute.bind(this, Routes.ThemeScreen)
+    this.handlePressDeviceInfo = props.onPushRoute.bind(this, Routes.DeviceInfoScreen)
+  }
+
+  render () {
+    return (
+      <ScrollView style={styles.container}>
+        <Image source={Images.logo} style={styles.logo} />
+        <DrawerButton text='Component Examples' onPress={this.handlePressComponent} />
+        <DrawerButton text='Usage Examples' onPress={this.handlePressUsage} />
+        <DrawerButton text='API Testing' onPress={this.handlePressApi} />
+        <DrawerButton text='Themes' onPress={this.handlePressTheme} />
+        <DrawerButton text='Device Info' onPress={this.handlePressDeviceInfo} />
+      </ScrollView>
+    )
+  }
+}
+
+DrawerContent.propTypes = {
+  onPushRoute: PropTypes.func.isRequired
+}
+
+export default DrawerContent

ignite-base/App/Components/Styles/DrawerButtonStyles.js

@@ -0,0 +1,9 @@
+import { Metrics, Colors, Fonts } from '../../Themes'
+
+export default {
+  text: {
+    ...Fonts.style.h5,
+    color: Colors.snow,
+    marginVertical: Metrics.baseMargin
+  }
+}

ignite-base/App/Components/Styles/DrawerContentStyle.js

@@ -0,0 +1,9 @@
+export default {
+  container: {
+    flex: 1,
+    padding: 20
+  },
+  logo: {
+    alignSelf: 'center'
+  }
+}

ignite-base/App/Containers/Styles/DeviceInfoScreenStyle.js

@@ -20,7 +20,6 @@ export default StyleSheet.create({
       height: 7,
       width: 7
     },
-    shadowOpacity: 0.25,
     shadowRadius: 2,
     paddingBottom: Metrics.baseMargin,
     margin: Metrics.baseMargin

ignite-base/App/Containers/Styles/RootStyle.js

@@ -3,7 +3,9 @@ import {Fonts, Metrics, Colors} from '../../Themes/'
 
 // For some reason this doesn't want to be a stylesheet
 export const drawerStyles = {
-  drawer: {shadowColor: '#000000', shadowOpacity: 0.8, shadowRadius: 3, backgroundColor: Colors.background}
+  drawer: {
+    backgroundColor: Colors.drawer
+  }
 }
 
 const RootStyle = StyleSheet.create({
@@ -15,11 +17,6 @@ const RootStyle = StyleSheet.create({
     justifyContent: 'center',
     backgroundColor: Colors.background
   },
-  drawer: {
-    shadowColor: '#000000',
-    shadowOpacity: 0.8,
-    shadowRadius: 3
-  },
   welcome: {
     fontSize: 20,
     textAlign: 'center',

ignite-base/App/Root.js

@@ -1,11 +1,12 @@
 import React from 'react'
-import { View, Text, Navigator, StatusBar } from 'react-native'
+import { View, Navigator, StatusBar } from 'react-native'
 import {Router, Routes, NavigationBar} from './Navigation/'
 import configureStore from './Store/Store'
 import { Provider } from 'react-redux'
 import Actions from './Actions/Creators'
 import Drawer from 'react-native-drawer'
 import DebugSettings from './Config/DebugSettings'
+import DrawerContent from './Components/DrawerContent'
 import './Config/PushConfig'
 
 // Styles
@@ -14,26 +15,37 @@ import styles, {drawerStyles} from './Containers/Styles/RootStyle'
 const store = configureStore()
 
 export default class RNBase extends React.Component {
+  constructor (props) {
+    super(props)
+    this.handlePushRoute = this.handlePushRoute.bind(this)
+    this.closeDrawer = this.closeDrawer.bind(this)
+  }
 
   componentWillMount () {
     const { dispatch } = store
     dispatch(Actions.startup())
   }
 
   componentDidMount () {
-    this.navigator.drawer = this.drawer
+    this.refs.drawerContent.navigator = this.navigator
+    this.navigator.drawer = this.refs.drawer
+  }
+
+  handlePushRoute (route) {
+    this.navigator.push(route)
+    this.closeDrawer()
   }
 
   renderDrawerContent () {
     return (
-      <View style={{marginTop: 30, padding: 10}}>
-        <Text style={{color: 'white'}}>
-          Drawer Content Goes Here!
-        </Text>
-      </View>
+      <DrawerContent ref='drawerContent' onPushRoute={this.handlePushRoute} onClose={this.closeDrawer} />
     )
   }
 
+  closeDrawer () {
+    this.refs.drawer.close()
+  }
+
   renderApp () {
     console.disableYellowBox = !DebugSettings.yellowBox
     return (
@@ -44,12 +56,14 @@ export default class RNBase extends React.Component {
           />
 
           <Drawer
-            ref={(ref) => { this.drawer = ref }}
+            ref='drawer'
             content={this.renderDrawerContent()}
             styles={drawerStyles}
             openDrawerOffset={100}
-            type='static'
+            type='overlay'
             tapToClose
+            panOpenMask={0.05}
+            panCloseMask={0.3}
           >
             <Navigator
               ref={(ref) => { this.navigator = ref }}

ignite-base/App/Themes/Colors.js

@@ -16,7 +16,8 @@ const colors = {
   bloodOrange: '#fb5f26',
   snow: 'white',
   ember: 'rgba(164, 0, 48, 0.5)',
-  fire: '#e73536'
+  fire: '#e73536',
+  drawer: 'rgba(30, 30, 29, 0.95)'
 }
 
 export default colors

ignite-base/App/Themes/Metrics.js

@@ -8,6 +8,7 @@ const metrics = {
   marginVertical: 10,
   section: 25,
   baseMargin: 10,
+  doubleBaseMargin: 20,
   smallMargin: 5,
   horizontalLineHeight: 1,
   screenWidth: width < height ? width : height,