Make scrolling work again

This commit is contained in:
Julia Friesel
2018-08-20 16:46:42 +02:00
parent 93b4758123
commit d53b8029dc
10 changed files with 354 additions and 337 deletions
+44 -42
View File
@@ -36,7 +36,7 @@ export default class CycleDayOverView extends Component {
const targetDate = target === 'before' ?
localDate.minusDays(1).toString() :
localDate.plusDays(1).toString()
this.setState({cycleDay: getOrCreateCycleDay(targetDate)})
this.setState({ cycleDay: getOrCreateCycleDay(targetDate) })
}
navigate(symptom) {
@@ -50,53 +50,55 @@ export default class CycleDayOverView extends Component {
const getCycleDayNumber = cycleModule().getCycleDayNumber
const cycleDayNumber = getCycleDayNumber(cycleDay.date)
return (
<ScrollView>
<View style={{ flex: 1 }}>
<Header
isCycleDayOverView={true}
cycleDayNumber={cycleDayNumber}
date={cycleDay.date}
/>
<View style={styles.symptomBoxesView}>
<SymptomBox
title='Bleeding'
onPress={() => this.navigate('BleedingEditView')}
data={getLabel('bleeding', cycleDay.bleeding)}
/>
<SymptomBox
title='Temperature'
onPress={() => this.navigate('TemperatureEditView')}
data={getLabel('temperature', cycleDay.temperature)}
/>
<SymptomBox
title='Mucus'
onPress={() => this.navigate('MucusEditView')}
data={getLabel('mucus', cycleDay.mucus)}
/>
<SymptomBox
title='Cervix'
onPress={() => this.navigate('CervixEditView')}
data={getLabel('cervix', cycleDay.cervix)}
/>
<SymptomBox
title='Note'
onPress={() => this.navigate('NoteEditView')}
data={getLabel('note', cycleDay.note)}
/>
<SymptomBox
title='Desire'
onPress={() => this.navigate('DesireEditView')}
data={getLabel('desire', cycleDay.desire)}
/>
<SymptomBox
title='Sex'
onPress={() => this.navigate('SexEditView')}
data={getLabel('sex', cycleDay.sex)}
/>
{/* this is just to make the last row adhere to the grid
<ScrollView>
<View style={styles.symptomBoxesView}>
<SymptomBox
title='Bleeding'
onPress={() => this.navigate('BleedingEditView')}
data={getLabel('bleeding', cycleDay.bleeding)}
/>
<SymptomBox
title='Temperature'
onPress={() => this.navigate('TemperatureEditView')}
data={getLabel('temperature', cycleDay.temperature)}
/>
<SymptomBox
title='Mucus'
onPress={() => this.navigate('MucusEditView')}
data={getLabel('mucus', cycleDay.mucus)}
/>
<SymptomBox
title='Cervix'
onPress={() => this.navigate('CervixEditView')}
data={getLabel('cervix', cycleDay.cervix)}
/>
<SymptomBox
title='Note'
onPress={() => this.navigate('NoteEditView')}
data={getLabel('note', cycleDay.note)}
/>
<SymptomBox
title='Desire'
onPress={() => this.navigate('DesireEditView')}
data={getLabel('desire', cycleDay.desire)}
/>
<SymptomBox
title='Sex'
onPress={() => this.navigate('SexEditView')}
data={getLabel('sex', cycleDay.sex)}
/>
{/* this is just to make the last row adhere to the grid
(and) because there are no pseudo properties in RN */}
<FillerBoxes />
</View >
</ScrollView >
<FillerBoxes />
</View >
</ScrollView >
</View >
)
}
}
+27 -24
View File
@@ -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'
@@ -33,30 +34,32 @@ export default class Bleeding extends Component {
{ label: labels[3], value: 3 },
]
return (
<View style={styles.menuOnBottom}>
<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 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>
<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}
+54 -51
View File
@@ -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'
@@ -49,57 +50,59 @@ export default class Cervix extends Component {
{ label: positionLabels[2], value: 2 }
]
return (
<View style={styles.menuOnBottom}>
<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 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>
<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}
+17 -15
View File
@@ -1,7 +1,7 @@
import React, { Component } from 'react'
import {
View,
Text
ScrollView
} from 'react-native'
import RadioForm from 'react-native-simple-radio-button'
import styles from '../../../styles'
@@ -28,21 +28,23 @@ export default class Desire extends Component {
{ label: labels[2], value: 2 }
]
return (
<View style={styles.menuOnBottom}>
<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 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>
</View>
</ScrollView>
<ActionButtonFooter
symptom='desire'
cycleDay={this.cycleDay}
+41 -38
View File
@@ -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'
@@ -47,44 +48,46 @@ export default class Mucus extends Component {
{ label: textureLabels[2], value: 2 }
]
return (
<View style={styles.menuOnBottom}>
<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 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>
<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}
+14 -12
View File
@@ -1,7 +1,7 @@
import React, { Component } from 'react'
import {
View,
Text,
ScrollView,
TextInput,
} from 'react-native'
@@ -23,17 +23,19 @@ export default class Temp extends Component {
render() {
return (
<View style={styles.menuOnBottom}>
<View style={styles.symptomViewRow}>
<TextInput
multiline={true}
placeholder="Enter"
onChangeText={(val) => {
this.setState({ currentValue: val })
}}
value={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}
+109 -106
View File
@@ -3,7 +3,8 @@ import {
CheckBox,
Text,
TextInput,
View
View,
ScrollView
} from 'react-native'
import styles from '../../../styles'
import { saveSymptom } from '../../../db'
@@ -18,7 +19,7 @@ export default class Sex extends Component {
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.
@@ -31,111 +32,113 @@ export default class Sex extends Component {
render() {
return (
<View style={styles.menuOnBottom}>
<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 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>
<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>
</ScrollView>
<ActionButtonFooter
symptom='sex'
cycleDay={this.cycleDay}
+46 -43
View File
@@ -5,6 +5,7 @@ import {
TextInput,
Switch,
Keyboard,
ScrollView
} from 'react-native'
import DateTimePicker from 'react-native-modal-datetime-picker-nevo'
@@ -42,52 +43,54 @@ export default class Temp extends Component {
render() {
return (
<View style={styles.menuOnBottom}>
<View>
<View style={styles.symptomViewRowInline}>
<Text style={styles.symptomDayView}>Temperature (°C)</Text>
<TextInput
style={styles.temperatureTextInput}
placeholder="Enter"
onChangeText={(val) => {
this.setState({ currentValue: val })
<View style={{ flex: 1 }}>
<ScrollView>
<View>
<View style={styles.symptomViewRowInline}>
<Text style={styles.symptomDayView}>Temperature (°C)</Text>
<TextInput
style={styles.temperatureTextInput}
placeholder="Enter"
onChangeText={(val) => {
this.setState({ currentValue: val })
}}
keyboardType='numeric'
value={this.state.currentValue}
/>
</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
})
}}
keyboardType='numeric'
value={this.state.currentValue}
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>
<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}