diff --git a/components/cycle-day/select-box.js b/components/cycle-day/select-box.js
new file mode 100644
index 0000000000000000000000000000000000000000..ec4520cdf4f524ceb295b89f9960665ccc091430
--- /dev/null
+++ b/components/cycle-day/select-box.js
@@ -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>
+ )
+ }
+}
\ No newline at end of file
diff --git a/components/cycle-day/symptoms/bleeding.js b/components/cycle-day/symptoms/bleeding.js
index bd24b9ebeec963fd2e6b7ecef93a47d4795aed8e..8ccba478ae6530f84474a8f822aeff2366df363b 100644
--- a/components/cycle-day/symptoms/bleeding.js
+++ b/components/cycle-day/symptoms/bleeding.js
@@ -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 })
diff --git a/components/cycle-day/symptoms/cervix.js b/components/cycle-day/symptoms/cervix.js
index d1d8ba65ce0b8029b44cf74475d95c86444e419c..96d332baf691e7820f0de1005199107f6c5b02f7 100644
--- a/components/cycle-day/symptoms/cervix.js
+++ b/components/cycle-day/symptoms/cervix.js
@@ -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 })
diff --git a/components/cycle-day/symptoms/desire.js b/components/cycle-day/symptoms/desire.js
index 2dd6fc6aeeb49e67c51b6be079150c10fbd908e3..273648383c1b4032194a5b5c7a801df4d03eb3c7 100644
--- a/components/cycle-day/symptoms/desire.js
+++ b/components/cycle-day/symptoms/desire.js
@@ -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
diff --git a/components/cycle-day/symptoms/mucus.js b/components/cycle-day/symptoms/mucus.js
index f846bfdab903d54875a3dbf66e9c224a23a8e278..1e9b664f811e3bd16e95abf404918acb82ded746 100644
--- a/components/cycle-day/symptoms/mucus.js
+++ b/components/cycle-day/symptoms/mucus.js
@@ -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}
+ />
+ )
+ })
+}
\ No newline at end of file
diff --git a/components/cycle-day/symptoms/note.js b/components/cycle-day/symptoms/note.js
index 6bf0cb63dc0a32677281de1d1508f09968700ee2..ffbb543fdd651a8938b044bee5d37d12eb0b6940 100644
--- a/components/cycle-day/symptoms/note.js
+++ b/components/cycle-day/symptoms/note.js
@@ -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}
diff --git a/components/cycle-day/symptoms/sex.js b/components/cycle-day/symptoms/sex.js
index 2ca06eff057b941bd264e9c5fc83193414601883..1b86293916c03119f8be5ec716c4b3de5ea1f026 100644
--- a/components/cycle-day/symptoms/sex.js
+++ b/components/cycle-day/symptoms/sex.js
@@ -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>
)
}
-}
\ No newline at end of file
+}
diff --git a/components/cycle-day/symptoms/temperature.js b/components/cycle-day/symptoms/temperature.js
index ae7d74e0a395d8e05ef1aee11647e2b3efc042a3..09be3be8eb6292741276d9152495c4c6fe6e4c8f 100644
--- a/components/cycle-day/symptoms/temperature.js
+++ b/components/cycle-day/symptoms/temperature.js
@@ -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 })
diff --git a/styles/index.js b/styles/index.js
index 70d0293503b9d71179b733d98669ec15c8224a91..af29deb3cf057bc10a6f09995d4ed0936731c68f 100644
--- a/styles/index.js
+++ b/styles/index.js
@@ -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'
- }
+ },
}
\ No newline at end of file