diff --git a/components/app.js b/components/app.js
index ba58437096a47e00b570711426339362f3cba2f4..4cc978d8c720b2a7f0381ca83babc3b334e3db3d 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 5566f73609f2c5f70571f21c40a17e5895c202ec..0758cddfcaeeda1a3d48b702bf5a44e3b701acdb 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 ef3dec8742dcfd0304228db811d5b53206d95228..b960d95767918e5d04e078768253c5d9d0264bea 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 c2099412fd9ae81b7a46c2a23b5e2efefb6872d3..d990f480ebe47577730d3054cd9ea7204fa1d73e 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 2f6f1ae4be27bda058eadc6a737622acf102b91a..94125cfa165a0602280651a2daf3ed62363eb921 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 e926573f4581080ed1306963655c6b73cf02c61a..ccb1cbd183ab25c919adf1cdf49e2a417469b6ab 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 7d46c5a3a20ac4657a65da74e0ce846abc049026..ea8800f074d1333d45836090963372c84b7c5812 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 a4d34145445e63a65fdfa1dae0b5c9d4ef858970..174d87999ae56d4f727169fb41d0409ed70355b1 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 ee63b83cb349ba7716827c8c74183b85b8fdc1d7..fdb769c256a43bff48761e42c4abfd290a547f66 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