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

Putting all the labels of selected pain keys in the cycle day overview

Browse Source
This commit is contained in:
Bl00dyMarie
2018-08-24 17:18:01 +02:00
parent e68b8f5460
commit ad9997f73b
5 changed files with 547 additions and 640 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/cycle-day/symptoms/pain.js
+118 -107
View File
@@ -3,13 +3,15 @@ import {
CheckBox,
Text,
TextInput,
View
View,
ScrollView
} from 'react-native'
import styles from '../../../styles'
import { saveSymptom } from '../../../db'
import {
pain as painLabels
} from '../labels/labels'
import ActionButtonFooter from './action-button-footer'
export default class Pain extends Component {
constructor(props) {
@@ -18,119 +20,128 @@ export default class Pain extends Component {
this.state = {}
if (this.cycleDay.pain !== null ) {
Object.assign(this.state, this.cycleDay.pain)
if (this.cycleDay.pain && this.cycleDay.pain.note) {
this.state.other = true
}
}
}
render() {
return (
<View style={styles.symptomEditView}>
<Text style={styles.symptomDayView}>PAIN</Text>
<View style={styles.symptomViewRowInline}>
<Text style={styles.symptomDayView}>{painLabels.cramps}</Text>
<CheckBox
value={this.state.cramps}
onValueChange={(val) => {
this.setState({cramps: val})
}}
/>
<Text style={styles.symptomDayView}>{painLabels.ovulationPain}</Text>
<CheckBox
value={this.state.ovulationPain}
onValueChange={(val) => {
this.setState({ovulationPain: val})
}}
/>
</View>
<View style={styles.symptomViewRowInline}>
<Text style={styles.symptomDayView}>
{painLabels.headache}
</Text>
<CheckBox
value={this.state.headache}
onValueChange={(val) => {
this.setState({headache: val})
}}
/>
<Text style={styles.symptomDayView}>
{painLabels.backache}
</Text>
<CheckBox
value={this.state.backache}
onValueChange={(val) => {
this.setState({backache: val})
}}
/>
</View>
<View style={styles.symptomViewRowInline}>
<Text style={styles.symptomDayView}>
{painLabels.nausea}
</Text>
<CheckBox
value={this.state.nausea}
onValueChange={(val) => {
this.setState({nausea: val})
}}
/>
<Text style={styles.symptomDayView}>
{painLabels.tenderBreasts}
</Text>
<CheckBox
value={this.state.tenderBreasts}
onValueChange={(val) => {
this.setState({tenderBreasts: val})
}}
/>
</View>
<View style={styles.symptomViewRowInline}>
<Text style={styles.symptomDayView}>
{painLabels.migraine}
</Text>
<CheckBox
value={this.state.migraine}
onValueChange={(val) => {
this.setState({migraine: val})
}}
/>
<Text style={styles.symptomDayView}>
{painLabels.other}
</Text>
<CheckBox
value={this.state.other}
onValueChange={(val) => {
this.setState({
other: val,
focusTextArea: true
})
}}
/>
</View>
<View style={styles.symptomViewRowInline}>
{ this.state.other &&
<TextInput
autoFocus={this.state.focusTextArea}
multiline={true}
placeholder="Enter"
value={this.state.note}
onChangeText={(val) => {
this.setState({note: val})
}}
/>
}
</View>
<View style={styles.actionButtonRow}>
{this.props.makeActionButtons(
{
symptom: 'pain',
cycleDay: this.cycleDay,
saveAction: () => {
const copyOfState = Object.assign({}, this.state)
saveSymptom('pain', 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}>PAIN</Text>
<Text style={styles.symptomDayView}>{painLabels.cramps}</Text>
<CheckBox
value={this.state.cramps}
onValueChange={(val) => {
this.setState({cramps: val})
}}
/>
<Text style={styles.symptomDayView}>
{painLabels.ovulationPain}
</Text>
<CheckBox
value={this.state.ovulationPain}
onValueChange={(val) => {
this.setState({ovulationPain: val})
}}
/>
</View>
<View style={styles.symptomViewRowInline}>
<Text style={styles.symptomDayView}>
{painLabels.headache}
</Text>
<CheckBox
value={this.state.headache}
onValueChange={(val) => {
this.setState({headache: val})
}}
/>
<Text style={styles.symptomDayView}>
{painLabels.backache}
</Text>
<CheckBox
value={this.state.backache}
onValueChange={(val) => {
this.setState({backache: val})
}}
/>
</View>
<View style={styles.symptomViewRowInline}>
<Text style={styles.symptomDayView}>
{painLabels.nausea}
</Text>
<CheckBox
value={this.state.nausea}
onValueChange={(val) => {
this.setState({nausea: val})
}}
/>
<Text style={styles.symptomDayView}>
{painLabels.tenderBreasts}
</Text>
<CheckBox
value={this.state.tenderBreasts}
onValueChange={(val) => {
this.setState({tenderBreasts: val})
}}
/>
</View>
<View style={styles.symptomViewRowInline}>
<Text style={styles.symptomDayView}>
{painLabels.migraine}
</Text>
<CheckBox
value={this.state.migraine}
onValueChange={(val) => {
this.setState({migraine: val})
}}
/>
<Text style={styles.symptomDayView}>
{painLabels.other}
</Text>
<CheckBox
value={this.state.other}
onValueChange={(val) => {
this.setState({
other: val,
focusTextArea: true
})
}}
/>
</View>
<View style={styles.symptomViewRowInline}>
{ 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='pain'
cycleDay={this.cycleDay}
saveAction={() => {
const copyOfState = Object.assign({}, this.state)
if (!copyOfState.other) {
copyOfState.note = null
}
)}
</View>
saveSymptom('pain', this.cycleDay, copyOfState)
}}
saveDisabled={Object.values(this.state).every(value => !value)}
navigate={this.props.navigate}
/>
</View>
)
}