Merge branch 'master' into 133-make-temp-scale-a-config-setting-and-read-it-in-chart-and-temp-screen

components/cycle-day/symptoms/action-button-footer.js

@@ -0,0 +1,63 @@
+import React, { Component } from 'react'
+import {
+  View, TouchableOpacity, Text
+} from 'react-native'
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
+import { saveSymptom } from '../../../db'
+import styles, {iconStyles} from '../../../styles'
+
+export default class ActionButtonFooter extends Component {
+  render() {
+    const { symptom, cycleDay, saveAction, saveDisabled, navigate} = this.props
+    const navigateToOverView = () => navigate('CycleDay', {cycleDay})
+    const buttons = [
+      {
+        title: 'Cancel',
+        action: () => navigateToOverView(),
+        icon: 'cancel'
+      },
+      {
+        title: 'Delete',
+        action: () => {
+          saveSymptom(symptom, cycleDay)
+          navigateToOverView()
+        },
+        disabledCondition: !cycleDay[symptom],
+        icon: 'delete-outline'
+      }, {
+        title: 'Save',
+        action: () => {
+          saveAction()
+          navigateToOverView()
+        },
+        disabledCondition: saveDisabled,
+        icon: 'content-save-outline'
+      }
+    ]
+
+    return (
+      <View style={styles.menu}>
+        {buttons.map(({ title, action, disabledCondition, icon }, i) => {
+          const textStyle = disabledCondition ? styles.menuTextInActive : styles.menuText
+          const iconStyle = disabledCondition ?
+            Object.assign({}, iconStyles.menuIcon, iconStyles.menuIconInactive) :
+            iconStyles.menuIcon
+
+          return (
+            <TouchableOpacity
+              onPress={action}
+              style={styles.menuItem}
+              disabled={disabledCondition}
+              key={i.toString()}
+            >
+              <Icon name={icon} {...iconStyle} />
+              <Text style={textStyle}>
+                {title}
+              </Text>
+            </TouchableOpacity>
+          )
+        })}
+      </View>
+    )
+  }
+}

components/cycle-day/symptoms/bleeding.js

@@ -2,12 +2,14 @@ import React, { Component } from 'react'
 import {
   View,
   Text,
-  Switch
+  Switch,
+  ScrollView
 } from 'react-native'
 import RadioForm from 'react-native-simple-radio-button'
 import styles from '../../../styles'
 import { saveSymptom } from '../../../db'
 import { bleeding as labels } from '../labels/labels'
+import ActionButtonFooter from './action-button-footer'
 
 export default class Bleeding extends Component {
   constructor(props) {
@@ -32,44 +34,44 @@ export default class Bleeding extends Component {
       { label: labels[3], value: 3 },
     ]
     return (
-      <View style={styles.symptomEditView}>
-        <Text style={styles.symptomDayView}>Bleeding</Text>
-        <View style={styles.radioButtonRow}>
-          <RadioForm
-            radio_props={bleedingRadioProps}
-            initial={this.state.currentValue}
-            formHorizontal={true}
-            labelHorizontal={false}
-            labelStyle={styles.radioButton}
-            onPress={(itemValue) => {
-              this.setState({ currentValue: itemValue })
-            }}
-          />
-        </View>
-        <View style={styles.symptomViewRowInline}>
-          <Text style={styles.symptomDayView}>Exclude</Text>
-          <Switch
-            onValueChange={(val) => {
-              this.setState({ exclude: val })
-            }}
-            value={this.state.exclude}
-          />
-        </View>
-        <View style={styles.actionButtonRow}>
-          {this.makeActionButtons(
-            {
-              symptom: 'bleeding',
-              cycleDay: this.cycleDay,
-              saveAction: () => {
-                saveSymptom('bleeding', this.cycleDay, {
-                  value: this.state.currentValue,
-                  exclude: this.state.exclude
-                })
-              },
-              saveDisabled: this.state.currentValue === -1
-            }
-          )}
-        </View>
+      <View style={{ flex: 1 }}>
+        <ScrollView>
+          <View>
+            <View style={styles.radioButtonRow}>
+              <RadioForm
+                radio_props={bleedingRadioProps}
+                initial={this.state.currentValue}
+                formHorizontal={true}
+                labelHorizontal={false}
+                labelStyle={styles.radioButton}
+                onPress={(itemValue) => {
+                  this.setState({ currentValue: itemValue })
+                }}
+              />
+            </View>
+            <View style={styles.symptomViewRowInline}>
+              <Text style={styles.symptomDayView}>Exclude</Text>
+              <Switch
+                onValueChange={(val) => {
+                  this.setState({ exclude: val })
+                }}
+                value={this.state.exclude}
+              />
+            </View>
+          </View>
+        </ScrollView>
+        <ActionButtonFooter
+          symptom='bleeding'
+          cycleDay={this.props.cycleDay}
+          saveAction={() => {
+            saveSymptom('bleeding', this.props.cycleDay, {
+              value: this.state.currentValue,
+              exclude: this.state.exclude
+            })
+          }}
+          saveDisabled={this.state.currentValue === -1}
+          navigate={this.props.navigate}
+        />
       </View>
     )
   }

components/cycle-day/symptoms/cervix.js

@@ -2,7 +2,8 @@ import React, { Component } from 'react'
 import {
   View,
   Text,
-  Switch
+  Switch,
+  ScrollView
 } from 'react-native'
 import RadioForm from 'react-native-simple-radio-button'
 import styles from '../../../styles'
@@ -12,6 +13,7 @@ import {
   cervixFirmness as firmnessLabels,
   cervixPosition as positionLabels
 } from '../labels/labels'
+import ActionButtonFooter from './action-button-footer'
 
 export default class Cervix extends Component {
   constructor(props) {
@@ -45,76 +47,76 @@ export default class Cervix extends Component {
     const cervixPositionRadioProps = [
       {label: positionLabels[0], value: 0 },
       {label: positionLabels[1], value: 1 },
-      {label: positionLabels[2], value: 2 }
+      { label: positionLabels[2], value: 2 }
     ]
-    return(
-      <View style={ styles.symptomEditView }>
-        <Text style={styles.symptomDayView}>Cervix</Text>
-        <Text style={styles.symptomDayView}>Opening</Text>
-        <View style={styles.radioButtonRow}>
-          <RadioForm
-            radio_props={cervixOpeningRadioProps}
-            initial={this.state.opening}
-            formHorizontal={true}
-            labelHorizontal={false}
-            labelStyle={styles.radioButton}
-            onPress={(itemValue) => {
-              this.setState({opening: itemValue})
-            }}
-          />
-        </View>
-        <Text style={styles.symptomDayView}>Firmness</Text>
-        <View style={styles.radioButtonRow}>
-          <RadioForm
-            radio_props={cervixFirmnessRadioProps}
-            initial={this.state.firmness}
-            formHorizontal={true}
-            labelHorizontal={false}
-            labelStyle={styles.radioButton}
-            onPress={(itemValue) => {
-              this.setState({firmness: itemValue})
-            }}
-          />
-        </View>
-        <Text style={styles.symptomDayView}>Position</Text>
-        <View style={styles.radioButtonRow}>
-          <RadioForm
-            radio_props={cervixPositionRadioProps}
-            initial={this.state.position}
-            formHorizontal={true}
-            labelHorizontal={false}
-            labelStyle={styles.radioButton}
-            onPress={(itemValue) => {
-              this.setState({position: itemValue})
-            }}
-          />
-        </View>
-        <View style={styles.symptomViewRowInline}>
-          <Text style={styles.symptomDayView}>Exclude</Text>
-          <Switch
-            onValueChange={(val) => {
-              this.setState({ exclude: val })
-            }}
-            value={this.state.exclude}
-          />
-        </View>
-        <View style={styles.actionButtonRow}>
-          {this.makeActionButtons(
-            {
-              symptom: 'cervix',
-              cycleDay: this.cycleDay,
-              saveAction: () => {
-                saveSymptom('cervix', this.cycleDay, {
-                  opening: this.state.opening,
-                  firmness: this.state.firmness,
-                  position: this.state.position,
-                  exclude: this.state.exclude
-                })
-              },
-              saveDisabled: this.state.opening === -1 || this.state.firmness === -1
-            }
-          )}
-        </View>
+    return (
+      <View style={{ flex: 1 }}>
+        <ScrollView>
+          <View>
+            <Text style={styles.symptomDayView}>Opening</Text>
+            <View style={styles.radioButtonRow}>
+              <RadioForm
+                radio_props={cervixOpeningRadioProps}
+                initial={this.state.opening}
+                formHorizontal={true}
+                labelHorizontal={false}
+                labelStyle={styles.radioButton}
+                onPress={(itemValue) => {
+                  this.setState({ opening: itemValue })
+                }}
+              />
+            </View>
+            <Text style={styles.symptomDayView}>Firmness</Text>
+            <View style={styles.radioButtonRow}>
+              <RadioForm
+                radio_props={cervixFirmnessRadioProps}
+                initial={this.state.firmness}
+                formHorizontal={true}
+                labelHorizontal={false}
+                labelStyle={styles.radioButton}
+                onPress={(itemValue) => {
+                  this.setState({ firmness: itemValue })
+                }}
+              />
+            </View>
+            <Text style={styles.symptomDayView}>Position</Text>
+            <View style={styles.radioButtonRow}>
+              <RadioForm
+                radio_props={cervixPositionRadioProps}
+                initial={this.state.position}
+                formHorizontal={true}
+                labelHorizontal={false}
+                labelStyle={styles.radioButton}
+                onPress={(itemValue) => {
+                  this.setState({ position: itemValue })
+                }}
+              />
+            </View>
+            <View style={styles.symptomViewRowInline}>
+              <Text style={styles.symptomDayView}>Exclude</Text>
+              <Switch
+                onValueChange={(val) => {
+                  this.setState({ exclude: val })
+                }}
+                value={this.state.exclude}
+              />
+            </View>
+          </View>
+        </ScrollView>
+        <ActionButtonFooter
+          symptom='cervix'
+          cycleDay={this.cycleDay}
+          saveAction={() => {
+            saveSymptom('cervix', this.cycleDay, {
+              opening: this.state.opening,
+              firmness: this.state.firmness,
+              position: this.state.position,
+              exclude: this.state.exclude
+            })
+          }}
+          saveDisabled={this.state.opening === -1 || this.state.firmness === -1}
+          navigate={this.props.navigate}
+        />
       </View>
     )
   }

components/cycle-day/symptoms/desire.js

@@ -1,12 +1,13 @@
 import React, { Component } from 'react'
 import {
   View,
-  Text
+  ScrollView
 } from 'react-native'
 import RadioForm from 'react-native-simple-radio-button'
 import styles from '../../../styles'
 import { saveSymptom } from '../../../db'
 import { intensity as labels } from '../labels/labels'
+import ActionButtonFooter from './action-button-footer'
 
 export default class Desire extends Component {
   constructor(props) {
@@ -27,32 +28,32 @@ export default class Desire extends Component {
       { label: labels[2], value: 2 }
     ]
     return (
-      <View style={styles.symptomEditView}>
-        <Text style={styles.symptomDayView}>Desire</Text>
-        <View style={styles.radioButtonRow}>
-          <RadioForm
-            radio_props={desireRadioProps}
-            initial={this.state.currentValue}
-            formHorizontal={true}
-            labelHorizontal={false}
-            labelStyle={styles.radioButton}
-            onPress={(itemValue) => {
-              this.setState({ currentValue: itemValue })
-            }}
-          />
-        </View>
-        <View style={styles.actionButtonRow}>
-          {this.makeActionButtons(
-            {
-              symptom: 'desire',
-              cycleDay: this.cycleDay,
-              saveAction: () => {
-                saveSymptom('desire', this.cycleDay, { value: this.state.currentValue })
-              },
-              saveDisabled: this.state.currentValue === -1
-            }
-          )}
-        </View>
+      <View style={{ flex: 1 }}>
+        <ScrollView>
+          <View>
+            <View style={styles.radioButtonRow}>
+              <RadioForm
+                radio_props={desireRadioProps}
+                initial={this.state.currentValue}
+                formHorizontal={true}
+                labelHorizontal={false}
+                labelStyle={styles.radioButton}
+                onPress={(itemValue) => {
+                  this.setState({ currentValue: itemValue })
+                }}
+              />
+            </View>
+          </View>
+        </ScrollView>
+        <ActionButtonFooter
+          symptom='desire'
+          cycleDay={this.cycleDay}
+          saveAction={() => {
+            saveSymptom('desire', this.cycleDay, { value: this.state.currentValue })
+          }}
+          saveDisabled={this.state.currentValue === -1}
+          navigate={this.props.navigate}
+        />
       </View>
     )
   }

components/cycle-day/symptoms/index.js

@@ -14,4 +14,4 @@ export default {
   NoteEditView,
   DesireEditView,
   SexEditView
-}
+}

components/cycle-day/symptoms/mucus.js

@@ -2,7 +2,8 @@ import React, { Component } from 'react'
 import {
   View,
   Text,
-  Switch
+  Switch,
+  ScrollView
 } from 'react-native'
 import RadioForm from 'react-native-simple-radio-button'
 import styles from '../../../styles'
@@ -12,6 +13,7 @@ import {
   mucusTexture as textureLabels
 } from '../labels/labels'
 import computeSensiplanValue from '../../../lib/sensiplan-mucus'
+import ActionButtonFooter from './action-button-footer'
 
 
 export default class Mucus extends Component {
@@ -31,78 +33,75 @@ export default class Mucus extends Component {
       }
     })
     /* eslint-enable react/no-direct-mutation-state */
-
   }
 
   render() {
     const mucusFeelingRadioProps = [
-      {label: feelingLabels[0], value: 0 },
-      {label: feelingLabels[1], value: 1 },
-      {label: feelingLabels[2], value: 2 },
-      {label: feelingLabels[3], value: 3 }
+      { label: feelingLabels[0], value: 0 },
+      { label: feelingLabels[1], value: 1 },
+      { label: feelingLabels[2], value: 2 },
+      { label: feelingLabels[3], value: 3 }
     ]
     const mucusTextureRadioProps = [
-      {label: textureLabels[0], value: 0 },
-      {label: textureLabels[1], value: 1 },
-      {label: textureLabels[2], value: 2 }
+      { label: textureLabels[0], value: 0 },
+      { label: textureLabels[1], value: 1 },
+      { label: textureLabels[2], value: 2 }
     ]
-    return(
-      <View style={ styles.symptomEditView }>
-        <Text style={styles.symptomDayView}>Mucus</Text>
-        <Text style={styles.symptomDayView}>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 })
-            }}
-          />
-        </View>
-        <Text style={styles.symptomDayView}>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 })
-            }}
-          />
-        </View>
-        <View style={styles.symptomViewRowInline}>
-          <Text style={styles.symptomDayView}>Exclude</Text>
-          <Switch
-            onValueChange={(val) => {
-              this.setState({ exclude: val })
-            }}
-            value={this.state.exclude}
-          />
-        </View>
-
-        <View style={styles.actionButtonRow}>
-          {this.makeActionButtons(
-            {
-              symptom: 'mucus',
-              cycleDay: this.cycleDay,
-              saveAction: () => {
-                saveSymptom('mucus', this.cycleDay, {
-                  feeling: this.state.feeling,
-                  texture: this.state.texture,
-                  value: computeSensiplanValue(this.state.feeling, this.state.texture),
-                  exclude: this.state.exclude
-                })
-              },
-              saveDisabled: this.state.feeling === -1 || this.state.texture === -1
-            }
-          )}
-        </View>
-
+    return (
+      <View style={{ flex: 1 }}>
+        <ScrollView>
+          <View>
+            <Text style={styles.symptomDayView}>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 })
+                }}
+              />
+            </View>
+            <Text style={styles.symptomDayView}>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 })
+                }}
+              />
+            </View>
+            <View style={styles.symptomViewRowInline}>
+              <Text style={styles.symptomDayView}>Exclude</Text>
+              <Switch
+                onValueChange={(val) => {
+                  this.setState({ exclude: val })
+                }}
+                value={this.state.exclude}
+              />
+            </View>
+          </View>
+        </ScrollView>
+        <ActionButtonFooter
+          symptom='mucus'
+          cycleDay={this.cycleDay}
+          saveAction={() => {
+            saveSymptom('mucus', this.cycleDay, {
+              feeling: this.state.feeling,
+              texture: this.state.texture,
+              value: computeSensiplanValue(this.state.feeling, this.state.texture),
+              exclude: this.state.exclude
+            })
+          }}
+          saveDisabled={this.state.feeling === -1 || this.state.texture === -1}
+          navigate={this.props.navigate}
+        />
       </View>
     )
   }

components/cycle-day/symptoms/note.js

@@ -1,12 +1,13 @@
 import React, { Component } from 'react'
 import {
   View,
-  Text,
+  ScrollView,
   TextInput,
 } from 'react-native'
 
 import styles from '../../../styles'
 import { saveSymptom } from '../../../db'
+import ActionButtonFooter from './action-button-footer'
 
 export default class Temp extends Component {
   constructor(props) {
@@ -22,31 +23,31 @@ export default class Temp extends Component {
 
   render() {
     return (
-      <View style={styles.symptomEditView}>
-        <View style={styles.symptomViewRow}>
-          <Text style={styles.symptomDayView}>Note</Text>
-          <TextInput
-            multiline={true}
-            placeholder="Enter"
-            onChangeText={(val) => {
-              this.setState({ currentValue: val })
-            }}
-            value={this.state.currentValue}
-          />
-        </View>
-        <View style={styles.actionButtonRow}>
-          {this.makeActionButtons({
-            symptom: 'note',
-            cycleDay: this.cycleDay,
-            saveAction: () => {
-              saveSymptom('note', this.cycleDay, {
-                value: this.state.currentValue
-              })
-            },
-            saveDisabled: !this.state.currentValue
-          })}
-        </View>
+      <View style={{ flex: 1 }}>
+        <ScrollView>
+          <View style={styles.symptomViewRow}>
+            <TextInput
+              multiline={true}
+              placeholder="Enter"
+              onChangeText={(val) => {
+                this.setState({ currentValue: val })
+              }}
+              value={this.state.currentValue}
+            />
+          </View>
+        </ScrollView>
+        <ActionButtonFooter
+          symptom='note'
+          cycleDay={this.cycleDay}
+          saveAction={() => {
+            saveSymptom('note', this.cycleDay, {
+              value: this.state.currentValue
+            })
+          }}
+          saveDisabled={!this.state.currentValue}
+          navigate={this.props.navigate}
+        />
       </View>
     )
   }
-}
+}

components/cycle-day/symptoms/sex.js

@@ -3,7 +3,8 @@ import {
   CheckBox,
   Text,
   TextInput,
-  View
+  View,
+  ScrollView
 } from 'react-native'
 import styles from '../../../styles'
 import { saveSymptom } from '../../../db'
@@ -11,13 +12,14 @@ import {
   sexActivity as activityLabels,
   contraceptives as contraceptiveLabels
 } from '../labels/labels'
+import ActionButtonFooter from './action-button-footer'
 
 export default class Sex extends Component {
   constructor(props) {
     super(props)
     this.cycleDay = props.cycleDay
     this.state = {}
-    if (this.cycleDay.sex !== null ) {
+    if (this.cycleDay.sex !== null) {
       Object.assign(this.state, this.cycleDay.sex)
       // We make sure other is always true when there is a note,
       // e.g. when import is messed up.
@@ -30,127 +32,127 @@ 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>
-        <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)
+      <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 })
+                }}
+              />
             }
-          )}
-        </View>
+          </View>
+        </ScrollView>
+        <ActionButtonFooter
+          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)}
+          navigate={this.props.navigate}
+        />
       </View>
     )
   }
-}
+}

components/cycle-day/symptoms/temperature.js

@@ -5,7 +5,8 @@ import {
   TextInput,
   Switch,
   Keyboard,
-  Alert
+  Alert,
+  ScrollView
 } from 'react-native'
 import DateTimePicker from 'react-native-modal-datetime-picker-nevo'
 
@@ -15,6 +16,7 @@ import { LocalTime, ChronoUnit } from 'js-joda'
 import { temperature as tempLabels } from '../labels/labels'
 import { scaleObservable } from '../../../local-storage'
 import { shared } from '../../labels'
+import ActionButtonFooter from './action-button-footer'
 
 const minutes = ChronoUnit.MINUTES
 
@@ -50,64 +52,68 @@ export default class Temp extends Component {
 
   render() {
     return (
-      <View style={styles.symptomEditView}>
-        <View style={styles.symptomViewRowInline}>
-          <Text style={styles.symptomDayView}>Temperature (°C)</Text>
-          <TempInput
-            value={this.state.temperature}
-            setState={(val) => this.setState(val)}
-            isSuggestion={this.state.isSuggestion}
-          />
-        </View>
-        <View style={styles.symptomViewRowInline}>
-          <Text style={styles.symptomDayView}>Time</Text>
-          <TextInput
-            style={styles.temperatureTextInput}
-            onFocus={() => {
-              Keyboard.dismiss()
-              this.setState({isTimePickerVisible: true})
-            }}
-            value={this.state.time}
-          />
-        </View>
-        <DateTimePicker
-          mode="time"
-          isVisible={this.state.isTimePickerVisible}
-          onConfirm={jsDate => {
-            this.setState({
-              time: `${jsDate.getHours()}:${jsDate.getMinutes()}`,
-              isTimePickerVisible: false
-            })
+      <View style={{ flex: 1 }}>
+        <ScrollView>
+          <View>
+            <View style={styles.symptomViewRowInline}>
+              <Text style={styles.symptomDayView}>Temperature (°C)</Text>
+              <TempInput
+                value={this.state.temperature}
+                setState={(val) => this.setState(val)}
+                isSuggestion={this.state.isSuggestion}
+              />
+            </View>
+            <View style={styles.symptomViewRowInline}>
+              <Text style={styles.symptomDayView}>Time</Text>
+              <TextInput
+                style={styles.temperatureTextInput}
+                onFocus={() => {
+                  Keyboard.dismiss()
+                  this.setState({ isTimePickerVisible: true })
+                }}
+                value={this.state.time}
+              />
+            </View>
+            <DateTimePicker
+              mode="time"
+              isVisible={this.state.isTimePickerVisible}
+              onConfirm={jsDate => {
+                this.setState({
+                  time: `${jsDate.getHours()}:${jsDate.getMinutes()}`,
+                  isTimePickerVisible: false
+                })
+              }}
+              onCancel={() => this.setState({ isTimePickerVisible: false })}
+            />
+            <View style={styles.symptomViewRowInline}>
+              <Text style={styles.symptomDayView}>Exclude</Text>
+              <Switch
+                onValueChange={(val) => {
+                  this.setState({ exclude: val })
+                }}
+                value={this.state.exclude}
+              />
+            </View>
+          </View>
+        </ScrollView>
+        <ActionButtonFooter
+          symptom='temperature'
+          cycleDay={this.cycleDay}
+          saveAction={() => {
+            const dataToSave = {
+              value: Number(this.state.temperature),
+              exclude: this.state.exclude,
+              time: this.state.time
+            }
+            saveSymptom('temperature', this.cycleDay, dataToSave)
           }}
-          onCancel={() => this.setState({isTimePickerVisible: false})}
+          saveDisabled={
+            this.state.temperature === '' ||
+            isNaN(Number(this.state.temperature)) ||
+            isInvalidTime(this.state.time)
+          }
+          navigate={this.props.navigate}
         />
-        <View style={styles.symptomViewRowInline}>
-          <Text style={styles.symptomDayView}>Exclude</Text>
-          <Switch
-            onValueChange={(val) => {
-              this.setState({ exclude: val })
-            }}
-            value={this.state.exclude}
-          />
-        </View>
-        <View style={styles.actionButtonRow}>
-          {this.makeActionButtons({
-            symptom: 'temperature',
-            cycleDay: this.cycleDay,
-            saveAction: async () => {
-              const dataToSave = {
-                value: Number(this.state.temperature),
-                exclude: this.state.exclude,
-                time: this.state.time
-              }
-              saveSymptom('temperature', this.cycleDay, dataToSave)
-            },
-            saveDisabled:
-              this.state.temperature === '' ||
-              isNaN(Number(this.state.temperature)) ||
-              isInvalidTime(this.state.time)
-          })}
-        </View>
       </View>
     )
   }