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