From c06bfa2c9144110698516086211b9b121570d1f4 Mon Sep 17 00:00:00 2001
From: tina <lt-bloody@riox.eu>
Date: Wed, 26 Sep 2018 18:16:29 +0200
Subject: [PATCH] solves the action footer, but messes up the header
---
components/app.js | 5 ++-
components/cycle-day/labels/labels.js | 9 ++++
components/cycle-day/select-tab-group.js | 8 +---
.../symptoms/action-button-footer.js | 42 +++++++++----------
components/cycle-day/symptoms/bleeding.js | 11 ++++-
components/cycle-day/symptoms/cervix.js | 3 --
components/cycle-day/symptoms/desire.js | 1 -
components/header.js | 34 ++++++++++++---
styles/index.js | 3 ++
9 files changed, 74 insertions(+), 42 deletions(-)
diff --git a/components/app.js b/components/app.js
index ba584370..4cc978d8 100644
--- a/components/app.js
+++ b/components/app.js
@@ -56,7 +56,10 @@ export default class App extends Component {
return (
<View style={{flex: 1}}>
- {this.state.currentPage != 'CycleDay' && <Header title={titles[this.state.currentPage]} />}
+ {this.state.currentPage != 'CycleDay' && !isSymptomView(this.state.currentPage) &&
+ <Header
+ title={titles[this.state.currentPage]}
+ />}
{React.createElement(page, {
navigate: this.navigate,
diff --git a/components/cycle-day/labels/labels.js b/components/cycle-day/labels/labels.js
index 5566f736..0758cddf 100644
--- a/components/cycle-day/labels/labels.js
+++ b/components/cycle-day/labels/labels.js
@@ -84,3 +84,12 @@ export const temperature = {
}
export const noteExplainer = "Anything you want to add for the day?"
+
+export const sharedDialogs = {
+ cancel: 'Cancel',
+ areYouSureTitle: 'Are you sure?',
+ areYouSureToUnset: 'Are you sure you want to unset all entered data?',
+ reallyUnsetData: 'Yes, I am sure',
+ save: 'Save',
+ unset: 'Unset'
+}
diff --git a/components/cycle-day/select-tab-group.js b/components/cycle-day/select-tab-group.js
index ef3dec87..b960d957 100644
--- a/components/cycle-day/select-tab-group.js
+++ b/components/cycle-day/select-tab-group.js
@@ -23,13 +23,7 @@ export default class SelectTabGroup extends Component {
if (isActive) activeStyle = styles.selectTabActive
return (
<TouchableOpacity
- onPress={() => {
- if (this.props.isRadioButton) {
- this.props.onSelect(value)
- } else {
- isActive ? this.props.onSelect(null) : this.props.onSelect(value)
- }
- }}
+ onPress={() => 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 c2099412..d990f480 100644
--- a/components/cycle-day/symptoms/action-button-footer.js
+++ b/components/cycle-day/symptoms/action-button-footer.js
@@ -1,10 +1,11 @@
import React, { Component } from 'react'
import {
- View, TouchableOpacity, Text
+ 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 '../labels/labels'
export default class ActionButtonFooter extends Component {
render() {
@@ -17,33 +18,29 @@ export default class ActionButtonFooter extends Component {
autoShowDayView = true}
= this.props
const navigateToOverView = () => navigate('CycleDay', {cycleDay})
- const buttonsNewEntry = [
+ const buttons = [
{
- title: 'Cancel',
- action: () => navigateToOverView(),
- icon: 'cancel'
- },
- {
- title: 'Add',
+ title: labels.unset,
action: () => {
- saveAction()
- if (autoShowDayView) navigateToOverView()
- },
- disabledCondition: saveDisabled,
- icon: 'content-save-outline'
- }
- ]
- const buttonsEdit = [
- {
- title: 'Delete',
- action: () => {
- saveSymptom(symptom, cycleDay)
- navigateToOverView()
+ Alert.alert(
+ labels.areYouSureTitle,
+ labels.areYouSureToUnset,
+ [{
+ text: labels.cancel,
+ style: 'cancel'
+ }, {
+ text: labels.reallyUnsetData,
+ onPress: () => {
+ saveSymptom(symptom, cycleDay)
+ navigateToOverView()
+ }
+ }]
+ )
},
disabledCondition: !cycleDay[symptom],
icon: 'delete-outline'
}, {
- title: 'Save',
+ title: labels.save,
action: () => {
saveAction()
if (autoShowDayView) navigateToOverView()
@@ -52,7 +49,6 @@ export default class ActionButtonFooter extends Component {
icon: 'content-save-outline'
}
]
- const buttons = !cycleDay[symptom] ? buttonsNewEntry : buttonsEdit
return (
<View style={styles.menu}>
diff --git a/components/cycle-day/symptoms/bleeding.js b/components/cycle-day/symptoms/bleeding.js
index 2f6f1ae4..94125cfa 100644
--- a/components/cycle-day/symptoms/bleeding.js
+++ b/components/cycle-day/symptoms/bleeding.js
@@ -10,6 +10,7 @@ import { bleeding as labels } from '../labels/labels'
import ActionButtonFooter from './action-button-footer'
import SelectTabGroup from '../select-tab-group'
import SymptomSection from './symptom-section'
+import Header from '../../header'
export default class Bleeding extends Component {
constructor(props) {
@@ -31,6 +32,15 @@ export default class Bleeding extends Component {
]
return (
<View style={{ flex: 1 }}>
+ <Header
+ title={'Bleeding'}
+ isSymptomView={true}
+ goBack={() => this.props.navigate('CycleDay', this.props.cycleDay)}
+ cycleDayNumber={this.props.cycleDayNumber}
+ date={this.props.cycleDay.date}
+ infoTitle={'Info here'}
+ infoText={'bla bla'}
+ />
<ScrollView style={styles.page}>
<SymptomSection
header="Heaviness"
@@ -40,7 +50,6 @@ export default class Bleeding extends Component {
buttons={bleedingRadioProps}
active={this.state.currentValue}
onSelect={val => this.setState({ currentValue: val })}
- isRadioButton={true}
/>
</SymptomSection>
<SymptomSection
diff --git a/components/cycle-day/symptoms/cervix.js b/components/cycle-day/symptoms/cervix.js
index e926573f..ccb1cbd1 100644
--- a/components/cycle-day/symptoms/cervix.js
+++ b/components/cycle-day/symptoms/cervix.js
@@ -50,7 +50,6 @@ export default class Cervix extends Component {
buttons={cervixOpeningRadioProps}
active={this.state.opening}
onSelect={val => this.setState({ opening: val })}
- isRadioButton={true}
/>
</SymptomSection>
<SymptomSection
@@ -61,7 +60,6 @@ export default class Cervix extends Component {
buttons={cervixFirmnessRadioProps}
active={this.state.firmness}
onSelect={val => this.setState({ firmness: val })}
- isRadioButton={true}
/>
</SymptomSection>
<SymptomSection
@@ -72,7 +70,6 @@ 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 7d46c5a3..ea8800f0 100644
--- a/components/cycle-day/symptoms/desire.js
+++ b/components/cycle-day/symptoms/desire.js
@@ -36,7 +36,6 @@ export default class Desire extends Component {
buttons={desireRadioProps}
active={this.state.currentValue}
onSelect={val => this.setState({ currentValue: val })}
- isRadioButton={true}
/>
</SymptomSection>
</ScrollView>
diff --git a/components/header.js b/components/header.js
index a4d34145..174d8799 100644
--- a/components/header.js
+++ b/components/header.js
@@ -7,8 +7,10 @@ import styles, { iconStyles } from '../styles'
import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
import { formatDateForViewHeader } from '../components/cycle-day/labels/format'
+
export default class Header extends Component {
render() {
+ console.log(this.props)
return (
this.props.isCycleDayOverView ?
<View style={[styles.header, styles.headerCycleDay]}>
@@ -32,12 +34,32 @@ export default class Header extends Component {
onPress={() => this.props.goToCycleDay('after')}
/>
</View >
- :
- <View style={styles.header}>
- <Text style={styles.dateHeader}>
- {this.props.title}
- </Text>
- </View >
+ : this.props.isSymptomView ?
+ <View style={[styles.header, styles.headerCycleDay]}>
+ <Icon
+ name='arrow-left-drop-circle'
+ {...iconStyles.navigationArrow}
+ onPress={() => this.props.goBack()}
+ />
+ <View>
+ <Text style={styles.dateHeader}>
+ {this.props.title}
+ </Text>
+ <Text style={styles.cycleDayNumber} >
+ {formatDateForViewHeader(this.props.date)}
+ </Text>
+ </View >
+ <Icon
+ name='information-outline'
+ {...iconStyles.navigationArrow}
+ />
+ </View>
+ :
+ <View style={styles.header}>
+ <Text style={styles.dateHeader}>
+ {this.props.title}
+ </Text>
+ </View >
)
}
}
\ No newline at end of file
diff --git a/styles/index.js b/styles/index.js
index ee63b83c..fdb769c2 100644
--- a/styles/index.js
+++ b/styles/index.js
@@ -132,6 +132,9 @@ export default StyleSheet.create({
justifyContent: 'space-between',
height: '15%'
},
+ headerSymptom: {
+ height: '15%'
+ },
navigationArrow: {
fontSize: 60,
color: fontOnPrimaryColor
--
GitLab