From e5052bf088e5977db3c2c70eeddcd98edbd4d963 Mon Sep 17 00:00:00 2001
From: tina <lt-bloody@riox.eu>
Date: Sun, 23 Sep 2018 12:06:23 +0200
Subject: [PATCH] changes footer depending on new entry or edit mode
---
components/cycle-day/select-tab-group.js | 8 +-
.../symptoms/action-button-footer.js | 80 +++++++++++++------
components/cycle-day/symptoms/bleeding.js | 2 +
components/cycle-day/symptoms/cervix.js | 3 +
components/cycle-day/symptoms/desire.js | 1 +
5 files changed, 70 insertions(+), 24 deletions(-)
diff --git a/components/cycle-day/select-tab-group.js b/components/cycle-day/select-tab-group.js
index b960d957..ef3dec87 100644
--- a/components/cycle-day/select-tab-group.js
+++ b/components/cycle-day/select-tab-group.js
@@ -23,7 +23,13 @@ export default class SelectTabGroup extends Component {
if (isActive) activeStyle = styles.selectTabActive
return (
<TouchableOpacity
- onPress={() => isActive ? this.props.onSelect(null) : this.props.onSelect(value)}
+ onPress={() => {
+ if (this.props.isRadioButton) {
+ this.props.onSelect(value)
+ } else {
+ isActive ? this.props.onSelect(null) : this.props.onSelect(value)
+ }
+ }}
key={i}
activeOpacity={1}
>
diff --git a/components/cycle-day/symptoms/action-button-footer.js b/components/cycle-day/symptoms/action-button-footer.js
index ea96f948..c2099412 100644
--- a/components/cycle-day/symptoms/action-button-footer.js
+++ b/components/cycle-day/symptoms/action-button-footer.js
@@ -3,11 +3,13 @@ import {
View, TouchableOpacity, Text
} from 'react-native'
import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
+import { saveSymptom } from '../../../db'
import styles, {iconStyles} from '../../../styles'
export default class ActionButtonFooter extends Component {
render() {
const {
+ symptom,
cycleDay,
saveAction,
saveDisabled,
@@ -15,33 +17,65 @@ export default class ActionButtonFooter extends Component {
autoShowDayView = true}
= this.props
const navigateToOverView = () => navigate('CycleDay', {cycleDay})
- const saveButton = {
- title: 'Save',
- action: () => {
- saveAction()
- if (autoShowDayView) navigateToOverView()
+ const buttonsNewEntry = [
+ {
+ title: 'Cancel',
+ action: () => navigateToOverView(),
+ icon: 'cancel'
},
- disabledCondition: saveDisabled,
- icon: 'content-save-outline'
- }
- const textStyle = saveButton.disabledCondition ? styles.menuTextInActive : styles.menuText
- const iconStyle = saveButton.disabledCondition ?
- Object.assign({}, iconStyles.menuIcon, iconStyles.menuIconInactive) :
- iconStyles.menuIcon
+ {
+ title: 'Add',
+ action: () => {
+ saveAction()
+ if (autoShowDayView) navigateToOverView()
+ },
+ disabledCondition: saveDisabled,
+ icon: 'content-save-outline'
+ }
+ ]
+ const buttonsEdit = [
+ {
+ title: 'Delete',
+ action: () => {
+ saveSymptom(symptom, cycleDay)
+ navigateToOverView()
+ },
+ disabledCondition: !cycleDay[symptom],
+ icon: 'delete-outline'
+ }, {
+ title: 'Save',
+ action: () => {
+ saveAction()
+ if (autoShowDayView) navigateToOverView()
+ },
+ disabledCondition: saveDisabled,
+ icon: 'content-save-outline'
+ }
+ ]
+ const buttons = !cycleDay[symptom] ? buttonsNewEntry : buttonsEdit
return (
<View style={styles.menu}>
- <TouchableOpacity
- onPress={saveButton.action}
- style={styles.menuItem}
- disabled={saveButton.disabledCondition}
- key={'save'}
- >
- <Icon name={saveButton.icon} {...iconStyle} />
- <Text style={textStyle}>
- {saveButton.title}
- </Text>
- </TouchableOpacity>
+ {buttons.map(({ title, action, disabledCondition, icon }, i) => {
+ const textStyle = disabledCondition ? styles.menuTextInActive : styles.menuText
+ const iconStyle = disabledCondition ?
+ Object.assign({}, iconStyles.menuIcon, iconStyles.menuIconInactive) :
+ iconStyles.menuIcon
+
+ return (
+ <TouchableOpacity
+ onPress={action}
+ style={styles.menuItem}
+ disabled={disabledCondition}
+ key={i.toString()}
+ >
+ <Icon name={icon} {...iconStyle} />
+ <Text style={textStyle}>
+ {title}
+ </Text>
+ </TouchableOpacity>
+ )
+ })}
</View>
)
}
diff --git a/components/cycle-day/symptoms/bleeding.js b/components/cycle-day/symptoms/bleeding.js
index 6357c261..2f6f1ae4 100644
--- a/components/cycle-day/symptoms/bleeding.js
+++ b/components/cycle-day/symptoms/bleeding.js
@@ -40,6 +40,7 @@ export default class Bleeding extends Component {
buttons={bleedingRadioProps}
active={this.state.currentValue}
onSelect={val => this.setState({ currentValue: val })}
+ isRadioButton={true}
/>
</SymptomSection>
<SymptomSection
@@ -56,6 +57,7 @@ export default class Bleeding extends Component {
</SymptomSection>
</ScrollView>
<ActionButtonFooter
+ symptom='bleeding'
cycleDay={this.props.cycleDay}
saveAction={() => {
saveSymptom('bleeding', this.props.cycleDay, {
diff --git a/components/cycle-day/symptoms/cervix.js b/components/cycle-day/symptoms/cervix.js
index ccb1cbd1..e926573f 100644
--- a/components/cycle-day/symptoms/cervix.js
+++ b/components/cycle-day/symptoms/cervix.js
@@ -50,6 +50,7 @@ export default class Cervix extends Component {
buttons={cervixOpeningRadioProps}
active={this.state.opening}
onSelect={val => this.setState({ opening: val })}
+ isRadioButton={true}
/>
</SymptomSection>
<SymptomSection
@@ -60,6 +61,7 @@ export default class Cervix extends Component {
buttons={cervixFirmnessRadioProps}
active={this.state.firmness}
onSelect={val => this.setState({ firmness: val })}
+ isRadioButton={true}
/>
</SymptomSection>
<SymptomSection
@@ -70,6 +72,7 @@ export default class Cervix extends Component {
buttons={cervixPositionRadioProps}
active={this.state.position}
onSelect={val => this.setState({ position: val })}
+ isRadioButton={false}
/>
</SymptomSection>
<SymptomSection
diff --git a/components/cycle-day/symptoms/desire.js b/components/cycle-day/symptoms/desire.js
index ea8800f0..7d46c5a3 100644
--- a/components/cycle-day/symptoms/desire.js
+++ b/components/cycle-day/symptoms/desire.js
@@ -36,6 +36,7 @@ export default class Desire extends Component {
buttons={desireRadioProps}
active={this.state.currentValue}
onSelect={val => this.setState({ currentValue: val })}
+ isRadioButton={true}
/>
</SymptomSection>
</ScrollView>
--
GitLab