Replace checkboxes with SelectBox component on sex view

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>
+    )
+  }
+}

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 })

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 })

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

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
+              {makeSelectBoxes(mucusFeelingBoxes, 'feeling')}
-                radio_props={mucusFeelingRadioProps}
-                initial={this.state.feeling}
-                formHorizontal={true}
-                labelHorizontal={false}
-                labelStyle={styles.radioButton}
-                onPress={(itemValue) => {
-                  this.setState({ feeling: itemValue })
-                }}
-              />
             </View>
-            <Text style={styles.symptomDayView}>Texture</Text>
+            <Text style={styles.symptomViewHeading}>Texture</Text>
             <View style={styles.radioButtonRow}>
-              <RadioForm
+              {makeSelectBoxes(mucusTextureRadioProps, 'texture')}
-                radio_props={mucusTextureRadioProps}
-                initial={this.state.texture}
-                formHorizontal={true}
-                labelHorizontal={false}
-                labelStyle={styles.radioButton}
-                onPress={(itemValue) => {
-                  this.setState({ texture: itemValue })
-                }}
-              />
             </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

@@ -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

@@ -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>
+        <ScrollView style={styles.page}>
-          <View>
+          <Text style={styles.symptomViewHeading}>Activity</Text>
-            <View style={styles.symptomViewRowInline}>
+          <View style={styles.selectBoxSection}>
-              <Text style={styles.symptomDayView}>{activityLabels.solo}</Text>
+            {this.makeSelectBoxes(sexBoxes)}
-              <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.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

@@ -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

@@ -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'
-  }
+  },
 }