diff --git a/src/components/LHNOptionsList/OptionRowLHN/OptionRow/Status.tsx b/src/components/LHNOptionsList/OptionRowLHN/OptionRow/Status.tsx new file mode 100644 index 000000000000..09bfb20b7b04 --- /dev/null +++ b/src/components/LHNOptionsList/OptionRowLHN/OptionRow/Status.tsx @@ -0,0 +1,44 @@ +import React from 'react'; +import Text from '@components/Text'; +import Tooltip from '@components/Tooltip'; +import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails'; +import useLocalize from '@hooks/useLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; +import DateUtils from '@libs/DateUtils'; +import type {OptionData} from '@libs/ReportUtils'; +import CONST from '@src/CONST'; + +type StatusProps = { + /** The option data for the report row. Status is only shown for 1:1 chats whose participant has set a status emoji. */ + optionItem: OptionData; +}; + +function Status({optionItem}: StatusProps) { + const styles = useThemeStyles(); + const {translate} = useLocalize(); + const currentUserPersonalDetails = useCurrentUserPersonalDetails(); + + const emojiCode = optionItem.status?.emojiCode ?? ''; + if (!emojiCode || !optionItem.isOneOnOneChat) { + return null; + } + + const statusText = optionItem.status?.text ?? ''; + const statusClearAfterDate = optionItem.status?.clearAfter ?? ''; + const currentSelectedTimezone = currentUserPersonalDetails?.timezone?.selected ?? CONST.DEFAULT_TIME_ZONE.selected; + const formattedDate = DateUtils.getStatusUntilDate(translate, statusClearAfterDate, optionItem?.timezone?.selected ?? CONST.DEFAULT_TIME_ZONE.selected, currentSelectedTimezone); + const statusContent = formattedDate ? `${statusText ? `${statusText} ` : ''}(${formattedDate})` : statusText; + + return ( + + {emojiCode} + + ); +} + +Status.displayName = 'OptionRow.Status'; + +export default Status; diff --git a/src/components/LHNOptionsList/OptionRowLHN/OptionRowLHNCore.tsx b/src/components/LHNOptionsList/OptionRowLHN/OptionRowLHNCore.tsx index 8482d91f3435..802f88e603c0 100644 --- a/src/components/LHNOptionsList/OptionRowLHN/OptionRowLHNCore.tsx +++ b/src/components/LHNOptionsList/OptionRowLHN/OptionRowLHNCore.tsx @@ -4,18 +4,14 @@ import {StyleSheet, View} from 'react-native'; import Icon from '@components/Icon'; import {useLHNTooltipContext} from '@components/LHNOptionsList/LHNTooltipContext'; import type {OptionRowLHNProps} from '@components/LHNOptionsList/types'; -import Text from '@components/Text'; -import Tooltip from '@components/Tooltip'; import getContextMenuAccessibilityHint from '@components/utils/getContextMenuAccessibilityHint'; import getContextMenuAccessibilityProps from '@components/utils/getContextMenuAccessibilityProps'; -import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails'; import useEnvironment from '@hooks/useEnvironment'; import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset'; import useLocalize from '@hooks/useLocalize'; import useStyleUtils from '@hooks/useStyleUtils'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; -import DateUtils from '@libs/DateUtils'; import {shouldUseBoldText} from '@libs/OptionsListUtils'; import variables from '@styles/variables'; import CONST from '@src/CONST'; @@ -23,6 +19,7 @@ import DescriptiveText from './OptionRow/DescriptiveText'; import DraftIndicator from './OptionRow/DraftIndicator'; import ErrorBadge from './OptionRow/ErrorBadge'; import OnboardingBadge from './OptionRow/OnboardingBadge'; +import Status from './OptionRow/Status'; import Subtitle from './OptionRow/Subtitle'; import Title from './OptionRow/Title'; import OptionRowAvatar from './OptionRowAvatar'; @@ -41,7 +38,6 @@ function OptionRowLHN({isOptionFocused = false, onSelectRow = () => {}, optionIt const {isScreenFocused} = useLHNTooltipContext(); const {translate} = useLocalize(); - const currentUserPersonalDetails = useCurrentUserPersonalDetails(); const isInFocusMode = viewMode === CONST.OPTION_MODE.COMPACT; const sidebarInnerRowStyle = StyleSheet.flatten( isInFocusMode @@ -67,14 +63,6 @@ function OptionRowLHN({isOptionFocused = false, onSelectRow = () => {}, optionIt const hoveredBackgroundColor = !!styles.sidebarLinkHover && 'backgroundColor' in styles.sidebarLinkHover ? styles.sidebarLinkHover.backgroundColor : theme.sidebar; const focusedBackgroundColor = styles.sidebarLinkActive.backgroundColor; - const emojiCode = optionItem.status?.emojiCode ?? ''; - const statusText = optionItem.status?.text ?? ''; - const statusClearAfterDate = optionItem.status?.clearAfter ?? ''; - const currentSelectedTimezone = currentUserPersonalDetails?.timezone?.selected ?? CONST.DEFAULT_TIME_ZONE.selected; - const formattedDate = DateUtils.getStatusUntilDate(translate, statusClearAfterDate, optionItem?.timezone?.selected ?? CONST.DEFAULT_TIME_ZONE.selected, currentSelectedTimezone); - const statusContent = formattedDate ? `${statusText ? `${statusText} ` : ''}(${formattedDate})` : statusText; - const isStatusVisible = !!emojiCode && !!optionItem.isOneOnOneChat; - const subscriptAvatarBorderColor = isOptionFocused ? focusedBackgroundColor : theme.sidebar; const accessibilityLabel = [ @@ -131,14 +119,7 @@ function OptionRowLHN({isOptionFocused = false, onSelectRow = () => {}, optionIt testID={testID} /> - {isStatusVisible && ( - - {emojiCode} - - )} +