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

Adds info button to the body as alert

Browse Source
This commit is contained in:
emelko
2019-05-19 12:56:08 +02:00
parent 6811b5a692
commit ff1afcb8dc
7 changed files with 249 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/cycle-day/symptoms/bleeding.js
+40 -12
View File
@@ -1,11 +1,19 @@
import React from 'react'
import {
Alert,
Switch,
ScrollView
ScrollView,
TouchableOpacity,
View
} from 'react-native'
import styles from '../../../styles'
import FeatherIcon from 'react-native-vector-icons/Feather'
import { bleeding } from '../../../i18n/en/cycle-day'
import infoLabels from '../../../i18n/en/symptom-info'
import styles, { iconStyles } from '../../../styles'
import SelectTabGroup from '../select-tab-group'
import SymptomSection from './symptom-section'
import SymptomView from './symptom-view'
@@ -22,6 +30,14 @@ export default class Bleeding extends SymptomView {
symptomName = 'bleeding'
showInfoBox(){
const symptomName = 'bleeding'
Alert.alert(
infoLabels[symptomName].title,
infoLabels[symptomName].text
)
}
onBackButtonPress() {
if (typeof this.state.currentValue != 'number') {
this.deleteSymptomEntry()
@@ -42,16 +58,28 @@ export default class Bleeding extends SymptomView {
]
return (
<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>
<View style={{ flexDirection: 'row' }}>
<SymptomSection
header={bleeding.heaviness.header}
explainer={bleeding.heaviness.explainer}
>
<SelectTabGroup
buttons={bleedingRadioProps}
active={this.state.currentValue}
onSelect={val => this.setState({ currentValue: val })}
/>
</SymptomSection>
<View style={{ flex: 1 }}></View>
<TouchableOpacity
onPress={this.showInfoBox}
style={styles.infoButton}
>
<FeatherIcon
name="info"
style={iconStyles.symptomInfo}
/>
</TouchableOpacity>
</View>
<SymptomSection
header={bleeding.exclude.header}
explainer={bleeding.exclude.explainer}
components/cycle-day/symptoms/cervix.js
+40 -12
View File
@@ -1,11 +1,19 @@
import React from 'react'
import {
Alert,
Switch,
ScrollView
ScrollView,
TouchableOpacity,
View
} from 'react-native'
import styles from '../../../styles'
import FeatherIcon from 'react-native-vector-icons/Feather'
import { cervix as labels } from '../../../i18n/en/cycle-day'
import infoLabels from '../../../i18n/en/symptom-info'
import styles, { iconStyles } from '../../../styles'
import SelectTabGroup from '../select-tab-group'
import SymptomSection from './symptom-section'
import SymptomView from './symptom-view'
@@ -19,6 +27,14 @@ export default class Cervix extends SymptomView {
symptomName = 'cervix'
showInfoBox(){
const symptomName = 'cervix'
Alert.alert(
infoLabels[symptomName].title,
infoLabels[symptomName].text
)
}
onBackButtonPress() {
const nothingEntered = ['opening', 'firmness', 'position'].every(val => typeof this.state[val] != 'number')
if (nothingEntered) {
@@ -53,16 +69,28 @@ export default class Cervix extends SymptomView {
// const mandatoryNotCompleted = typeof this.state.opening != 'number' || typeof this.state.firmness != 'number'
return (
<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>
<View style={{ flexDirection: 'row' }}>
<SymptomSection
header="Opening"
explainer={labels.opening.explainer}
>
<SelectTabGroup
buttons={cervixOpeningRadioProps}
active={this.state.opening}
onSelect={val => this.setState({ opening: val })}
/>
</SymptomSection>
<View style={{ flex: 1 }}></View>
<TouchableOpacity
onPress={this.showInfoBox}
style={styles.infoButton}
>
<FeatherIcon
name="info"
style={iconStyles.symptomInfo}
/>
</TouchableOpacity>
</View>
<SymptomSection
header="Firmness"
explainer={labels.firmness.explainer}
components/cycle-day/symptoms/desire.js
+40 -12
View File
@@ -1,10 +1,18 @@
import React from 'react'
import {
ScrollView
Alert,
ScrollView,
TouchableOpacity,
View
} from 'react-native'
import styles from '../../../styles'
import FeatherIcon from 'react-native-vector-icons/Feather'
import infoLabels from '../../../i18n/en/symptom-info'
import { intensity, desire } from '../../../i18n/en/cycle-day'
import styles, { iconStyles } from '../../../styles'
import SelectTabGroup from '../select-tab-group'
import SymptomSection from './symptom-section'
import SymptomView from './symptom-view'
@@ -19,6 +27,14 @@ export default class Desire extends SymptomView {
symptomName = 'desire'
showInfoBox(){
const symptomName = 'desire'
Alert.alert(
infoLabels[symptomName].title,
infoLabels[symptomName].text
)
}
onBackButtonPress() {
if (typeof this.state.currentValue != 'number') {
this.deleteSymptomEntry()
@@ -35,16 +51,28 @@ export default class Desire extends SymptomView {
]
return (
<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>
<View style={{ flexDirection: 'row' }}>
<SymptomSection
header={desire.header}
explainer={desire.explainer}
>
<SelectTabGroup
buttons={desireRadioProps}
active={this.state.currentValue}
onSelect={val => this.setState({ currentValue: val })}
/>
</SymptomSection>
<View style={{ flex: 1 }}></View>
<TouchableOpacity
onPress={this.showInfoBox}
style={styles.infoButton}
>
<FeatherIcon
name="info"
style={iconStyles.symptomInfo}
/>
</TouchableOpacity>
</View>
</ScrollView>
)
}
components/cycle-day/symptoms/mucus.js
+42 -13
View File
@@ -1,12 +1,20 @@
import React from 'react'
import {
Alert,
Switch,
ScrollView
ScrollView,
TouchableOpacity,
View
} from 'react-native'
import styles from '../../../styles'
import FeatherIcon from 'react-native-vector-icons/Feather'
import styles, { iconStyles } from '../../../styles'
import infoLabels from '../../../i18n/en/symptom-info'
import { mucus as labels } from '../../../i18n/en/cycle-day'
import computeNfpValue from '../../../lib/nfp-mucus'
import SelectTabGroup from '../select-tab-group'
import SymptomSection from './symptom-section'
import SymptomView from './symptom-view'
@@ -19,6 +27,14 @@ export default class Mucus extends SymptomView {
}
symptomName = 'mucus'
showInfoBox(){
const symptomName = 'mucus'
Alert.alert(
infoLabels[symptomName].title,
infoLabels[symptomName].text
)
}
onBackButtonPress() {
const nothingEntered = ['feeling', 'texture'].every(val => typeof this.state[val] != 'number')
@@ -26,7 +42,7 @@ export default class Mucus extends SymptomView {
this.deleteSymptomEntry()
return
}
const feeling = this.state.feeling
const texture = this.state.texture
this.saveSymptomEntry({
@@ -53,16 +69,29 @@ export default class Mucus extends SymptomView {
// const mandatoryNotCompletedYet = typeof this.state.feeling != 'number' || typeof this.state.texture != 'number'
return (
<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>
<View style={{ flexDirection: 'row' }}>
<SymptomSection
header='Feeling'
explainer={labels.feeling.explainer}
>
<SelectTabGroup
buttons={mucusFeeling}
onSelect={val => this.setState({ feeling: val })}
active={this.state.feeling}
/>
</SymptomSection>
<View style={{ flex: 1 }}></View>
<TouchableOpacity
onPress={this.showInfoBox}
style={styles.infoButton}
>
<FeatherIcon
name="info"
style={iconStyles.symptomInfo}
/>
</TouchableOpacity>
</View>
<SymptomSection
header='Texture'
explainer={labels.texture.explainer}
components/cycle-day/symptoms/note.js
+41 -15
View File
@@ -1,13 +1,19 @@
import React from 'react'
import {
Alert,
ScrollView,
TextInput,
TouchableOpacity,
View
} from 'react-native'
import FeatherIcon from 'react-native-vector-icons/Feather'
import styles from '../../../styles'
import SymptomSection from './symptom-section'
import infoLabels from '../../../i18n/en/symptom-info'
import { noteExplainer } from '../../../i18n/en/cycle-day'
import { shared as sharedLabels } from '../../../i18n/en/labels'
import styles, { iconStyles } from '../../../styles'
import SymptomSection from './symptom-section'
import SymptomView from './symptom-view'
export default class Note extends SymptomView {
@@ -23,6 +29,14 @@ export default class Note extends SymptomView {
symptomName = 'note'
showInfoBox(){
const symptomName = 'note'
Alert.alert(
infoLabels[symptomName].title,
infoLabels[symptomName].text
)
}
onBackButtonPress() {
if (!this.state.currentValue) {
this.deleteSymptomEntry()
@@ -36,19 +50,31 @@ export default class Note extends SymptomView {
renderContent() {
return (
<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>
<View style={{ flexDirection: 'row' }}>
<SymptomSection
explainer={noteExplainer}
>
<TextInput
autoFocus={!this.state.currentValue}
multiline={true}
placeholder={sharedLabels.enter}
onChangeText={(val) => {
this.setState({ currentValue: val })
}}
value={this.state.currentValue}
/>
</SymptomSection>
<View style={{ flex: 1 }}></View>
<TouchableOpacity
onPress={this.showInfoBox}
style={styles.infoButton}
>
<FeatherIcon
name="info"
style={iconStyles.symptomInfo}
/>
</TouchableOpacity>
</View>
</ScrollView>
)
}
components/cycle-day/symptoms/sex.js
+41 -13
View File
@@ -1,12 +1,20 @@
import React from 'react'
import {
Alert,
ScrollView,
TextInput,
ScrollView
TouchableOpacity,
View
} from 'react-native'
import styles from '../../../styles'
import FeatherIcon from 'react-native-vector-icons/Feather'
import infoLabels from '../../../i18n/en/symptom-info'
import { sex as sexLabels, contraceptives as contraceptivesLabels } from '../../../i18n/en/cycle-day'
import { shared as sharedLabels } from '../../../i18n/en/labels'
import styles, { iconStyles } from '../../../styles'
import SelectBoxGroup from '../select-box-group'
import SymptomSection from './symptom-section'
import SymptomView from './symptom-view'
@@ -24,8 +32,16 @@ export default class Sex extends SymptomView {
if (this.state.note) this.state.other = true
}
symptomName = "sex"
symptomName = 'sex'
showInfoBox(){
const symptomName = 'sex'
Alert.alert(
infoLabels[symptomName].title,
infoLabels[symptomName].text
)
}
onBackButtonPress() {
const nothingEntered = Object.values(this.state).every(val => !val)
if (nothingEntered) {
@@ -51,16 +67,28 @@ export default class Sex extends SymptomView {
renderContent() {
return (
<ScrollView style={styles.page}>
<SymptomSection
header={sexLabels.header}
explainer={sexLabels.explainer}
>
<SelectBoxGroup
labels={sexLabels.categories}
onSelect={this.toggleState}
optionsState={this.state}
/>
</SymptomSection>
<View style={{ flexDirection: 'row' }}>
<SymptomSection
header={sexLabels.header}
explainer={sexLabels.explainer}
>
<SelectBoxGroup
labels={sexLabels.categories}
onSelect={this.toggleState}
optionsState={this.state}
/>
</SymptomSection>
<View style={{ flex: 1 }}></View>
<TouchableOpacity
onPress={this.showInfoBox}
style={styles.infoButton}
>
<FeatherIcon
name="info"
style={iconStyles.symptomInfo}
/>
</TouchableOpacity>
</View>
<SymptomSection
header={contraceptivesLabels.header}
explainer={contraceptivesLabels.explainer}
styles/index.js
+5
View File
@@ -474,6 +474,11 @@ export const iconStyles = {
symptomBoxActive: {
color: fontOnPrimaryColor
},
symptomInfo: {
color: secondaryColor,
marginHorizontal: 20,
fontSize: 25
},
menuIcon: {
size: 20,
color: fontOnPrimaryColor