Replace action button footer in remaining symptom views

This commit is contained in:
Julia Friesel
2018-08-20 13:44:05 +02:00
parent d897c3b89f
commit 8629fd5369
10 changed files with 375 additions and 394 deletions
+119 -119
View File
@@ -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>
)
}
}
}