From 6fa18d70feffcc24be724e3aa41ea90dc92ee3ff Mon Sep 17 00:00:00 2001 From: Julia Friesel <julia.friesel@gmail.com> Date: Sat, 1 Sep 2018 23:33:41 +0200 Subject: [PATCH] Add explainer to temperature --- components/cycle-day/labels/labels.js | 9 ++- components/cycle-day/symptoms/bleeding.js | 2 +- components/cycle-day/symptoms/cervix.js | 2 +- components/cycle-day/symptoms/mucus.js | 2 +- .../cycle-day/symptoms/symptom-section.js | 21 ++++-- components/cycle-day/symptoms/temperature.js | 66 +++++++++++-------- 6 files changed, 65 insertions(+), 37 deletions(-) diff --git a/components/cycle-day/labels/labels.js b/components/cycle-day/labels/labels.js index 05473c12..5566f736 100644 --- a/components/cycle-day/labels/labels.js +++ b/components/cycle-day/labels/labels.js @@ -73,7 +73,14 @@ export const fertilityStatus = { export const temperature = { outOfRangeWarning: 'This temperature value is out of the current range for the temperature chart. You can change the range in the settings.', outOfAbsoluteRangeWarning: 'This temperature value is too high or low to be shown on the temperature chart.', - saveAnyway: 'Save anyway' + saveAnyway: 'Save anyway', + temperature: { + explainer: 'Take your temperature right after waking up, before getting out of bed' + }, + note: { + explainer: 'Is there anything that could have influenced this value, such as bad sleep or alcohol consumption?' + }, + excludeExplainer: "You can exclude this value if you don't want to use it for fertility detection" } export const noteExplainer = "Anything you want to add for the day?" diff --git a/components/cycle-day/symptoms/bleeding.js b/components/cycle-day/symptoms/bleeding.js index 25e697cb..76985f45 100644 --- a/components/cycle-day/symptoms/bleeding.js +++ b/components/cycle-day/symptoms/bleeding.js @@ -49,7 +49,7 @@ export default class Bleeding extends Component { <SymptomSection header="Exclude" explainer="You can exclude this value if it's not menstrual bleeding" - inlineExplainer={true} + inline={true} > <Switch onValueChange={(val) => { diff --git a/components/cycle-day/symptoms/cervix.js b/components/cycle-day/symptoms/cervix.js index 4b792be1..7d2ce6cc 100644 --- a/components/cycle-day/symptoms/cervix.js +++ b/components/cycle-day/symptoms/cervix.js @@ -81,7 +81,7 @@ export default class Cervix extends Component { <SymptomSection header="Exclude" explainer="You can exclude this value if you don't want to use it for fertility detection" - inlineExplainer={true} + inline={true} > <Switch onValueChange={(val) => { diff --git a/components/cycle-day/symptoms/mucus.js b/components/cycle-day/symptoms/mucus.js index 6e80ffc2..ef730f73 100644 --- a/components/cycle-day/symptoms/mucus.js +++ b/components/cycle-day/symptoms/mucus.js @@ -70,7 +70,7 @@ export default class Mucus extends Component { <SymptomSection header="Exclude" explainer={labels.excludeExplainer} - inlineExplainer={true} + inline={true} > <Switch onValueChange={(val) => { diff --git a/components/cycle-day/symptoms/symptom-section.js b/components/cycle-day/symptoms/symptom-section.js index c1af4d77..8d0603b7 100644 --- a/components/cycle-day/symptoms/symptom-section.js +++ b/components/cycle-day/symptoms/symptom-section.js @@ -4,14 +4,25 @@ import { SymptomSectionHeader, AppText } from '../../app-text' export default class SymptomSection extends Component { render() { + const p = this.props + let placeHeadingInline + if (!p.explainer && p.inline) { + placeHeadingInline = { + flexDirection: 'row', + alignItems: "center" + } + } return ( - <View> - <SymptomSectionHeader>{this.props.header}</SymptomSectionHeader> - <View flexDirection={this.props.inlineExplainer ? 'row' : 'column'}> + <View style={placeHeadingInline}> + <SymptomSectionHeader flex={1}>{p.header}</SymptomSectionHeader> + <View + flexDirection={p.inline ? 'row' : 'column'} + flex={1} + > <View flex={1}> - <AppText>{this.props.explainer}</AppText> + <AppText>{p.explainer}</AppText> </View> - {this.props.children} + {p.children} </View> </View> ) diff --git a/components/cycle-day/symptoms/temperature.js b/components/cycle-day/symptoms/temperature.js index 336fa431..6be71115 100644 --- a/components/cycle-day/symptoms/temperature.js +++ b/components/cycle-day/symptoms/temperature.js @@ -12,12 +12,13 @@ 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 { temperature as tempLabels } from '../labels/labels' +import { temperature as labels } from '../labels/labels' import { scaleObservable } from '../../../local-storage' import { shared } from '../../labels' import ActionButtonFooter from './action-button-footer' import config from '../../../config' import { SymptomSectionHeader } from '../../app-text' +import SymptomSection from './symptom-section' const minutes = ChronoUnit.MINUTES @@ -72,9 +73,9 @@ export default class Temp extends Component { const scale = scaleObservable.value let warningMsg if (value < absolute.min || value > absolute.max) { - warningMsg = tempLabels.outOfAbsoluteRangeWarning + warningMsg = labels.outOfAbsoluteRangeWarning } else if (value < scale.min || value > scale.max) { - warningMsg = tempLabels.outOfRangeWarning + warningMsg = labels.outOfRangeWarning } if (warningMsg) { @@ -98,16 +99,21 @@ export default class Temp extends Component { <View style={{ flex: 1 }}> <ScrollView style={styles.page}> <View> - <View style={styles.symptomViewRowInline}> - <SymptomSectionHeader>Temperature (°C)</SymptomSectionHeader> + <SymptomSection + header="Temperature (°C)" + explainer={labels.temperature.explainer} + inline={true} + > <TempInput value={this.state.temperature} setState={(val) => this.setState(val)} isSuggestion={this.state.isSuggestion} /> - </View> - <View style={styles.symptomViewRowInline}> - <SymptomSectionHeader>Time</SymptomSectionHeader> + </SymptomSection> + <SymptomSection + header="Time" + inline={true} + > <TextInput style={styles.temperatureTextInput} onFocus={() => { @@ -116,40 +122,44 @@ export default class Temp extends Component { }} 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 })} - /> - <SymptomSectionHeader>Note</SymptomSectionHeader> - <View> + <DateTimePicker + mode="time" + isVisible={this.state.isTimePickerVisible} + onConfirm={jsDate => { + this.setState({ + time: `${jsDate.getHours()}:${jsDate.getMinutes()}`, + isTimePickerVisible: false + }) + }} + onCancel={() => this.setState({ isTimePickerVisible: false })} + /> + </SymptomSection> + <SymptomSection + header="Note" + explainer={labels.note.explainer} + > <TextInput - style={styles.temperatureTextInput} multiline={true} autoFocus={this.state.focusTextArea} - placeholder="enter" + placeholder="Enter" value={this.state.note} onChangeText={(val) => { this.setState({ note: val }) }} /> - </View> - <View style={styles.symptomViewRowInline}> - <SymptomSectionHeader>Exlude</SymptomSectionHeader> + </SymptomSection> + <SymptomSection + header="Exclude" + explainer={labels.excludeExplainer} + inline={true} + > <Switch onValueChange={(val) => { this.setState({ exclude: val }) }} value={this.state.exclude} /> - </View> + </SymptomSection> </View> </ScrollView> <ActionButtonFooter -- GitLab