diff --git a/app.js b/app.js
deleted file mode 100644
index 7735256070bb44b375bfaac4167b7c9242e8d11f..0000000000000000000000000000000000000000
--- a/app.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import { createStackNavigator, createBottomTabNavigator } from 'react-navigation'
-import Home from './components/home'
-
-import Calendar from './components/calendar'
-import CycleDay from './components/cycle-day'
-import Chart from './components/chart/chart'
-import Settings from './components/settings'
-import Stats from './components/stats'
-
-import styles from './styles'
-
-// this is until react native fixes this bugg, see
-// https://github.com/facebook/react-native/issues/18868#issuecomment-382671739
-import { YellowBox } from 'react-native'
-YellowBox.ignoreWarnings(['Warning: isMounted(...) is deprecated'])
-
-const routes = {
- Home: createStackNavigator({Home, CycleDay}, {headerMode: 'none'}),
- Calendar: createStackNavigator({Calendar, CycleDay}, {headerMode: 'none'}),
- Chart: createStackNavigator({Chart, CycleDay}, {headerMode: 'none'}),
- Settings: { screen: Settings },
- Stats: { screen: Stats}
-}
-
-const config = {
- labeled: true,
- shifting: false,
- tabBarOptions: {
- style: {backgroundColor: '#ff7e5f'},
- labelStyle: {fontSize: 15, color: 'white'}
- },
-}
-
-export default createBottomTabNavigator(routes, config)
\ No newline at end of file
diff --git a/components/app.js b/components/app.js
new file mode 100644
index 0000000000000000000000000000000000000000..b0924aa0b89b1baac2b7258e70fae8f431bb0c36
--- /dev/null
+++ b/components/app.js
@@ -0,0 +1,64 @@
+import React, { Component } from 'react'
+import { View, BackHandler } from 'react-native'
+import Header from './header'
+import Menu from './menu'
+import Home from './home'
+import Calendar from './calendar'
+import CycleDay from './cycle-day/cycle-day-overview'
+import symptomViews from './cycle-day/symptoms'
+import Chart from './chart/chart'
+import Settings from './settings'
+import Stats from './stats'
+import {headerTitles as titles} from './labels'
+
+const isSymptomView = name => Object.keys(symptomViews).indexOf(name) > -1
+
+export default class App extends Component {
+ constructor(props) {
+ super(props)
+ this.state = {
+ currentPage: 'Home'
+ }
+
+ const handleBackButtonPress = function() {
+ if (this.state.currentPage === 'Home') return false
+ if (isSymptomView(this.state.currentPage)) {
+ this.navigate('CycleDay', {cycleDay: this.state.currentProps.cycleDay})
+ } else {
+ this.navigate('Home')
+ }
+ return true
+ }.bind(this)
+
+ this.backHandler = BackHandler.addEventListener('hardwareBackPress', handleBackButtonPress)
+ }
+
+ componentWillUnmount() {
+ this.backHandler.remove()
+ }
+
+ navigate(pageName, props) {
+ this.setState({currentPage: pageName, currentProps: props})
+ }
+
+ render() {
+ const page = {
+ Home, Calendar, CycleDay, Chart, Settings, Stats, ...symptomViews
+ }[this.state.currentPage]
+ return (
+ <View style={{flex: 1}}>
+
+ {this.state.currentPage != 'CycleDay' && <Header title={titles[this.state.currentPage]} />}
+
+ {React.createElement(page, {
+ navigate: this.navigate.bind(this),
+ ...this.state.currentProps
+ })}
+
+ {!isSymptomView(this.state.currentPage) &&
+ <Menu navigate={this.navigate.bind(this)} />
+ }
+ </View>
+ )
+ }
+}
\ No newline at end of file
diff --git a/components/calendar.js b/components/calendar.js
index 4aa7f135eef45fdb040819ecaeb071e7881ff5cc..72fb1babf89c61d4f213a53f7e0723eb00f5ea3f 100644
--- a/components/calendar.js
+++ b/components/calendar.js
@@ -1,7 +1,5 @@
import React, { Component } from 'react'
-import { View } from 'react-native'
import { CalendarList } from 'react-native-calendars'
-import * as styles from '../styles'
import { getOrCreateCycleDay, bleedingDaysSortedByDate } from '../db'
export default class CalendarView extends Component {
@@ -12,7 +10,8 @@ export default class CalendarView extends Component {
}
this.setStateWithCalFormattedDays = (function (CalendarComponent) {
- return function() {
+ return function(_, changes) {
+ if (Object.values(changes).every(x => x && !x.length)) return
CalendarComponent.setState({
bleedingDaysInCalFormat: toCalFormat(bleedingDaysSortedByDate)
})
@@ -28,19 +27,17 @@ export default class CalendarView extends Component {
passDateToDayView(result) {
const cycleDay = getOrCreateCycleDay(result.dateString)
- const navigate = this.props.navigation.navigate
+ const navigate = this.props.navigate
navigate('CycleDay', { cycleDay })
}
render() {
return (
- <View style={styles.container}>
- <CalendarList
- onDayPress={ this.passDateToDayView.bind(this) }
- markedDates = { this.state.bleedingDaysInCalFormat }
- markingType = {'period'}
- />
- </View>
+ <CalendarList
+ onDayPress={this.passDateToDayView.bind(this)}
+ markedDates={this.state.bleedingDaysInCalFormat}
+ markingType={'period'}
+ />
)
}
}
diff --git a/components/chart/chart.js b/components/chart/chart.js
index ded01cfecaa565fc8d89374f17d76e7c28d8a080..c9c2b1d3e7b17691a3b59a12e57e8e892fc0cf6d 100644
--- a/components/chart/chart.js
+++ b/components/chart/chart.js
@@ -1,5 +1,5 @@
import React, { Component } from 'react'
-import { View, FlatList } from 'react-native'
+import { View, FlatList, ScrollView } from 'react-native'
import range from 'date-range'
import { LocalDate } from 'js-joda'
import { yAxis, normalizeToScale, horizontalGrid } from './y-axis'
@@ -21,7 +21,7 @@ export default class CycleChart extends Component {
<DayColumn
{...item}
index={index}
- navigate={this.props.navigation.navigate}
+ navigate={this.props.navigate}
/>
)
}
@@ -41,21 +41,23 @@ export default class CycleChart extends Component {
render() {
return (
- <View style={{ flexDirection: 'row', marginTop: 50 }}>
- {yAxisView}
- {horizontalGrid}
- {<FlatList
- horizontal={true}
- inverted={true}
- showsHorizontalScrollIndicator={false}
- data={this.state.columns}
- renderItem={this.renderColumn}
- keyExtractor={item => item.dateString}
- initialNumToRender={15}
- maxToRenderPerBatch={5}
- >
- </FlatList>}
- </View>
+ <ScrollView>
+ <View style={{ flexDirection: 'row', marginTop: 50 }}>
+ {yAxisView}
+ {horizontalGrid}
+ {<FlatList
+ horizontal={true}
+ inverted={true}
+ showsHorizontalScrollIndicator={false}
+ data={this.state.columns}
+ renderItem={this.renderColumn}
+ keyExtractor={item => item.dateString}
+ initialNumToRender={15}
+ maxToRenderPerBatch={5}
+ >
+ </FlatList>}
+ </View>
+ </ScrollView>
)
}
}
diff --git a/components/chart/day-column.js b/components/chart/day-column.js
index 88eb44e54b1fea17e203387d714c9449fcdc8727..a7ccfb1fb446dcd7512767626f8d304c8492ceaf 100644
--- a/components/chart/day-column.js
+++ b/components/chart/day-column.js
@@ -15,7 +15,7 @@ const label = styles.column.label
export default class DayColumn extends Component {
passDateToDayView(dateString) {
const cycleDay = getOrCreateCycleDay(dateString)
- this.props.navigate('cycleDay', { cycleDay })
+ this.props.navigate('CycleDay', { cycleDay })
}
shouldComponentUpdate(newProps) {
diff --git a/components/cycle-day/action-buttons.js b/components/cycle-day/action-buttons.js
deleted file mode 100644
index 78e2479337a31f44277cc11a8260cd7e89150001..0000000000000000000000000000000000000000
--- a/components/cycle-day/action-buttons.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import React from 'react'
-import {
- View,
- Button,
-} from 'react-native'
-import { saveSymptom } from '../../db'
-
-const dayView = 'DayView'
-
-export default function (showView) {
- return function ({ symptom, cycleDay, saveAction, saveDisabled}) {
- const buttons = [
- {
- title: 'Cancel',
- action: () => showView(dayView)
- },
- {
- title: 'Delete',
- action: () => {
- saveSymptom(symptom, cycleDay)
- showView(dayView)
- }
- }, {
- title: 'Save',
- action: () => {
- saveAction()
- showView(dayView)
- },
- disabledCondition: saveDisabled
- }
- ]
-
- return buttons.map(({ title, action, disabledCondition }, i) => {
- const style = { flex: 1, marginHorizontal: 10 }
- if (i === 0) style.marginLeft = 0
- if (i === buttons.length - 1) style.marginRight = 0
- return (
- <View style={style} key={i}>
- <Button
- onPress={action}
- disabled={disabledCondition}
- title={title}>
- </Button>
- </View >
- )
- })
- }
-}
\ No newline at end of file
diff --git a/components/cycle-day/cycle-day-overview.js b/components/cycle-day/cycle-day-overview.js
index b127b7471fe1742792f6f1e3bf9b8bd781799515..168954f13b0564bab294f63a1a60593d8a44bfe9 100644
--- a/components/cycle-day/cycle-day-overview.js
+++ b/components/cycle-day/cycle-day-overview.js
@@ -1,10 +1,17 @@
import React, { Component } from 'react'
import {
+ ScrollView,
View,
- Button,
- Text
+ Text,
+ TouchableOpacity,
+ Dimensions
} from 'react-native'
-import styles from '../../styles'
+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 styles, { iconStyles } from '../../styles'
import {
bleeding as bleedingLabels,
mucusFeeling as feelingLabels,
@@ -15,103 +22,83 @@ 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 {
+export default class CycleDayOverView extends Component {
constructor(props) {
super(props)
- this.cycleDay = props.cycleDay
- this.showView = props.showView
this.state = {
- cycleDayNumber: getCycleDayNumber(this.cycleDay.date),
+ cycleDay: props.cycleDay
}
+ }
- this.setStateWithCycleDayNumber = (function (DayViewComponent) {
- return function () {
- DayViewComponent.setState({
- cycleDayNumber: getCycleDayNumber(DayViewComponent.cycleDay.date)
- })
- }
- })(this)
-
- bleedingDaysSortedByDate.addListener(this.setStateWithCycleDayNumber)
+ 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) })
}
- componentWillUnmount() {
- bleedingDaysSortedByDate.removeListener(this.setStateWithCycleDayNumber)
+ navigate(symptom) {
+ this.props.navigate(symptom, {
+ cycleDay: this.state.cycleDay,
+ })
}
render() {
- const cycleDay = this.cycleDay
+ const cycleDay = this.state.cycleDay
+ const getCycleDayNumber = cycleModule().getCycleDayNumber
+ const cycleDayNumber = getCycleDayNumber(cycleDay.date)
return (
- <View style={styles.symptomEditView}>
- <View style={styles.symptomViewRowInline}>
- <Text style={styles.symptomDayView}>Bleeding</Text>
- <View style={styles.symptomEditButton}>
- <Button
- onPress={() => this.showView('BleedingEditView')}
- title={getLabel('bleeding', cycleDay.bleeding)}>
- </Button>
- </View>
- </View>
- <View style={styles.symptomViewRowInline}>
- <Text style={styles.symptomDayView}>Temperature</Text>
- <View style={styles.symptomEditButton}>
- <Button
- onPress={() => this.showView('TemperatureEditView')}
- title={getLabel('temperature', cycleDay.temperature)}>
- </Button>
- </View>
- </View>
- <View style={ styles.symptomViewRowInline }>
- <Text style={styles.symptomDayView}>Mucus</Text>
- <View style={styles.symptomEditButton}>
- <Button
- onPress={() => this.showView('MucusEditView')}
- title={getLabel('mucus', cycleDay.mucus)}>
- </Button>
- </View>
- </View>
- <View style={styles.symptomViewRowInline}>
- <Text style={styles.symptomDayView}>Cervix</Text>
- <View style={styles.symptomEditButton}>
- <Button
- onPress={() => this.showView('CervixEditView')}
- title={getLabel('cervix', cycleDay.cervix)}>
- </Button>
- </View>
- </View>
- <View style={styles.symptomViewRowInline}>
- <Text style={styles.symptomDayView}>Note</Text>
- <View style={styles.symptomEditButton}>
- <Button
- onPress={() => this.showView('NoteEditView')}
- title={getLabel('note', cycleDay.note)}
- >
- </Button>
- </View>
- </View>
- <View style={ styles.symptomViewRowInline }>
- <Text style={styles.symptomDayView}>Desire</Text>
- <View style={styles.symptomEditButton}>
- <Button
- onPress={() => this.showView('DesireEditView')}
- title={getLabel('desire', cycleDay.desire)}>
- </Button>
- </View>
- </View>
- <View style={styles.symptomViewRowInline}>
- <Text style={styles.symptomDayView}>Sex</Text>
- <View style={styles.symptomEditButton}>
- <Button
- onPress={() => this.showView('SexEditView')}
- title={getLabel('sex', cycleDay.sex)}>
- </Button>
- </View>
- </View>
+ <View style={{ flex: 1 }}>
+ <Header
+ isCycleDayOverView={true}
+ cycleDayNumber={cycleDayNumber}
+ date={cycleDay.date}
+ goToCycleDay={this.goToCycleDay.bind(this)}
+ />
+ <ScrollView>
+ <View style={styles.symptomBoxesView}>
+ <SymptomBox
+ title='Bleeding'
+ onPress={() => this.navigate('BleedingEditView')}
+ data={getLabel('bleeding', cycleDay.bleeding)}
+ />
+ <SymptomBox
+ title='Temperature'
+ onPress={() => this.navigate('TemperatureEditView')}
+ data={getLabel('temperature', cycleDay.temperature)}
+ />
+ <SymptomBox
+ title='Mucus'
+ onPress={() => this.navigate('MucusEditView')}
+ data={getLabel('mucus', cycleDay.mucus)}
+ />
+ <SymptomBox
+ title='Cervix'
+ onPress={() => this.navigate('CervixEditView')}
+ data={getLabel('cervix', cycleDay.cervix)}
+ />
+ <SymptomBox
+ title='Note'
+ onPress={() => this.navigate('NoteEditView')}
+ data={getLabel('note', cycleDay.note)}
+ />
+ <SymptomBox
+ title='Desire'
+ onPress={() => this.navigate('DesireEditView')}
+ data={getLabel('desire', cycleDay.desire)}
+ />
+ <SymptomBox
+ title='Sex'
+ onPress={() => this.navigate('SexEditView')}
+ data={getLabel('sex', cycleDay.sex)}
+ />
+ {/* this is just to make the last row adhere to the grid
+ (and) because there are no pseudo properties in RN */}
+ <FillerBoxes />
+ </View >
+ </ScrollView >
</View >
)
}
@@ -136,33 +123,28 @@ function getLabel(symptomName, symptom) {
}
},
mucus: mucus => {
- if (
- typeof mucus.feeling === 'number' &&
- typeof mucus.texture === 'number' &&
- typeof mucus.value === 'number'
- ) {
- let mucusLabel =
- `${feelingLabels[mucus.feeling]} +
- ${textureLabels[mucus.texture]}
- ( ${computeSensiplanMucusLabels[mucus.value]} )`
- if (mucus.exclude) mucusLabel = "( " + mucusLabel + " )"
+ const categories = ['feeling', 'texture', 'value']
+ if (categories.every(c => typeof mucus[c] === 'number')) {
+ let mucusLabel = [feelingLabels[mucus.feeling], textureLabels[mucus.texture]].join(', ')
+ mucusLabel += `\n${computeSensiplanMucusLabels[mucus.value]}`
+ if (mucus.exclude) mucusLabel = `(${mucusLabel})`
return mucusLabel
}
},
cervix: cervix => {
+ let cervixLabel = []
if (cervix.opening > -1 && cervix.firmness > -1) {
- let cervixLabel =
- `${openingLabels[cervix.opening]} +
- ${firmnessLabels[cervix.firmness]}`
+ cervixLabel.push(openingLabels[cervix.opening], firmnessLabels[cervix.firmness])
if (cervix.position > -1) {
- cervixLabel += `+ ${positionLabels[cervix.position]}`
+ cervixLabel.push(positionLabels[cervix.position])
}
- if (cervix.exclude) cervixLabel = "( " + cervixLabel + " )"
+ cervixLabel = cervixLabel.join(', ')
+ if (cervix.exclude) cervixLabel = `(${cervixLabel})`
return cervixLabel
}
},
note: note => {
- return note.value.slice(0, 12) + '...'
+ return note.value
},
desire: desire => {
if (typeof desire.value === 'number') {
@@ -171,18 +153,64 @@ function getLabel(symptomName, symptom) {
}
},
sex: sex => {
- let sexLabel = ''
+ const sexLabel = []
if ( sex.solo || sex.partner ) {
- sexLabel += 'Activity '
+ sexLabel.push('activity')
}
if (sex.condom || sex.pill || sex.iud ||
sex.patch || sex.ring || sex.implant || sex.other) {
- sexLabel += 'Contraceptive'
+ sexLabel.push('contraceptive')
}
- return sexLabel ? sexLabel : 'edit'
+ return sexLabel.join(', ')
}
}
- if (!symptom) return 'edit'
- return labels[symptomName](symptom) || 'edit'
+ if (!symptom) return
+ const label = labels[symptomName](symptom)
+ if (label.length < 45) return label
+ return label.slice(0, 42) + '...'
}
+
+class SymptomBox extends Component {
+ render() {
+ const d = this.props.data
+ const boxActive = d ? styles.symptomBoxActive : {}
+ const iconActive = d ? iconStyles.symptomBoxActive : {}
+ const textStyle = d ? styles.symptomTextActive : {}
+
+ const symptomBoxStyle = Object.assign({}, styles.symptomBox, boxActive)
+ const iconStyle = Object.assign({}, iconStyles.symptomBox, iconActive)
+
+ return (
+ <TouchableOpacity onPress={this.props.onPress}>
+ <View style={symptomBoxStyle}>
+ <Icon
+ name='thermometer'
+ {...iconStyle}
+ />
+ <Text style={textStyle}>{this.props.title}</Text>
+ </View>
+ <View style={styles.symptomDataBox}>
+ <Text style={styles.symptomDataText}>{this.props.data}</Text>
+ </View>
+ </TouchableOpacity>
+ )
+ }
+}
+
+class FillerBoxes extends Component {
+ render() {
+ const n = Dimensions.get('window').width / styles.symptomBox.width
+ const fillerBoxes = []
+ for (let i = 0; i < Math.ceil(n); i++) {
+ fillerBoxes.push(
+ <View
+ width={styles.symptomBox.width}
+ height={0}
+ key={i.toString()}
+ />
+ )
+ }
+ return fillerBoxes
+ }
+}
\ No newline at end of file
diff --git a/components/cycle-day/index.js b/components/cycle-day/index.js
deleted file mode 100644
index 94bb51e4235958076b46bbc7e512b4799231dc27..0000000000000000000000000000000000000000
--- a/components/cycle-day/index.js
+++ /dev/null
@@ -1,77 +0,0 @@
-import React, { Component } from 'react'
-import {
- View,
- Text,
- ScrollView
-} from 'react-native'
-import cycleModule from '../../lib/cycle'
-import { getFertilityStatusStringForDay } from '../../lib/sympto-adapter'
-import { formatDateForViewHeader } from './labels/format'
-import styles from '../../styles'
-import actionButtonModule from './action-buttons'
-import symptomComponents from './symptoms'
-import DayView from './cycle-day-overview'
-
-const getCycleDayNumber = cycleModule().getCycleDayNumber
-
-export default class Day extends Component {
- constructor(props) {
- super(props)
- this.cycleDay = props.navigation.state.params.cycleDay
-
- this.state = {
- visibleComponent: 'DayView',
- }
-
- const showView = view => {
- this.setState({visibleComponent: view})
- }
-
- const makeActionButtons = actionButtonModule(showView)
-
- const symptomComponentNames = Object.keys(symptomComponents)
- this.cycleDayViews = symptomComponentNames.reduce((acc, curr) => {
- acc[curr] = React.createElement(
- symptomComponents[curr],
- {
- cycleDay: this.cycleDay,
- makeActionButtons
- }
- )
- return acc
- }, {})
-
- // DayView needs showView instead of makeActionButtons
- this.cycleDayViews.DayView = React.createElement(DayView, {
- cycleDay: this.cycleDay,
- showView
- })
- }
-
- render() {
- const cycleDayNumber = getCycleDayNumber(this.cycleDay.date)
- const fertilityStatus = getFertilityStatusStringForDay(this.cycleDay.date)
- return (
- <ScrollView>
- <View style={ styles.cycleDayDateView }>
- <Text style={styles.dateHeader}>
- {formatDateForViewHeader(this.cycleDay.date)}
- </Text>
- </View >
- <View style={ styles.cycleDayNumberView }>
- { cycleDayNumber &&
- <Text style={styles.cycleDayNumber} >
- Cycle day {cycleDayNumber}
- </Text> }
-
- <Text style={styles.cycleDayNumber} >
- {fertilityStatus}
- </Text>
- </View >
- <View>
- { this.cycleDayViews[this.state.visibleComponent] }
- </View >
- </ScrollView >
- )
- }
-}
diff --git a/components/cycle-day/labels/labels.js b/components/cycle-day/labels/labels.js
index ee88428f9eae95670ebf853af6ebafc85b4d33c7..fba3197f9149f912ce0041c7434c9c0151988378 100644
--- a/components/cycle-day/labels/labels.js
+++ b/components/cycle-day/labels/labels.js
@@ -1,7 +1,7 @@
export const bleeding = ['spotting', 'light', 'medium', 'heavy']
export const mucusFeeling = ['dry', 'nothing', 'wet', 'slippery']
export const mucusTexture = ['nothing', 'creamy', 'egg white']
-export const mucusNFP = ['t', 'Ø', 'f', 'S', '+S']
+export const mucusNFP = ['t', 'Ø', 'f', 'S', 'S+']
export const cervixOpening = ['closed', 'medium', 'open']
export const cervixFirmness = ['hard', 'soft']
export const cervixPosition = ['low', 'medium', 'high']
diff --git a/components/cycle-day/symptoms/action-button-footer.js b/components/cycle-day/symptoms/action-button-footer.js
new file mode 100644
index 0000000000000000000000000000000000000000..a1534964ea7cfeb0b7e651bdf5c590463b098acf
--- /dev/null
+++ b/components/cycle-day/symptoms/action-button-footer.js
@@ -0,0 +1,63 @@
+import React, { Component } from 'react'
+import {
+ View, TouchableOpacity, Text
+} from 'react-native'
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
+import { saveSymptom } from '../../../db'
+import styles, {iconStyles} from '../../../styles'
+
+export default class ActionButtonFooter extends Component {
+ render() {
+ const { symptom, cycleDay, saveAction, saveDisabled, navigate} = this.props
+ const navigateToOverView = () => navigate('CycleDay', {cycleDay})
+ const buttons = [
+ {
+ title: 'Cancel',
+ action: () => navigateToOverView(),
+ icon: 'cancel'
+ },
+ {
+ title: 'Delete',
+ action: () => {
+ saveSymptom(symptom, cycleDay)
+ navigateToOverView()
+ },
+ disabledCondition: !cycleDay[symptom],
+ icon: 'delete-outline'
+ }, {
+ title: 'Save',
+ action: () => {
+ saveAction()
+ navigateToOverView()
+ },
+ disabledCondition: saveDisabled,
+ icon: 'content-save-outline'
+ }
+ ]
+
+ return (
+ <View style={styles.menu}>
+ {buttons.map(({ title, action, disabledCondition, icon }, i) => {
+ const textStyle = disabledCondition ? styles.menuTextInActive : styles.menuText
+ const iconStyle = disabledCondition ?
+ Object.assign({}, iconStyles.menuIcon, iconStyles.menuIconInactive) :
+ iconStyles.menuIcon
+
+ return (
+ <TouchableOpacity
+ onPress={action}
+ style={styles.menuItem}
+ disabled={disabledCondition}
+ key={i.toString()}
+ >
+ <Icon name={icon} {...iconStyle} />
+ <Text style={textStyle}>
+ {title}
+ </Text>
+ </TouchableOpacity>
+ )
+ })}
+ </View>
+ )
+ }
+}
\ No newline at end of file
diff --git a/components/cycle-day/symptoms/bleeding.js b/components/cycle-day/symptoms/bleeding.js
index 7ec0574b924c6556d82239af59d20efbab21966f..bd24b9ebeec963fd2e6b7ecef93a47d4795aed8e 100644
--- a/components/cycle-day/symptoms/bleeding.js
+++ b/components/cycle-day/symptoms/bleeding.js
@@ -2,12 +2,14 @@ import React, { Component } from 'react'
import {
View,
Text,
- Switch
+ Switch,
+ ScrollView
} from 'react-native'
import RadioForm from 'react-native-simple-radio-button'
import styles from '../../../styles'
import { saveSymptom } from '../../../db'
import { bleeding as labels } from '../labels/labels'
+import ActionButtonFooter from './action-button-footer'
export default class Bleeding extends Component {
constructor(props) {
@@ -32,44 +34,44 @@ export default class Bleeding extends Component {
{ label: labels[3], value: 3 },
]
return (
- <View style={styles.symptomEditView}>
- <Text style={styles.symptomDayView}>Bleeding</Text>
- <View style={styles.radioButtonRow}>
- <RadioForm
- radio_props={bleedingRadioProps}
- initial={this.state.currentValue}
- formHorizontal={true}
- labelHorizontal={false}
- labelStyle={styles.radioButton}
- onPress={(itemValue) => {
- this.setState({ currentValue: itemValue })
- }}
- />
- </View>
- <View style={styles.symptomViewRowInline}>
- <Text style={styles.symptomDayView}>Exclude</Text>
- <Switch
- onValueChange={(val) => {
- this.setState({ exclude: val })
- }}
- value={this.state.exclude}
- />
- </View>
- <View style={styles.actionButtonRow}>
- {this.makeActionButtons(
- {
- symptom: 'bleeding',
- cycleDay: this.cycleDay,
- saveAction: () => {
- saveSymptom('bleeding', this.cycleDay, {
- value: this.state.currentValue,
- exclude: this.state.exclude
- })
- },
- saveDisabled: this.state.currentValue === -1
- }
- )}
- </View>
+ <View style={{ flex: 1 }}>
+ <ScrollView>
+ <View>
+ <View style={styles.radioButtonRow}>
+ <RadioForm
+ radio_props={bleedingRadioProps}
+ initial={this.state.currentValue}
+ formHorizontal={true}
+ labelHorizontal={false}
+ labelStyle={styles.radioButton}
+ onPress={(itemValue) => {
+ this.setState({ currentValue: itemValue })
+ }}
+ />
+ </View>
+ <View style={styles.symptomViewRowInline}>
+ <Text style={styles.symptomDayView}>Exclude</Text>
+ <Switch
+ onValueChange={(val) => {
+ this.setState({ exclude: val })
+ }}
+ value={this.state.exclude}
+ />
+ </View>
+ </View>
+ </ScrollView>
+ <ActionButtonFooter
+ symptom='bleeding'
+ cycleDay={this.props.cycleDay}
+ saveAction={() => {
+ saveSymptom('bleeding', this.props.cycleDay, {
+ value: this.state.currentValue,
+ exclude: this.state.exclude
+ })
+ }}
+ saveDisabled={this.state.currentValue === -1}
+ navigate={this.props.navigate}
+ />
</View>
)
}
diff --git a/components/cycle-day/symptoms/cervix.js b/components/cycle-day/symptoms/cervix.js
index 59d9d8b5c3e2acf449d547ef545238f0e3c49603..d1d8ba65ce0b8029b44cf74475d95c86444e419c 100644
--- a/components/cycle-day/symptoms/cervix.js
+++ b/components/cycle-day/symptoms/cervix.js
@@ -2,7 +2,8 @@ import React, { Component } from 'react'
import {
View,
Text,
- Switch
+ Switch,
+ ScrollView
} from 'react-native'
import RadioForm from 'react-native-simple-radio-button'
import styles from '../../../styles'
@@ -12,6 +13,7 @@ import {
cervixFirmness as firmnessLabels,
cervixPosition as positionLabels
} from '../labels/labels'
+import ActionButtonFooter from './action-button-footer'
export default class Cervix extends Component {
constructor(props) {
@@ -45,76 +47,76 @@ export default class Cervix extends Component {
const cervixPositionRadioProps = [
{label: positionLabels[0], value: 0 },
{label: positionLabels[1], value: 1 },
- {label: positionLabels[2], value: 2 }
+ { label: positionLabels[2], value: 2 }
]
- return(
- <View style={ styles.symptomEditView }>
- <Text style={styles.symptomDayView}>Cervix</Text>
- <Text style={styles.symptomDayView}>Opening</Text>
- <View style={styles.radioButtonRow}>
- <RadioForm
- radio_props={cervixOpeningRadioProps}
- initial={this.state.opening}
- formHorizontal={true}
- labelHorizontal={false}
- labelStyle={styles.radioButton}
- onPress={(itemValue) => {
- this.setState({opening: itemValue})
- }}
- />
- </View>
- <Text style={styles.symptomDayView}>Firmness</Text>
- <View style={styles.radioButtonRow}>
- <RadioForm
- radio_props={cervixFirmnessRadioProps}
- initial={this.state.firmness}
- formHorizontal={true}
- labelHorizontal={false}
- labelStyle={styles.radioButton}
- onPress={(itemValue) => {
- this.setState({firmness: itemValue})
- }}
- />
- </View>
- <Text style={styles.symptomDayView}>Position</Text>
- <View style={styles.radioButtonRow}>
- <RadioForm
- radio_props={cervixPositionRadioProps}
- initial={this.state.position}
- formHorizontal={true}
- labelHorizontal={false}
- labelStyle={styles.radioButton}
- onPress={(itemValue) => {
- this.setState({position: itemValue})
- }}
- />
- </View>
- <View style={styles.symptomViewRowInline}>
- <Text style={styles.symptomDayView}>Exclude</Text>
- <Switch
- onValueChange={(val) => {
- this.setState({ exclude: val })
- }}
- value={this.state.exclude}
- />
- </View>
- <View style={styles.actionButtonRow}>
- {this.makeActionButtons(
- {
- symptom: 'cervix',
- cycleDay: this.cycleDay,
- saveAction: () => {
- saveSymptom('cervix', this.cycleDay, {
- opening: this.state.opening,
- firmness: this.state.firmness,
- position: this.state.position,
- exclude: this.state.exclude
- })
- },
- saveDisabled: this.state.opening === -1 || this.state.firmness === -1
- }
- )}
- </View>
+ return (
+ <View style={{ flex: 1 }}>
+ <ScrollView>
+ <View>
+ <Text style={styles.symptomDayView}>Opening</Text>
+ <View style={styles.radioButtonRow}>
+ <RadioForm
+ radio_props={cervixOpeningRadioProps}
+ initial={this.state.opening}
+ formHorizontal={true}
+ labelHorizontal={false}
+ labelStyle={styles.radioButton}
+ onPress={(itemValue) => {
+ this.setState({ opening: itemValue })
+ }}
+ />
+ </View>
+ <Text style={styles.symptomDayView}>Firmness</Text>
+ <View style={styles.radioButtonRow}>
+ <RadioForm
+ radio_props={cervixFirmnessRadioProps}
+ initial={this.state.firmness}
+ formHorizontal={true}
+ labelHorizontal={false}
+ labelStyle={styles.radioButton}
+ onPress={(itemValue) => {
+ this.setState({ firmness: itemValue })
+ }}
+ />
+ </View>
+ <Text style={styles.symptomDayView}>Position</Text>
+ <View style={styles.radioButtonRow}>
+ <RadioForm
+ radio_props={cervixPositionRadioProps}
+ initial={this.state.position}
+ formHorizontal={true}
+ labelHorizontal={false}
+ labelStyle={styles.radioButton}
+ onPress={(itemValue) => {
+ this.setState({ position: itemValue })
+ }}
+ />
+ </View>
+ <View style={styles.symptomViewRowInline}>
+ <Text style={styles.symptomDayView}>Exclude</Text>
+ <Switch
+ onValueChange={(val) => {
+ this.setState({ exclude: val })
+ }}
+ value={this.state.exclude}
+ />
+ </View>
+ </View>
+ </ScrollView>
+ <ActionButtonFooter
+ symptom='cervix'
+ cycleDay={this.cycleDay}
+ saveAction={() => {
+ saveSymptom('cervix', this.cycleDay, {
+ opening: this.state.opening,
+ firmness: this.state.firmness,
+ position: this.state.position,
+ exclude: this.state.exclude
+ })
+ }}
+ saveDisabled={this.state.opening === -1 || this.state.firmness === -1}
+ navigate={this.props.navigate}
+ />
</View>
)
}
diff --git a/components/cycle-day/symptoms/desire.js b/components/cycle-day/symptoms/desire.js
index 58a7cebdd1bd3d5c4dbf88ac646f87a546c3850e..2dd6fc6aeeb49e67c51b6be079150c10fbd908e3 100644
--- a/components/cycle-day/symptoms/desire.js
+++ b/components/cycle-day/symptoms/desire.js
@@ -1,12 +1,13 @@
import React, { Component } from 'react'
import {
View,
- Text
+ ScrollView
} from 'react-native'
import RadioForm from 'react-native-simple-radio-button'
import styles from '../../../styles'
import { saveSymptom } from '../../../db'
import { intensity as labels } from '../labels/labels'
+import ActionButtonFooter from './action-button-footer'
export default class Desire extends Component {
constructor(props) {
@@ -27,32 +28,32 @@ export default class Desire extends Component {
{ label: labels[2], value: 2 }
]
return (
- <View style={styles.symptomEditView}>
- <Text style={styles.symptomDayView}>Desire</Text>
- <View style={styles.radioButtonRow}>
- <RadioForm
- radio_props={desireRadioProps}
- initial={this.state.currentValue}
- formHorizontal={true}
- labelHorizontal={false}
- labelStyle={styles.radioButton}
- onPress={(itemValue) => {
- this.setState({ currentValue: itemValue })
- }}
- />
- </View>
- <View style={styles.actionButtonRow}>
- {this.makeActionButtons(
- {
- symptom: 'desire',
- cycleDay: this.cycleDay,
- saveAction: () => {
- saveSymptom('desire', this.cycleDay, { value: this.state.currentValue })
- },
- saveDisabled: this.state.currentValue === -1
- }
- )}
- </View>
+ <View style={{ flex: 1 }}>
+ <ScrollView>
+ <View>
+ <View style={styles.radioButtonRow}>
+ <RadioForm
+ radio_props={desireRadioProps}
+ initial={this.state.currentValue}
+ formHorizontal={true}
+ labelHorizontal={false}
+ labelStyle={styles.radioButton}
+ onPress={(itemValue) => {
+ this.setState({ currentValue: itemValue })
+ }}
+ />
+ </View>
+ </View>
+ </ScrollView>
+ <ActionButtonFooter
+ symptom='desire'
+ cycleDay={this.cycleDay}
+ saveAction={() => {
+ saveSymptom('desire', this.cycleDay, { value: this.state.currentValue })
+ }}
+ saveDisabled={this.state.currentValue === -1}
+ navigate={this.props.navigate}
+ />
</View>
)
}
diff --git a/components/cycle-day/symptoms/index.js b/components/cycle-day/symptoms/index.js
index c3583df86348327d9dd3bdaa1d83975926d3694b..12622b73c88b75d29edba5def57ee217b355d28e 100644
--- a/components/cycle-day/symptoms/index.js
+++ b/components/cycle-day/symptoms/index.js
@@ -14,4 +14,4 @@ export default {
NoteEditView,
DesireEditView,
SexEditView
-}
+}
\ No newline at end of file
diff --git a/components/cycle-day/symptoms/mucus.js b/components/cycle-day/symptoms/mucus.js
index abafe5668255fa81da5c1467e62e334820fbd1a2..f846bfdab903d54875a3dbf66e9c224a23a8e278 100644
--- a/components/cycle-day/symptoms/mucus.js
+++ b/components/cycle-day/symptoms/mucus.js
@@ -2,7 +2,8 @@ import React, { Component } from 'react'
import {
View,
Text,
- Switch
+ Switch,
+ ScrollView
} from 'react-native'
import RadioForm from 'react-native-simple-radio-button'
import styles from '../../../styles'
@@ -12,6 +13,7 @@ import {
mucusTexture as textureLabels
} from '../labels/labels'
import computeSensiplanValue from '../../../lib/sensiplan-mucus'
+import ActionButtonFooter from './action-button-footer'
export default class Mucus extends Component {
@@ -31,78 +33,75 @@ export default class Mucus extends Component {
}
})
/* eslint-enable react/no-direct-mutation-state */
-
}
render() {
const mucusFeelingRadioProps = [
- {label: feelingLabels[0], value: 0 },
- {label: feelingLabels[1], value: 1 },
- {label: feelingLabels[2], value: 2 },
- {label: feelingLabels[3], value: 3 }
+ { label: feelingLabels[0], value: 0 },
+ { label: feelingLabels[1], value: 1 },
+ { label: feelingLabels[2], value: 2 },
+ { label: feelingLabels[3], value: 3 }
]
const mucusTextureRadioProps = [
- {label: textureLabels[0], value: 0 },
- {label: textureLabels[1], value: 1 },
- {label: textureLabels[2], value: 2 }
+ { label: textureLabels[0], value: 0 },
+ { label: textureLabels[1], value: 1 },
+ { label: textureLabels[2], value: 2 }
]
- return(
- <View style={ styles.symptomEditView }>
- <Text style={styles.symptomDayView}>Mucus</Text>
- <Text style={styles.symptomDayView}>Feeling</Text>
- <View style={styles.radioButtonRow}>
- <RadioForm
- radio_props={mucusFeelingRadioProps}
- initial={this.state.feeling}
- formHorizontal={true}
- labelHorizontal={false}
- labelStyle={styles.radioButton}
- onPress={(itemValue) => {
- this.setState({feeling: itemValue })
- }}
- />
- </View>
- <Text style={styles.symptomDayView}>Texture</Text>
- <View style={styles.radioButtonRow}>
- <RadioForm
- radio_props={mucusTextureRadioProps}
- initial={this.state.texture}
- formHorizontal={true}
- labelHorizontal={false}
- labelStyle={styles.radioButton}
- onPress={(itemValue) => {
- this.setState({texture: itemValue })
- }}
- />
- </View>
- <View style={styles.symptomViewRowInline}>
- <Text style={styles.symptomDayView}>Exclude</Text>
- <Switch
- onValueChange={(val) => {
- this.setState({ exclude: val })
- }}
- value={this.state.exclude}
- />
- </View>
-
- <View style={styles.actionButtonRow}>
- {this.makeActionButtons(
- {
- symptom: 'mucus',
- cycleDay: this.cycleDay,
- saveAction: () => {
- saveSymptom('mucus', this.cycleDay, {
- feeling: this.state.feeling,
- texture: this.state.texture,
- value: computeSensiplanValue(this.state.feeling, this.state.texture),
- exclude: this.state.exclude
- })
- },
- saveDisabled: this.state.feeling === -1 || this.state.texture === -1
- }
- )}
- </View>
-
+ return (
+ <View style={{ flex: 1 }}>
+ <ScrollView>
+ <View>
+ <Text style={styles.symptomDayView}>Feeling</Text>
+ <View style={styles.radioButtonRow}>
+ <RadioForm
+ radio_props={mucusFeelingRadioProps}
+ initial={this.state.feeling}
+ formHorizontal={true}
+ labelHorizontal={false}
+ labelStyle={styles.radioButton}
+ onPress={(itemValue) => {
+ this.setState({ feeling: itemValue })
+ }}
+ />
+ </View>
+ <Text style={styles.symptomDayView}>Texture</Text>
+ <View style={styles.radioButtonRow}>
+ <RadioForm
+ radio_props={mucusTextureRadioProps}
+ initial={this.state.texture}
+ formHorizontal={true}
+ labelHorizontal={false}
+ labelStyle={styles.radioButton}
+ onPress={(itemValue) => {
+ this.setState({ texture: itemValue })
+ }}
+ />
+ </View>
+ <View style={styles.symptomViewRowInline}>
+ <Text style={styles.symptomDayView}>Exclude</Text>
+ <Switch
+ onValueChange={(val) => {
+ this.setState({ exclude: val })
+ }}
+ value={this.state.exclude}
+ />
+ </View>
+ </View>
+ </ScrollView>
+ <ActionButtonFooter
+ symptom='mucus'
+ cycleDay={this.cycleDay}
+ saveAction={() => {
+ saveSymptom('mucus', this.cycleDay, {
+ feeling: this.state.feeling,
+ texture: this.state.texture,
+ value: computeSensiplanValue(this.state.feeling, this.state.texture),
+ exclude: this.state.exclude
+ })
+ }}
+ saveDisabled={this.state.feeling === -1 || this.state.texture === -1}
+ navigate={this.props.navigate}
+ />
</View>
)
}
diff --git a/components/cycle-day/symptoms/note.js b/components/cycle-day/symptoms/note.js
index 17966002184222f8c96152e54fa724b8f8aea9d2..6bf0cb63dc0a32677281de1d1508f09968700ee2 100644
--- a/components/cycle-day/symptoms/note.js
+++ b/components/cycle-day/symptoms/note.js
@@ -1,12 +1,13 @@
import React, { Component } from 'react'
import {
View,
- Text,
+ ScrollView,
TextInput,
} from 'react-native'
import styles from '../../../styles'
import { saveSymptom } from '../../../db'
+import ActionButtonFooter from './action-button-footer'
export default class Temp extends Component {
constructor(props) {
@@ -22,31 +23,31 @@ export default class Temp extends Component {
render() {
return (
- <View style={styles.symptomEditView}>
- <View style={styles.symptomViewRow}>
- <Text style={styles.symptomDayView}>Note</Text>
- <TextInput
- multiline={true}
- placeholder="Enter"
- onChangeText={(val) => {
- this.setState({ currentValue: val })
- }}
- value={this.state.currentValue}
- />
- </View>
- <View style={styles.actionButtonRow}>
- {this.makeActionButtons({
- symptom: 'note',
- cycleDay: this.cycleDay,
- saveAction: () => {
- saveSymptom('note', this.cycleDay, {
- value: this.state.currentValue
- })
- },
- saveDisabled: !this.state.currentValue
- })}
- </View>
+ <View style={{ flex: 1 }}>
+ <ScrollView>
+ <View style={styles.symptomViewRow}>
+ <TextInput
+ multiline={true}
+ placeholder="Enter"
+ onChangeText={(val) => {
+ this.setState({ currentValue: val })
+ }}
+ value={this.state.currentValue}
+ />
+ </View>
+ </ScrollView>
+ <ActionButtonFooter
+ symptom='note'
+ cycleDay={this.cycleDay}
+ saveAction={() => {
+ saveSymptom('note', this.cycleDay, {
+ value: this.state.currentValue
+ })
+ }}
+ saveDisabled={!this.state.currentValue}
+ navigate={this.props.navigate}
+ />
</View>
)
}
-}
+}
\ No newline at end of file
diff --git a/components/cycle-day/symptoms/sex.js b/components/cycle-day/symptoms/sex.js
index d9ec3366402edab57e054a993363cecca41d6ab0..2ca06eff057b941bd264e9c5fc83193414601883 100644
--- a/components/cycle-day/symptoms/sex.js
+++ b/components/cycle-day/symptoms/sex.js
@@ -3,7 +3,8 @@ import {
CheckBox,
Text,
TextInput,
- View
+ View,
+ ScrollView
} from 'react-native'
import styles from '../../../styles'
import { saveSymptom } from '../../../db'
@@ -11,13 +12,14 @@ import {
sexActivity as activityLabels,
contraceptives as contraceptiveLabels
} from '../labels/labels'
+import ActionButtonFooter from './action-button-footer'
export default class Sex extends Component {
constructor(props) {
super(props)
this.cycleDay = props.cycleDay
this.state = {}
- if (this.cycleDay.sex !== null ) {
+ if (this.cycleDay.sex !== null) {
Object.assign(this.state, this.cycleDay.sex)
// We make sure other is always true when there is a note,
// e.g. when import is messed up.
@@ -30,127 +32,127 @@ export default class Sex extends Component {
render() {
return (
- <View style={styles.symptomEditView}>
- <Text style={styles.symptomDayView}>SEX</Text>
- <View style={styles.symptomViewRowInline}>
- <Text style={styles.symptomDayView}>{activityLabels.solo}</Text>
- <CheckBox
- value={this.state.solo}
- onValueChange={(val) => {
- this.setState({solo: val})
- }}
- />
- <Text style={styles.symptomDayView}>{activityLabels.partner}</Text>
- <CheckBox
- value={this.state.partner}
- onValueChange={(val) => {
- this.setState({partner: val})
- }}
- />
- </View>
- <Text style={styles.symptomDayView}>CONTRACEPTIVES</Text>
- <View style={styles.symptomViewRowInline}>
- <Text style={styles.symptomDayView}>
- {contraceptiveLabels.condom}
- </Text>
- <CheckBox
- value={this.state.condom}
- onValueChange={(val) => {
- this.setState({condom: val})
- }}
- />
- <Text style={styles.symptomDayView}>
- {contraceptiveLabels.pill}
- </Text>
- <CheckBox
- value={this.state.pill}
- onValueChange={(val) => {
- this.setState({pill: val})
- }}
- />
- </View>
- <View style={styles.symptomViewRowInline}>
- <Text style={styles.symptomDayView}>
- {contraceptiveLabels.iud}
- </Text>
- <CheckBox
- value={this.state.iud}
- onValueChange={(val) => {
- this.setState({iud: val})
- }}
- />
- <Text style={styles.symptomDayView}>
- {contraceptiveLabels.patch}
- </Text>
- <CheckBox
- value={this.state.patch}
- onValueChange={(val) => {
- this.setState({patch: val})
- }}
- />
- </View>
- <View style={styles.symptomViewRowInline}>
- <Text style={styles.symptomDayView}>
- {contraceptiveLabels.ring}
- </Text>
- <CheckBox
- value={this.state.ring}
- onValueChange={(val) => {
- this.setState({ring: val})
- }}
- />
- <Text style={styles.symptomDayView}>
- {contraceptiveLabels.implant}
- </Text>
- <CheckBox
- value={this.state.implant}
- onValueChange={(val) => {
- this.setState({implant: val})
- }}
- />
- </View>
- <View style={styles.symptomViewRowInline}>
- <Text style={styles.symptomDayView}>
- {contraceptiveLabels.other}
- </Text>
- <CheckBox
- value={this.state.other}
- onValueChange={(val) => {
- this.setState({
- other: val,
- focusTextArea: true
- })
- }}
- />
- </View>
- { this.state.other &&
- <TextInput
- autoFocus={this.state.focusTextArea}
- multiline={true}
- placeholder="Enter"
- value={this.state.note}
- onChangeText={(val) => {
- this.setState({note: val})
- }}
- />
- }
- <View style={styles.actionButtonRow}>
- {this.props.makeActionButtons(
- {
- symptom: 'sex',
- cycleDay: this.cycleDay,
- saveAction: () => {
- const copyOfState = Object.assign({}, this.state)
- if (!copyOfState.other) {
- copyOfState.note = null
- }
- saveSymptom('sex', this.cycleDay, copyOfState)
- },
- saveDisabled: Object.values(this.state).every(value => !value)
+ <View style={{ flex: 1 }}>
+ <ScrollView>
+ <View>
+ <View style={styles.symptomViewRowInline}>
+ <Text style={styles.symptomDayView}>{activityLabels.solo}</Text>
+ <CheckBox
+ value={this.state.solo}
+ onValueChange={(val) => {
+ this.setState({ solo: val })
+ }}
+ />
+ <Text style={styles.symptomDayView}>{activityLabels.partner}</Text>
+ <CheckBox
+ value={this.state.partner}
+ onValueChange={(val) => {
+ this.setState({ partner: val })
+ }}
+ />
+ </View>
+ <Text style={styles.symptomDayView}>CONTRACEPTIVES</Text>
+ <View style={styles.symptomViewRowInline}>
+ <Text style={styles.symptomDayView}>
+ {contraceptiveLabels.condom}
+ </Text>
+ <CheckBox
+ value={this.state.condom}
+ onValueChange={(val) => {
+ this.setState({ condom: val })
+ }}
+ />
+ <Text style={styles.symptomDayView}>
+ {contraceptiveLabels.pill}
+ </Text>
+ <CheckBox
+ value={this.state.pill}
+ onValueChange={(val) => {
+ this.setState({ pill: val })
+ }}
+ />
+ </View>
+ <View style={styles.symptomViewRowInline}>
+ <Text style={styles.symptomDayView}>
+ {contraceptiveLabels.iud}
+ </Text>
+ <CheckBox
+ value={this.state.iud}
+ onValueChange={(val) => {
+ this.setState({ iud: val })
+ }}
+ />
+ <Text style={styles.symptomDayView}>
+ {contraceptiveLabels.patch}
+ </Text>
+ <CheckBox
+ value={this.state.patch}
+ onValueChange={(val) => {
+ this.setState({ patch: val })
+ }}
+ />
+ </View>
+ <View style={styles.symptomViewRowInline}>
+ <Text style={styles.symptomDayView}>
+ {contraceptiveLabels.ring}
+ </Text>
+ <CheckBox
+ value={this.state.ring}
+ onValueChange={(val) => {
+ this.setState({ ring: val })
+ }}
+ />
+ <Text style={styles.symptomDayView}>
+ {contraceptiveLabels.implant}
+ </Text>
+ <CheckBox
+ value={this.state.implant}
+ onValueChange={(val) => {
+ this.setState({ implant: val })
+ }}
+ />
+ </View>
+ <View style={styles.symptomViewRowInline}>
+ <Text style={styles.symptomDayView}>
+ {contraceptiveLabels.other}
+ </Text>
+ <CheckBox
+ value={this.state.other}
+ onValueChange={(val) => {
+ this.setState({
+ other: val,
+ focusTextArea: true
+ })
+ }}
+ />
+ </View>
+ {this.state.other &&
+ <TextInput
+ autoFocus={this.state.focusTextArea}
+ multiline={true}
+ placeholder="Enter"
+ value={this.state.note}
+ onChangeText={(val) => {
+ this.setState({ note: val })
+ }}
+ />
}
- )}
- </View>
+ </View>
+ </ScrollView>
+ <ActionButtonFooter
+ symptom='sex'
+ cycleDay={this.cycleDay}
+ saveAction={() => {
+ const copyOfState = Object.assign({}, this.state)
+ if (!copyOfState.other) {
+ copyOfState.note = null
+ }
+ saveSymptom('sex', this.cycleDay, copyOfState)
+ }}
+ saveDisabled={Object.values(this.state).every(value => !value)}
+ navigate={this.props.navigate}
+ />
</View>
)
}
-}
+}
\ No newline at end of file
diff --git a/components/cycle-day/symptoms/temperature.js b/components/cycle-day/symptoms/temperature.js
index 611f972c15d417599b2e68825126321054bae738..629f5b20b2ee627ac5cdd6c4e0661edb9ae44893 100644
--- a/components/cycle-day/symptoms/temperature.js
+++ b/components/cycle-day/symptoms/temperature.js
@@ -4,13 +4,15 @@ import {
Text,
TextInput,
Switch,
- Keyboard
+ Keyboard,
+ ScrollView
} from 'react-native'
import DateTimePicker from 'react-native-modal-datetime-picker-nevo'
import { getPreviousTemperature, saveSymptom } from '../../../db'
import styles from '../../../styles'
import { LocalTime, ChronoUnit } from 'js-joda'
+import ActionButtonFooter from './action-button-footer'
const MINUTES = ChronoUnit.MINUTES
@@ -40,71 +42,69 @@ export default class Temp extends Component {
}
render() {
- const cycleDay = this.cycleDay
return (
- <View style={styles.symptomEditView}>
- <View style={styles.symptomViewRowInline}>
- <Text style={styles.symptomDayView}>Temperature (°C)</Text>
- <TextInput
- style={styles.temperatureTextInput}
- placeholder="Enter"
- onChangeText={(val) => {
- this.setState({ currentValue: val })
- }}
- keyboardType='numeric'
- value={this.state.currentValue}
- />
- </View>
- <View style={styles.symptomViewRowInline}>
- <Text style={styles.symptomDayView}>Time</Text>
- <TextInput
- style={styles.temperatureTextInput}
- onFocus={() => {
- Keyboard.dismiss()
- this.setState({isTimePickerVisible: true})
- }}
- value={this.state.time}
- />
- </View>
- <DateTimePicker
- mode="time"
- isVisible={this.state.isTimePickerVisible}
- onConfirm={jsDate => {
- let hours = jsDate.getHours()
- if (hours < 10) hours = `0${hours}`
- let minutes = jsDate.getMinutes()
- if (minutes < 10) minutes = `0${minutes}`
- this.setState({
- time: `${hours}:${minutes}`,
- isTimePickerVisible: false
- })
+ <View style={{ flex: 1 }}>
+ <ScrollView>
+ <View>
+ <View style={styles.symptomViewRowInline}>
+ <Text style={styles.symptomDayView}>Temperature (°C)</Text>
+ <TextInput
+ style={styles.temperatureTextInput}
+ placeholder="Enter"
+ onChangeText={(val) => {
+ this.setState({ currentValue: val })
+ }}
+ keyboardType='numeric'
+ value={this.state.currentValue}
+ />
+ </View>
+ <View style={styles.symptomViewRowInline}>
+ <Text style={styles.symptomDayView}>Time</Text>
+ <TextInput
+ style={styles.temperatureTextInput}
+ onFocus={() => {
+ Keyboard.dismiss()
+ this.setState({ isTimePickerVisible: true })
+ }}
+ value={this.state.time}
+ />
+ </View>
+ <DateTimePicker
+ mode="time"
+ isVisible={this.state.isTimePickerVisible}
+ onConfirm={jsDate => {
+ this.setState({
+ time: `${jsDate.getHours()}:${jsDate.getMinutes()}`,
+ isTimePickerVisible: false
+ })
+ }}
+ onCancel={() => this.setState({ isTimePickerVisible: false })}
+ />
+ <View style={styles.symptomViewRowInline}>
+ <Text style={styles.symptomDayView}>Exclude</Text>
+ <Switch
+ onValueChange={(val) => {
+ this.setState({ exclude: val })
+ }}
+ value={this.state.exclude}
+ />
+ </View>
+ </View>
+ </ScrollView>
+ <ActionButtonFooter
+ symptom='temperature'
+ cycleDay={this.cycleDay}
+ saveAction={() => {
+ const dataToSave = {
+ value: Number(this.state.currentValue),
+ exclude: this.state.exclude,
+ time: this.state.time
+ }
+ saveSymptom('temperature', this.props.cycleDay, dataToSave)
}}
- onCancel={() => this.setState({isTimePickerVisible: false})}
+ saveDisabled={this.state.currentValue === '' || isInvalidTime(this.state.time)}
+ navigate={this.props.navigate}
/>
- <View style={styles.symptomViewRowInline}>
- <Text style={styles.symptomDayView}>Exclude</Text>
- <Switch
- onValueChange={(val) => {
- this.setState({ exclude: val })
- }}
- value={this.state.exclude}
- />
- </View>
- <View style={styles.actionButtonRow}>
- {this.makeActionButtons({
- symptom: 'temperature',
- cycleDay: this.cycleDay,
- saveAction: () => {
- const dataToSave = {
- value: Number(this.state.currentValue),
- exclude: this.state.exclude,
- time: this.state.time
- }
- saveSymptom('temperature', cycleDay, dataToSave)
- },
- saveDisabled: this.state.currentValue === '' || isInvalidTime(this.state.time)
- })}
- </View>
</View>
)
}
diff --git a/components/header.js b/components/header.js
new file mode 100644
index 0000000000000000000000000000000000000000..a4d34145445e63a65fdfa1dae0b5c9d4ef858970
--- /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.isCycleDayOverView ?
+ <View style={[styles.header, styles.headerCycleDay]}>
+ <Icon
+ name='arrow-left-drop-circle'
+ {...iconStyles.navigationArrow}
+ onPress={() => this.props.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.props.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 5381e3bec357118f78f6edf27f862d0e2973a405..2962492d7678bfa58b348b11dd85dd9afe1774fe 100644
--- a/components/home.js
+++ b/components/home.js
@@ -41,7 +41,7 @@ export default class Home extends Component {
passTodayToDayView() {
const todayDateString = LocalDate.now().toString()
const cycleDay = getOrCreateCycleDay(todayDateString)
- const navigate = this.props.navigation.navigate
+ const navigate = this.props.navigate
navigate('CycleDay', { cycleDay })
}
diff --git a/components/labels.js b/components/labels.js
index af88ef8a31d609a869144335df34adb830c60c31..4e69a95241cc23da57dc203df51cbd4757cd3c29 100644
--- a/components/labels.js
+++ b/components/labels.js
@@ -32,6 +32,21 @@ export const settings = {
}
}
+export const headerTitles = {
+ Home: 'Home',
+ Calendar: 'Calendar',
+ Chart: 'Chart',
+ Stats: 'Statistics',
+ Settings: 'Settings',
+ BleedingEditView: 'Bleeding',
+ TemperatureEditView: 'Temperature',
+ MucusEditView: 'Mucus',
+ CervixEditView: 'Cervix',
+ NoteEditView: 'Note',
+ DesireEditView: 'Desire',
+ SexEditView: 'Sex'
+}
+
export const stats = {
emptyStats: 'At least one completed cycle is needed to present you with stats here.',
oneCycleStats: (number) => `You have documented one cycle of ${number} days.`,
diff --git a/components/menu.js b/components/menu.js
new file mode 100644
index 0000000000000000000000000000000000000000..8a5518774db8bfb2e15ba652c5af17ab2779ac1c
--- /dev/null
+++ b/components/menu.js
@@ -0,0 +1,43 @@
+import React, { Component } from 'react'
+import {
+ View,
+ Text,
+ TouchableOpacity
+} from 'react-native'
+import styles, { iconStyles } from '../styles'
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
+
+export default class Menu extends Component {
+ makeMenuItem({ title, icon, onPress}, i) {
+ return (
+ <TouchableOpacity
+ onPress={onPress}
+ style={styles.menuItem}
+ key={i.toString()}
+ >
+ <Icon name={icon} {...iconStyles.menuIcon} />
+ <Text style={styles.menuText}>
+ {title}
+ </Text>
+ </TouchableOpacity>
+ )
+ }
+
+ goTo(componentName) {
+ this.props.navigate(componentName)
+ }
+
+ render() {
+ return (
+ <View style={styles.menu}>
+ {[
+ { title: 'Home', icon: 'home', onPress: () => this.goTo('Home') },
+ { title: 'Calendar', icon: 'calendar-range', onPress: () => this.goTo('Calendar') },
+ { title: 'Chart', icon: 'chart-line', onPress: () => this.goTo('Chart') },
+ { title: 'Stats', icon: 'chart-pie', onPress: () => this.goTo('Stats') },
+ { title: 'Settings', icon: 'settings', onPress: () => this.goTo('Settings') },
+ ].map(this.makeMenuItem.bind(this))}
+ </View >
+ )
+ }
+}
diff --git a/index.js b/index.js
index 408a2f0a4f5c4eca1c780a50f05b467785c97608..25e2616636a3d34fa039d3c945d85e78e560efef 100644
--- a/index.js
+++ b/index.js
@@ -1,4 +1,4 @@
import { AppRegistry } from 'react-native'
-import App from './app'
+import App from './components/app'
AppRegistry.registerComponent('home', () => App)
\ No newline at end of file
diff --git a/styles/index.js b/styles/index.js
index 6e924207d24633400b872e9984e4e25cdef26063..6e14c9fc1fa692fc69de5832aff75037eccc4f80 100644
--- a/styles/index.js
+++ b/styles/index.js
@@ -1,10 +1,10 @@
import { StyleSheet } from 'react-native'
+export const primaryColor = '#ff7e5f'
+export const secondaryColor = '#351c4d'
+export const fontOnPrimaryColor = 'white'
+
export default StyleSheet.create({
- container: {
- justifyContent: 'center',
- alignItems: 'center'
- },
welcome: {
fontSize: 20,
margin: 30,
@@ -12,31 +12,72 @@ export default StyleSheet.create({
textAlignVertical: 'center'
},
dateHeader: {
- fontSize: 20,
+ fontSize: 18,
fontWeight: 'bold',
- margin: 15,
- color: 'white',
+ color: fontOnPrimaryColor,
textAlign: 'center',
- textAlignVertical: 'center'
},
cycleDayNumber: {
- fontSize: 18,
+ fontSize: 15,
+ color: fontOnPrimaryColor,
textAlign: 'center',
- textAlignVertical: 'center'
+ marginLeft: 15
},
symptomDayView: {
fontSize: 20,
textAlignVertical: 'center'
},
+ symptomBoxImage: {
+ width: 50,
+ height: 50
+ },
radioButton: {
fontSize: 18,
margin: 8,
textAlign: 'center',
textAlignVertical: 'center'
},
- symptomEditView: {
- justifyContent: 'space-between',
- marginHorizontal: 15
+ symptomBoxesView: {
+ flexDirection: 'row',
+ flexWrap: 'wrap',
+ justifyContent: 'space-evenly'
+ },
+ symptomBox: {
+ borderColor: secondaryColor,
+ borderStyle: 'solid',
+ borderWidth: 1,
+ borderTopLeftRadius: 10,
+ borderTopRightRadius: 10,
+ alignItems: 'center',
+ marginTop: '10%',
+ paddingVertical: '6%',
+ marginHorizontal: 1,
+ width: 110,
+ height: 80,
+ },
+ symptomBoxActive: {
+ backgroundColor: secondaryColor,
+ },
+ symptomTextActive: {
+ color: fontOnPrimaryColor
+ },
+ symptomDataBox: {
+ borderColor: secondaryColor,
+ borderStyle: 'solid',
+ borderLeftWidth: 1,
+ borderRightWidth: 1,
+ borderBottomWidth: 1,
+ borderBottomLeftRadius: 10,
+ borderBottomRightRadius: 10,
+ alignItems: 'center',
+ justifyContent: 'center',
+ padding: '3%',
+ marginHorizontal: 1,
+ width: 110,
+ height: 50,
+ },
+ symptomDataText: {
+ fontSize: 12
},
symptomEditRow: {
justifyContent: 'space-between',
@@ -49,16 +90,38 @@ export default StyleSheet.create({
alignItems: 'center',
height: 50
},
- cycleDayDateView: {
- justifyContent: 'center',
- backgroundColor: 'steelblue'
+ header: {
+ backgroundColor: primaryColor,
+ paddingVertical: 18,
+ paddingHorizontal: 15,
+ alignItems: 'center',
+ justifyContent: 'center'
},
- cycleDayNumberView: {
- justifyContent: 'center',
- backgroundColor: 'skyblue',
- marginBottom: 15,
+ menu: {
+ backgroundColor: primaryColor,
+ alignItems: 'center',
+ justifyContent: 'space-between',
+ flexDirection: 'row'
+ },
+ menuItem: {
+ alignItems: 'center',
+ flex: 1,
paddingVertical: 15
},
+ menuText: {
+ color: fontOnPrimaryColor
+ },
+ menuTextInActive: {
+ color: 'lightgrey'
+ },
+ headerCycleDay: {
+ flexDirection: 'row',
+ justifyContent: 'space-between'
+ },
+ navigationArrow: {
+ fontSize: 60,
+ color: fontOnPrimaryColor
+ },
homeButtons: {
marginHorizontal: 15
},
@@ -104,5 +167,29 @@ export default StyleSheet.create({
fontSize: 18,
textAlign: 'left',
textAlignVertical: 'center'
+ },
+ menuLabel: {
+ fontSize: 15,
+ color: fontOnPrimaryColor
+ },
+})
+
+export const iconStyles = {
+ navigationArrow: {
+ size: 45,
+ color: fontOnPrimaryColor
+ },
+ symptomBox: {
+ size: 40
+ },
+ symptomBoxActive: {
+ color: fontOnPrimaryColor
+ },
+ menuIcon: {
+ size: 20,
+ color: fontOnPrimaryColor
+ },
+ menuIconInactive: {
+ color: 'lightgrey'
}
-})
\ No newline at end of file
+}
\ No newline at end of file