From 8629fd53691184c2b3a962d3bcc83f9268a40aa0 Mon Sep 17 00:00:00 2001
From: Julia Friesel <julia.friesel@gmail.com>
Date: Mon, 20 Aug 2018 13:44:05 +0200
Subject: [PATCH] Replace action button footer in remaining symptom views
---
app.js | 42 +---
components/cycle-day/symptoms/bleeding.js | 32 ++-
components/cycle-day/symptoms/cervix.js | 136 +++++------
components/cycle-day/symptoms/desire.js | 50 ++--
components/cycle-day/symptoms/mucus.js | 125 +++++-----
components/cycle-day/symptoms/note.js | 28 +--
components/cycle-day/symptoms/sex.js | 238 +++++++++----------
components/cycle-day/symptoms/temperature.js | 113 +++++----
components/stats.js | 1 -
styles/index.js | 4 +
10 files changed, 375 insertions(+), 394 deletions(-)
diff --git a/app.js b/app.js
index b6e9ff58..fe0f57c6 100644
--- a/app.js
+++ b/app.js
@@ -1,5 +1,5 @@
import React, { Component } from 'react'
-import { View, BackHandler, ScrollView } from 'react-native'
+import { View, BackHandler } from 'react-native'
import Header from './components/header'
import Menu from './components/menu'
import Home from './components/home'
@@ -9,11 +9,11 @@ import symptomViews from './components/cycle-day/symptoms'
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'
-import ActionButtonFooter from './components/cycle-day/symptoms/action-button-footer';
YellowBox.ignoreWarnings(['Warning: isMounted(...) is deprecated'])
const isSymptomView = name => Object.keys(symptomViews).indexOf(name) > -1
@@ -46,38 +46,22 @@ export default class App extends Component {
this.setState({currentPage: pageName, currentProps: props})
}
- setActionButtonState(actionButtonInfo) {
- this.setState({actionButtonInfo})
- }
-
- unsetActionButtonState() {
- this.setState({actionButtonInfo: null})
- }
-
render() {
const page = {
Home, Calendar, CycleDay, Chart, Settings, Stats, ...symptomViews
}[this.state.currentPage]
return (
- <View style={{height: '100%', justifyContent: 'space-between' }}>
- <View>
- {this.state.currentPage != 'CycleDay' && <Header title={this.state.currentPage}/>}
- <ScrollView>
- {React.createElement(page, {
- navigate: this.navigate.bind(this),
- setActionButtonState: this.setActionButtonState.bind(this),
- unsetActionButtonState: this.unsetActionButtonState.bind(this),
- ...this.state.currentProps
- })}
- </ScrollView>
- </View>
- {isSymptomView(this.state.currentPage) && this.state.actionButtonInfo ?
- <ActionButtonFooter
- {...this.state.actionButtonInfo}
- navigate={this.navigate.bind(this)}
- />
- :
- <Menu navigate={this.navigate.bind(this)}/>
+ <View style={styles.menuOnBottom}>
+
+ {this.state.currentPage != 'CycleDay' && <Header title={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>
)
diff --git a/components/cycle-day/symptoms/bleeding.js b/components/cycle-day/symptoms/bleeding.js
index ffd1836e..ce27ba19 100644
--- a/components/cycle-day/symptoms/bleeding.js
+++ b/components/cycle-day/symptoms/bleeding.js
@@ -8,6 +8,7 @@ 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,8 +33,8 @@ export default class Bleeding extends Component {
{ label: labels[3], value: 3 },
]
return (
- <View>
- <View style={styles.symptomEditView}>
+ <View style={styles.menuOnBottom}>
+ <View>
<Text style={styles.symptomDayView}>Bleeding</Text>
<View style={styles.radioButtonRow}>
<RadioForm
@@ -57,21 +58,18 @@ export default class Bleeding extends Component {
/>
</View>
</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>
+ <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 59d9d8b5..2de55821 100644
--- a/components/cycle-day/symptoms/cervix.js
+++ b/components/cycle-day/symptoms/cervix.js
@@ -12,6 +12,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 +46,75 @@ 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
- }
- )}
+ return (
+ <View style={styles.menuOnBottom}>
+ <View>
+ <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>
+ <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 58a7cebd..351dc971 100644
--- a/components/cycle-day/symptoms/desire.js
+++ b/components/cycle-day/symptoms/desire.js
@@ -7,6 +7,7 @@ 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,31 @@ 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 style={styles.menuOnBottom}>
+ <View>
+ <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>
+ <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/mucus.js b/components/cycle-day/symptoms/mucus.js
index abafe566..2df033d0 100644
--- a/components/cycle-day/symptoms/mucus.js
+++ b/components/cycle-day/symptoms/mucus.js
@@ -12,6 +12,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 +32,74 @@ 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}
- />
+ return (
+ <View style={styles.menuOnBottom}>
+ <View>
+ <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>
-
- <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>
-
+ <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 17966002..6100a7ac 100644
--- a/components/cycle-day/symptoms/note.js
+++ b/components/cycle-day/symptoms/note.js
@@ -7,6 +7,7 @@ import {
import styles from '../../../styles'
import { saveSymptom } from '../../../db'
+import ActionButtonFooter from './action-button-footer'
export default class Temp extends Component {
constructor(props) {
@@ -22,7 +23,7 @@ export default class Temp extends Component {
render() {
return (
- <View style={styles.symptomEditView}>
+ <View style={styles.menuOnBottom}>
<View style={styles.symptomViewRow}>
<Text style={styles.symptomDayView}>Note</Text>
<TextInput
@@ -34,19 +35,18 @@ export default class Temp extends Component {
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>
+ <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 d9ec3366..9adb224b 100644
--- a/components/cycle-day/symptoms/sex.js
+++ b/components/cycle-day/symptoms/sex.js
@@ -11,6 +11,7 @@ import {
sexActivity as activityLabels,
contraceptives as contraceptiveLabels
} from '../labels/labels'
+import ActionButtonFooter from './action-button-footer'
export default class Sex extends Component {
constructor(props) {
@@ -30,127 +31,126 @@ 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 style={styles.menuOnBottom}>
+ <View>
+ <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>
- <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)
+ <ActionButtonFooter
+ symptom='sex'
+ cycleDay={this.cycleDay}
+ saveAction={() => {
+ const copyOfState = Object.assign({}, this.state)
+ if (!copyOfState.other) {
+ copyOfState.note = null
}
- )}
- </View>
+ 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 a7bd55e7..4c2d97e2 100644
--- a/components/cycle-day/symptoms/temperature.js
+++ b/components/cycle-day/symptoms/temperature.js
@@ -11,6 +11,7 @@ import DateTimePicker from 'react-native-modal-datetime-picker-nevo'
import { getPreviousTemperature, saveSymptom } from '../../../db'
import styles from '../../../styles'
import { LocalTime, ChronoUnit } from 'js-joda'
+import ActionButtonFooter from './action-button-footer'
const MINUTES = ChronoUnit.MINUTES
@@ -37,72 +38,70 @@ export default class Temp extends Component {
time: this.time || LocalTime.now().truncatedTo(MINUTES).toString(),
isTimePickerVisible: false
}
-
- props.setActionButtonState({
- symptom : 'temperature',
- cycleDay: props.cycleDay,
- saveAction: () => {
- const dataToSave = {
- value: Number(this.state.currentValue),
- exclude: this.state.exclude,
- time: this.state.time
- }
- saveSymptom('temperature', props.cycleDay, dataToSave)
- },
- saveDisabled: this.state.currentValue === '' || isInvalidTime(this.state.time)
- })
- }
-
- componentWillUnmount() {
- this.props.unsetActionButtonState()
}
render() {
return (
- <View style={styles.symptomEditView}>
- <View style={styles.symptomViewRowInline}>
- <Text style={styles.symptomDayView}>Temperature (°C)</Text>
- <TextInput
- style={styles.temperatureTextInput}
- placeholder="Enter"
- onChangeText={(val) => {
- this.setState({ currentValue: val })
+ <View style={styles.menuOnBottom}>
+ <View>
+ <View style={styles.symptomViewRowInline}>
+ <Text style={styles.symptomDayView}>Temperature (°C)</Text>
+ <TextInput
+ style={styles.temperatureTextInput}
+ placeholder="Enter"
+ onChangeText={(val) => {
+ this.setState({ currentValue: val })
+ }}
+ keyboardType='numeric'
+ value={this.state.currentValue}
+ />
+ </View>
+ <View style={styles.symptomViewRowInline}>
+ <Text style={styles.symptomDayView}>Time</Text>
+ <TextInput
+ style={styles.temperatureTextInput}
+ onFocus={() => {
+ Keyboard.dismiss()
+ this.setState({ isTimePickerVisible: true })
+ }}
+ value={this.state.time}
+ />
+ </View>
+ <DateTimePicker
+ mode="time"
+ isVisible={this.state.isTimePickerVisible}
+ onConfirm={jsDate => {
+ this.setState({
+ time: `${jsDate.getHours()}:${jsDate.getMinutes()}`,
+ isTimePickerVisible: false
+ })
}}
- keyboardType='numeric'
- value={this.state.currentValue}
+ 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>
- <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
- })
+ <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>
)
}
diff --git a/components/stats.js b/components/stats.js
index 864c1393..4021fdee 100644
--- a/components/stats.js
+++ b/components/stats.js
@@ -5,7 +5,6 @@ import {
ScrollView
} from 'react-native'
import { LocalDate, ChronoUnit } from 'js-joda'
-import Header from './header'
import styles from '../styles/index'
import cycleModule from '../lib/cycle'
import getCycleInfo from '../lib/cycle-length'
diff --git a/styles/index.js b/styles/index.js
index 6cf269e2..b1476b09 100644
--- a/styles/index.js
+++ b/styles/index.js
@@ -83,6 +83,10 @@ export default StyleSheet.create({
symptomDataText: {
fontSize: 12
},
+ menuOnBottom: {
+ flex: 1,
+ justifyContent: 'space-between'
+ },
symptomEditRow: {
justifyContent: 'space-between',
marginBottom: 10,
--
GitLab