Merge pull request #13576 from priyeshshah11/fix-13452

Disabled clickable & hoverable state in the banner if there's no clickable element in it.
Expensify · Dec 16, 2022 · c71c13d · c71c13d
2 parents 6502b73 + 38ddc66
commit c71c13d
Showing 1 changed file with 43 additions and 39 deletions.
diff --git a/src/components/Banner.js b/src/components/Banner.js
@@ -45,53 +45,57 @@ const defaultProps = {
     shouldRenderHTML: false,
     shouldShowIcon: false,
     shouldShowCloseButton: false,
-    onClose: () => {},
-    onPress: () => {},
+    onClose: undefined,
+    onPress: undefined,
     containerStyles: [],
     textStyles: [],
 };
 
 const Banner = props => (
     <Hoverable>
-        {isHovered => (
-            <View style={[
-                styles.flexRow,
-                styles.alignItemsCenter,
-                styles.p5,
-                styles.borderRadiusNormal,
-                isHovered ? styles.activeComponentBG : styles.hoveredComponentBG,
-                styles.breakAll,
-                ...props.containerStyles,
-            ]}
-            >
-                <View style={[styles.flexRow, styles.flexGrow1, styles.mw100, styles.alignItemsCenter]}>
-                    {props.shouldShowIcon && (
-                        <View style={[styles.mr3]}>
-                            <Icon
-                                src={Expensicons.Exclamation}
-                                fill={StyleUtils.getIconFillColor(getButtonState(isHovered))}
-                            />
-                        </View>
+        {(isHovered) => {
+            const isClickable = props.onClose || props.onPress;
+            const shouldHighlight = isClickable && isHovered;
+            return (
+                <View style={[
+                    styles.flexRow,
+                    styles.alignItemsCenter,
+                    styles.p5,
+                    styles.borderRadiusNormal,
+                    shouldHighlight ? styles.activeComponentBG : styles.hoveredComponentBG,
+                    styles.breakAll,
+                    ...props.containerStyles,
+                ]}
+                >
+                    <View style={[styles.flexRow, styles.flexGrow1, styles.mw100, styles.alignItemsCenter]}>
+                        {props.shouldShowIcon && (
+                            <View style={[styles.mr3]}>
+                                <Icon
+                                    src={Expensicons.Exclamation}
+                                    fill={StyleUtils.getIconFillColor(getButtonState(shouldHighlight))}
+                                />
+                            </View>
+                        )}
+                        {
+                            props.shouldRenderHTML
+                                ? <RenderHTML html={props.text} />
+                                : <Text style={[...props.textStyles]} onPress={props.onPress}>{props.text}</Text>
+                        }
+                    </View>
+                    {props.shouldShowCloseButton && (
+                        <Tooltip text={props.translate('common.close')}>
+                            <Pressable
+                                onPress={props.onClose}
+                                accessibilityRole="button"
+                                accessibilityLabel={props.translate('common.close')}
+                            >
+                                <Icon src={Expensicons.Close} />
+                            </Pressable>
+                        </Tooltip>
                     )}
-                    {
-                        props.shouldRenderHTML
-                            ? <RenderHTML html={props.text} />
-                            : <Text style={[...props.textStyles]} onPress={props.onPress}>{props.text}</Text>
-                    }
                 </View>
-                {props.shouldShowCloseButton && (
-                    <Tooltip text={props.translate('common.close')}>
-                        <Pressable
-                            onPress={props.onClose}
-                            accessibilityRole="button"
-                            accessibilityLabel={props.translate('common.close')}
-                        >
-                            <Icon src={Expensicons.Close} />
-                        </Pressable>
-                    </Tooltip>
-                )}
-            </View>
-        )}
+            );
+        }}
     </Hoverable>
 );