diff --git a/src/components/LHNOptionsList/LHNOptionsList.tsx b/src/components/LHNOptionsList/LHNOptionsList.tsx index cd492de3b3e83..35f1f4bde7e9f 100644 --- a/src/components/LHNOptionsList/LHNOptionsList.tsx +++ b/src/components/LHNOptionsList/LHNOptionsList.tsx @@ -1,4 +1,4 @@ -import {useIsFocused, useRoute} from '@react-navigation/native'; +import {useRoute} from '@react-navigation/native'; import type {FlashListProps} from '@shopify/flash-list'; import {FlashList} from '@shopify/flash-list'; import type {ReactElement} from 'react'; @@ -58,8 +58,6 @@ function LHNOptionsList({style, contentContainerStyles, data, onSelectRow, optio const styles = useThemeStyles(); const {translate, preferredLocale} = useLocalize(); const estimatedListSize = useLHNEstimatedListSize(); - const isScreenFocused = useIsFocused(); - const shouldShowEmptyLHN = data.length === 0; const estimatedItemSize = optionMode === CONST.OPTION_MODE.COMPACT ? variables.optionRowHeightCompact : variables.optionRowHeight; const platform = getPlatform(); @@ -227,7 +225,7 @@ function LHNOptionsList({style, contentContainerStyles, data, onSelectRow, optio lastReportActionTransaction={lastReportActionTransaction} receiptTransactions={transactions} viewMode={optionMode} - isOptionFocused={!shouldDisableFocusOptions} + isFocused={!shouldDisableFocusOptions} lastMessageTextFromReport={lastMessageTextFromReport} onSelectRow={onSelectRow} preferredLocale={preferredLocale} @@ -235,7 +233,6 @@ function LHNOptionsList({style, contentContainerStyles, data, onSelectRow, optio transactionViolations={transactionViolations} onLayout={onLayoutItem} shouldShowRBRorGBRTooltip={shouldShowRBRorGBRTooltip} - isScreenFocused={isScreenFocused} /> ); }, @@ -256,7 +253,6 @@ function LHNOptionsList({style, contentContainerStyles, data, onSelectRow, optio onLayoutItem, isOffline, firstReportIDWithGBRorRBR, - isScreenFocused, ], ); diff --git a/src/components/LHNOptionsList/OptionRowLHN.tsx b/src/components/LHNOptionsList/OptionRowLHN.tsx index 203567eff30a0..da12c0ce5eb2b 100644 --- a/src/components/LHNOptionsList/OptionRowLHN.tsx +++ b/src/components/LHNOptionsList/OptionRowLHN.tsx @@ -1,4 +1,5 @@ -import React, {useMemo, useRef, useState} from 'react'; +import {useFocusEffect} from '@react-navigation/native'; +import React, {useCallback, useMemo, useRef, useState} from 'react'; import type {GestureResponderEvent, ViewStyle} from 'react-native'; import {StyleSheet, View} from 'react-native'; import {useOnyx} from 'react-native-onyx'; @@ -50,7 +51,7 @@ import type {OptionRowLHNProps} from './types'; function OptionRowLHN({ reportID, - isOptionFocused = false, + isFocused = false, onSelectRow = () => {}, optionItem, viewMode = 'default', @@ -58,12 +59,12 @@ function OptionRowLHN({ onLayout = () => {}, hasDraftComment, shouldShowRBRorGBRTooltip, - isScreenFocused, }: OptionRowLHNProps) { const theme = useTheme(); const styles = useThemeStyles(); const popoverAnchor = useRef(null); const StyleUtils = useStyleUtils(); + const [isScreenFocused, setIsScreenFocused] = useState(false); const {shouldUseNarrowLayout} = useResponsiveLayout(); const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${optionItem?.reportID}`, {canBeMissing: true}); @@ -104,6 +105,15 @@ function OptionRowLHN({ const {translate} = useLocalize(); const [isContextMenuActive, setIsContextMenuActive] = useState(false); + useFocusEffect( + useCallback(() => { + setIsScreenFocused(true); + return () => { + setIsScreenFocused(false); + }; + }, []), + ); + const isInFocusMode = viewMode === CONST.OPTION_MODE.COMPACT; const sidebarInnerRowStyle = StyleSheet.flatten( isInFocusMode @@ -111,7 +121,7 @@ function OptionRowLHN({ : [styles.chatLinkRowPressable, styles.flexGrow1, styles.optionItemAvatarNameWrapper, styles.optionRow, styles.justifyContentCenter], ); - if (!optionItem && !isOptionFocused) { + if (!optionItem && !isFocused) { // rendering null as a render item causes the FlashList to render all // its children and consume significant memory on the first render. We can avoid this by // rendering a placeholder view instead. This behaviour is only observed when we @@ -130,7 +140,7 @@ function OptionRowLHN({ } const brickRoadIndicator = optionItem.brickRoadIndicator; - const textStyle = isOptionFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText; + const textStyle = isFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText; const textUnreadStyle = shouldUseBoldText(optionItem) ? [textStyle, styles.sidebarLinkTextBold] : [textStyle]; const displayNameStyle = [styles.optionDisplayName, styles.optionDisplayNameCompact, styles.pre, textUnreadStyle, style]; const alternateTextStyle = isInFocusMode @@ -178,7 +188,7 @@ function OptionRowLHN({ const statusContent = formattedDate ? `${statusText ? `${statusText} ` : ''}(${formattedDate})` : statusText; const isStatusVisible = !!emojiCode && isOneOnOneChat(!isEmptyObject(report) ? report : undefined); - const subscriptAvatarBorderColor = isOptionFocused ? focusedBackgroundColor : theme.sidebar; + const subscriptAvatarBorderColor = isFocused ? focusedBackgroundColor : theme.sidebar; const firstIcon = optionItem.icons?.at(0); const onOptionPress = (event: GestureResponderEvent | KeyboardEvent | undefined) => { @@ -246,8 +256,8 @@ function OptionRowLHN({ styles.sidebarLink, styles.sidebarLinkInnerLHN, StyleUtils.getBackgroundColorStyle(theme.sidebar), - isOptionFocused ? styles.sidebarLinkActive : null, - (hovered || isContextMenuActive) && !isOptionFocused ? styles.sidebarLinkHover : null, + isFocused ? styles.sidebarLinkActive : null, + (hovered || isContextMenuActive) && !isFocused ? styles.sidebarLinkHover : null, ]} role={CONST.ROLE.BUTTON} accessibilityLabel={`${translate('accessibilityHints.navigatesToChat')} ${optionItem.text}. ${optionItem.isUnread ? `${translate('common.unread')}.` : ''} ${ @@ -262,7 +272,7 @@ function OptionRowLHN({ firstIcon && (optionItem.shouldShowSubscript ? ( diff --git a/src/components/LHNOptionsList/OptionRowLHNData.tsx b/src/components/LHNOptionsList/OptionRowLHNData.tsx index 641c071112fce..3b8d8f349a4bf 100644 --- a/src/components/LHNOptionsList/OptionRowLHNData.tsx +++ b/src/components/LHNOptionsList/OptionRowLHNData.tsx @@ -14,7 +14,7 @@ import type {OptionRowLHNDataProps} from './types'; * re-render if the data really changed. */ function OptionRowLHNData({ - isOptionFocused = false, + isFocused = false, fullReport, reportAttributes, oneTransactionThreadReport, @@ -35,7 +35,7 @@ function OptionRowLHNData({ }: OptionRowLHNDataProps) { const reportID = propsToForward.reportID; const currentReportIDValue = useCurrentReportID(); - const isReportFocused = isOptionFocused && currentReportIDValue?.currentReportID === reportID; + const isReportFocused = isFocused && currentReportIDValue?.currentReportID === reportID; const optionItemRef = useRef(undefined); const optionItem = useMemo(() => { @@ -88,7 +88,7 @@ function OptionRowLHNData({ ); diff --git a/src/components/LHNOptionsList/types.ts b/src/components/LHNOptionsList/types.ts index 8a79f93e64911..ef5a8d7e9d023 100644 --- a/src/components/LHNOptionsList/types.ts +++ b/src/components/LHNOptionsList/types.ts @@ -36,8 +36,8 @@ type CustomLHNOptionsListProps = { type LHNOptionsListProps = CustomLHNOptionsListProps; type OptionRowLHNDataProps = { - /** Whether option should be focused */ - isOptionFocused?: boolean; + /** Whether row should be focused */ + isFocused?: boolean; /** List of users' personal details */ personalDetails?: PersonalDetailsList; @@ -109,9 +109,6 @@ type OptionRowLHNDataProps = { /** Whether to show the educational tooltip for the GBR or RBR */ shouldShowRBRorGBRTooltip: boolean; - - /** Whether the screen is focused */ - isScreenFocused: boolean; }; type OptionRowLHNProps = { @@ -119,7 +116,7 @@ type OptionRowLHNProps = { reportID: string; /** Whether this option is currently in focus so we can modify its style */ - isOptionFocused?: boolean; + isFocused?: boolean; /** A function that is called when an option is selected. Selected option is passed as a param */ onSelectRow?: (optionItem: OptionData, popoverAnchor: RefObject) => void; @@ -140,9 +137,6 @@ type OptionRowLHNProps = { /** Whether to show the educational tooltip on the GBR or RBR */ shouldShowRBRorGBRTooltip: boolean; - - /** Whether the screen is focused */ - isScreenFocused: boolean; }; type RenderItemProps = {item: Report};