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

Merge branch '345-move-info-button-out-of-header-to-body' into marie-move-info-button-out-of-header-to-body

Browse Source
This commit is contained in:
Julia Friesel
2019-05-19 17:53:14 +02:00
parent c81f7d6291 d2c0891a68
commit 0f6567e66b
26 changed files with 481 additions and 397 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/cycle-day/symptoms/action-button-footer.js
-67
View File
@@ -1,67 +0,0 @@
import React, { Component } from 'react'
import {
View, TouchableOpacity, Text, Alert} from 'react-native'
import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
import { saveSymptom } from '../../../db'
import styles, {iconStyles} from '../../../styles'
import {sharedDialogs as labels} from '../../../i18n/en/cycle-day'
export default class ActionButtonFooter extends Component {
render() {
const {
symptom,
currentSymptomValue,
date,
navigate,
}
= this.props
const navigateToOverView = () => navigate('CycleDay', {date})
const buttons = [
{
title: labels.delete,
action: () => {
Alert.alert(
labels.areYouSureTitle,
labels.areYouSureToDelete,
[{
text: labels.cancel,
style: 'cancel'
}, {
text: labels.reallyDeleteData,
onPress: () => {
saveSymptom(symptom, date)
navigateToOverView()
}
}]
)
},
disabledCondition: (!currentSymptomValue ||
(Object.keys(currentSymptomValue).length === 0 && currentSymptomValue.constructor === Object) ||
(Object.values(currentSymptomValue).every(x => !x) && currentSymptomValue.constructor === Object)
),
icon: 'delete-outline'
}
]
return (
<View style={styles.menu}>
{buttons.map(({ title, action, icon }, i) => {
const textStyle = [styles.menuText]
return (
<TouchableOpacity
onPress={action}
style={styles.actionButtonItem}
key={i.toString()}
>
<Icon name={icon} {...iconStyles.menuIcon} />
<Text style={textStyle}>
{title.toLowerCase()}
</Text>
</TouchableOpacity>
)
})}
</View>
)
}
}
components/cycle-day/symptoms/bleeding.js
+1 -22
View File
@@ -1,16 +1,12 @@
import React from 'react'
import {
Alert,
Switch,
ScrollView,
TouchableOpacity,
View
} from 'react-native'
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 styles from '../../../styles'
import SelectTabGroup from '../select-tab-group'
@@ -30,14 +26,6 @@ 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()
@@ -70,15 +58,6 @@ export default class Bleeding extends SymptomView {
/>
</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}
components/cycle-day/symptoms/cervix.js
+12 -38
View File
@@ -1,16 +1,10 @@
import React from 'react'
import {
Alert,
Switch,
ScrollView,
TouchableOpacity,
View
} from 'react-native'
import FeatherIcon from 'react-native-vector-icons/Feather'
ScrollView} from 'react-native'
import { cervix as labels } from '../../../i18n/en/cycle-day'
import infoLabels from '../../../i18n/en/symptom-info'
import styles, { iconStyles } from '../../../styles'
import styles from '../../../styles'
import SelectTabGroup from '../select-tab-group'
@@ -27,14 +21,6 @@ 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) {
@@ -69,28 +55,16 @@ export default class Cervix extends SymptomView {
// const mandatoryNotCompleted = typeof this.state.opening != 'number' || typeof this.state.firmness != 'number'
return (
<ScrollView style={styles.page}>
<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="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}
components/cycle-day/symptoms/desire.js
+1 -23
View File
@@ -1,15 +1,11 @@
import React from 'react'
import {
Alert,
ScrollView,
TouchableOpacity,
View
} from 'react-native'
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 styles from '../../../styles'
import SelectTabGroup from '../select-tab-group'
@@ -27,14 +23,6 @@ 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()
@@ -62,16 +50,6 @@ export default class Desire extends SymptomView {
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/mood.js
+1 -22
View File
@@ -1,16 +1,12 @@
import React from 'react'
import {
Alert,
ScrollView,
TextInput,
TouchableOpacity,
View
} from 'react-native'
import FeatherIcon from 'react-native-vector-icons/Feather'
import infoLabels from '../../../i18n/en/symptom-info'
import { mood as labels } from '../../../i18n/en/cycle-day'
import styles, { iconStyles } from '../../../styles'
import styles from '../../../styles'
import SelectBoxGroup from '../select-box-group'
@@ -33,14 +29,6 @@ export default class Mood extends SymptomView {
symptomName = 'mood'
showInfoBox(){
const symptomName = 'mood'
Alert.alert(
infoLabels[symptomName].title,
infoLabels[symptomName].text
)
}
onBackButtonPress() {
const nothingEntered = Object.values(this.state).every(val => !val)
if (nothingEntered) {
@@ -69,15 +57,6 @@ export default class Mood extends SymptomView {
<SymptomSection
explainer={labels.explainer}
>
<TouchableOpacity
onPress={this.showInfoBox}
style={styles.infoButton}
>
<FeatherIcon
name="info"
style={iconStyles.symptomInfo}
/>
</TouchableOpacity>
<SelectBoxGroup
labels={labels.categories}
onSelect={this.toggleState}
components/cycle-day/symptoms/mucus.js
+1 -23
View File
@@ -1,15 +1,11 @@
import React from 'react'
import {
Alert,
Switch,
ScrollView,
TouchableOpacity,
View
} from 'react-native'
import FeatherIcon from 'react-native-vector-icons/Feather'
import styles, { iconStyles } from '../../../styles'
import infoLabels from '../../../i18n/en/symptom-info'
import styles from '../../../styles'
import { mucus as labels } from '../../../i18n/en/cycle-day'
import computeNfpValue from '../../../lib/nfp-mucus'
@@ -28,14 +24,6 @@ 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')
if (nothingEntered) {
@@ -80,16 +68,6 @@ export default class Mucus extends SymptomView {
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
components/cycle-day/symptoms/note.js
+1 -23
View File
@@ -1,17 +1,13 @@
import React from 'react'
import {
Alert,
ScrollView,
TextInput,
TouchableOpacity,
View
} from 'react-native'
import FeatherIcon from 'react-native-vector-icons/Feather'
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 styles from '../../../styles'
import SymptomSection from './symptom-section'
import SymptomView from './symptom-view'
@@ -29,14 +25,6 @@ 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()
@@ -64,16 +52,6 @@ export default class Note extends SymptomView {
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/pain.js
+1 -22
View File
@@ -1,17 +1,13 @@
import React from 'react'
import {
Alert,
ScrollView,
TextInput,
TouchableOpacity,
View
} from 'react-native'
import FeatherIcon from 'react-native-vector-icons/Feather'
import infoLabels from '../../../i18n/en/symptom-info'
import { pain as labels } from '../../../i18n/en/cycle-day'
import { shared as sharedLabels } from '../../../i18n/en/labels'
import styles, { iconStyles } from '../../../styles'
import styles from '../../../styles'
import SelectBoxGroup from '../select-box-group'
@@ -34,14 +30,6 @@ export default class Pain extends SymptomView {
symptomName = 'pain'
showInfoBox(){
const symptomName = 'pain'
Alert.alert(
infoLabels[symptomName].title,
infoLabels[symptomName].text
)
}
onBackButtonPress() {
const nothingEntered = Object.values(this.state).every(val => !val)
if (nothingEntered) {
@@ -71,15 +59,6 @@ export default class Pain extends SymptomView {
<SymptomSection
explainer={labels.explainer}
>
<TouchableOpacity
onPress={this.showInfoBox}
style={styles.infoButton}
>
<FeatherIcon
name="info"
style={iconStyles.symptomInfo}
/>
</TouchableOpacity>
<SelectBoxGroup
labels={labels.categories}
onSelect={this.toggleState}
components/cycle-day/symptoms/sex.js
+1 -22
View File
@@ -1,17 +1,13 @@
import React from 'react'
import {
Alert,
ScrollView,
TextInput,
TouchableOpacity,
View
} from 'react-native'
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 styles from '../../../styles'
import SelectBoxGroup from '../select-box-group'
@@ -34,14 +30,6 @@ export default class Sex extends SymptomView {
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) {
@@ -79,15 +67,6 @@ export default class Sex extends SymptomView {
/>
</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}
components/cycle-day/symptoms/symptom-section.js
+5 -2
View File
@@ -1,6 +1,7 @@
import React, { Component } from 'react'
import { View } from 'react-native'
import AppText, { SymptomSectionHeader } from '../../app-text'
import styles from '../../../styles'
export default class SymptomSection extends Component {
render() {
@@ -13,8 +14,10 @@ export default class SymptomSection extends Component {
}
}
return (
<View style={placeHeadingInline}>
<SymptomSectionHeader flex={1}>{p.header}</SymptomSectionHeader>
<View style={[placeHeadingInline, styles.symptomSection]}>
{ p.header &&
<SymptomSectionHeader flex={1}>{p.header}</SymptomSectionHeader>
}
<View
flexDirection={p.inline ? 'row' : null}
flex={1}
components/cycle-day/symptoms/symptom-view.js
+49 -4
View File
@@ -1,8 +1,14 @@
import React, { Component } from 'react'
import { BackHandler, View } from 'react-native'
import {
BackHandler, View, Alert, TouchableOpacity
} from 'react-native'
import { saveSymptom } from '../../../db'
import Header from '../../header/symptom-view'
import { headerTitles } from '../../../i18n/en/labels'
import { sharedDialogs } from '../../../i18n/en/cycle-day'
import FeatherIcon from 'react-native-vector-icons/Feather'
import styles, { iconStyles } from '../../../styles'
import infoLabels from '../../../i18n/en/symptom-info'
export default class SymptomView extends Component {
constructor(props) {
@@ -33,6 +39,20 @@ export default class SymptomView extends Component {
this.backHandler.remove()
}
isDeleteIconActive() {
return Object.values(this.state).some(value => {
// is there any meaningful value in the current state?
return value || value === 0
})
}
showInfoBox(){
Alert.alert(
infoLabels[this.symptomName].title,
infoLabels[this.symptomName].text
)
}
render() {
return (
<View style={{flex: 1}}>
@@ -40,12 +60,37 @@ export default class SymptomView extends Component {
title={headerTitles[this.symptomName].toLowerCase()}
date={this.date}
goBack={this.handleBackButtonPressOnSymptomView.bind(this)}
deleteIconActive={this.isDeleteIconActive()}
deleteEntry={() => {
this.deleteSymptomEntry()
this.globalBackhandler()
Alert.alert(
sharedDialogs.areYouSureTitle,
sharedDialogs.areYouSureToDelete,
[{
text: sharedDialogs.cancel,
style: 'cancel'
}, {
text: sharedDialogs.reallyDeleteData,
onPress: () => {
this.deleteSymptomEntry()
this.globalBackhandler()
}
}]
)
}}
/>
{this.renderContent()}
<View>
<TouchableOpacity
onPress={this.showInfoBox.bind(this)}
style={styles.infoButtonSymptomView}
>
<FeatherIcon
name="info"
{...iconStyles.infoInSymptomView}
style={iconStyles.symptomInfo}
/>
</TouchableOpacity>
{this.renderContent()}
</View>
</View>
)
}
components/cycle-day/symptoms/temperature.js
+8 -21
View File
@@ -4,19 +4,16 @@ import {
Keyboard,
ScrollView,
Switch,
TouchableOpacity,
View
} from 'react-native'
import DateTimePicker from 'react-native-modal-datetime-picker-nevo'
import FeatherIcon from 'react-native-vector-icons/Feather'
import { LocalTime, ChronoUnit } from 'js-joda'
import config from '../../../config'
import { getPreviousTemperature } from '../../../db'
import infoLabels from '../../../i18n/en/symptom-info'
import { scaleObservable } from '../../../local-storage'
import { shared as sharedLabels } from '../../../i18n/en/labels'
import styles, { iconStyles } from '../../../styles'
import styles from '../../../styles'
import { temperature as labels } from '../../../i18n/en/cycle-day'
import AppText from '../../app-text'
@@ -52,7 +49,7 @@ export default class Temp extends SymptomView {
} else {
const prevTemp = getPreviousTemperature(props.date)
if (prevTemp) {
this.state.temperature = prevTemp.toString()
this.state.suggestedTemperature = prevTemp.toString()
this.state.isSuggestion = true
}
}
@@ -60,12 +57,12 @@ export default class Temp extends SymptomView {
symptomName = 'temperature'
showInfoBox(){
const symptomName = 'temperature'
Alert.alert(
infoLabels[symptomName].title,
infoLabels[symptomName].text
)
isDeleteIconActive() {
return ['temperature', 'note', 'exclude'].some(key => {
// the time is always and the suggested temp sometimes prefilled, so they're not relevant for setting
// the delete button active.
return this.state[key] || this.state[key] === 0
})
}
async onBackButtonPress() {
@@ -152,16 +149,6 @@ export default class Temp extends SymptomView {
header={labels.temperature.header}
explainer={labels.temperature.explainer}
>
<View style={{ flex: 1 }}></View>
<TouchableOpacity
onPress={this.showInfoBox}
style={styles.infoButton}
>
<FeatherIcon
name="info"
style={iconStyles.symptomInfo}
/>
</TouchableOpacity>
<View style={styles.framedSegmentInlineChildren}>
<AppTextInput
style={[inputStyle]}