Merge pull request #51988 from Expensify/cmartins-fixBg

Handle disabled case when computing menu item background color
Expensify · Nov 6, 2024 · 4e06de3 · 4e06de3
2 parents c755314 + 5b8081d
commit 4e06de3
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 6 deletions.
diff --git a/src/components/AttachmentPicker/index.native.tsx b/src/components/AttachmentPicker/index.native.tsx
@@ -448,7 +448,7 @@ function AttachmentPicker({
                             title={translate(item.textTranslationKey)}
                             onPress={() => selectItem(item)}
                             focused={focusedIndex === menuIndex}
-                            wrapperStyle={StyleUtils.getItemBackgroundColorStyle(false, focusedIndex === menuIndex, theme.activeComponentBG, theme.hoverComponentBG)}
+                            wrapperStyle={StyleUtils.getItemBackgroundColorStyle(false, focusedIndex === menuIndex, false, theme.activeComponentBG, theme.hoverComponentBG)}
                         />
                     ))}
                 </View>

diff --git a/src/components/PopoverMenu.tsx b/src/components/PopoverMenu.tsx
@@ -264,7 +264,13 @@ function PopoverMenu({
                         }
                         setFocusedIndex(menuIndex);
                     }}
-                    wrapperStyle={StyleUtils.getItemBackgroundColorStyle(!!item.isSelected, focusedIndex === menuIndex, theme.activeComponentBG, theme.hoverComponentBG)}
+                    wrapperStyle={StyleUtils.getItemBackgroundColorStyle(
+                        !!item.isSelected,
+                        focusedIndex === menuIndex,
+                        item.disabled ?? false,
+                        theme.activeComponentBG,
+                        theme.hoverComponentBG,
+                    )}
                     shouldRemoveHoverBackground={item.isSelected}
                     titleStyle={StyleSheet.flatten([styles.flex1, item.titleStyle])}
                     // Spread other props dynamically

diff --git a/src/components/SelectionList/BaseListItem.tsx b/src/components/SelectionList/BaseListItem.tsx
@@ -98,13 +98,21 @@ function BaseListItem<TItem extends ListItem>({
                 dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true, [CONST.INNER_BOX_SHADOW_ELEMENT]: true}}
                 onMouseDown={(e) => e.preventDefault()}
                 id={keyForList ?? ''}
-                style={[pressableStyle, isFocused && StyleUtils.getItemBackgroundColorStyle(!!item.isSelected, !!isFocused, theme.activeComponentBG, theme.hoverComponentBG)]}
+                style={[
+                    pressableStyle,
+                    isFocused && StyleUtils.getItemBackgroundColorStyle(!!item.isSelected, !!isFocused, !!item.isDisabled, theme.activeComponentBG, theme.hoverComponentBG),
+                ]}
                 onFocus={onFocus}
                 onMouseLeave={handleMouseLeave}
                 tabIndex={item.tabIndex}
                 wrapperStyle={pressableWrapperStyle}
             >
-                <View style={[wrapperStyle, isFocused && StyleUtils.getItemBackgroundColorStyle(!!item.isSelected, !!isFocused, theme.activeComponentBG, theme.hoverComponentBG)]}>
+                <View
+                    style={[
+                        wrapperStyle,
+                        isFocused && StyleUtils.getItemBackgroundColorStyle(!!item.isSelected, !!isFocused, !!item.isDisabled, theme.activeComponentBG, theme.hoverComponentBG),
+                    ]}
+                >
                     {typeof children === 'function' ? children(hovered) : children}
 
                     {!canSelectMultiple && !!item.isSelected && !rightHandSideComponent && (

diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts
@@ -1119,9 +1119,12 @@ function getAmountWidth(amount: string): number {
     return width;
 }
 
-function getItemBackgroundColorStyle(isSelected: boolean, isFocused: boolean, selectedBG: string, focusedBG: string): ViewStyle {
+function getItemBackgroundColorStyle(isSelected: boolean, isFocused: boolean, isDisabled: boolean, selectedBG: string, focusedBG: string): ViewStyle {
     let backgroundColor;
-    if (isSelected) {
+
+    if (isDisabled) {
+        backgroundColor = undefined;
+    } else if (isSelected) {
         backgroundColor = selectedBG;
     } else if (isFocused) {
         backgroundColor = focusedBG;