From 7ebcf2463401e5fb5b2049ffc14edae6381ddf84 Mon Sep 17 00:00:00 2001 From: Blazej Kustra Date: Thu, 14 Dec 2023 17:37:14 +0100 Subject: [PATCH] Raname files so that website is a default implementation --- .../BaseUserDetailsTooltip/index.native.tsx | 9 ++ .../BaseUserDetailsTooltip/index.tsx | 95 ++++++++++++++++- .../BaseUserDetailsTooltip/index.website.tsx | 100 ------------------ src/components/UserDetailsTooltip/index.tsx | 2 +- 4 files changed, 103 insertions(+), 103 deletions(-) create mode 100644 src/components/UserDetailsTooltip/BaseUserDetailsTooltip/index.native.tsx delete mode 100644 src/components/UserDetailsTooltip/BaseUserDetailsTooltip/index.website.tsx diff --git a/src/components/UserDetailsTooltip/BaseUserDetailsTooltip/index.native.tsx b/src/components/UserDetailsTooltip/BaseUserDetailsTooltip/index.native.tsx new file mode 100644 index 000000000000..e490cb13c66b --- /dev/null +++ b/src/components/UserDetailsTooltip/BaseUserDetailsTooltip/index.native.tsx @@ -0,0 +1,9 @@ +import UserDetailsTooltipProps from '@components/UserDetailsTooltip/types'; + +function BaseUserDetailsTooltip({children}: UserDetailsTooltipProps) { + return children; +} + +BaseUserDetailsTooltip.displayName = 'BaseUserDetailsTooltip'; + +export default BaseUserDetailsTooltip; diff --git a/src/components/UserDetailsTooltip/BaseUserDetailsTooltip/index.tsx b/src/components/UserDetailsTooltip/BaseUserDetailsTooltip/index.tsx index e490cb13c66b..bebea1418342 100644 --- a/src/components/UserDetailsTooltip/BaseUserDetailsTooltip/index.tsx +++ b/src/components/UserDetailsTooltip/BaseUserDetailsTooltip/index.tsx @@ -1,7 +1,98 @@ +import Str from 'expensify-common/lib/str'; +import React, {useCallback} from 'react'; +import {Text, View} from 'react-native'; +import Avatar from '@components/Avatar'; +import {usePersonalDetails} from '@components/OnyxProvider'; +import Tooltip from '@components/Tooltip'; import UserDetailsTooltipProps from '@components/UserDetailsTooltip/types'; +import useLocalize from '@hooks/useLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; +import * as LocalePhoneNumber from '@libs/LocalePhoneNumber'; +import * as ReportUtils from '@libs/ReportUtils'; +import * as UserUtils from '@libs/UserUtils'; +import CONST from '@src/CONST'; -function BaseUserDetailsTooltip({children}: UserDetailsTooltipProps) { - return children; +function BaseUserDetailsTooltip({accountID, fallbackUserDetails, icon, delegateAccountID, shiftHorizontal, children}: UserDetailsTooltipProps) { + const styles = useThemeStyles(); + const {translate} = useLocalize(); + const personalDetails = usePersonalDetails(); + + const userDetails = personalDetails?.[accountID] ?? fallbackUserDetails ?? {}; + let userDisplayName = ReportUtils.getDisplayNameForParticipant(accountID) ?? (userDetails.displayName ? userDetails.displayName.trim() : ''); + let userLogin = userDetails.login?.trim() && userDetails.login !== userDetails.displayName ? Str.removeSMSDomain(userDetails.login) : ''; + + let userAvatar = userDetails.avatar; + let userAccountID = accountID; + + // We replace the actor's email, name, and avatar with the Copilot manually for now. This will be improved upon when + // the Copilot feature is implemented. + if (delegateAccountID) { + const delegateUserDetails = personalDetails?.[delegateAccountID] ?? {}; + const delegateUserDisplayName = ReportUtils.getDisplayNameForParticipant(delegateAccountID); + userDisplayName = `${delegateUserDisplayName} (${translate('reportAction.asCopilot')} ${userDisplayName})`; + userLogin = delegateUserDetails.login ?? ''; + userAvatar = delegateUserDetails.avatar; + userAccountID = delegateAccountID; + } + + let title = String(userDisplayName).trim() ? userDisplayName : ''; + const subtitle = userLogin.trim() && LocalePhoneNumber.formatPhoneNumber(userLogin) !== userDisplayName ? Str.removeSMSDomain(userLogin) : ''; + if (icon && (icon.type === CONST.ICON_TYPE_WORKSPACE || !title)) { + title = icon.name ?? ''; + } + const renderTooltipContent = useCallback( + () => ( + + + + + {title} + {subtitle} + + ), + + [ + styles.alignItemsCenter, + styles.ph2, + styles.pv2, + styles.emptyAvatar, + styles.actionAvatar, + styles.mt2, + styles.textMicroBold, + styles.textReactionSenders, + styles.textAlignCenter, + styles.textMicro, + styles.fontColorReactionLabel, + styles.breakWord, + icon, + userAvatar, + userAccountID, + userLogin, + title, + subtitle, + ], + ); + + if (!icon && !userDisplayName && !userLogin) { + return children; + } + + return ( + + {children} + + ); } BaseUserDetailsTooltip.displayName = 'BaseUserDetailsTooltip'; diff --git a/src/components/UserDetailsTooltip/BaseUserDetailsTooltip/index.website.tsx b/src/components/UserDetailsTooltip/BaseUserDetailsTooltip/index.website.tsx deleted file mode 100644 index bebea1418342..000000000000 --- a/src/components/UserDetailsTooltip/BaseUserDetailsTooltip/index.website.tsx +++ /dev/null @@ -1,100 +0,0 @@ -import Str from 'expensify-common/lib/str'; -import React, {useCallback} from 'react'; -import {Text, View} from 'react-native'; -import Avatar from '@components/Avatar'; -import {usePersonalDetails} from '@components/OnyxProvider'; -import Tooltip from '@components/Tooltip'; -import UserDetailsTooltipProps from '@components/UserDetailsTooltip/types'; -import useLocalize from '@hooks/useLocalize'; -import useThemeStyles from '@hooks/useThemeStyles'; -import * as LocalePhoneNumber from '@libs/LocalePhoneNumber'; -import * as ReportUtils from '@libs/ReportUtils'; -import * as UserUtils from '@libs/UserUtils'; -import CONST from '@src/CONST'; - -function BaseUserDetailsTooltip({accountID, fallbackUserDetails, icon, delegateAccountID, shiftHorizontal, children}: UserDetailsTooltipProps) { - const styles = useThemeStyles(); - const {translate} = useLocalize(); - const personalDetails = usePersonalDetails(); - - const userDetails = personalDetails?.[accountID] ?? fallbackUserDetails ?? {}; - let userDisplayName = ReportUtils.getDisplayNameForParticipant(accountID) ?? (userDetails.displayName ? userDetails.displayName.trim() : ''); - let userLogin = userDetails.login?.trim() && userDetails.login !== userDetails.displayName ? Str.removeSMSDomain(userDetails.login) : ''; - - let userAvatar = userDetails.avatar; - let userAccountID = accountID; - - // We replace the actor's email, name, and avatar with the Copilot manually for now. This will be improved upon when - // the Copilot feature is implemented. - if (delegateAccountID) { - const delegateUserDetails = personalDetails?.[delegateAccountID] ?? {}; - const delegateUserDisplayName = ReportUtils.getDisplayNameForParticipant(delegateAccountID); - userDisplayName = `${delegateUserDisplayName} (${translate('reportAction.asCopilot')} ${userDisplayName})`; - userLogin = delegateUserDetails.login ?? ''; - userAvatar = delegateUserDetails.avatar; - userAccountID = delegateAccountID; - } - - let title = String(userDisplayName).trim() ? userDisplayName : ''; - const subtitle = userLogin.trim() && LocalePhoneNumber.formatPhoneNumber(userLogin) !== userDisplayName ? Str.removeSMSDomain(userLogin) : ''; - if (icon && (icon.type === CONST.ICON_TYPE_WORKSPACE || !title)) { - title = icon.name ?? ''; - } - const renderTooltipContent = useCallback( - () => ( - - - - - {title} - {subtitle} - - ), - - [ - styles.alignItemsCenter, - styles.ph2, - styles.pv2, - styles.emptyAvatar, - styles.actionAvatar, - styles.mt2, - styles.textMicroBold, - styles.textReactionSenders, - styles.textAlignCenter, - styles.textMicro, - styles.fontColorReactionLabel, - styles.breakWord, - icon, - userAvatar, - userAccountID, - userLogin, - title, - subtitle, - ], - ); - - if (!icon && !userDisplayName && !userLogin) { - return children; - } - - return ( - - {children} - - ); -} - -BaseUserDetailsTooltip.displayName = 'BaseUserDetailsTooltip'; - -export default BaseUserDetailsTooltip; diff --git a/src/components/UserDetailsTooltip/index.tsx b/src/components/UserDetailsTooltip/index.tsx index 1ae1688072c9..71e3a9f433cf 100644 --- a/src/components/UserDetailsTooltip/index.tsx +++ b/src/components/UserDetailsTooltip/index.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import BaseUserDetailsTooltip from './BaseUserDetailsTooltip'; +import BaseUserDetailsTooltip from './BaseUserDetailsTooltip/index.native'; import UserDetailsTooltipProps from './types'; function UserDetailsTooltip({shouldRender = true, children, ...props}: UserDetailsTooltipProps) {