From aff5b6a460eae79b4a81dc57ec6325efd7d4172a Mon Sep 17 00:00:00 2001 From: Vit Horacek <36083550+mountiny@users.noreply.github.com> Date: Fri, 1 Nov 2024 10:10:36 +0100 Subject: [PATCH] Merge pull request #51795 from Expensify/michal-revert-nkdengineer/fix/50779 [CP Staging] Revert "Merge pull request #51158 from nkdengineer/fix/50779" (cherry picked from commit 9406610af1cc7d478291d341b52d54cb436945c1) (CP triggered by Beamanator) --- .../AttachmentPicker/index.native.tsx | 5 ----- .../EmojiPicker/EmojiPickerMenuItem/index.tsx | 3 ++- src/components/MenuItem.tsx | 6 +----- src/components/PopoverMenu.tsx | 4 ---- src/components/SelectionList/BaseListItem.tsx | 4 +--- .../Search/TransactionListItem.tsx | 2 +- src/styles/utils/index.ts | 18 +++--------------- 7 files changed, 8 insertions(+), 34 deletions(-) diff --git a/src/components/AttachmentPicker/index.native.tsx b/src/components/AttachmentPicker/index.native.tsx index 220be2d61aa6..bc4467e82f01 100644 --- a/src/components/AttachmentPicker/index.native.tsx +++ b/src/components/AttachmentPicker/index.native.tsx @@ -16,8 +16,6 @@ import useArrowKeyFocusManager from '@hooks/useArrowKeyFocusManager'; import useKeyboardShortcut from '@hooks/useKeyboardShortcut'; import useLocalize from '@hooks/useLocalize'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; -import useStyleUtils from '@hooks/useStyleUtils'; -import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import * as FileUtils from '@libs/fileDownload/FileUtils'; import CONST from '@src/CONST'; @@ -118,8 +116,6 @@ function AttachmentPicker({ fileLimit = 1, }: AttachmentPickerProps) { const styles = useThemeStyles(); - const StyleUtils = useStyleUtils(); - const theme = useTheme(); const [isVisible, setIsVisible] = useState(false); const completeAttachmentSelection = useRef<(data: FileObject[]) => void>(() => {}); @@ -448,7 +444,6 @@ function AttachmentPicker({ title={translate(item.textTranslationKey)} onPress={() => selectItem(item)} focused={focusedIndex === menuIndex} - wrapperStyle={StyleUtils.getItemBackgroundColorStyle(false, focusedIndex === menuIndex, theme.activeComponentBG, theme.hoverComponentBG)} /> ))} diff --git a/src/components/EmojiPicker/EmojiPickerMenuItem/index.tsx b/src/components/EmojiPicker/EmojiPickerMenuItem/index.tsx index 1629089dace5..8aaf4a14e560 100644 --- a/src/components/EmojiPicker/EmojiPickerMenuItem/index.tsx +++ b/src/components/EmojiPicker/EmojiPickerMenuItem/index.tsx @@ -68,7 +68,8 @@ function EmojiPickerMenuItem({ ref.current = el ?? null; }} style={({pressed}) => [ - isFocused || isHovered || isHighlighted ? themeStyles.emojiItemHighlighted : {}, + isFocused ? themeStyles.emojiItemKeyboardHighlighted : {}, + isHovered || isHighlighted ? themeStyles.emojiItemHighlighted : {}, Browser.isMobile() && StyleUtils.getButtonBackgroundColorStyle(getButtonState(false, pressed)), themeStyles.emojiItem, ]} diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx index 7fb5533fd172..303a51d064d9 100644 --- a/src/components/MenuItem.tsx +++ b/src/components/MenuItem.tsx @@ -251,9 +251,6 @@ type MenuItemBaseProps = { /** Should we remove the background color of the menu item */ shouldRemoveBackground?: boolean; - /** Should we remove the hover background color of the menu item */ - shouldRemoveHoverBackground?: boolean; - /** Should we use default cursor for disabled content */ shouldUseDefaultCursorWhenDisabled?: boolean; @@ -414,7 +411,6 @@ function MenuItem( shouldEscapeText = undefined, shouldGreyOutWhenDisabled = true, shouldRemoveBackground = false, - shouldRemoveHoverBackground = false, shouldUseDefaultCursorWhenDisabled = false, shouldShowLoadingSpinnerIcon = false, isAnonymousAction = false, @@ -598,7 +594,7 @@ function MenuItem( StyleUtils.getButtonBackgroundColorStyle(getButtonState(focused || isHovered, pressed, success, disabled, interactive), true), ...(Array.isArray(wrapperStyle) ? wrapperStyle : [wrapperStyle]), shouldGreyOutWhenDisabled && disabled && styles.buttonOpacityDisabled, - isHovered && interactive && !focused && !pressed && !shouldRemoveBackground && !shouldRemoveHoverBackground && styles.hoveredComponentBG, + isHovered && interactive && !focused && !pressed && !shouldRemoveBackground && styles.hoveredComponentBG, ] as StyleProp } disabledStyle={shouldUseDefaultCursorWhenDisabled && [styles.cursorDefault]} diff --git a/src/components/PopoverMenu.tsx b/src/components/PopoverMenu.tsx index 275b8e659ef7..21d0aa516d86 100644 --- a/src/components/PopoverMenu.tsx +++ b/src/components/PopoverMenu.tsx @@ -8,7 +8,6 @@ import type {ModalProps} from 'react-native-modal'; import useArrowKeyFocusManager from '@hooks/useArrowKeyFocusManager'; import useKeyboardShortcut from '@hooks/useKeyboardShortcut'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; -import useStyleUtils from '@hooks/useStyleUtils'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; @@ -168,7 +167,6 @@ function PopoverMenu({ shouldUpdateFocusedIndex = true, }: PopoverMenuProps) { const styles = useThemeStyles(); - const StyleUtils = useStyleUtils(); const theme = useTheme(); // We need to use isSmallScreenWidth instead of shouldUseNarrowLayout to apply correct popover styles // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth @@ -265,8 +263,6 @@ function PopoverMenu({ setFocusedIndex(menuIndex); }} style={{backgroundColor: item.isSelected ? theme.activeComponentBG : undefined}} - wrapperStyle={StyleUtils.getItemBackgroundColorStyle(!!item.isSelected, focusedIndex === menuIndex, theme.activeComponentBG, theme.hoverComponentBG)} - shouldRemoveHoverBackground={item.isSelected} titleStyle={StyleSheet.flatten([styles.flex1, item.titleStyle])} // Spread other props dynamically {...menuItemProps} diff --git a/src/components/SelectionList/BaseListItem.tsx b/src/components/SelectionList/BaseListItem.tsx index 795bed4118d4..dc216b51e291 100644 --- a/src/components/SelectionList/BaseListItem.tsx +++ b/src/components/SelectionList/BaseListItem.tsx @@ -6,7 +6,6 @@ import OfflineWithFeedback from '@components/OfflineWithFeedback'; import PressableWithFeedback from '@components/Pressable/PressableWithFeedback'; import useHover from '@hooks/useHover'; import {useMouseContext} from '@hooks/useMouseContext'; -import useStyleUtils from '@hooks/useStyleUtils'; import useSyncFocus from '@hooks/useSyncFocus'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; @@ -39,7 +38,6 @@ function BaseListItem({ }: BaseListItemProps) { const theme = useTheme(); const styles = useThemeStyles(); - const StyleUtils = useStyleUtils(); const {hovered, bind} = useHover(); const {isMouseDownOnInput, setMouseUp} = useMouseContext(); @@ -104,7 +102,7 @@ function BaseListItem({ tabIndex={item.tabIndex} wrapperStyle={pressableWrapperStyle} > - + {typeof children === 'function' ? children(hovered) : children} {!canSelectMultiple && !!item.isSelected && !rightHandSideComponent && ( diff --git a/src/components/SelectionList/Search/TransactionListItem.tsx b/src/components/SelectionList/Search/TransactionListItem.tsx index 4fd1ec4cce75..f56687550e4d 100644 --- a/src/components/SelectionList/Search/TransactionListItem.tsx +++ b/src/components/SelectionList/Search/TransactionListItem.tsx @@ -34,7 +34,7 @@ function TransactionListItem({ // Removing background style because they are added to the parent OpacityView via animatedHighlightStyle styles.bgTransparent, item.isSelected && styles.activeComponentBG, - isFocused && styles.hoveredComponentBG, + isFocused && styles.sidebarLinkActive, styles.mh0, ]; diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts index e1e9d99334e7..65faa941866a 100644 --- a/src/styles/utils/index.ts +++ b/src/styles/utils/index.ts @@ -1119,19 +1119,6 @@ function getAmountWidth(amount: string): number { return width; } -function getItemBackgroundColorStyle(isSelected: boolean, isFocused: boolean, selectedBG: string, focusedBG: string): ViewStyle { - let backgroundColor; - if (isSelected) { - backgroundColor = selectedBG; - } else if (isFocused) { - backgroundColor = focusedBG; - } - - return { - backgroundColor, - }; -} - const staticStyleUtils = { positioning, combineStyles, @@ -1206,7 +1193,6 @@ const staticStyleUtils = { getAmountWidth, getBorderRadiusStyle, getHighResolutionInfoWrapperStyle, - getItemBackgroundColorStyle, }; const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({ @@ -1225,7 +1211,9 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({ getAutoCompleteSuggestionItemStyle: (highlightedEmojiIndex: number, rowHeight: number, isHovered: boolean, currentEmojiIndex: number): ViewStyle[] => { let backgroundColor; - if (isHovered || currentEmojiIndex === highlightedEmojiIndex) { + if (currentEmojiIndex === highlightedEmojiIndex) { + backgroundColor = theme.activeComponentBG; + } else if (isHovered) { backgroundColor = theme.hoverComponentBG; }