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

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