Show or hide delete button based on entered data

components/cycle-day/symptoms/action-button-footer.js

-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>
-    )
-  }
-}

components/cycle-day/symptoms/symptom-view.js

@@ -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,

components/header/symptom-view.js

@@ -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>