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 da19f2cf22c7af6c5eb2e07830a1a5335d027b45..09bcf44978b77fcfd608b0d2acce2c7e9fff191b 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 { makeYAxisLabels, normalizeToScale, makeHorizontalGrid } from './y-axis'
@@ -20,7 +20,7 @@ export default class CycleChart extends Component {
<DayColumn
{...item}
index={index}
- navigate={this.props.navigation.navigate}
+ navigate={this.props.navigate}
/>
)
}
@@ -42,21 +42,23 @@ export default class CycleChart extends Component {
render() {
return (
- <View style={{ flexDirection: 'row', marginTop: 50 }}>
- <View {...styles.yAxis}>{makeYAxisLabels()}</View>
- {makeHorizontalGrid()}
- {<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 }}>
+ <View {...styles.yAxis}>{makeYAxisLabels()}</View>
+ {makeHorizontalGrid()}
+ {<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/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 c2e185bde129a0a6df7faf90cf7081c548601abe..910e6c96650d30472861e4372a28c617299496e7 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 955fe16adedcfa74654ecfbb8c5e146c30bb04d3..fd3f905e04216184f7f661834377c6e9678dc322 100644
--- a/components/cycle-day/symptoms/temperature.js
+++ b/components/cycle-day/symptoms/temperature.js
@@ -5,7 +5,8 @@ import {
TextInput,
Switch,
Keyboard,
- Alert
+ Alert,
+ ScrollView
} from 'react-native'
import DateTimePicker from 'react-native-modal-datetime-picker-nevo'
@@ -15,6 +16,7 @@ import { LocalTime, ChronoUnit } from 'js-joda'
import { temperature as tempLabels } from '../labels/labels'
import { scaleObservable } from '../../../local-storage'
import { shared } from '../../labels'
+import ActionButtonFooter from './action-button-footer'
const minutes = ChronoUnit.MINUTES
@@ -50,64 +52,68 @@ export default class Temp extends Component {
render() {
return (
- <View style={styles.symptomEditView}>
- <View style={styles.symptomViewRowInline}>
- <Text style={styles.symptomDayView}>Temperature (°C)</Text>
- <TempInput
- value={this.state.temperature}
- setState={(val) => this.setState(val)}
- isSuggestion={this.state.isSuggestion}
- />
- </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
- })
+ <View style={{ flex: 1 }}>
+ <ScrollView>
+ <View>
+ <View style={styles.symptomViewRowInline}>
+ <Text style={styles.symptomDayView}>Temperature (°C)</Text>
+ <TempInput
+ value={this.state.temperature}
+ setState={(val) => this.setState(val)}
+ isSuggestion={this.state.isSuggestion}
+ />
+ </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.temperature),
+ exclude: this.state.exclude,
+ time: this.state.time
+ }
+ saveSymptom('temperature', this.cycleDay, dataToSave)
}}
- onCancel={() => this.setState({isTimePickerVisible: false})}
+ saveDisabled={
+ this.state.temperature === '' ||
+ isNaN(Number(this.state.temperature)) ||
+ 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: async () => {
- const dataToSave = {
- value: Number(this.state.temperature),
- exclude: this.state.exclude,
- time: this.state.time
- }
- saveSymptom('temperature', this.cycleDay, dataToSave)
- },
- saveDisabled:
- this.state.temperature === '' ||
- isNaN(Number(this.state.temperature)) ||
- 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 27cef6362981799dabc259e11434f8fd855fbd24..6abed863d5907595a08cd66b362fde478f7e2342 100644
--- a/components/labels.js
+++ b/components/labels.js
@@ -42,4 +42,30 @@ export const settings = {
loadError: 'Could not load saved temperature scale settings',
saveError: 'Could not save temperature scale 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.`,
+ getBasisOfStats: (numberOfCycles) => `Stats are based on ${numberOfCycles} completed cycles.`,
+ daysLabel: 'days',
+ averageLabel: 'Average cycle length',
+ minLabel: 'Shortest cycle',
+ maxLabel: 'Longest cycle',
+ stdLabel: 'Standard deviation'
}
\ No newline at end of file
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/components/stats.js b/components/stats.js
index 4021fdee0af44ab2fb229e565988014ba4a4d99f..f3f136c78b2cbf5da4238590a7f76dad7b979526 100644
--- a/components/stats.js
+++ b/components/stats.js
@@ -8,15 +8,50 @@ import { LocalDate, ChronoUnit } from 'js-joda'
import styles from '../styles/index'
import cycleModule from '../lib/cycle'
import getCycleInfo from '../lib/cycle-length'
+import {stats as labels} from './labels'
export default class Stats extends Component {
render() {
const allMensesStarts = cycleModule().getAllMensesStarts()
- const statsText = determineStatsText(allMensesStarts)
+ const atLeastOneCycle = allMensesStarts.length > 1
+ let cycleLengths
+ let numberOfCycles
+ let cycleInfo
+ if (atLeastOneCycle) {
+ cycleLengths = getCycleLength(allMensesStarts)
+ numberOfCycles = cycleLengths.length
+ if (numberOfCycles > 1) {
+ cycleInfo = getCycleInfo(cycleLengths)
+ }
+ }
return (
<ScrollView>
<View>
- <Text style={styles.stats}>{statsText}</Text>
+ {!atLeastOneCycle &&
+ <Text style={styles.statsIntro}>{labels.emptyStats}</Text>
+ }
+ {atLeastOneCycle && numberOfCycles === 1 &&
+ <Text style={styles.statsIntro}>{labels.oneCycleStats(cycleLengths[0])}</Text>
+ }
+ {atLeastOneCycle && numberOfCycles > 1 && <View>
+ <Text style={styles.statsIntro}>{labels.getBasisOfStats(numberOfCycles)}</Text>
+ <View style={styles.statsRow}>
+ <Text style={styles.statsLabelLeft}>{labels.averageLabel}</Text>
+ <Text style={styles.statsLabelRight}>{cycleInfo.mean + ' ' + labels.daysLabel}</Text>
+ </View>
+ <View style={styles.statsRow}>
+ <Text style={styles.statsLabelLeft}>{labels.minLabel}</Text>
+ <Text style={styles.statsLabelRight}>{cycleInfo.minimum + ' ' + labels.daysLabel}</Text>
+ </View>
+ <View style={styles.statsRow}>
+ <Text style={styles.statsLabelLeft}>{labels.maxLabel}</Text>
+ <Text style={styles.statsLabelRight}>{cycleInfo.maximum + ' ' + labels.daysLabel}</Text>
+ </View>
+ <View style={styles.statsRow}>
+ <Text style={styles.statsLabelLeft}>{labels.stdLabel}</Text>
+ <Text style={styles.statsLabelRight}>{cycleInfo.stdDeviation + ' ' + labels.daysLabel}</Text>
+ </View>
+ </View>}
</View>
</ScrollView>
)
@@ -31,21 +66,4 @@ function getCycleLength(cycleStartDates) {
cycleLengths.push(cycleStart.until(nextCycleStart, ChronoUnit.DAYS))
}
return cycleLengths
-}
-
-function determineStatsText(allMensesStarts) {
- const emptyStats = 'At least one completed cycle is needed to present you with stats here.'
- if (allMensesStarts.length < 2) {
- return emptyStats
- } else {
- const cycleLengths = getCycleLength(allMensesStarts)
- const numberOfCycles = cycleLengths.length
- if (numberOfCycles === 1) {
- return `You have documented one cycle of ${cycleLengths[0]} days.`
- }
- const cycleInfo = getCycleInfo(cycleLengths)
- const statsText = `Stats are based on ${numberOfCycles} completed cycles.\n\n\
- Average cycle length: ${cycleInfo.mean} days\n\nShortest cycle: ${cycleInfo.minimum} days\nLongest cycle: ${cycleInfo.maximum} days\nMedian length (meaning 50% of cycles are of this length or shorter): ${cycleInfo.median} days\nStandard deviation: ${cycleInfo.stdDeviation}`
- return statsText
- }
}
\ No newline at end of file
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/package-lock.json b/package-lock.json
index 2df2c48face86da72fa7e565c37fae6d18fabff8..9c136b0698ab5253985f05dbd76fa1c0b0b0b39a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3721,8 +3721,8 @@
"integrity": "sha512-z8H8/diyk76B7q5wg+Ud0+CqzcAF3mBBI/bA5ne5zrRUUIvNkJY//D3BqyH571KuAC4Nr7Rw7CjWX4r0y9DvNg==",
"optional": true,
"requires": {
- "nan": "^2.9.2",
- "node-pre-gyp": "^0.10.0"
+ "nan": "2.10.0",
+ "node-pre-gyp": "0.10.0"
},
"dependencies": {
"abbrev": {
@@ -3744,19 +3744,21 @@
"bundled": true,
"optional": true,
"requires": {
- "delegates": "^1.0.0",
- "readable-stream": "^2.0.6"
+ "delegates": "1.0.0",
+ "readable-stream": "2.3.6"
}
},
"balanced-match": {
"version": "1.0.0",
- "bundled": true
+ "bundled": true,
+ "optional": true
},
"brace-expansion": {
"version": "1.1.11",
"bundled": true,
+ "optional": true,
"requires": {
- "balanced-match": "^1.0.0",
+ "balanced-match": "1.0.0",
"concat-map": "0.0.1"
}
},
@@ -3767,15 +3769,18 @@
},
"code-point-at": {
"version": "1.1.0",
- "bundled": true
+ "bundled": true,
+ "optional": true
},
"concat-map": {
"version": "0.0.1",
- "bundled": true
+ "bundled": true,
+ "optional": true
},
"console-control-strings": {
"version": "1.1.0",
- "bundled": true
+ "bundled": true,
+ "optional": true
},
"core-util-is": {
"version": "1.0.2",
@@ -3810,7 +3815,7 @@
"bundled": true,
"optional": true,
"requires": {
- "minipass": "^2.2.1"
+ "minipass": "2.2.4"
}
},
"fs.realpath": {
@@ -3823,14 +3828,14 @@
"bundled": true,
"optional": true,
"requires": {
- "aproba": "^1.0.3",
- "console-control-strings": "^1.0.0",
- "has-unicode": "^2.0.0",
- "object-assign": "^4.1.0",
- "signal-exit": "^3.0.0",
- "string-width": "^1.0.1",
- "strip-ansi": "^3.0.1",
- "wide-align": "^1.1.0"
+ "aproba": "1.2.0",
+ "console-control-strings": "1.1.0",
+ "has-unicode": "2.0.1",
+ "object-assign": "4.1.1",
+ "signal-exit": "3.0.2",
+ "string-width": "1.0.2",
+ "strip-ansi": "3.0.1",
+ "wide-align": "1.1.2"
}
},
"glob": {
@@ -3838,12 +3843,12 @@
"bundled": true,
"optional": true,
"requires": {
- "fs.realpath": "^1.0.0",
- "inflight": "^1.0.4",
- "inherits": "2",
- "minimatch": "^3.0.4",
- "once": "^1.3.0",
- "path-is-absolute": "^1.0.0"
+ "fs.realpath": "1.0.0",
+ "inflight": "1.0.6",
+ "inherits": "2.0.3",
+ "minimatch": "3.0.4",
+ "once": "1.4.0",
+ "path-is-absolute": "1.0.1"
}
},
"has-unicode": {
@@ -3856,7 +3861,7 @@
"bundled": true,
"optional": true,
"requires": {
- "safer-buffer": "^2.1.0"
+ "safer-buffer": "2.1.2"
}
},
"ignore-walk": {
@@ -3864,7 +3869,7 @@
"bundled": true,
"optional": true,
"requires": {
- "minimatch": "^3.0.4"
+ "minimatch": "3.0.4"
}
},
"inflight": {
@@ -3872,13 +3877,14 @@
"bundled": true,
"optional": true,
"requires": {
- "once": "^1.3.0",
- "wrappy": "1"
+ "once": "1.4.0",
+ "wrappy": "1.0.2"
}
},
"inherits": {
"version": "2.0.3",
- "bundled": true
+ "bundled": true,
+ "optional": true
},
"ini": {
"version": "1.3.5",
@@ -3888,8 +3894,9 @@
"is-fullwidth-code-point": {
"version": "1.0.0",
"bundled": true,
+ "optional": true,
"requires": {
- "number-is-nan": "^1.0.0"
+ "number-is-nan": "1.0.1"
}
},
"isarray": {
@@ -3900,20 +3907,23 @@
"minimatch": {
"version": "3.0.4",
"bundled": true,
+ "optional": true,
"requires": {
- "brace-expansion": "^1.1.7"
+ "brace-expansion": "1.1.11"
}
},
"minimist": {
"version": "0.0.8",
- "bundled": true
+ "bundled": true,
+ "optional": true
},
"minipass": {
"version": "2.2.4",
"bundled": true,
+ "optional": true,
"requires": {
- "safe-buffer": "^5.1.1",
- "yallist": "^3.0.0"
+ "safe-buffer": "5.1.1",
+ "yallist": "3.0.2"
}
},
"minizlib": {
@@ -3921,12 +3931,13 @@
"bundled": true,
"optional": true,
"requires": {
- "minipass": "^2.2.1"
+ "minipass": "2.2.4"
}
},
"mkdirp": {
"version": "0.5.1",
"bundled": true,
+ "optional": true,
"requires": {
"minimist": "0.0.8"
}
@@ -3941,9 +3952,9 @@
"bundled": true,
"optional": true,
"requires": {
- "debug": "^2.1.2",
- "iconv-lite": "^0.4.4",
- "sax": "^1.2.4"
+ "debug": "2.6.9",
+ "iconv-lite": "0.4.21",
+ "sax": "1.2.4"
}
},
"node-pre-gyp": {
@@ -3951,16 +3962,16 @@
"bundled": true,
"optional": true,
"requires": {
- "detect-libc": "^1.0.2",
- "mkdirp": "^0.5.1",
- "needle": "^2.2.0",
- "nopt": "^4.0.1",
- "npm-packlist": "^1.1.6",
- "npmlog": "^4.0.2",
- "rc": "^1.1.7",
- "rimraf": "^2.6.1",
- "semver": "^5.3.0",
- "tar": "^4"
+ "detect-libc": "1.0.3",
+ "mkdirp": "0.5.1",
+ "needle": "2.2.0",
+ "nopt": "4.0.1",
+ "npm-packlist": "1.1.10",
+ "npmlog": "4.1.2",
+ "rc": "1.2.7",
+ "rimraf": "2.6.2",
+ "semver": "5.5.0",
+ "tar": "4.4.1"
}
},
"nopt": {
@@ -3968,8 +3979,8 @@
"bundled": true,
"optional": true,
"requires": {
- "abbrev": "1",
- "osenv": "^0.1.4"
+ "abbrev": "1.1.1",
+ "osenv": "0.1.5"
}
},
"npm-bundled": {
@@ -3982,8 +3993,8 @@
"bundled": true,
"optional": true,
"requires": {
- "ignore-walk": "^3.0.1",
- "npm-bundled": "^1.0.1"
+ "ignore-walk": "3.0.1",
+ "npm-bundled": "1.0.3"
}
},
"npmlog": {
@@ -3991,15 +4002,16 @@
"bundled": true,
"optional": true,
"requires": {
- "are-we-there-yet": "~1.1.2",
- "console-control-strings": "~1.1.0",
- "gauge": "~2.7.3",
- "set-blocking": "~2.0.0"
+ "are-we-there-yet": "1.1.4",
+ "console-control-strings": "1.1.0",
+ "gauge": "2.7.4",
+ "set-blocking": "2.0.0"
}
},
"number-is-nan": {
"version": "1.0.1",
- "bundled": true
+ "bundled": true,
+ "optional": true
},
"object-assign": {
"version": "4.1.1",
@@ -4009,8 +4021,9 @@
"once": {
"version": "1.4.0",
"bundled": true,
+ "optional": true,
"requires": {
- "wrappy": "1"
+ "wrappy": "1.0.2"
}
},
"os-homedir": {
@@ -4028,8 +4041,8 @@
"bundled": true,
"optional": true,
"requires": {
- "os-homedir": "^1.0.0",
- "os-tmpdir": "^1.0.0"
+ "os-homedir": "1.0.2",
+ "os-tmpdir": "1.0.2"
}
},
"path-is-absolute": {
@@ -4047,10 +4060,10 @@
"bundled": true,
"optional": true,
"requires": {
- "deep-extend": "^0.5.1",
- "ini": "~1.3.0",
- "minimist": "^1.2.0",
- "strip-json-comments": "~2.0.1"
+ "deep-extend": "0.5.1",
+ "ini": "1.3.5",
+ "minimist": "1.2.0",
+ "strip-json-comments": "2.0.1"
},
"dependencies": {
"minimist": {
@@ -4065,13 +4078,13 @@
"bundled": true,
"optional": true,
"requires": {
- "core-util-is": "~1.0.0",
- "inherits": "~2.0.3",
- "isarray": "~1.0.0",
- "process-nextick-args": "~2.0.0",
- "safe-buffer": "~5.1.1",
- "string_decoder": "~1.1.1",
- "util-deprecate": "~1.0.1"
+ "core-util-is": "1.0.2",
+ "inherits": "2.0.3",
+ "isarray": "1.0.0",
+ "process-nextick-args": "2.0.0",
+ "safe-buffer": "5.1.1",
+ "string_decoder": "1.1.1",
+ "util-deprecate": "1.0.2"
}
},
"rimraf": {
@@ -4079,7 +4092,7 @@
"bundled": true,
"optional": true,
"requires": {
- "glob": "^7.0.5"
+ "glob": "7.1.2"
}
},
"safe-buffer": {
@@ -4114,10 +4127,11 @@
"string-width": {
"version": "1.0.2",
"bundled": true,
+ "optional": true,
"requires": {
- "code-point-at": "^1.0.0",
- "is-fullwidth-code-point": "^1.0.0",
- "strip-ansi": "^3.0.0"
+ "code-point-at": "1.1.0",
+ "is-fullwidth-code-point": "1.0.0",
+ "strip-ansi": "3.0.1"
}
},
"string_decoder": {
@@ -4125,14 +4139,14 @@
"bundled": true,
"optional": true,
"requires": {
- "safe-buffer": "~5.1.0"
+ "safe-buffer": "5.1.1"
}
},
"strip-ansi": {
"version": "3.0.1",
"bundled": true,
"requires": {
- "ansi-regex": "^2.0.0"
+ "ansi-regex": "2.1.1"
}
},
"strip-json-comments": {
@@ -4145,13 +4159,13 @@
"bundled": true,
"optional": true,
"requires": {
- "chownr": "^1.0.1",
- "fs-minipass": "^1.2.5",
- "minipass": "^2.2.4",
- "minizlib": "^1.1.0",
- "mkdirp": "^0.5.0",
- "safe-buffer": "^5.1.1",
- "yallist": "^3.0.2"
+ "chownr": "1.0.1",
+ "fs-minipass": "1.2.5",
+ "minipass": "2.2.4",
+ "minizlib": "1.1.0",
+ "mkdirp": "0.5.1",
+ "safe-buffer": "5.1.1",
+ "yallist": "3.0.2"
}
},
"util-deprecate": {
@@ -4164,7 +4178,7 @@
"bundled": true,
"optional": true,
"requires": {
- "string-width": "^1.0.2"
+ "string-width": "1.0.2"
}
},
"wrappy": {
diff --git a/styles/index.js b/styles/index.js
index a8844b1ea92b24a8a591ab4fa9d5a519d808d8b9..2019b9c69894248ba50f7abb1a09e85739546db6 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
},
@@ -85,16 +148,16 @@ export default StyleSheet.create({
marginLeft: 'auto',
marginRight: 'auto'
},
- stats: {
+ statsIntro: {
fontSize: 18,
- margin: 30,
+ margin: 10,
textAlign: 'left',
textAlignVertical: 'center'
},
settingsSegment: {
backgroundColor: 'lightgrey',
padding: 10,
- marginTop: 10,
+ marginBottom: 10,
},
settingsSegmentTitle: {
fontWeight: 'bold'
@@ -108,7 +171,44 @@ export default StyleSheet.create({
settingsButtonText: {
color: 'white'
},
- warning: {
- color: 'red'
+ statsRow: {
+ flexDirection: 'row',
+ width: '100%'
+ },
+ statsLabelLeft: {
+ fontSize: 18,
+ width: '60%',
+ textAlign: 'left',
+ textAlignVertical: 'center',
+ marginLeft: 10
+ },
+ statsLabelRight: {
+ 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
diff --git a/test/cycle-length.spec.js b/test/cycle-length.spec.js
index 043cf96d34a355993549b1c400e99bb509645d63..ee05fcb54e70b86f9fa339babc0a8e8c39be8861 100644
--- a/test/cycle-length.spec.js
+++ b/test/cycle-length.spec.js
@@ -17,7 +17,7 @@ describe('getCycleLengthStats', () => {
stdDeviation: 53.06
}
expect(result).to.eql(expectedResult)
- })
+ }),
it('works for a simple even-numbered array', () => {
const cycleLengths = [4, 1, 15, 2, 20, 5]
@@ -30,7 +30,8 @@ describe('getCycleLengthStats', () => {
stdDeviation: 7.78
}
expect(result).to.eql(expectedResult)
- })
+ }),
+
it('works for an one-element array', () => {
const cycleLengths = [42]
const result = cycleInfo(cycleLengths)
@@ -42,20 +43,60 @@ describe('getCycleLengthStats', () => {
stdDeviation: null
}
expect(result).to.eql(expectedResult)
+ }),
+
+ describe('works for more realistic examples', () => {
+ it('1 day difference between shortest and longest period', () => {
+ const cycleLengths = [28, 29, 28, 28, 28, 29, 28, 28, 28, 29, 29, 28]
+ const result = cycleInfo(cycleLengths)
+ const expectedResult = {
+ minimum: 28,
+ maximum: 29,
+ mean: 28.33,
+ median: 28,
+ stdDeviation: 0.49
+ }
+ expect(result).to.eql(expectedResult)
+ }),
+ it('3 days difference between shortest and longest period', () => {
+ const cycleLengths = [28, 29, 28, 28, 27, 30, 28, 27, 28, 28, 29, 27]
+ const result = cycleInfo(cycleLengths)
+ const expectedResult = {
+ minimum: 27,
+ maximum: 30,
+ mean: 28.08,
+ median: 28,
+ stdDeviation: 0.90
+ }
+ expect(result).to.eql(expectedResult)
+ }),
+ it('8 days difference between shortest and longest period', () => {
+ const cycleLengths = [28, 32, 29, 27, 28, 26, 33, 28, 29, 34, 27, 29]
+ const result = cycleInfo(cycleLengths)
+ const expectedResult = {
+ minimum: 26,
+ maximum: 34,
+ mean: 29.17,
+ median: 28.5,
+ stdDeviation: 2.52
+ }
+ expect(result).to.eql(expectedResult)
+ })
})
+
describe('when args are wrong', () => {
it('throws when arg object is an empty array', () => {
const cycleLengths = []
expect(() => cycleInfo(cycleLengths).to.throw(AssertionError))
- })
+ }),
it('throws when arg object is not in right format', () => {
const wrongObject = { hello: 'world' }
expect(() => cycleInfo(wrongObject).to.throw(AssertionError))
- })
+ }),
it('throws when arg array contains a string', () => {
const wrongElement = [4, 1, 15, '2', 20, 5]
expect(() => cycleInfo(wrongElement).to.throw(AssertionError))
- })
+ }),
it('throws when arg array contains a NaN', () => {
const wrongElement = [4, 1, 15, NaN, 20, 5]
expect(() => cycleInfo(wrongElement).to.throw(AssertionError))
diff --git a/test/cycle.spec.js b/test/cycle.spec.js
index a0efa7d45cec8b562a0fac6d2df6c36c1ead3f75..3aa3462df7c2ede458588b62d4c31741e86f7b70 100644
--- a/test/cycle.spec.js
+++ b/test/cycle.spec.js
@@ -343,4 +343,82 @@ describe('getCycleForDay', () => {
},
])
})
+})
+
+describe('getAllMensesStart', () => {
+ it('works for one cycle start', () => {
+ const cycleDaysSortedByDate = [
+ {
+ date: '2018-05-01',
+ bleeding: { value: 1 }
+ }
+ ]
+
+ const { getAllMensesStarts } = cycleModule({
+ cycleDaysSortedByDate,
+ bleedingDaysSortedByDate: cycleDaysSortedByDate.filter(d => d.bleeding)
+ })
+ const result = getAllMensesStarts()
+ expect(result.length).to.eql(1)
+ expect(result).to.eql(['2018-05-01'])
+ }),
+ it('works for two cycle starts', () => {
+ const cycleDaysSortedByDate = [
+ {
+ date: '2018-06-02',
+ bleeding: { value: 2 }
+ },
+ {
+ date: '2018-06-01',
+ bleeding: { value: 2 }
+ },
+ {
+ date: '2018-05-01',
+ bleeding: { value: 2 }
+ }
+ ]
+
+ const { getAllMensesStarts } = cycleModule({
+ cycleDaysSortedByDate,
+ bleedingDaysSortedByDate: cycleDaysSortedByDate.filter(d => d.bleeding)
+ })
+ const result = getAllMensesStarts()
+ expect(result.length).to.eql(2)
+ expect(result).to.eql(['2018-06-01', '2018-05-01'])
+ }),
+ it('works for two cycle starts with excluded data', () => {
+ const cycleDaysSortedByDate = [
+ {
+ date: '2018-06-01',
+ bleeding: { value: 2 }
+ },
+ {
+ date: '2018-05-01',
+ bleeding: { value: 2 }
+ },
+ {
+ date: '2018-04-31',
+ bleeding: { value: 2 , exclude: true}
+ },
+ ]
+
+ const { getAllMensesStarts } = cycleModule({
+ cycleDaysSortedByDate,
+ bleedingDaysSortedByDate: cycleDaysSortedByDate.filter(d => d.bleeding)
+ })
+ const result = getAllMensesStarts()
+ expect(result.length).to.eql(2)
+ expect(result).to.eql(['2018-06-01', '2018-05-01'])
+ }),
+ it('returns an empty array if no bleeding days are given', () => {
+ const cycleDaysSortedByDate = [ {} ]
+
+ const { getAllMensesStarts } = cycleModule({
+ cycleDaysSortedByDate,
+ bleedingDaysSortedByDate: cycleDaysSortedByDate.filter(d => d.bleeding)
+ })
+ const result = getAllMensesStarts()
+ expect(result.length).to.eql(0)
+ expect(result).to.eql([])
+ })
})
\ No newline at end of file