lori/drip
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make header back arrow function for auto save

Browse Source
This commit is contained in:
Julia Friesel
2019-05-12 20:41:13 +02:00
parent bc13f5c1e6
commit d1e16abe34
14 changed files with 228 additions and 241 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/app.js
+5 -12
View File
@@ -125,19 +125,12 @@ export default class App extends Component {
goBack={this.handleBackButtonPress} goBack={this.handleBackButtonPress}
/> />
} }
{this.isSymptomView() &&
<Header
title={title}
isSymptomView={true}
goBack={this.handleBackButtonPress}
date={currentProps.date}
goToSymptomInfo={() => this.navigate(INFO_SYMPTOM_PAGE, {
symptomView: currentPage,
...currentProps
})}
/>}
<Page navigate={this.navigate} {...currentProps} /> <Page
navigate={this.navigate}
{...currentProps}
handleBackButtonPress={this.handleBackButtonPress}
/>
{!this.isSymptomView() && {!this.isSymptomView() &&
<Menu navigate={this.navigate} currentPage={currentPage} /> <Menu navigate={this.navigate} currentPage={currentPage} />
components/cycle-day/symptoms/bleeding.js
+25 -28
View File
@@ -1,6 +1,5 @@
import React from 'react' import React from 'react'
import { import {
View,
Switch, Switch,
ScrollView ScrollView
} from 'react-native' } from 'react-native'
@@ -34,7 +33,7 @@ export default class Bleeding extends SymptomView {
}) })
} }
render() { renderContent() {
const bleedingRadioProps = [ const bleedingRadioProps = [
{ label: bleeding.labels[0], value: 0 }, { label: bleeding.labels[0], value: 0 },
{ label: bleeding.labels[1], value: 1 }, { label: bleeding.labels[1], value: 1 },
@@ -42,32 +41,30 @@ export default class Bleeding extends SymptomView {
{ label: bleeding.labels[3], value: 3 }, { label: bleeding.labels[3], value: 3 },
] ]
return ( return (
<View style={{ flex: 1 }}> <ScrollView style={styles.page}>
<ScrollView style={styles.page}> <SymptomSection
<SymptomSection header={bleeding.heaviness.header}
header={bleeding.heaviness.header} explainer={bleeding.heaviness.explainer}
explainer={bleeding.heaviness.explainer} >
> <SelectTabGroup
<SelectTabGroup buttons={bleedingRadioProps}
buttons={bleedingRadioProps} active={this.state.currentValue}
active={this.state.currentValue} onSelect={val => this.setState({ currentValue: val })}
onSelect={val => this.setState({ currentValue: val })} />
/> </SymptomSection>
</SymptomSection> <SymptomSection
<SymptomSection header={bleeding.exclude.header}
header={bleeding.exclude.header} explainer={bleeding.exclude.explainer}
explainer={bleeding.exclude.explainer} inline={true}
inline={true} >
> <Switch
<Switch onValueChange={(val) => {
onValueChange={(val) => { this.setState({ exclude: val })
this.setState({ exclude: val }) }}
}} value={this.state.exclude}
value={this.state.exclude} />
/> </SymptomSection>
</SymptomSection> </ScrollView>
</ScrollView>
</View>
) )
} }
} }
components/cycle-day/symptoms/cervix.js
+45 -48
View File
@@ -1,6 +1,5 @@
import React from 'react' import React from 'react'
import { import {
View,
Switch, Switch,
ScrollView ScrollView
} from 'react-native' } from 'react-native'
@@ -35,7 +34,7 @@ export default class Cervix extends SymptomView {
}) })
} }
render() { renderContent() {
const cervixOpeningRadioProps = [ const cervixOpeningRadioProps = [
{ label: labels.opening.categories[0], value: 0 }, { label: labels.opening.categories[0], value: 0 },
{ label: labels.opening.categories[1], value: 1 }, { label: labels.opening.categories[1], value: 1 },
@@ -52,52 +51,50 @@ export default class Cervix extends SymptomView {
] ]
const mandatoryNotCompleted = typeof this.state.opening != 'number' || typeof this.state.firmness != 'number' const mandatoryNotCompleted = typeof this.state.opening != 'number' || typeof this.state.firmness != 'number'
return ( return (
<View style={{ flex: 1 }}> <ScrollView style={styles.page}>
<ScrollView style={styles.page}> <SymptomSection
<SymptomSection header="Opening"
header="Opening" explainer={labels.opening.explainer}
explainer={labels.opening.explainer} >
> <SelectTabGroup
<SelectTabGroup buttons={cervixOpeningRadioProps}
buttons={cervixOpeningRadioProps} active={this.state.opening}
active={this.state.opening} onSelect={val => this.setState({ opening: val })}
onSelect={val => this.setState({ opening: val })} />
/> </SymptomSection>
</SymptomSection> <SymptomSection
<SymptomSection header="Firmness"
header="Firmness" explainer={labels.firmness.explainer}
explainer={labels.firmness.explainer} >
> <SelectTabGroup
<SelectTabGroup buttons={cervixFirmnessRadioProps}
buttons={cervixFirmnessRadioProps} active={this.state.firmness}
active={this.state.firmness} onSelect={val => this.setState({ firmness: val })}
onSelect={val => this.setState({ firmness: val })} />
/> </SymptomSection>
</SymptomSection> <SymptomSection
<SymptomSection header="Position"
header="Position" explainer={labels.position.explainer}
explainer={labels.position.explainer} >
> <SelectTabGroup
<SelectTabGroup buttons={cervixPositionRadioProps}
buttons={cervixPositionRadioProps} active={this.state.position}
active={this.state.position} onSelect={val => this.setState({ position: val })}
onSelect={val => this.setState({ position: val })} />
/> </SymptomSection>
</SymptomSection> <SymptomSection
<SymptomSection header="Exclude"
header="Exclude" explainer="You can exclude this value if you don't want to use it for fertility detection"
explainer="You can exclude this value if you don't want to use it for fertility detection" inline={true}
inline={true} >
> <Switch
<Switch onValueChange={(val) => {
onValueChange={(val) => { this.setState({ exclude: val })
this.setState({ exclude: val }) }}
}} value={this.state.exclude}
value={this.state.exclude} />
/> </SymptomSection>
</SymptomSection> </ScrollView>
</ScrollView>
</View>
) )
} }
} }
components/cycle-day/symptoms/desire.js
+13 -15
View File
@@ -28,27 +28,25 @@ export default class Desire extends SymptomView {
this.saveSymptomEntry({ value: this.state.currentValue }) this.saveSymptomEntry({ value: this.state.currentValue })
} }
render() { renderContent() {
const desireRadioProps = [ const desireRadioProps = [
{ label: intensity[0], value: 0 }, { label: intensity[0], value: 0 },
{ label: intensity[1], value: 1 }, { label: intensity[1], value: 1 },
{ label: intensity[2], value: 2 } { label: intensity[2], value: 2 }
] ]
return ( return (
<View style={{ flex: 1 }}> <ScrollView style={styles.page}>
<ScrollView style={styles.page}> <SymptomSection
<SymptomSection header={desire.header}
header={desire.header} explainer={desire.explainer}
explainer={desire.explainer} >
> <SelectTabGroup
<SelectTabGroup buttons={desireRadioProps}
buttons={desireRadioProps} active={this.state.currentValue}
active={this.state.currentValue} onSelect={val => this.setState({ currentValue: val })}
onSelect={val => this.setState({ currentValue: val })} />
/> </SymptomSection>
</SymptomSection> </ScrollView>
</ScrollView>
</View>
) )
} }
} }
components/cycle-day/symptoms/mood.js
+14 -16
View File
@@ -47,19 +47,18 @@ export default class Mood extends SymptomView {
} }
} }
render() { renderContent() {
return ( return (
<View style={{ flex: 1 }}> <ScrollView style={styles.page}>
<ScrollView style={styles.page}> <SymptomSection
<SymptomSection explainer={labels.explainer}
explainer={labels.explainer} >
> <SelectBoxGroup
<SelectBoxGroup labels={labels.categories}
labels={labels.categories} onSelect={this.toggleState}
onSelect={this.toggleState} optionsState={this.state}
optionsState={this.state} />
/> { this.state.other &&
{ this.state.other &&
<TextInput <TextInput
autoFocus={this.state.focusTextArea} autoFocus={this.state.focusTextArea}
multiline={true} multiline={true}
@@ -69,10 +68,9 @@ export default class Mood extends SymptomView {
this.setState({note: val}) this.setState({note: val})
}} }}
/> />
} }
</SymptomSection> </SymptomSection>
</ScrollView> </ScrollView>
</View>
) )
} }
} }
components/cycle-day/symptoms/mucus.js
+35 -37
View File
@@ -38,7 +38,7 @@ export default class Mucus extends SymptomView {
}) })
} }
render() { renderContent() {
const mucusFeeling = [ const mucusFeeling = [
{ label: labels.feeling.categories[0], value: 0 }, { label: labels.feeling.categories[0], value: 0 },
{ label: labels.feeling.categories[1], value: 1 }, { label: labels.feeling.categories[1], value: 1 },
@@ -52,42 +52,40 @@ export default class Mucus extends SymptomView {
] ]
const mandatoryNotCompletedYet = typeof this.state.feeling != 'number' || typeof this.state.texture != 'number' const mandatoryNotCompletedYet = typeof this.state.feeling != 'number' || typeof this.state.texture != 'number'
return ( return (
<View style={{ flex: 1 }}> <ScrollView style={styles.page}>
<ScrollView style={styles.page}> <SymptomSection
<SymptomSection header='Feeling'
header='Feeling' explainer={labels.feeling.explainer}
explainer={labels.feeling.explainer} >
> <SelectTabGroup
<SelectTabGroup buttons={mucusFeeling}
buttons={mucusFeeling} onSelect={val => this.setState({ feeling: val })}
onSelect={val => this.setState({ feeling: val })} active={this.state.feeling}
active={this.state.feeling} />
/> </SymptomSection>
</SymptomSection> <SymptomSection
<SymptomSection header='Texture'
header='Texture' explainer={labels.texture.explainer}
explainer={labels.texture.explainer} >
> <SelectTabGroup
<SelectTabGroup buttons={mucusTexture}
buttons={mucusTexture} onSelect={val => this.setState({ texture: val })}
onSelect={val => this.setState({ texture: val })} active={this.state.texture}
active={this.state.texture} />
/> </SymptomSection>
</SymptomSection> <SymptomSection
<SymptomSection header="Exclude"
header="Exclude" explainer={labels.excludeExplainer}
explainer={labels.excludeExplainer} inline={true}
inline={true} >
> <Switch
<Switch onValueChange={(val) => {
onValueChange={(val) => { this.setState({ exclude: val })
this.setState({ exclude: val }) }}
}} value={this.state.exclude}
value={this.state.exclude} />
/> </SymptomSection>
</SymptomSection> </ScrollView>
</ScrollView>
</View>
) )
} }
} }
components/cycle-day/symptoms/note.js
+16 -18
View File
@@ -34,25 +34,23 @@ export default class Note extends SymptomView {
}) })
} }
render() { renderContent() {
return ( return (
<View style={{ flex: 1 }}> <ScrollView style={styles.page}>
<ScrollView style={styles.page}> <SymptomSection
<SymptomSection explainer={noteExplainer}
explainer={noteExplainer} >
> <TextInput
<TextInput autoFocus={!this.state.currentValue}
autoFocus={!this.state.currentValue} multiline={true}
multiline={true} placeholder={sharedLabels.enter}
placeholder={sharedLabels.enter} onChangeText={(val) => {
onChangeText={(val) => { this.setState({ currentValue: val })
this.setState({ currentValue: val }) }}
}} value={this.state.currentValue}
value={this.state.currentValue} />
/> </SymptomSection>
</SymptomSection> </ScrollView>
</ScrollView>
</View>
) )
} }
} }
components/cycle-day/symptoms/pain.js
+14 -18
View File
@@ -2,7 +2,6 @@ import React from 'react'
import { import {
ScrollView, ScrollView,
TextInput, TextInput,
View
} from 'react-native' } from 'react-native'
import { pain as labels } from '../../../i18n/en/cycle-day' import { pain as labels } from '../../../i18n/en/cycle-day'
import { shared as sharedLabels } from '../../../i18n/en/labels' import { shared as sharedLabels } from '../../../i18n/en/labels'
@@ -49,19 +48,18 @@ export default class Pain extends SymptomView {
} }
} }
render() { renderContent() {
return ( return (
<View style={{ flex: 1 }}> <ScrollView style={styles.page}>
<ScrollView style={styles.page}> <SymptomSection
<SymptomSection explainer={labels.explainer}
explainer={labels.explainer} >
> <SelectBoxGroup
<SelectBoxGroup labels={labels.categories}
labels={labels.categories} onSelect={this.toggleState}
onSelect={this.toggleState} optionsState={this.state}
optionsState={this.state} />
/> { this.state.other &&
{ this.state.other &&
<TextInput <TextInput
autoFocus={this.state.focusTextArea} autoFocus={this.state.focusTextArea}
multiline={true} multiline={true}
@@ -71,10 +69,8 @@ export default class Pain extends SymptomView {
this.setState({note: val}) this.setState({note: val})
}} }}
/> />
} }
</SymptomSection> </SymptomSection>
</ScrollView> </ScrollView>)
</View>
)
} }
} }
components/cycle-day/symptoms/sex.js
+25 -28
View File
@@ -1,7 +1,6 @@
import React from 'react' import React from 'react'
import { import {
TextInput, TextInput,
View,
ScrollView ScrollView
} from 'react-native' } from 'react-native'
import styles from '../../../styles' import styles from '../../../styles'
@@ -49,32 +48,31 @@ export default class Sex extends SymptomView {
} }
} }
render() { renderContent() {
return ( return (
<View style={{ flex: 1 }}> <ScrollView style={styles.page}>
<ScrollView style={styles.page}> <SymptomSection
<SymptomSection header={sexLabels.header}
header={sexLabels.header} explainer={sexLabels.explainer}
explainer={sexLabels.explainer} >
> <SelectBoxGroup
<SelectBoxGroup labels={sexLabels.categories}
labels={sexLabels.categories} onSelect={this.toggleState}
onSelect={this.toggleState} optionsState={this.state}
optionsState={this.state} />
/> </SymptomSection>
</SymptomSection> <SymptomSection
<SymptomSection header={contraceptivesLabels.header}
header={contraceptivesLabels.header} explainer={contraceptivesLabels.explainer}
explainer={contraceptivesLabels.explainer} >
> <SelectBoxGroup
<SelectBoxGroup labels={contraceptivesLabels.categories}
labels={contraceptivesLabels.categories} onSelect={this.toggleState}
onSelect={this.toggleState} optionsState={this.state}
optionsState={this.state} />
/> </SymptomSection>
</SymptomSection>
{this.state.other && {this.state.other &&
<TextInput <TextInput
autoFocus={this.state.focusTextArea} autoFocus={this.state.focusTextArea}
multiline={true} multiline={true}
@@ -84,9 +82,8 @@ export default class Sex extends SymptomView {
this.setState({ note: val }) this.setState({ note: val })
}} }}
/> />
} }
</ScrollView> </ScrollView>
</View>
) )
} }
} }
components/cycle-day/symptoms/symptom-view.js
+21 -1
View File
@@ -1,11 +1,15 @@
import React from 'react'
import { Component } from 'react' import { Component } from 'react'
import { BackHandler } from 'react-native' import { BackHandler, View } from 'react-native'
import { saveSymptom } from '../../../db' import { saveSymptom } from '../../../db'
import Header from '../../header/symptom-view'
import { headerTitles } from '../../../i18n/en/labels'
export default class SymptomView extends Component { export default class SymptomView extends Component {
constructor(props) { constructor(props) {
super() super()
this.backHandler = BackHandler.addEventListener('hardwareBackPress', this.onBackButtonPress.bind(this)) this.backHandler = BackHandler.addEventListener('hardwareBackPress', this.onBackButtonPress.bind(this))
this.globalBackhandler = props.handleBackButtonPress
this.symptomName = props.symptomName this.symptomName = props.symptomName
this.date = props.date this.date = props.date
} }
@@ -21,4 +25,20 @@ export default class SymptomView extends Component {
componentWillUnmount() { componentWillUnmount() {
this.backHandler.remove() this.backHandler.remove()
} }
render() {
return (
<View style={{flex: 1}}>
<Header
title={headerTitles[this.symptomName].toLowerCase()}
date={this.date}
goBack={() => {
this.onBackButtonPress()
this.globalBackhandler()
}}
/>
{this.renderContent()}
</View>
)
}
} }
components/cycle-day/symptoms/temperature.js
+1 -3
View File
@@ -116,13 +116,12 @@ export default class Temp extends SymptomView {
this.setState({ isTimePickerVisible: true }) this.setState({ isTimePickerVisible: true })
} }
render() { renderContent() {
const inputStyle = [styles.temperatureTextInput] const inputStyle = [styles.temperatureTextInput]
if (this.state.isSuggestion) { if (this.state.isSuggestion) {
inputStyle.push(styles.temperatureTextInputSuggestion) inputStyle.push(styles.temperatureTextInputSuggestion)
} }
return ( return (
<View style={{ flex: 1 }}>
<ScrollView style={styles.page}> <ScrollView style={styles.page}>
<SymptomSection <SymptomSection
header={labels.temperature.header} header={labels.temperature.header}
@@ -189,7 +188,6 @@ export default class Temp extends SymptomView {
/> />
</SymptomSection> </SymptomSection>
</ScrollView> </ScrollView>
</View>
) )
} }
} }
components/header/index.js
+1 -6
View File
@@ -3,7 +3,6 @@ import { Dimensions } from 'react-native'
import CycleDayHeader from './cycle-day' import CycleDayHeader from './cycle-day'
import DefaultHeader from './default' import DefaultHeader from './default'
import BackButtonHeader from './back-button' import BackButtonHeader from './back-button'
import SymptomViewHeader from './symptom-view'
export default function Header(p) { export default function Header(p) {
const middle = Dimensions.get('window').width / 2 const middle = Dimensions.get('window').width / 2
@@ -11,11 +10,7 @@ export default function Header(p) {
if (props.isCycleDayOverView) { if (props.isCycleDayOverView) {
return (<CycleDayHeader {...props} />) return (<CycleDayHeader {...props} />)
} } else if (props.showBackButton) {
else if (props.isSymptomView) {
return (<SymptomViewHeader {...props} />)
}
else if (props.showBackButton) {
return (<BackButtonHeader {...props} />) return (<BackButtonHeader {...props} />)
} }
else { else {
components/header/symptom-view.js
+4 -2
View File
@@ -2,7 +2,8 @@ import React from 'react'
import { import {
View, View,
Text, Text,
TouchableOpacity TouchableOpacity,
Dimensions
} from 'react-native' } from 'react-native'
import styles, { iconStyles } from '../../styles' import styles, { iconStyles } from '../../styles'
import FeatherIcon from 'react-native-vector-icons/Feather' import FeatherIcon from 'react-native-vector-icons/Feather'
@@ -10,11 +11,12 @@ import NavigationArrow from './navigation-arrow'
import formatDate from '../helpers/format-date' import formatDate from '../helpers/format-date'
export default function SymptomViewHeader(props) { export default function SymptomViewHeader(props) {
const middle = Dimensions.get('window').width / 2
return ( return (
<View style={[styles.header, styles.headerCycleDay, styles.headerSymptom]}> <View style={[styles.header, styles.headerCycleDay, styles.headerSymptom]}>
<View <View
style={styles.accentCircle} style={styles.accentCircle}
left={props.middle - styles.accentCircle.width / 2} left={middle - styles.accentCircle.width / 2}
/> />
<NavigationArrow <NavigationArrow
direction='left' direction='left'
i18n/en/labels.js
+9 -9
View File
@@ -32,15 +32,15 @@ export const headerTitles = {
Password: settingsTitles.password, Password: settingsTitles.password,
About: settingsTitles.about, About: settingsTitles.about,
License: settingsTitles.license, License: settingsTitles.license,
BleedingEditView: 'Bleeding', bleeding: 'Bleeding',
TemperatureEditView: 'Temperature', temperature: 'Temperature',
MucusEditView: 'Mucus', mucus: 'Mucus',
CervixEditView: 'Cervix', cervix: 'Cervix',
NoteEditView: 'Note', note: 'Note',
DesireEditView: 'Desire', desire: 'Desire',
SexEditView: 'Sex', sex: 'Sex',
PainEditView: 'Pain', pain: 'Pain',
MoodEditView: 'Mood', mood: 'Mood',
InfoSymptom: 'Info' InfoSymptom: 'Info'
} }