Show or hide delete button based on entered data

This commit is contained in:
Julia Friesel
2019-05-17 12:07:54 +02:00
parent 00294ff6f6
commit b7088c44f2
3 changed files with 7 additions and 50 deletions
@@ -1,48 +0,0 @@
import React, { Component } from 'react'
import {
View, TouchableOpacity, Text} from 'react-native'
import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
import styles, {iconStyles} from '../../../styles'
import {sharedDialogs as labels} from '../../../i18n/en/cycle-day'
export default class ActionButtonFooter extends Component {
render() {
const {
currentSymptomValue,
}
= this.props
const buttons = [
{
title: labels.delete,
action: () => {
},
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>
)
}
}
@@ -41,6 +41,10 @@ export default class SymptomView extends Component {
title={headerTitles[this.symptomName].toLowerCase()}
date={this.date}
goBack={this.handleBackButtonPressOnSymptomView.bind(this)}
deleteIconActive={Object.values(this.state).some(x => {
// is there any meaningful value in the current state?
return x || x === 0
})}
deleteEntry={() => {
Alert.alert(
sharedDialogs.areYouSureTitle,
+3 -2
View File
@@ -32,11 +32,12 @@ export default function SymptomViewHeader(props) {
</View >
<TouchableOpacity
onPress={props.deleteEntry}
style={styles.infoButton}
style={[styles.infoButton, {opacity: props.deleteIconActive ? 1 : 0}]}
disabled={!props.deleteIconActive}
>
<Icon
name="delete"
style={styles.symptomInfoIcon}
style={styles.symptomDeleteIcon}
{...iconStyles.symptomHeaderIcons}
/>
</TouchableOpacity>