From 51629f67e2d7a6d823be611fff6a3a6e998ab461 Mon Sep 17 00:00:00 2001
From: Julia Friesel <julia.friesel@gmail.com>
Date: Fri, 17 Aug 2018 16:26:00 +0200
Subject: [PATCH] Place header as component
---
components/calendar.js | 16 +++++---
components/cycle-day/cycle-day-overview.js | 32 ++++------------
components/cycle-day/symptoms/index.js | 16 ++------
components/header.js | 43 ++++++++++++++++++++++
components/home.js | 2 +
components/settings.js | 2 +
components/stats.js | 2 +
styles/index.js | 5 ++-
8 files changed, 73 insertions(+), 45 deletions(-)
create mode 100644 components/header.js
diff --git a/components/calendar.js b/components/calendar.js
index 4aa7f135..dbff83c9 100644
--- a/components/calendar.js
+++ b/components/calendar.js
@@ -1,6 +1,7 @@
import React, { Component } from 'react'
import { View } from 'react-native'
import { CalendarList } from 'react-native-calendars'
+import Header from './header'
import * as styles from '../styles'
import { getOrCreateCycleDay, bleedingDaysSortedByDate } from '../db'
@@ -34,12 +35,15 @@ export default class CalendarView extends Component {
render() {
return (
- <View style={styles.container}>
- <CalendarList
- onDayPress={ this.passDateToDayView.bind(this) }
- markedDates = { this.state.bleedingDaysInCalFormat }
- markingType = {'period'}
- />
+ <View>
+ <Header title='Calendar' />
+ <View style={styles.container}>
+ <CalendarList
+ onDayPress={this.passDateToDayView.bind(this)}
+ markedDates={this.state.bleedingDaysInCalFormat}
+ markingType={'period'}
+ />
+ </View>
</View>
)
}
diff --git a/components/cycle-day/cycle-day-overview.js b/components/cycle-day/cycle-day-overview.js
index 35e1e3f6..78178fe8 100644
--- a/components/cycle-day/cycle-day-overview.js
+++ b/components/cycle-day/cycle-day-overview.js
@@ -7,11 +7,10 @@ import {
Dimensions
} from 'react-native'
import { LocalDate } from 'js-joda'
+import Header from '../header'
import { getOrCreateCycleDay } from '../../db'
import cycleModule from '../../lib/cycle'
import Icon from 'react-native-vector-icons/FontAwesome'
-import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons'
-import { formatDateForViewHeader } from './labels/format'
import styles, { iconStyles } from '../../styles'
import {
bleeding as bleedingLabels,
@@ -24,8 +23,6 @@ import {
intensity as intensityLabels
} from './labels/labels'
-const getCycleDayNumber = cycleModule().getCycleDayNumber
-
export default class CycleDayOverView extends Component {
constructor(props) {
super(props)
@@ -51,30 +48,15 @@ export default class CycleDayOverView extends Component {
render() {
const cycleDay = this.state.cycleDay
+ const getCycleDayNumber = cycleModule().getCycleDayNumber
const cycleDayNumber = getCycleDayNumber(cycleDay.date)
return (
<ScrollView>
- <View style={ styles.cycleDayDateView }>
- <MaterialIcon
- name='arrow-left-drop-circle'
- {...iconStyles.navigationArrow}
- onPress={() => this.goToCycleDay('before')}
- />
- <View>
- <Text style={styles.dateHeader}>
- {formatDateForViewHeader(cycleDay.date)}
- </Text>
- {cycleDayNumber &&
- <Text style={styles.cycleDayNumber} >
- Cycle day {cycleDayNumber}
- </Text>}
- </View >
- <MaterialIcon
- name='arrow-right-drop-circle'
- {...iconStyles.navigationArrow}
- onPress={() => this.goToCycleDay('after')}
- />
- </View >
+ <Header
+ cycleDayOverView={true}
+ cycleDayNumber={cycleDayNumber}
+ date={cycleDay.date}
+ />
<View style={styles.symptomBoxesView}>
<SymptomBox
title='Bleeding'
diff --git a/components/cycle-day/symptoms/index.js b/components/cycle-day/symptoms/index.js
index 3c0f834b..c2c050b6 100644
--- a/components/cycle-day/symptoms/index.js
+++ b/components/cycle-day/symptoms/index.js
@@ -1,10 +1,6 @@
import React, { Component } from 'react'
-import {
- View,
- Text,
- ScrollView
-} from 'react-native'
-import styles from '../../../styles'
+import { ScrollView } from 'react-native'
+import Header from '../../header'
import actionButtonModule from '../action-buttons'
import BleedingEditView from './bleeding'
import TemperatureEditView from './temperature'
@@ -51,13 +47,7 @@ export default class SymptomView extends Component {
render() {
return (
<ScrollView>
- <View style={ styles.header }>
- <View>
- <Text style={styles.dateHeader}>
- {titles[this.state.visibleComponent]}
- </Text>
- </View >
- </View >
+ <Header title={titles[this.state.visibleComponent]}/>
{React.createElement(
symptomViews[this.state.visibleComponent],
{
diff --git a/components/header.js b/components/header.js
new file mode 100644
index 00000000..1fd285eb
--- /dev/null
+++ b/components/header.js
@@ -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 >
+ )
+ }
+}
\ No newline at end of file
diff --git a/components/home.js b/components/home.js
index 5381e3be..9c8d14ff 100644
--- a/components/home.js
+++ b/components/home.js
@@ -6,6 +6,7 @@ import {
ScrollView
} from 'react-native'
import { LocalDate } from 'js-joda'
+import Header from './header'
import styles from '../styles/index'
import cycleModule from '../lib/cycle'
import { getOrCreateCycleDay, bleedingDaysSortedByDate, fillWithDummyData, deleteAll } from '../db'
@@ -48,6 +49,7 @@ export default class Home extends Component {
render() {
return (
<ScrollView>
+ <Header title='Home'/>
<Text style={styles.welcome}>{this.state.welcomeText}</Text>
<View style={styles.homeButtons}>
<View style={styles.homeButton}>
diff --git a/components/settings.js b/components/settings.js
index 97907b10..3552872a 100644
--- a/components/settings.js
+++ b/components/settings.js
@@ -9,6 +9,7 @@ import {
import Share from 'react-native-share'
import { DocumentPicker, DocumentPickerUtil } from 'react-native-document-picker'
import rnfs from 'react-native-fs'
+import Header from './header'
import styles from '../styles/index'
import { settings as labels } from './labels'
import getDataAsCsvDataUri from '../lib/import-export/export-to-csv'
@@ -18,6 +19,7 @@ export default class Settings extends Component {
render() {
return (
<ScrollView>
+ <Header title='Settings'/>
<View style={styles.homeButtons}>
<View style={styles.homeButton}>
<Button
diff --git a/components/stats.js b/components/stats.js
index 4021fdee..c37a518c 100644
--- a/components/stats.js
+++ b/components/stats.js
@@ -5,6 +5,7 @@ import {
ScrollView
} from 'react-native'
import { LocalDate, ChronoUnit } from 'js-joda'
+import Header from './header'
import styles from '../styles/index'
import cycleModule from '../lib/cycle'
import getCycleInfo from '../lib/cycle-length'
@@ -15,6 +16,7 @@ export default class Stats extends Component {
const statsText = determineStatsText(allMensesStarts)
return (
<ScrollView>
+ <Header title='Statistics' />
<View>
<Text style={styles.stats}>{statsText}</Text>
</View>
diff --git a/styles/index.js b/styles/index.js
index 087d20de..f55ef4e7 100644
--- a/styles/index.js
+++ b/styles/index.js
@@ -75,11 +75,14 @@ export default StyleSheet.create({
alignItems: 'center',
height: 50
},
- cycleDayDateView: {
+ header: {
backgroundColor: primaryColor,
paddingVertical: 18,
paddingHorizontal: 15,
alignItems: 'center',
+ justifyContent: 'center'
+ },
+ headerCycleDay: {
flexDirection: 'row',
justifyContent: 'space-between'
},
--
GitLab