From fae278435aaa1448d2d04cb64c4f947a2ca18d94 Mon Sep 17 00:00:00 2001
From: Julia Friesel <julia.friesel@gmail.com>
Date: Fri, 17 Aug 2018 08:05:15 +0200
Subject: [PATCH] Add navigation arrows
---
components/cycle-day/cycle-day-overview.js | 29 +--------
components/cycle-day/index.js | 70 ++++++++++++++--------
styles/index.js | 27 ++++++---
3 files changed, 67 insertions(+), 59 deletions(-)
diff --git a/components/cycle-day/cycle-day-overview.js b/components/cycle-day/cycle-day-overview.js
index 35786826..4b752240 100644
--- a/components/cycle-day/cycle-day-overview.js
+++ b/components/cycle-day/cycle-day-overview.js
@@ -17,37 +17,10 @@ import {
cervixPosition as positionLabels,
intensity as intensityLabels
} from './labels/labels'
-import cycleDayModule from '../../lib/cycle'
-import { bleedingDaysSortedByDate } from '../../db'
-
-const getCycleDayNumber = cycleDayModule().getCycleDayNumber
export default class DayView extends Component {
- constructor(props) {
- super(props)
- this.cycleDay = props.cycleDay
- this.showView = props.showView
- this.state = {
- cycleDayNumber: getCycleDayNumber(this.cycleDay.date),
- }
-
- this.setStateWithCycleDayNumber = (function (DayViewComponent) {
- return function () {
- DayViewComponent.setState({
- cycleDayNumber: getCycleDayNumber(DayViewComponent.cycleDay.date)
- })
- }
- })(this)
-
- bleedingDaysSortedByDate.addListener(this.setStateWithCycleDayNumber)
- }
-
- componentWillUnmount() {
- bleedingDaysSortedByDate.removeListener(this.setStateWithCycleDayNumber)
- }
-
render() {
- const cycleDay = this.cycleDay
+ const cycleDay = this.props.cycleDay
return (
<View style={styles.symptomBoxesView}>
<SymptomBox
diff --git a/components/cycle-day/index.js b/components/cycle-day/index.js
index fab2b2e3..d162a26e 100644
--- a/components/cycle-day/index.js
+++ b/components/cycle-day/index.js
@@ -4,66 +4,88 @@ import {
Text,
ScrollView
} from 'react-native'
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
import cycleModule from '../../lib/cycle'
import { formatDateForViewHeader } from './labels/format'
-import styles from '../../styles'
+import styles, { iconStyles } from '../../styles'
import actionButtonModule from './action-buttons'
import symptomComponents from './symptoms'
import DayView from './cycle-day-overview'
+import { LocalDate } from 'js-joda'
+import { getOrCreateCycleDay } from '../../db'
const getCycleDayNumber = cycleModule().getCycleDayNumber
+const symptomComponentNames = Object.keys(symptomComponents)
export default class Day extends Component {
constructor(props) {
super(props)
- this.cycleDay = props.navigation.state.params.cycleDay
this.state = {
visibleComponent: 'DayView',
+ cycleDay: props.navigation.state.params.cycleDay
}
- const showView = view => {
+ this.showView = view => {
this.setState({visibleComponent: view})
}
+ this.makeActionButtons = actionButtonModule(this.showView)
+ }
- const makeActionButtons = actionButtonModule(showView)
+ goToCycleDay(target) {
+ const localDate = LocalDate.parse(this.state.cycleDay.date)
+ const targetDate = target === 'before' ?
+ localDate.minusDays(1).toString() :
+ localDate.plusDays(1).toString()
+ this.setState({cycleDay: getOrCreateCycleDay(targetDate)})
+ }
- const symptomComponentNames = Object.keys(symptomComponents)
- this.cycleDayViews = symptomComponentNames.reduce((acc, curr) => {
+ render() {
+ const cycleDayNumber = getCycleDayNumber(this.state.cycleDay.date)
+ const cycleDayViews = symptomComponentNames.reduce((acc, curr) => {
acc[curr] = React.createElement(
symptomComponents[curr],
{
- cycleDay: this.cycleDay,
- makeActionButtons
+ cycleDay: this.state.cycleDay,
+ makeActionButtons: this.makeActionButtons
}
)
return acc
}, {})
-
// DayView needs showView instead of makeActionButtons
- this.cycleDayViews.DayView = React.createElement(DayView, {
- cycleDay: this.cycleDay,
- showView
+ cycleDayViews.DayView = React.createElement(DayView, {
+ dateString: this.state.cycleDay.date,
+ cycleDay: this.state.cycleDay,
+ showView: this.showView
})
- }
- render() {
- const cycleDayNumber = getCycleDayNumber(this.cycleDay.date)
return (
<ScrollView>
<View style={ styles.cycleDayDateView }>
- <Text style={styles.dateHeader}>
- {formatDateForViewHeader(this.cycleDay.date)}
- </Text>
- { cycleDayNumber &&
- <Text style={styles.cycleDayNumber} >
- Cycle day {cycleDayNumber}
- </Text> }
+ <Icon
+ name='arrow-left-drop-circle'
+ {...iconStyles.navigationArrow}
+ onPress={() => this.goToCycleDay('before')}
+ />
+ <View>
+ <Text style={styles.dateHeader}>
+ {formatDateForViewHeader(this.state.cycleDay.date)}
+ </Text>
+ {cycleDayNumber &&
+ <Text style={styles.cycleDayNumber} >
+ Cycle day {cycleDayNumber}
+ </Text>}
+ </View >
+ <Icon
+ name='arrow-right-drop-circle'
+ {...iconStyles.navigationArrow}
+ onPress={() => this.goToCycleDay('after')}
+ />
</View >
<View>
- { this.cycleDayViews[this.state.visibleComponent] }
+ { cycleDayViews[this.state.visibleComponent] }
</View >
</ScrollView >
)
}
-}
+}
\ No newline at end of file
diff --git a/styles/index.js b/styles/index.js
index 88b76cb6..8896f037 100644
--- a/styles/index.js
+++ b/styles/index.js
@@ -2,6 +2,7 @@ import { StyleSheet } from 'react-native'
export const primaryColor = '#ff7e5f'
export const secondaryColor = '#351c4d'
+export const fontOnPrimaryColor = 'white'
export default StyleSheet.create({
container: {
@@ -17,12 +18,12 @@ export default StyleSheet.create({
dateHeader: {
fontSize: 18,
fontWeight: 'bold',
- color: 'white',
+ color: fontOnPrimaryColor,
textAlign: 'center',
},
cycleDayNumber: {
fontSize: 15,
- color: 'white',
+ color: fontOnPrimaryColor,
textAlign: 'center',
marginLeft: 15
},
@@ -70,10 +71,15 @@ export default StyleSheet.create({
},
cycleDayDateView: {
backgroundColor: primaryColor,
- padding: 10,
+ paddingVertical: 18,
+ paddingHorizontal: 15,
+ alignItems: 'center',
flexDirection: 'row',
- justifyContent: 'center',
- alignItems: 'center'
+ justifyContent: 'space-between'
+ },
+ navigationArrow: {
+ fontSize: 60,
+ color: fontOnPrimaryColor
},
homeButtons: {
marginHorizontal: 15
@@ -107,6 +113,13 @@ export default StyleSheet.create({
},
menuLabel: {
fontSize: 15,
- color: 'white'
+ color: fontOnPrimaryColor
},
-})
\ No newline at end of file
+})
+
+export const iconStyles = {
+ navigationArrow: {
+ size: 45,
+ color: fontOnPrimaryColor
+ }
+}
\ No newline at end of file
--
GitLab