Merge branch '219-bigger-clickable-space-for-arrows-in-cycle-day-overview' into 'master'

Resolve "Bigger clickable space for arrows in cycle day overview"

Closes #219

See merge request bloodyhealth/drip!109

components/header.js

@@ -1,70 +0,0 @@
-import React, { Component } from 'react'
-import {
-  View,
-  Text,
-  Dimensions
-} from 'react-native'
-import moment from 'moment'
-import styles, { iconStyles } from '../styles'
-import Icon from 'react-native-vector-icons/Entypo'
-import FeatherIcon from 'react-native-vector-icons/Feather'
-
-export default class Header extends Component {
-  render() {
-    const middle = Dimensions.get('window').width / 2
-    return (
-      this.props.isCycleDayOverView ?
-        <View style={[styles.header, styles.headerCycleDay]}>
-          <View
-            style={styles.accentCircle}
-            left={middle - styles.accentCircle.width / 2}
-          />
-          <Icon
-            name='chevron-thin-left'
-            {...iconStyles.navigationArrow}
-            onPress={() => this.props.goToCycleDay('before')}
-          />
-          <View>
-            <Text style={styles.dateHeader}>
-              {moment(this.props.date).format('MMMM Do YYYY')}
-            </Text>
-            {this.props.cycleDayNumber &&
-              <Text style={styles.cycleDayNumber} >
-                Cycle day {this.props.cycleDayNumber}
-              </Text>}
-          </View >
-          <Icon
-            name='chevron-thin-right'
-            {...iconStyles.navigationArrow}
-            onPress={() => this.props.goToCycleDay('after')}
-          />
-        </View >
-        : this.props.isSymptomView ?
-          <View style={[styles.header, styles.headerSymptom]}>
-            <View style={styles.accentCircle} left={middle - styles.accentCircle.width / 2}/>
-            <Icon
-              name='chevron-thin-left'
-              {...iconStyles.navigationArrow}
-              onPress={() => this.props.goBack()}
-
-            />
-            <View>
-              <Text style={styles.dateHeader}>
-                {this.props.title}
-              </Text>
-            </View >
-            <FeatherIcon
-              name='info'
-              {...iconStyles.symptomHeaderIcons}
-            />
-          </View>
-          :
-          <View style={styles.header}>
-            <View style={styles.accentCircle} />
-            <Text style={styles.headerText}>
-              {this.props.title}
-            </Text>
-          </View >
-    )
-  }
-}

components/header/cycle-day.js

@@ -0,0 +1,28 @@
+import React from 'react'
+import {
+  View,
+  Text} from 'react-native'
+import moment from 'moment'
+import styles from '../../styles'
+import NavigationArrow from './navigation-arrow'
+
+export default function CycleDayHeader(props) {
+  return (<View style={[styles.header, styles.headerCycleDay]}>
+    <View
+      style={styles.accentCircle}
+      left={props.middle - styles.accentCircle.width / 2}
+    />
+    <NavigationArrow direction='left' {...props}/>
+    <View>
+      <Text style={styles.dateHeader}>
+        {moment(props.date).format('MMMM Do YYYY')}
+      </Text>
+      {props.cycleDayNumber &&
+        <Text style={styles.cycleDayNumber}>
+          Cycle day {props.cycleDayNumber}
+        </Text>}
+    </View>
+    <NavigationArrow direction='right' {...props}/>
+  </View>
+  )
+}

components/header/index.js

@@ -0,0 +1,27 @@
+import React from 'react'
+import {
+  View,
+  Text,
+  Dimensions
+} from 'react-native'
+import styles from '../../styles'
+import CycleDayHeader from './cycle-day'
+import SymptomViewHeader from './symptom-view'
+
+export default function Header(p) {
+  const middle = Dimensions.get('window').width / 2
+  const props = Object.assign({}, p, {middle})
+  return (
+    props.isCycleDayOverView ?
+      <CycleDayHeader {...props} />
+      : props.isSymptomView ?
+        <SymptomViewHeader {...props}/>
+        :
+        <View style={styles.header}>
+          <View style={styles.accentCircle} />
+          <Text style={styles.headerText}>
+            {props.title}
+          </Text>
+        </View >
+  )
+}

components/header/navigation-arrow.js

@@ -0,0 +1,31 @@
+import React from 'react'
+import { TouchableOpacity } from 'react-native'
+import styles, { iconStyles } from '../../styles'
+import Icon from 'react-native-vector-icons/Entypo'
+
+export default function NavigationArrow(props) {
+  const iconName = {
+    left: 'chevron-thin-left',
+    right: 'chevron-thin-right'
+  }[props.direction]
+  let pressHandler
+  if (props.goBack) {
+    pressHandler = () => props.goBack()
+  } else {
+    pressHandler = () => {
+      const target = props.direction === 'left' ? 'before' : 'after'
+      props.goToCycleDay(target)
+    }
+  }
+  return (
+    <TouchableOpacity
+      style={styles.navigationArrow}
+      onPress={pressHandler}
+    >
+      <Icon
+        name={iconName}
+        {...iconStyles.navigationArrow}
+      />
+    </TouchableOpacity>
+  )
+}

components/header/symptom-view.js

@@ -0,0 +1,31 @@
+import React from 'react'
+import {
+  View,
+  Text} from 'react-native'
+import styles, { iconStyles } from '../../styles'
+import FeatherIcon from 'react-native-vector-icons/Feather'
+import NavigationArrow from './navigation-arrow'
+
+export default function SymptomViewHeader(props) {
+  return (
+    <View style={[styles.header, styles.headerCycleDay, styles.headerSymptom]}>
+      <View
+        style={styles.accentCircle}
+        left={props.middle - styles.accentCircle.width / 2}
+      />
+      <NavigationArrow
+        direction='left'
+        {...props}
+      />
+      <View>
+        <Text style={styles.dateHeader}>
+          {props.title}
+        </Text>
+      </View >
+      <FeatherIcon
+        name='info'
+        {...iconStyles.symptomHeaderIcons}
+      />
+    </View>
+  )
+}

styles/index.js

@@ -191,11 +191,20 @@ export default StyleSheet.create({
   },
   header: {
     backgroundColor: primaryColor,
-    paddingHorizontal: 15,
     alignItems: 'center',
     justifyContent: 'center',
     height: 80
   },
+  headerCycleDay: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  headerSymptom: {
+    paddingRight: 20
+  },
+  navigationArrow: {
+    padding: 20
+  },
   menu: {
     backgroundColor: primaryColor,
     alignItems: 'center',
@@ -215,18 +224,6 @@ export default StyleSheet.create({
   menuTextInActive: {
     color: colorInActive
   },
-  headerCycleDay: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-  },
-  headerSymptom: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-  },
-  navigationArrow: {
-    fontSize: 60,
-    color: fontOnPrimaryColor
-  },
   temperatureTextInput: {
     fontSize: 20,
     color: 'black',