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

Replace checkboxes with SelectBox component on sex view

Browse Source
This commit is contained in:
Julia Friesel
2018-08-31 19:00:01 +02:00
parent f19a51d4ba
commit 5b6ac9ebc1
9 changed files with 158 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/cycle-day/select-box.js
+25
View File
@@ -0,0 +1,25 @@
import React, { Component } from 'react'
import {
View,
Text,
TouchableOpacity,
} from 'react-native'
import styles from '../../styles'
export default class SelectBox extends Component {
render () {
const style = [styles.selectBox]
const textStyle = []
if (this.props.value) {
style.push(styles.selectBoxActive)
textStyle.push(styles.selectBoxTextActive)
}
return (
<TouchableOpacity onPress={this.props.onPress}>
<View style={style}>
<Text style={textStyle}>{this.props.label}</Text>
</View>
</TouchableOpacity>
)
}
}
components/cycle-day/symptoms/bleeding.js
+2 -2
View File
@@ -35,7 +35,7 @@ export default class Bleeding extends Component {
]
return (
<View style={{ flex: 1 }}>
<ScrollView>
<ScrollView style={styles.page}>
<View>
<View style={styles.radioButtonRow}>
<RadioForm
@@ -50,7 +50,7 @@ export default class Bleeding extends Component {
/>
</View>
<View style={styles.symptomViewRowInline}>
<Text style={styles.symptomDayView}>Exclude</Text>
<Text style={styles.symptomViewHeading}>Exclude</Text>
<Switch
onValueChange={(val) => {
this.setState({ exclude: val })
components/cycle-day/symptoms/cervix.js
+5 -5
View File
@@ -51,9 +51,9 @@ export default class Cervix extends Component {
]
return (
<View style={{ flex: 1 }}>
<ScrollView>
<ScrollView style={styles.page}>
<View>
<Text style={styles.symptomDayView}>Opening</Text>
<Text style={styles.symptomViewHeading}>Opening</Text>
<View style={styles.radioButtonRow}>
<RadioForm
radio_props={cervixOpeningRadioProps}
@@ -66,7 +66,7 @@ export default class Cervix extends Component {
}}
/>
</View>
<Text style={styles.symptomDayView}>Firmness</Text>
<Text style={styles.symptomViewHeading}>Firmness</Text>
<View style={styles.radioButtonRow}>
<RadioForm
radio_props={cervixFirmnessRadioProps}
@@ -79,7 +79,7 @@ export default class Cervix extends Component {
}}
/>
</View>
<Text style={styles.symptomDayView}>Position</Text>
<Text style={styles.symptomViewHeading}>Position</Text>
<View style={styles.radioButtonRow}>
<RadioForm
radio_props={cervixPositionRadioProps}
@@ -93,7 +93,7 @@ export default class Cervix extends Component {
/>
</View>
<View style={styles.symptomViewRowInline}>
<Text style={styles.symptomDayView}>Exclude</Text>
<Text style={styles.symptomViewHeading}>Exclude</Text>
<Switch
onValueChange={(val) => {
this.setState({ exclude: val })
components/cycle-day/symptoms/desire.js
+1 -1
View File
@@ -29,7 +29,7 @@ export default class Desire extends Component {
]
return (
<View style={{ flex: 1 }}>
<ScrollView>
<ScrollView style={styles.page}>
<View>
<View style={styles.radioButtonRow}>
<RadioForm
components/cycle-day/symptoms/mucus.js
+20 -25
View File
@@ -14,6 +14,7 @@ import {
} from '../labels/labels'
import computeSensiplanValue from '../../../lib/sensiplan-mucus'
import ActionButtonFooter from './action-button-footer'
import SelectBox from '../select-box'
export default class Mucus extends Component {
@@ -36,7 +37,7 @@ export default class Mucus extends Component {
}
render() {
const mucusFeelingRadioProps = [
const mucusFeelingBoxes = [
{ label: feelingLabels[0], value: 0 },
{ label: feelingLabels[1], value: 1 },
{ label: feelingLabels[2], value: 2 },
@@ -49,36 +50,18 @@ export default class Mucus extends Component {
]
return (
<View style={{ flex: 1 }}>
<ScrollView>
<ScrollView style={styles.page}>
<View>
<Text style={styles.symptomDayView}>Feeling</Text>
<Text style={styles.symptomViewHeading}>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 })
}}
/>
{makeSelectBoxes(mucusFeelingBoxes, 'feeling')}
</View>
<Text style={styles.symptomDayView}>Texture</Text>
<Text style={styles.symptomViewHeading}>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 })
}}
/>
{makeSelectBoxes(mucusTextureRadioProps, 'texture')}
</View>
<View style={styles.symptomViewRowInline}>
<Text style={styles.symptomDayView}>Exclude</Text>
<Text style={styles.symptomViewHeading}>Exclude</Text>
<Switch
onValueChange={(val) => {
this.setState({ exclude: val })
@@ -106,3 +89,15 @@ export default class Mucus extends Component {
)
}
}
function makeSelectBoxes(boxes, category) {
return boxes.map(({ label, value }) => {
return (
<SelectBox
label={label}
onPress={() => this.setState({ [category]: value })}
key={value}
/>
)
})
}
components/cycle-day/symptoms/note.js
+1 -1
View File
@@ -24,7 +24,7 @@ export default class Temp extends Component {
render() {
return (
<View style={{ flex: 1 }}>
<ScrollView>
<ScrollView style={styles.page}>
<View style={styles.symptomViewRow}>
<TextInput
multiline={true}
components/cycle-day/symptoms/sex.js
+75 -107
View File
@@ -1,6 +1,5 @@
import React, { Component } from 'react'
import {
CheckBox,
Text,
TextInput,
View,
@@ -13,6 +12,35 @@ import {
contraceptives as contraceptiveLabels
} from '../labels/labels'
import ActionButtonFooter from './action-button-footer'
import SelectBox from '../select-box'
const sexBoxes = [{
label: activityLabels.solo,
stateKey: 'solo'
}, {
label: activityLabels.partner,
stateKey: 'partner'
}]
const contraceptiveBoxes = [{
label: contraceptiveLabels.condom,
stateKey: 'condom'
}, {
label: contraceptiveLabels.pill,
stateKey: 'pill'
}, {
label: contraceptiveLabels.iud,
stateKey: 'iud'
}, {
label: contraceptiveLabels.patch,
stateKey: 'patch'
}, {
label: contraceptiveLabels.ring,
stateKey: 'ring'
}, {
label: contraceptiveLabels.implant,
stateKey: 'implant'
}]
export default class Sex extends Component {
constructor(props) {
@@ -29,115 +57,55 @@ export default class Sex extends Component {
}
}
render() {
makeSelectBoxes(boxes) {
return boxes.map(({ label, stateKey }) => {
return (
<SelectBox
value={this.state[stateKey]}
onPress={() => this.toggleState(stateKey)}
label={label}
key={stateKey}
/>
)
})
}
toggleState(key) {
const curr = this.state[key]
this.setState({[key]: !curr})
}
render() {
return (
<View style={{ flex: 1 }}>
<ScrollView>
<View>
<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 })
}}
/>
}
<ScrollView style={styles.page}>
<Text style={styles.symptomViewHeading}>Activity</Text>
<View style={styles.selectBoxSection}>
{this.makeSelectBoxes(sexBoxes)}
</View>
<Text style={styles.symptomViewHeading}>Contraceptives</Text>
<View style={styles.selectBoxSection}>
{this.makeSelectBoxes(contraceptiveBoxes)}
<SelectBox
value={this.state.other}
label={contraceptiveLabels.other}
onPress={() => {
this.toggleState('other')
this.setState({ 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 })
}}
/>
}
</ScrollView>
<ActionButtonFooter
symptom='sex'
@@ -155,4 +123,4 @@ export default class Sex extends Component {
</View>
)
}
}
}
components/cycle-day/symptoms/temperature.js
+5 -5
View File
@@ -96,10 +96,10 @@ export default class Temp extends Component {
render() {
return (
<View style={{ flex: 1 }}>
<ScrollView>
<ScrollView style={styles.page}>
<View>
<View style={styles.symptomViewRowInline}>
<Text style={styles.symptomDayView}>Temperature (°C)</Text>
<Text style={styles.symptomViewHeading}>Temperature (°C)</Text>
<TempInput
value={this.state.temperature}
setState={(val) => this.setState(val)}
@@ -107,7 +107,7 @@ export default class Temp extends Component {
/>
</View>
<View style={styles.symptomViewRowInline}>
<Text style={styles.symptomDayView}>Time</Text>
<Text style={styles.symptomViewHeading}>Time</Text>
<TextInput
style={styles.temperatureTextInput}
onFocus={() => {
@@ -129,7 +129,7 @@ export default class Temp extends Component {
onCancel={() => this.setState({ isTimePickerVisible: false })}
/>
<View style={styles.symptomViewRowInline}>
<Text style={styles.symptomDayView}>Note</Text>
<Text style={styles.symptomViewHeading}>Note</Text>
</View>
<View>
<TextInput
@@ -144,7 +144,7 @@ export default class Temp extends Component {
/>
</View>
<View style={styles.symptomViewRowInline}>
<Text style={styles.symptomDayView}>Exclude</Text>
<Text style={styles.symptomViewHeading}>Exclude</Text>
<Switch
onValueChange={(val) => {
this.setState({ exclude: val })
styles/index.js
+24 -3
View File
@@ -23,9 +23,8 @@ export default StyleSheet.create({
textAlign: 'center',
marginLeft: 15
},
symptomDayView: {
symptomViewHeading: {
fontSize: 20,
textAlignVertical: 'center'
},
symptomBoxImage: {
width: 50,
@@ -198,6 +197,28 @@ export default StyleSheet.create({
fontSize: 15,
color: fontOnPrimaryColor
},
selectBox: {
backgroundColor: 'lightgrey',
margin: 7,
paddingHorizontal: 15,
paddingVertical: 10,
borderRadius: 10
},
selectBoxActive: {
backgroundColor: secondaryColor,
color: fontOnPrimaryColor
},
selectBoxTextActive: {
color: fontOnPrimaryColor
},
selectBoxSection: {
flexDirection: 'row',
flexWrap: 'wrap',
marginVertical: 10,
},
page: {
padding: 10
}
})
export const iconStyles = {
@@ -217,5 +238,5 @@ export const iconStyles = {
},
menuIconInactive: {
color: 'lightgrey'
}
},
}