Place header as component

2018-08-17 16:26:00 +02:00
parent 636e5e2f9d
commit 51629f67e2
8 changed files with 73 additions and 45 deletions
@@ -0,0 +1,43 @@
+import React, { Component } from 'react'
+import {
+  View,
+  Text
+} from 'react-native'
+import styles, { iconStyles } from '../styles'
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
+import { formatDateForViewHeader } from '../components/cycle-day/labels/format'
+
+export default class Header extends Component {
+  render() {
+    return (
+      this.props.cycleDayOverView ?
+        <View style={[styles.header, styles.headerCycleDay]}>
+          <Icon
+            name='arrow-left-drop-circle'
+            {...iconStyles.navigationArrow}
+            onPress={() => this.goToCycleDay('before')}
+          />
+          <View>
+            <Text style={styles.dateHeader}>
+              {formatDateForViewHeader(this.props.date)}
+            </Text>
+            {this.props.cycleDayNumber &&
+              <Text style={styles.cycleDayNumber} >
+                Cycle day {this.props.cycleDayNumber}
+              </Text>}
+          </View >
+          <Icon
+            name='arrow-right-drop-circle'
+            {...iconStyles.navigationArrow}
+            onPress={() => this.goToCycleDay('after')}
+          />
+        </View >
+        :
+        <View style={styles.header}>
+          <Text style={styles.dateHeader}>
+            {this.props.title}
+          </Text>
+        </View >
+    )
+  }
+}