From ec1b3de1f10e77b695112a8a8de434128b14324a Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Mon, 21 Oct 2024 15:12:25 +0700 Subject: [PATCH 1/5] change background color of focus element --- .../AttachmentPicker/index.native.tsx | 5 +++++ .../EmojiPicker/EmojiPickerMenuItem/index.tsx | 3 +-- src/components/PopoverMenu.tsx | 5 ++++- src/components/SelectionList/BaseListItem.tsx | 4 +++- .../Search/TransactionListItem.tsx | 2 +- src/libs/Permissions.ts | 1 + src/styles/utils/index.ts | 20 ++++++++++++++++--- 7 files changed, 32 insertions(+), 8 deletions(-) diff --git a/src/components/AttachmentPicker/index.native.tsx b/src/components/AttachmentPicker/index.native.tsx index 975ea6c548c0..4a357178d5f3 100644 --- a/src/components/AttachmentPicker/index.native.tsx +++ b/src/components/AttachmentPicker/index.native.tsx @@ -16,6 +16,8 @@ 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'; @@ -115,6 +117,8 @@ function AttachmentPicker({ shouldValidateImage = true, }: AttachmentPickerProps) { const styles = useThemeStyles(); + const StyleUtils = useStyleUtils(); + const theme = useTheme(); const [isVisible, setIsVisible] = useState(false); const completeAttachmentSelection = useRef<(data: FileObject) => void>(() => {}); @@ -427,6 +431,7 @@ 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 8aaf4a14e560..1629089dace5 100644 --- a/src/components/EmojiPicker/EmojiPickerMenuItem/index.tsx +++ b/src/components/EmojiPicker/EmojiPickerMenuItem/index.tsx @@ -68,8 +68,7 @@ function EmojiPickerMenuItem({ ref.current = el ?? null; }} style={({pressed}) => [ - isFocused ? themeStyles.emojiItemKeyboardHighlighted : {}, - isHovered || isHighlighted ? themeStyles.emojiItemHighlighted : {}, + isFocused || isHovered || isHighlighted ? themeStyles.emojiItemHighlighted : {}, Browser.isMobile() && StyleUtils.getButtonBackgroundColorStyle(getButtonState(false, pressed)), themeStyles.emojiItem, ]} diff --git a/src/components/PopoverMenu.tsx b/src/components/PopoverMenu.tsx index b1aa2fc28338..ffa78ec5ac27 100644 --- a/src/components/PopoverMenu.tsx +++ b/src/components/PopoverMenu.tsx @@ -8,6 +8,7 @@ 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'; @@ -159,6 +160,7 @@ 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 const {isSmallScreenWidth} = useResponsiveLayout(); @@ -299,6 +301,7 @@ function PopoverMenu({ {currentMenuItems.map((item, menuIndex) => { const {text, onSelected, subMenuItems, shouldCallAfterModalHide, ...menuItemProps} = item; + return ( ({ }: BaseListItemProps) { const theme = useTheme(); const styles = useThemeStyles(); + const StyleUtils = useStyleUtils(); const {hovered, bind} = useHover(); const {isMouseDownOnInput, setMouseUp} = useMouseContext(); @@ -102,7 +104,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 f56687550e4d..4fd1ec4cce75 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.sidebarLinkActive, + isFocused && styles.hoveredComponentBG, styles.mh0, ]; diff --git a/src/libs/Permissions.ts b/src/libs/Permissions.ts index 24de2e612208..47fa860af63c 100644 --- a/src/libs/Permissions.ts +++ b/src/libs/Permissions.ts @@ -4,6 +4,7 @@ import type {IOUType} from '@src/CONST'; import type Beta from '@src/types/onyx/Beta'; function canUseAllBetas(betas: OnyxEntry): boolean { + return true; return !!betas?.includes(CONST.BETAS.ALL); } diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts index 65faa941866a..ff925fdba079 100644 --- a/src/styles/utils/index.ts +++ b/src/styles/utils/index.ts @@ -1119,6 +1119,21 @@ function getAmountWidth(amount: string): number { return width; } +function getItemBackgroundColorStyle(isSelected: boolean, isFocused: boolean, selectedBG: string, focusedBG: string): ViewStyle { + let backgroundColor; + if (isSelected) { + backgroundColor = selectedBG; + } + + if (isFocused) { + backgroundColor = focusedBG; + } + + return { + backgroundColor, + }; +} + const staticStyleUtils = { positioning, combineStyles, @@ -1193,6 +1208,7 @@ const staticStyleUtils = { getAmountWidth, getBorderRadiusStyle, getHighResolutionInfoWrapperStyle, + getItemBackgroundColorStyle, }; const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({ @@ -1211,9 +1227,7 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({ getAutoCompleteSuggestionItemStyle: (highlightedEmojiIndex: number, rowHeight: number, isHovered: boolean, currentEmojiIndex: number): ViewStyle[] => { let backgroundColor; - if (currentEmojiIndex === highlightedEmojiIndex) { - backgroundColor = theme.activeComponentBG; - } else if (isHovered) { + if (isHovered || currentEmojiIndex === highlightedEmojiIndex) { backgroundColor = theme.hoverComponentBG; } From 46dad8211725536a78e37b35390a8958fcd35e47 Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Mon, 21 Oct 2024 15:53:20 +0700 Subject: [PATCH 2/5] fix lint --- src/libs/Permissions.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/libs/Permissions.ts b/src/libs/Permissions.ts index 47fa860af63c..24de2e612208 100644 --- a/src/libs/Permissions.ts +++ b/src/libs/Permissions.ts @@ -4,7 +4,6 @@ import type {IOUType} from '@src/CONST'; import type Beta from '@src/types/onyx/Beta'; function canUseAllBetas(betas: OnyxEntry): boolean { - return true; return !!betas?.includes(CONST.BETAS.ALL); } From d270f920b1ca0924ccc36ed9682bd992bc033c81 Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Wed, 23 Oct 2024 17:20:24 +0700 Subject: [PATCH 3/5] fix bg for selected item --- src/components/PopoverMenu.tsx | 2 +- src/styles/utils/index.ts | 4 +--- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/src/components/PopoverMenu.tsx b/src/components/PopoverMenu.tsx index 9f0072ccf04a..bab65702d8d3 100644 --- a/src/components/PopoverMenu.tsx +++ b/src/components/PopoverMenu.tsx @@ -269,6 +269,7 @@ function PopoverMenu({ setCurrentMenuItems(menuItems); }, [menuItems]); + return ( {currentMenuItems.map((item, menuIndex) => { const {text, onSelected, subMenuItems, shouldCallAfterModalHide, ...menuItemProps} = item; - return ( Date: Wed, 23 Oct 2024 17:24:07 +0700 Subject: [PATCH 4/5] fix prettier --- src/components/PopoverMenu.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/PopoverMenu.tsx b/src/components/PopoverMenu.tsx index bab65702d8d3..b1aa34bbf1fd 100644 --- a/src/components/PopoverMenu.tsx +++ b/src/components/PopoverMenu.tsx @@ -269,7 +269,6 @@ function PopoverMenu({ setCurrentMenuItems(menuItems); }, [menuItems]); - return ( Date: Tue, 29 Oct 2024 16:31:11 +0700 Subject: [PATCH 5/5] add shouldRemoveHoverBackground prop --- src/components/MenuItem.tsx | 6 +++++- src/components/PopoverMenu.tsx | 1 + 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx index a40fd925cd2e..602ecca3518c 100644 --- a/src/components/MenuItem.tsx +++ b/src/components/MenuItem.tsx @@ -251,6 +251,9 @@ 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; @@ -411,6 +414,7 @@ function MenuItem( shouldEscapeText = undefined, shouldGreyOutWhenDisabled = true, shouldRemoveBackground = false, + shouldRemoveHoverBackground = false, shouldUseDefaultCursorWhenDisabled = false, shouldShowLoadingSpinnerIcon = false, isAnonymousAction = false, @@ -594,7 +598,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 && styles.hoveredComponentBG, + isHovered && interactive && !focused && !pressed && !shouldRemoveBackground && !shouldRemoveHoverBackground && styles.hoveredComponentBG, ] as StyleProp } disabledStyle={shouldUseDefaultCursorWhenDisabled && [styles.cursorDefault]} diff --git a/src/components/PopoverMenu.tsx b/src/components/PopoverMenu.tsx index b1aa34bbf1fd..9aab414971de 100644 --- a/src/components/PopoverMenu.tsx +++ b/src/components/PopoverMenu.tsx @@ -323,6 +323,7 @@ function PopoverMenu({ setFocusedIndex(menuIndex); }} wrapperStyle={StyleUtils.getItemBackgroundColorStyle(!!item.isSelected, focusedIndex === menuIndex, theme.activeComponentBG, theme.hoverComponentBG)} + shouldRemoveHoverBackground={item.isSelected} titleStyle={StyleSheet.flatten([styles.flex1, item.titleStyle])} // eslint-disable-next-line react/jsx-props-no-spreading {...menuItemProps}