diff --git a/components/app.js b/components/app.js index ba58437..4cc978d 100644 --- a/components/app.js +++ b/components/app.js @@ -56,7 +56,10 @@ export default class App extends Component { return ( - {this.state.currentPage != 'CycleDay' &&
} + {this.state.currentPage != 'CycleDay' && !isSymptomView(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 5566f73..0758cdd 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 ef3dec8..b960d95 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 ( { - 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 c209941..d990f48 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 ( diff --git a/components/cycle-day/symptoms/bleeding.js b/components/cycle-day/symptoms/bleeding.js index 2f6f1ae..94125cf 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 ( +
this.props.navigate('CycleDay', this.props.cycleDay)} + cycleDayNumber={this.props.cycleDayNumber} + date={this.props.cycleDay.date} + infoTitle={'Info here'} + infoText={'bla bla'} + /> this.setState({ currentValue: val })} - isRadioButton={true} /> this.setState({ opening: val })} - isRadioButton={true} /> this.setState({ firmness: val })} - isRadioButton={true} /> this.setState({ position: val })} - isRadioButton={false} /> this.setState({ currentValue: val })} - isRadioButton={true} /> diff --git a/components/header.js b/components/header.js index a4d3414..174d879 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 ? @@ -32,12 +34,32 @@ export default class Header extends Component { onPress={() => this.props.goToCycleDay('after')} /> - : - - - {this.props.title} - - + : this.props.isSymptomView ? + + this.props.goBack()} + /> + + + {this.props.title} + + + {formatDateForViewHeader(this.props.date)} + + + + + : + + + {this.props.title} + + ) } } \ No newline at end of file diff --git a/styles/index.js b/styles/index.js index ee63b83..fdb769c 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