lori/drip
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch '134-implement-design-for-day-overview' into 'master'

Browse Source 
Resolve "Implement design for day overview"

Closes #134

See merge request bloodyhealth/drip!54
This commit is contained in:
Julia Friesel
2018-08-22 12:19:16 +00:00
parent c6ea128c82 74041f7e32
commit b80c91cb46
24 changed files with 927 additions and 737 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app.js
-34
View File
@@ -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)
components/app.js
+64
View File
@@ -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>
)
}
}
components/calendar.js
+8 -11
View File
@@ -1,7 +1,5 @@
import React, { Component } from 'react' import React, { Component } from 'react'
import { View } from 'react-native'
import { CalendarList } from 'react-native-calendars' import { CalendarList } from 'react-native-calendars'
import * as styles from '../styles'
import { getOrCreateCycleDay, bleedingDaysSortedByDate } from '../db' import { getOrCreateCycleDay, bleedingDaysSortedByDate } from '../db'
export default class CalendarView extends Component { export default class CalendarView extends Component {
@@ -12,7 +10,8 @@ export default class CalendarView extends Component {
} }
this.setStateWithCalFormattedDays = (function (CalendarComponent) { this.setStateWithCalFormattedDays = (function (CalendarComponent) {
return function() { return function(_, changes) {
if (Object.values(changes).every(x => x && !x.length)) return
CalendarComponent.setState({ CalendarComponent.setState({
bleedingDaysInCalFormat: toCalFormat(bleedingDaysSortedByDate) bleedingDaysInCalFormat: toCalFormat(bleedingDaysSortedByDate)
}) })
@@ -28,19 +27,17 @@ export default class CalendarView extends Component {
passDateToDayView(result) { passDateToDayView(result) {
const cycleDay = getOrCreateCycleDay(result.dateString) const cycleDay = getOrCreateCycleDay(result.dateString)
const navigate = this.props.navigation.navigate const navigate = this.props.navigate
navigate('CycleDay', { cycleDay }) navigate('CycleDay', { cycleDay })
} }
render() { render() {
return ( return (
<View style={styles.container}> <CalendarList
<CalendarList onDayPress={this.passDateToDayView.bind(this)}
onDayPress={ this.passDateToDayView.bind(this) } markedDates={this.state.bleedingDaysInCalFormat}
markedDates = { this.state.bleedingDaysInCalFormat } markingType={'period'}
markingType = {'period'} />
/>
</View>
) )
} }
} }
components/chart/chart.js
+19 -17
View File
@@ -1,5 +1,5 @@
import React, { Component } from 'react' import React, { Component } from 'react'
import { View, FlatList } from 'react-native' import { View, FlatList, ScrollView } from 'react-native'
import range from 'date-range' import range from 'date-range'
import { LocalDate } from 'js-joda' import { LocalDate } from 'js-joda'
import { yAxis, normalizeToScale, horizontalGrid } from './y-axis' import { yAxis, normalizeToScale, horizontalGrid } from './y-axis'
@@ -21,7 +21,7 @@ export default class CycleChart extends Component {
<DayColumn <DayColumn
{...item} {...item}
index={index} index={index}
navigate={this.props.navigation.navigate} navigate={this.props.navigate}
/> />
) )
} }
@@ -41,21 +41,23 @@ export default class CycleChart extends Component {
render() { render() {
return ( return (
<View style={{ flexDirection: 'row', marginTop: 50 }}> <ScrollView>
{yAxisView} <View style={{ flexDirection: 'row', marginTop: 50 }}>
{horizontalGrid} {yAxisView}
{<FlatList {horizontalGrid}
horizontal={true} {<FlatList
inverted={true} horizontal={true}
showsHorizontalScrollIndicator={false} inverted={true}
data={this.state.columns} showsHorizontalScrollIndicator={false}
renderItem={this.renderColumn} data={this.state.columns}
keyExtractor={item => item.dateString} renderItem={this.renderColumn}
initialNumToRender={15} keyExtractor={item => item.dateString}
maxToRenderPerBatch={5} initialNumToRender={15}
> maxToRenderPerBatch={5}
</FlatList>} >
</View> </FlatList>}
</View>
</ScrollView>
) )
} }
} }
components/chart/day-column.js
+1 -1
View File
@@ -15,7 +15,7 @@ const label = styles.column.label
export default class DayColumn extends Component { export default class DayColumn extends Component {
passDateToDayView(dateString) { passDateToDayView(dateString) {
const cycleDay = getOrCreateCycleDay(dateString) const cycleDay = getOrCreateCycleDay(dateString)
this.props.navigate('cycleDay', { cycleDay }) this.props.navigate('CycleDay', { cycleDay })
} }
shouldComponentUpdate(newProps) { shouldComponentUpdate(newProps) {
components/cycle-day/action-buttons.js
-48
View File
@@ -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 >
)
})
}
}
components/cycle-day/cycle-day-overview.js
+139 -111
View File
@@ -1,10 +1,17 @@
import React, { Component } from 'react' import React, { Component } from 'react'
import { import {
ScrollView,
View, View,
Button, Text,
Text TouchableOpacity,
Dimensions
} from 'react-native' } 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 { import {
bleeding as bleedingLabels, bleeding as bleedingLabels,
mucusFeeling as feelingLabels, mucusFeeling as feelingLabels,
@@ -15,103 +22,83 @@ import {
cervixPosition as positionLabels, cervixPosition as positionLabels,
intensity as intensityLabels intensity as intensityLabels
} from './labels/labels' } from './labels/labels'
import cycleDayModule from '../../lib/cycle'
import { bleedingDaysSortedByDate } from '../../db'
const getCycleDayNumber = cycleDayModule().getCycleDayNumber export default class CycleDayOverView extends Component {
export default class DayView extends Component {
constructor(props) { constructor(props) {
super(props) super(props)
this.cycleDay = props.cycleDay
this.showView = props.showView
this.state = { 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)
} }
componentWillUnmount() { goToCycleDay(target) {
bleedingDaysSortedByDate.removeListener(this.setStateWithCycleDayNumber) 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) })
}
navigate(symptom) {
this.props.navigate(symptom, {
cycleDay: this.state.cycleDay,
})
} }
render() { render() {
const cycleDay = this.cycleDay const cycleDay = this.state.cycleDay
const getCycleDayNumber = cycleModule().getCycleDayNumber
const cycleDayNumber = getCycleDayNumber(cycleDay.date)
return ( return (
<View style={styles.symptomEditView}> <View style={{ flex: 1 }}>
<View style={styles.symptomViewRowInline}> <Header
<Text style={styles.symptomDayView}>Bleeding</Text> isCycleDayOverView={true}
<View style={styles.symptomEditButton}> cycleDayNumber={cycleDayNumber}
<Button date={cycleDay.date}
onPress={() => this.showView('BleedingEditView')} goToCycleDay={this.goToCycleDay.bind(this)}
title={getLabel('bleeding', cycleDay.bleeding)}> />
</Button> <ScrollView>
</View> <View style={styles.symptomBoxesView}>
</View> <SymptomBox
<View style={styles.symptomViewRowInline}> title='Bleeding'
<Text style={styles.symptomDayView}>Temperature</Text> onPress={() => this.navigate('BleedingEditView')}
<View style={styles.symptomEditButton}> data={getLabel('bleeding', cycleDay.bleeding)}
<Button />
onPress={() => this.showView('TemperatureEditView')} <SymptomBox
title={getLabel('temperature', cycleDay.temperature)}> title='Temperature'
</Button> onPress={() => this.navigate('TemperatureEditView')}
</View> data={getLabel('temperature', cycleDay.temperature)}
</View> />
<View style={ styles.symptomViewRowInline }> <SymptomBox
<Text style={styles.symptomDayView}>Mucus</Text> title='Mucus'
<View style={styles.symptomEditButton}> onPress={() => this.navigate('MucusEditView')}
<Button data={getLabel('mucus', cycleDay.mucus)}
onPress={() => this.showView('MucusEditView')} />
title={getLabel('mucus', cycleDay.mucus)}> <SymptomBox
</Button> title='Cervix'
</View> onPress={() => this.navigate('CervixEditView')}
</View> data={getLabel('cervix', cycleDay.cervix)}
<View style={styles.symptomViewRowInline}> />
<Text style={styles.symptomDayView}>Cervix</Text> <SymptomBox
<View style={styles.symptomEditButton}> title='Note'
<Button onPress={() => this.navigate('NoteEditView')}
onPress={() => this.showView('CervixEditView')} data={getLabel('note', cycleDay.note)}
title={getLabel('cervix', cycleDay.cervix)}> />
</Button> <SymptomBox
</View> title='Desire'
</View> onPress={() => this.navigate('DesireEditView')}
<View style={styles.symptomViewRowInline}> data={getLabel('desire', cycleDay.desire)}
<Text style={styles.symptomDayView}>Note</Text> />
<View style={styles.symptomEditButton}> <SymptomBox
<Button title='Sex'
onPress={() => this.showView('NoteEditView')} onPress={() => this.navigate('SexEditView')}
title={getLabel('note', cycleDay.note)} data={getLabel('sex', cycleDay.sex)}
> />
</Button> {/* this is just to make the last row adhere to the grid
</View> (and) because there are no pseudo properties in RN */}
</View> <FillerBoxes />
<View style={ styles.symptomViewRowInline }> </View >
<Text style={styles.symptomDayView}>Desire</Text> </ScrollView >
<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 > </View >
) )
} }
@@ -136,33 +123,28 @@ function getLabel(symptomName, symptom) {
} }
}, },
mucus: mucus => { mucus: mucus => {
if ( const categories = ['feeling', 'texture', 'value']
typeof mucus.feeling === 'number' && if (categories.every(c => typeof mucus[c] === 'number')) {
typeof mucus.texture === 'number' && let mucusLabel = [feelingLabels[mucus.feeling], textureLabels[mucus.texture]].join(', ')
typeof mucus.value === 'number' mucusLabel += `\n${computeSensiplanMucusLabels[mucus.value]}`
) { if (mucus.exclude) mucusLabel = `(${mucusLabel})`
let mucusLabel =
`${feelingLabels[mucus.feeling]} +
${textureLabels[mucus.texture]}
( ${computeSensiplanMucusLabels[mucus.value]} )`
if (mucus.exclude) mucusLabel = "( " + mucusLabel + " )"
return mucusLabel return mucusLabel
} }
}, },
cervix: cervix => { cervix: cervix => {
let cervixLabel = []
if (cervix.opening > -1 && cervix.firmness > -1) { if (cervix.opening > -1 && cervix.firmness > -1) {
let cervixLabel = cervixLabel.push(openingLabels[cervix.opening], firmnessLabels[cervix.firmness])
`${openingLabels[cervix.opening]} +
${firmnessLabels[cervix.firmness]}`
if (cervix.position > -1) { 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 return cervixLabel
} }
}, },
note: note => { note: note => {
return note.value.slice(0, 12) + '...' return note.value
}, },
desire: desire => { desire: desire => {
if (typeof desire.value === 'number') { if (typeof desire.value === 'number') {
@@ -171,18 +153,64 @@ function getLabel(symptomName, symptom) {
} }
}, },
sex: sex => { sex: sex => {
let sexLabel = '' const sexLabel = []
if ( sex.solo || sex.partner ) { if ( sex.solo || sex.partner ) {
sexLabel += 'Activity ' sexLabel.push('activity')
} }
if (sex.condom || sex.pill || sex.iud || if (sex.condom || sex.pill || sex.iud ||
sex.patch || sex.ring || sex.implant || sex.other) { sex.patch || sex.ring || sex.implant || sex.other) {
sexLabel += 'Contraceptive' sexLabel.push('contraceptive')
} }
return sexLabel ? sexLabel : 'edit' return sexLabel.join(', ')
} }
} }
if (!symptom) return 'edit' if (!symptom) return
return labels[symptomName](symptom) || 'edit' 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
}
} }
components/cycle-day/index.js
-77
View File
@@ -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 >
)
}
}
components/cycle-day/labels/labels.js
+1 -1
View File
@@ -1,7 +1,7 @@
export const bleeding = ['spotting', 'light', 'medium', 'heavy'] export const bleeding = ['spotting', 'light', 'medium', 'heavy']
export const mucusFeeling = ['dry', 'nothing', 'wet', 'slippery'] export const mucusFeeling = ['dry', 'nothing', 'wet', 'slippery']
export const mucusTexture = ['nothing', 'creamy', 'egg white'] 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 cervixOpening = ['closed', 'medium', 'open']
export const cervixFirmness = ['hard', 'soft'] export const cervixFirmness = ['hard', 'soft']
export const cervixPosition = ['low', 'medium', 'high'] export const cervixPosition = ['low', 'medium', 'high']
components/cycle-day/symptoms/action-button-footer.js
+63
View File
@@ -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>
)
}
}
components/cycle-day/symptoms/bleeding.js
+41 -39
View File
@@ -2,12 +2,14 @@ import React, { Component } from 'react'
import { import {
View, View,
Text, Text,
Switch Switch,
ScrollView
} from 'react-native' } from 'react-native'
import RadioForm from 'react-native-simple-radio-button' import RadioForm from 'react-native-simple-radio-button'
import styles from '../../../styles' import styles from '../../../styles'
import { saveSymptom } from '../../../db' import { saveSymptom } from '../../../db'
import { bleeding as labels } from '../labels/labels' import { bleeding as labels } from '../labels/labels'
import ActionButtonFooter from './action-button-footer'
export default class Bleeding extends Component { export default class Bleeding extends Component {
constructor(props) { constructor(props) {
@@ -32,44 +34,44 @@ export default class Bleeding extends Component {
{ label: labels[3], value: 3 }, { label: labels[3], value: 3 },
] ]
return ( return (
<View style={styles.symptomEditView}> <View style={{ flex: 1 }}>
<Text style={styles.symptomDayView}>Bleeding</Text> <ScrollView>
<View style={styles.radioButtonRow}> <View>
<RadioForm <View style={styles.radioButtonRow}>
radio_props={bleedingRadioProps} <RadioForm
initial={this.state.currentValue} radio_props={bleedingRadioProps}
formHorizontal={true} initial={this.state.currentValue}
labelHorizontal={false} formHorizontal={true}
labelStyle={styles.radioButton} labelHorizontal={false}
onPress={(itemValue) => { labelStyle={styles.radioButton}
this.setState({ currentValue: itemValue }) onPress={(itemValue) => {
}} this.setState({ currentValue: itemValue })
/> }}
</View> />
<View style={styles.symptomViewRowInline}> </View>
<Text style={styles.symptomDayView}>Exclude</Text> <View style={styles.symptomViewRowInline}>
<Switch <Text style={styles.symptomDayView}>Exclude</Text>
onValueChange={(val) => { <Switch
this.setState({ exclude: val }) onValueChange={(val) => {
}} this.setState({ exclude: val })
value={this.state.exclude} }}
/> value={this.state.exclude}
</View> />
<View style={styles.actionButtonRow}> </View>
{this.makeActionButtons( </View>
{ </ScrollView>
symptom: 'bleeding', <ActionButtonFooter
cycleDay: this.cycleDay, symptom='bleeding'
saveAction: () => { cycleDay={this.props.cycleDay}
saveSymptom('bleeding', this.cycleDay, { saveAction={() => {
value: this.state.currentValue, saveSymptom('bleeding', this.props.cycleDay, {
exclude: this.state.exclude value: this.state.currentValue,
}) exclude: this.state.exclude
}, })
saveDisabled: this.state.currentValue === -1 }}
} saveDisabled={this.state.currentValue === -1}
)} navigate={this.props.navigate}
</View> />
</View> </View>
) )
} }
components/cycle-day/symptoms/cervix.js
+72 -70
View File
@@ -2,7 +2,8 @@ import React, { Component } from 'react'
import { import {
View, View,
Text, Text,
Switch Switch,
ScrollView
} from 'react-native' } from 'react-native'
import RadioForm from 'react-native-simple-radio-button' import RadioForm from 'react-native-simple-radio-button'
import styles from '../../../styles' import styles from '../../../styles'
@@ -12,6 +13,7 @@ import {
cervixFirmness as firmnessLabels, cervixFirmness as firmnessLabels,
cervixPosition as positionLabels cervixPosition as positionLabels
} from '../labels/labels' } from '../labels/labels'
import ActionButtonFooter from './action-button-footer'
export default class Cervix extends Component { export default class Cervix extends Component {
constructor(props) { constructor(props) {
@@ -45,76 +47,76 @@ export default class Cervix extends Component {
const cervixPositionRadioProps = [ const cervixPositionRadioProps = [
{label: positionLabels[0], value: 0 }, {label: positionLabels[0], value: 0 },
{label: positionLabels[1], value: 1 }, {label: positionLabels[1], value: 1 },
{label: positionLabels[2], value: 2 } { label: positionLabels[2], value: 2 }
] ]
return( return (
<View style={ styles.symptomEditView }> <View style={{ flex: 1 }}>
<Text style={styles.symptomDayView}>Cervix</Text> <ScrollView>
<Text style={styles.symptomDayView}>Opening</Text> <View>
<View style={styles.radioButtonRow}> <Text style={styles.symptomDayView}>Opening</Text>
<RadioForm <View style={styles.radioButtonRow}>
radio_props={cervixOpeningRadioProps} <RadioForm
initial={this.state.opening} radio_props={cervixOpeningRadioProps}
formHorizontal={true} initial={this.state.opening}
labelHorizontal={false} formHorizontal={true}
labelStyle={styles.radioButton} labelHorizontal={false}
onPress={(itemValue) => { labelStyle={styles.radioButton}
this.setState({opening: itemValue}) onPress={(itemValue) => {
}} this.setState({ opening: itemValue })
/> }}
</View> />
<Text style={styles.symptomDayView}>Firmness</Text> </View>
<View style={styles.radioButtonRow}> <Text style={styles.symptomDayView}>Firmness</Text>
<RadioForm <View style={styles.radioButtonRow}>
radio_props={cervixFirmnessRadioProps} <RadioForm
initial={this.state.firmness} radio_props={cervixFirmnessRadioProps}
formHorizontal={true} initial={this.state.firmness}
labelHorizontal={false} formHorizontal={true}
labelStyle={styles.radioButton} labelHorizontal={false}
onPress={(itemValue) => { labelStyle={styles.radioButton}
this.setState({firmness: itemValue}) onPress={(itemValue) => {
}} this.setState({ firmness: itemValue })
/> }}
</View> />
<Text style={styles.symptomDayView}>Position</Text> </View>
<View style={styles.radioButtonRow}> <Text style={styles.symptomDayView}>Position</Text>
<RadioForm <View style={styles.radioButtonRow}>
radio_props={cervixPositionRadioProps} <RadioForm
initial={this.state.position} radio_props={cervixPositionRadioProps}
formHorizontal={true} initial={this.state.position}
labelHorizontal={false} formHorizontal={true}
labelStyle={styles.radioButton} labelHorizontal={false}
onPress={(itemValue) => { labelStyle={styles.radioButton}
this.setState({position: itemValue}) onPress={(itemValue) => {
}} this.setState({ position: itemValue })
/> }}
</View> />
<View style={styles.symptomViewRowInline}> </View>
<Text style={styles.symptomDayView}>Exclude</Text> <View style={styles.symptomViewRowInline}>
<Switch <Text style={styles.symptomDayView}>Exclude</Text>
onValueChange={(val) => { <Switch
this.setState({ exclude: val }) onValueChange={(val) => {
}} this.setState({ exclude: val })
value={this.state.exclude} }}
/> value={this.state.exclude}
</View> />
<View style={styles.actionButtonRow}> </View>
{this.makeActionButtons( </View>
{ </ScrollView>
symptom: 'cervix', <ActionButtonFooter
cycleDay: this.cycleDay, symptom='cervix'
saveAction: () => { cycleDay={this.cycleDay}
saveSymptom('cervix', this.cycleDay, { saveAction={() => {
opening: this.state.opening, saveSymptom('cervix', this.cycleDay, {
firmness: this.state.firmness, opening: this.state.opening,
position: this.state.position, firmness: this.state.firmness,
exclude: this.state.exclude position: this.state.position,
}) exclude: this.state.exclude
}, })
saveDisabled: this.state.opening === -1 || this.state.firmness === -1 }}
} saveDisabled={this.state.opening === -1 || this.state.firmness === -1}
)} navigate={this.props.navigate}
</View> />
</View> </View>
) )
} }
components/cycle-day/symptoms/desire.js
+28 -27
View File
@@ -1,12 +1,13 @@
import React, { Component } from 'react' import React, { Component } from 'react'
import { import {
View, View,
Text ScrollView
} from 'react-native' } from 'react-native'
import RadioForm from 'react-native-simple-radio-button' import RadioForm from 'react-native-simple-radio-button'
import styles from '../../../styles' import styles from '../../../styles'
import { saveSymptom } from '../../../db' import { saveSymptom } from '../../../db'
import { intensity as labels } from '../labels/labels' import { intensity as labels } from '../labels/labels'
import ActionButtonFooter from './action-button-footer'
export default class Desire extends Component { export default class Desire extends Component {
constructor(props) { constructor(props) {
@@ -27,32 +28,32 @@ export default class Desire extends Component {
{ label: labels[2], value: 2 } { label: labels[2], value: 2 }
] ]
return ( return (
<View style={styles.symptomEditView}> <View style={{ flex: 1 }}>
<Text style={styles.symptomDayView}>Desire</Text> <ScrollView>
<View style={styles.radioButtonRow}> <View>
<RadioForm <View style={styles.radioButtonRow}>
radio_props={desireRadioProps} <RadioForm
initial={this.state.currentValue} radio_props={desireRadioProps}
formHorizontal={true} initial={this.state.currentValue}
labelHorizontal={false} formHorizontal={true}
labelStyle={styles.radioButton} labelHorizontal={false}
onPress={(itemValue) => { labelStyle={styles.radioButton}
this.setState({ currentValue: itemValue }) onPress={(itemValue) => {
}} this.setState({ currentValue: itemValue })
/> }}
</View> />
<View style={styles.actionButtonRow}> </View>
{this.makeActionButtons( </View>
{ </ScrollView>
symptom: 'desire', <ActionButtonFooter
cycleDay: this.cycleDay, symptom='desire'
saveAction: () => { cycleDay={this.cycleDay}
saveSymptom('desire', this.cycleDay, { value: this.state.currentValue }) saveAction={() => {
}, saveSymptom('desire', this.cycleDay, { value: this.state.currentValue })
saveDisabled: this.state.currentValue === -1 }}
} saveDisabled={this.state.currentValue === -1}
)} navigate={this.props.navigate}
</View> />
</View> </View>
) )
} }
components/cycle-day/symptoms/mucus.js
+65 -66
View File
@@ -2,7 +2,8 @@ import React, { Component } from 'react'
import { import {
View, View,
Text, Text,
Switch Switch,
ScrollView
} from 'react-native' } from 'react-native'
import RadioForm from 'react-native-simple-radio-button' import RadioForm from 'react-native-simple-radio-button'
import styles from '../../../styles' import styles from '../../../styles'
@@ -12,6 +13,7 @@ import {
mucusTexture as textureLabels mucusTexture as textureLabels
} from '../labels/labels' } from '../labels/labels'
import computeSensiplanValue from '../../../lib/sensiplan-mucus' import computeSensiplanValue from '../../../lib/sensiplan-mucus'
import ActionButtonFooter from './action-button-footer'
export default class Mucus extends Component { export default class Mucus extends Component {
@@ -31,78 +33,75 @@ export default class Mucus extends Component {
} }
}) })
/* eslint-enable react/no-direct-mutation-state */ /* eslint-enable react/no-direct-mutation-state */
} }
render() { render() {
const mucusFeelingRadioProps = [ const mucusFeelingRadioProps = [
{label: feelingLabels[0], value: 0 }, { label: feelingLabels[0], value: 0 },
{label: feelingLabels[1], value: 1 }, { label: feelingLabels[1], value: 1 },
{label: feelingLabels[2], value: 2 }, { label: feelingLabels[2], value: 2 },
{label: feelingLabels[3], value: 3 } { label: feelingLabels[3], value: 3 }
] ]
const mucusTextureRadioProps = [ const mucusTextureRadioProps = [
{label: textureLabels[0], value: 0 }, { label: textureLabels[0], value: 0 },
{label: textureLabels[1], value: 1 }, { label: textureLabels[1], value: 1 },
{label: textureLabels[2], value: 2 } { label: textureLabels[2], value: 2 }
] ]
return( return (
<View style={ styles.symptomEditView }> <View style={{ flex: 1 }}>
<Text style={styles.symptomDayView}>Mucus</Text> <ScrollView>
<Text style={styles.symptomDayView}>Feeling</Text> <View>
<View style={styles.radioButtonRow}> <Text style={styles.symptomDayView}>Feeling</Text>
<RadioForm <View style={styles.radioButtonRow}>
radio_props={mucusFeelingRadioProps} <RadioForm
initial={this.state.feeling} radio_props={mucusFeelingRadioProps}
formHorizontal={true} initial={this.state.feeling}
labelHorizontal={false} formHorizontal={true}
labelStyle={styles.radioButton} labelHorizontal={false}
onPress={(itemValue) => { labelStyle={styles.radioButton}
this.setState({feeling: itemValue }) onPress={(itemValue) => {
}} this.setState({ feeling: itemValue })
/> }}
</View> />
<Text style={styles.symptomDayView}>Texture</Text> </View>
<View style={styles.radioButtonRow}> <Text style={styles.symptomDayView}>Texture</Text>
<RadioForm <View style={styles.radioButtonRow}>
radio_props={mucusTextureRadioProps} <RadioForm
initial={this.state.texture} radio_props={mucusTextureRadioProps}
formHorizontal={true} initial={this.state.texture}
labelHorizontal={false} formHorizontal={true}
labelStyle={styles.radioButton} labelHorizontal={false}
onPress={(itemValue) => { labelStyle={styles.radioButton}
this.setState({texture: itemValue }) onPress={(itemValue) => {
}} this.setState({ texture: itemValue })
/> }}
</View> />
<View style={styles.symptomViewRowInline}> </View>
<Text style={styles.symptomDayView}>Exclude</Text> <View style={styles.symptomViewRowInline}>
<Switch <Text style={styles.symptomDayView}>Exclude</Text>
onValueChange={(val) => { <Switch
this.setState({ exclude: val }) onValueChange={(val) => {
}} this.setState({ exclude: val })
value={this.state.exclude} }}
/> value={this.state.exclude}
</View> />
</View>
<View style={styles.actionButtonRow}> </View>
{this.makeActionButtons( </ScrollView>
{ <ActionButtonFooter
symptom: 'mucus', symptom='mucus'
cycleDay: this.cycleDay, cycleDay={this.cycleDay}
saveAction: () => { saveAction={() => {
saveSymptom('mucus', this.cycleDay, { saveSymptom('mucus', this.cycleDay, {
feeling: this.state.feeling, feeling: this.state.feeling,
texture: this.state.texture, texture: this.state.texture,
value: computeSensiplanValue(this.state.feeling, this.state.texture), value: computeSensiplanValue(this.state.feeling, this.state.texture),
exclude: this.state.exclude exclude: this.state.exclude
}) })
}, }}
saveDisabled: this.state.feeling === -1 || this.state.texture === -1 saveDisabled={this.state.feeling === -1 || this.state.texture === -1}
} navigate={this.props.navigate}
)} />
</View>
</View> </View>
) )
} }
components/cycle-day/symptoms/note.js
+26 -25
View File
@@ -1,12 +1,13 @@
import React, { Component } from 'react' import React, { Component } from 'react'
import { import {
View, View,
Text, ScrollView,
TextInput, TextInput,
} from 'react-native' } from 'react-native'
import styles from '../../../styles' import styles from '../../../styles'
import { saveSymptom } from '../../../db' import { saveSymptom } from '../../../db'
import ActionButtonFooter from './action-button-footer'
export default class Temp extends Component { export default class Temp extends Component {
constructor(props) { constructor(props) {
@@ -22,30 +23,30 @@ export default class Temp extends Component {
render() { render() {
return ( return (
<View style={styles.symptomEditView}> <View style={{ flex: 1 }}>
<View style={styles.symptomViewRow}> <ScrollView>
<Text style={styles.symptomDayView}>Note</Text> <View style={styles.symptomViewRow}>
<TextInput <TextInput
multiline={true} multiline={true}
placeholder="Enter" placeholder="Enter"
onChangeText={(val) => { onChangeText={(val) => {
this.setState({ currentValue: val }) this.setState({ currentValue: val })
}} }}
value={this.state.currentValue} value={this.state.currentValue}
/> />
</View> </View>
<View style={styles.actionButtonRow}> </ScrollView>
{this.makeActionButtons({ <ActionButtonFooter
symptom: 'note', symptom='note'
cycleDay: this.cycleDay, cycleDay={this.cycleDay}
saveAction: () => { saveAction={() => {
saveSymptom('note', this.cycleDay, { saveSymptom('note', this.cycleDay, {
value: this.state.currentValue value: this.state.currentValue
}) })
}, }}
saveDisabled: !this.state.currentValue saveDisabled={!this.state.currentValue}
})} navigate={this.props.navigate}
</View> />
</View> </View>
) )
} }
components/cycle-day/symptoms/sex.js
+123 -121
View File
@@ -3,7 +3,8 @@ import {
CheckBox, CheckBox,
Text, Text,
TextInput, TextInput,
View View,
ScrollView
} from 'react-native' } from 'react-native'
import styles from '../../../styles' import styles from '../../../styles'
import { saveSymptom } from '../../../db' import { saveSymptom } from '../../../db'
@@ -11,13 +12,14 @@ import {
sexActivity as activityLabels, sexActivity as activityLabels,
contraceptives as contraceptiveLabels contraceptives as contraceptiveLabels
} from '../labels/labels' } from '../labels/labels'
import ActionButtonFooter from './action-button-footer'
export default class Sex extends Component { export default class Sex extends Component {
constructor(props) { constructor(props) {
super(props) super(props)
this.cycleDay = props.cycleDay this.cycleDay = props.cycleDay
this.state = {} this.state = {}
if (this.cycleDay.sex !== null ) { if (this.cycleDay.sex !== null) {
Object.assign(this.state, this.cycleDay.sex) Object.assign(this.state, this.cycleDay.sex)
// We make sure other is always true when there is a note, // We make sure other is always true when there is a note,
// e.g. when import is messed up. // e.g. when import is messed up.
@@ -30,126 +32,126 @@ export default class Sex extends Component {
render() { render() {
return ( return (
<View style={styles.symptomEditView}> <View style={{ flex: 1 }}>
<Text style={styles.symptomDayView}>SEX</Text> <ScrollView>
<View style={styles.symptomViewRowInline}> <View>
<Text style={styles.symptomDayView}>{activityLabels.solo}</Text> <View style={styles.symptomViewRowInline}>
<CheckBox <Text style={styles.symptomDayView}>{activityLabels.solo}</Text>
value={this.state.solo} <CheckBox
onValueChange={(val) => { value={this.state.solo}
this.setState({solo: val}) onValueChange={(val) => {
}} this.setState({ solo: val })
/> }}
<Text style={styles.symptomDayView}>{activityLabels.partner}</Text> />
<CheckBox <Text style={styles.symptomDayView}>{activityLabels.partner}</Text>
value={this.state.partner} <CheckBox
onValueChange={(val) => { value={this.state.partner}
this.setState({partner: val}) onValueChange={(val) => {
}} this.setState({ partner: val })
/> }}
</View> />
<Text style={styles.symptomDayView}>CONTRACEPTIVES</Text> </View>
<View style={styles.symptomViewRowInline}> <Text style={styles.symptomDayView}>CONTRACEPTIVES</Text>
<Text style={styles.symptomDayView}> <View style={styles.symptomViewRowInline}>
{contraceptiveLabels.condom} <Text style={styles.symptomDayView}>
</Text> {contraceptiveLabels.condom}
<CheckBox </Text>
value={this.state.condom} <CheckBox
onValueChange={(val) => { value={this.state.condom}
this.setState({condom: val}) onValueChange={(val) => {
}} this.setState({ condom: val })
/> }}
<Text style={styles.symptomDayView}> />
{contraceptiveLabels.pill} <Text style={styles.symptomDayView}>
</Text> {contraceptiveLabels.pill}
<CheckBox </Text>
value={this.state.pill} <CheckBox
onValueChange={(val) => { value={this.state.pill}
this.setState({pill: val}) onValueChange={(val) => {
}} this.setState({ pill: val })
/> }}
</View> />
<View style={styles.symptomViewRowInline}> </View>
<Text style={styles.symptomDayView}> <View style={styles.symptomViewRowInline}>
{contraceptiveLabels.iud} <Text style={styles.symptomDayView}>
</Text> {contraceptiveLabels.iud}
<CheckBox </Text>
value={this.state.iud} <CheckBox
onValueChange={(val) => { value={this.state.iud}
this.setState({iud: val}) onValueChange={(val) => {
}} this.setState({ iud: val })
/> }}
<Text style={styles.symptomDayView}> />
{contraceptiveLabels.patch} <Text style={styles.symptomDayView}>
</Text> {contraceptiveLabels.patch}
<CheckBox </Text>
value={this.state.patch} <CheckBox
onValueChange={(val) => { value={this.state.patch}
this.setState({patch: val}) onValueChange={(val) => {
}} this.setState({ patch: val })
/> }}
</View> />
<View style={styles.symptomViewRowInline}> </View>
<Text style={styles.symptomDayView}> <View style={styles.symptomViewRowInline}>
{contraceptiveLabels.ring} <Text style={styles.symptomDayView}>
</Text> {contraceptiveLabels.ring}
<CheckBox </Text>
value={this.state.ring} <CheckBox
onValueChange={(val) => { value={this.state.ring}
this.setState({ring: val}) onValueChange={(val) => {
}} this.setState({ ring: val })
/> }}
<Text style={styles.symptomDayView}> />
{contraceptiveLabels.implant} <Text style={styles.symptomDayView}>
</Text> {contraceptiveLabels.implant}
<CheckBox </Text>
value={this.state.implant} <CheckBox
onValueChange={(val) => { value={this.state.implant}
this.setState({implant: val}) onValueChange={(val) => {
}} this.setState({ implant: val })
/> }}
</View> />
<View style={styles.symptomViewRowInline}> </View>
<Text style={styles.symptomDayView}> <View style={styles.symptomViewRowInline}>
{contraceptiveLabels.other} <Text style={styles.symptomDayView}>
</Text> {contraceptiveLabels.other}
<CheckBox </Text>
value={this.state.other} <CheckBox
onValueChange={(val) => { value={this.state.other}
this.setState({ onValueChange={(val) => {
other: val, this.setState({
focusTextArea: true other: val,
}) focusTextArea: true
}} })
/> }}
</View> />
{ this.state.other && </View>
<TextInput {this.state.other &&
autoFocus={this.state.focusTextArea} <TextInput
multiline={true} autoFocus={this.state.focusTextArea}
placeholder="Enter" multiline={true}
value={this.state.note} placeholder="Enter"
onChangeText={(val) => { value={this.state.note}
this.setState({note: val}) 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>
</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> </View>
) )
} }
components/cycle-day/symptoms/temperature.js
+63 -63
View File
@@ -4,13 +4,15 @@ import {
Text, Text,
TextInput, TextInput,
Switch, Switch,
Keyboard Keyboard,
ScrollView
} from 'react-native' } from 'react-native'
import DateTimePicker from 'react-native-modal-datetime-picker-nevo' import DateTimePicker from 'react-native-modal-datetime-picker-nevo'
import { getPreviousTemperature, saveSymptom } from '../../../db' import { getPreviousTemperature, saveSymptom } from '../../../db'
import styles from '../../../styles' import styles from '../../../styles'
import { LocalTime, ChronoUnit } from 'js-joda' import { LocalTime, ChronoUnit } from 'js-joda'
import ActionButtonFooter from './action-button-footer'
const MINUTES = ChronoUnit.MINUTES const MINUTES = ChronoUnit.MINUTES
@@ -40,71 +42,69 @@ export default class Temp extends Component {
} }
render() { render() {
const cycleDay = this.cycleDay
return ( return (
<View style={styles.symptomEditView}> <View style={{ flex: 1 }}>
<View style={styles.symptomViewRowInline}> <ScrollView>
<Text style={styles.symptomDayView}>Temperature (°C)</Text> <View>
<TextInput <View style={styles.symptomViewRowInline}>
style={styles.temperatureTextInput} <Text style={styles.symptomDayView}>Temperature (°C)</Text>
placeholder="Enter" <TextInput
onChangeText={(val) => { style={styles.temperatureTextInput}
this.setState({ currentValue: val }) placeholder="Enter"
}} onChangeText={(val) => {
keyboardType='numeric' this.setState({ currentValue: val })
value={this.state.currentValue} }}
/> keyboardType='numeric'
</View> value={this.state.currentValue}
<View style={styles.symptomViewRowInline}> />
<Text style={styles.symptomDayView}>Time</Text> </View>
<TextInput <View style={styles.symptomViewRowInline}>
style={styles.temperatureTextInput} <Text style={styles.symptomDayView}>Time</Text>
onFocus={() => { <TextInput
Keyboard.dismiss() style={styles.temperatureTextInput}
this.setState({isTimePickerVisible: true}) onFocus={() => {
}} Keyboard.dismiss()
value={this.state.time} this.setState({ isTimePickerVisible: true })
/> }}
</View> value={this.state.time}
<DateTimePicker />
mode="time" </View>
isVisible={this.state.isTimePickerVisible} <DateTimePicker
onConfirm={jsDate => { mode="time"
let hours = jsDate.getHours() isVisible={this.state.isTimePickerVisible}
if (hours < 10) hours = `0${hours}` onConfirm={jsDate => {
let minutes = jsDate.getMinutes() this.setState({
if (minutes < 10) minutes = `0${minutes}` time: `${jsDate.getHours()}:${jsDate.getMinutes()}`,
this.setState({ isTimePickerVisible: false
time: `${hours}:${minutes}`, })
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> </View>
) )
} }
components/header.js
+43
View File
@@ -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 >
)
}
}
components/home.js
+1 -1
View File
@@ -41,7 +41,7 @@ export default class Home extends Component {
passTodayToDayView() { passTodayToDayView() {
const todayDateString = LocalDate.now().toString() const todayDateString = LocalDate.now().toString()
const cycleDay = getOrCreateCycleDay(todayDateString) const cycleDay = getOrCreateCycleDay(todayDateString)
const navigate = this.props.navigation.navigate const navigate = this.props.navigate
navigate('CycleDay', { cycleDay }) navigate('CycleDay', { cycleDay })
} }
components/labels.js
+15
View File
@@ -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 = { export const stats = {
emptyStats: 'At least one completed cycle is needed to present you with stats here.', emptyStats: 'At least one completed cycle is needed to present you with stats here.',
oneCycleStats: (number) => `You have documented one cycle of ${number} days.`, oneCycleStats: (number) => `You have documented one cycle of ${number} days.`,
components/menu.js
+43
View File
@@ -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 >
)
}
}
index.js
+1 -1
View File
@@ -1,4 +1,4 @@
import { AppRegistry } from 'react-native' import { AppRegistry } from 'react-native'
import App from './app' import App from './components/app'
AppRegistry.registerComponent('home', () => App) AppRegistry.registerComponent('home', () => App)
styles/index.js
+108 -21
View File
@@ -1,10 +1,10 @@
import { StyleSheet } from 'react-native' import { StyleSheet } from 'react-native'
export const primaryColor = '#ff7e5f'
export const secondaryColor = '#351c4d'
export const fontOnPrimaryColor = 'white'
export default StyleSheet.create({ export default StyleSheet.create({
container: {
justifyContent: 'center',
alignItems: 'center'
},
welcome: { welcome: {
fontSize: 20, fontSize: 20,
margin: 30, margin: 30,
@@ -12,31 +12,72 @@ export default StyleSheet.create({
textAlignVertical: 'center' textAlignVertical: 'center'
}, },
dateHeader: { dateHeader: {
fontSize: 20, fontSize: 18,
fontWeight: 'bold', fontWeight: 'bold',
margin: 15, color: fontOnPrimaryColor,
color: 'white',
textAlign: 'center', textAlign: 'center',
textAlignVertical: 'center'
}, },
cycleDayNumber: { cycleDayNumber: {
fontSize: 18, fontSize: 15,
color: fontOnPrimaryColor,
textAlign: 'center', textAlign: 'center',
textAlignVertical: 'center' marginLeft: 15
}, },
symptomDayView: { symptomDayView: {
fontSize: 20, fontSize: 20,
textAlignVertical: 'center' textAlignVertical: 'center'
}, },
symptomBoxImage: {
width: 50,
height: 50
},
radioButton: { radioButton: {
fontSize: 18, fontSize: 18,
margin: 8, margin: 8,
textAlign: 'center', textAlign: 'center',
textAlignVertical: 'center' textAlignVertical: 'center'
}, },
symptomEditView: { symptomBoxesView: {
justifyContent: 'space-between', flexDirection: 'row',
marginHorizontal: 15 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: { symptomEditRow: {
justifyContent: 'space-between', justifyContent: 'space-between',
@@ -49,16 +90,38 @@ export default StyleSheet.create({
alignItems: 'center', alignItems: 'center',
height: 50 height: 50
}, },
cycleDayDateView: { header: {
justifyContent: 'center', backgroundColor: primaryColor,
backgroundColor: 'steelblue' paddingVertical: 18,
paddingHorizontal: 15,
alignItems: 'center',
justifyContent: 'center'
}, },
cycleDayNumberView: { menu: {
justifyContent: 'center', backgroundColor: primaryColor,
backgroundColor: 'skyblue', alignItems: 'center',
marginBottom: 15, justifyContent: 'space-between',
flexDirection: 'row'
},
menuItem: {
alignItems: 'center',
flex: 1,
paddingVertical: 15 paddingVertical: 15
}, },
menuText: {
color: fontOnPrimaryColor
},
menuTextInActive: {
color: 'lightgrey'
},
headerCycleDay: {
flexDirection: 'row',
justifyContent: 'space-between'
},
navigationArrow: {
fontSize: 60,
color: fontOnPrimaryColor
},
homeButtons: { homeButtons: {
marginHorizontal: 15 marginHorizontal: 15
}, },
@@ -104,5 +167,29 @@ export default StyleSheet.create({
fontSize: 18, fontSize: 18,
textAlign: 'left', textAlign: 'left',
textAlignVertical: 'center' 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'
}
}