Visualize disabled action buttons

2018-08-20 15:06:50 +02:00
parent 8629fd5369
commit 559aa684dc
2 changed files with 13 additions and 2 deletions
@@ -38,6 +38,11 @@ export default class ActionButtonFooter extends Component {
    return (
      <View style={styles.menu}>
        {buttons.map(({ title, action, disabledCondition, icon }, i) => {
+          const textStyle = disabledCondition ? styles.menuTextInActive : styles.menuText
+          const iconStyle = disabledCondition ?
+            Object.assign({}, iconStyles.menuIcon, iconStyles.menuIconInactive) :
+            iconStyles.menuIcon
+
          return (
            <TouchableOpacity
              onPress={action}
@@ -45,8 +50,8 @@ export default class ActionButtonFooter extends Component {
              disabled={disabledCondition}
              key={i.toString()}
            >
-              <Icon name={icon} {...iconStyles.menuIcon} />
-              <Text style={styles.menuText}>
+              <Icon name={icon} {...iconStyle} />
+              <Text style={textStyle}>
                {title}
              </Text>
            </TouchableOpacity>