From 5ed35107467727b91784633184bd2b723a951366 Mon Sep 17 00:00:00 2001 From: mkzie2 Date: Wed, 5 Mar 2025 21:36:29 +0700 Subject: [PATCH 01/12] add reportID infor in the report detail page --- src/components/TextWithCopy.tsx | 33 +++++++++++++++++++++++++++++++++ src/pages/ReportDetailsPage.tsx | 28 +++++++++++++++++++++++++++- 2 files changed, 60 insertions(+), 1 deletion(-) create mode 100644 src/components/TextWithCopy.tsx diff --git a/src/components/TextWithCopy.tsx b/src/components/TextWithCopy.tsx new file mode 100644 index 000000000000..6a9ed16462cf --- /dev/null +++ b/src/components/TextWithCopy.tsx @@ -0,0 +1,33 @@ +import React, {useRef} from 'react'; +import type {TextProps} from 'react-native'; +import type {Text as RNText} from 'react-native'; +import Clipboard from '@libs/Clipboard'; +import {showContextMenu} from '@pages/home/report/ContextMenu/ReportActionContextMenu'; +import CONST from '@src/CONST'; +import Text from './Text'; + +type TextWithCopyProps = TextProps & { + copyText: string; +}; + +function TextWithCopy({children, copyText, ...rest}: TextWithCopyProps) { + const textRef = useRef(null); + + return ( + { + Clipboard.setString(copyText); + }} + onLongPress={(event) => { + showContextMenu(CONST.CONTEXT_MENU_TYPES.LINK, event, copyText, textRef.current); + }} + // eslint-disable-next-line react/jsx-props-no-spreading + {...rest} + > + {children} + + ); +} + +export default TextWithCopy; diff --git a/src/pages/ReportDetailsPage.tsx b/src/pages/ReportDetailsPage.tsx index dd02c1be071f..d849c17af57a 100644 --- a/src/pages/ReportDetailsPage.tsx +++ b/src/pages/ReportDetailsPage.tsx @@ -10,6 +10,7 @@ import ConfirmModal from '@components/ConfirmModal'; import DecisionModal from '@components/DecisionModal'; import DelegateNoAccessModal from '@components/DelegateNoAccessModal'; import DisplayNames from '@components/DisplayNames'; +import FixedFooter from '@components/FixedFooter'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import MentionReportContext from '@components/HTMLEngineProvider/HTMLRenderers/MentionReportRenderer/MentionReportContext'; import * as Expensicons from '@components/Icon/Expensicons'; @@ -26,12 +27,14 @@ import ScreenWrapper from '@components/ScreenWrapper'; import ScrollView from '@components/ScrollView'; import {useSearchContext} from '@components/Search/SearchContext'; import Text from '@components/Text'; +import TextWithCopy from '@components/TextWithCopy'; import useDelegateUserDetails from '@hooks/useDelegateUserDetails'; import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; import usePaginatedReportActions from '@hooks/usePaginatedReportActions'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useThemeStyles from '@hooks/useThemeStyles'; +import getBase62ReportID from '@libs/getBase62ReportID'; import Navigation from '@libs/Navigation/Navigation'; import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {ReportDetailsNavigatorParamList} from '@libs/Navigation/types'; @@ -963,7 +966,7 @@ function ReportDetailsPage({policies, report, route, reportMetadata}: ReportDeta title={translate('common.details')} onBackButtonPress={() => Navigation.goBack(backTo)} /> - + {renderedAvatar} {isExpenseReport && (!shouldShowTitleField || !titleField) && nameSectionExpenseIOU} @@ -1017,6 +1020,29 @@ function ReportDetailsPage({policies, report, route, reportMetadata}: ReportDeta onPress={() => setIsDeleteModalVisible(true)} /> )} + + + + + Report ID: + + {getBase62ReportID(Number(report.reportID))} + + + + Long ID: + + {report.reportID} + + + + Date: Thu, 6 Mar 2025 23:55:29 +0700 Subject: [PATCH 02/12] fix lint --- src/components/TextWithCopy.tsx | 3 ++- src/languages/en.ts | 1 + src/languages/es.ts | 1 + src/pages/ReportDetailsPage.tsx | 4 ++-- 4 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/components/TextWithCopy.tsx b/src/components/TextWithCopy.tsx index 6a9ed16462cf..7cf046922c27 100644 --- a/src/components/TextWithCopy.tsx +++ b/src/components/TextWithCopy.tsx @@ -1,10 +1,11 @@ import React, {useRef} from 'react'; -import type {TextProps} from 'react-native'; +// eslint-disable-next-line no-restricted-imports import type {Text as RNText} from 'react-native'; import Clipboard from '@libs/Clipboard'; import {showContextMenu} from '@pages/home/report/ContextMenu/ReportActionContextMenu'; import CONST from '@src/CONST'; import Text from './Text'; +import type {TextProps} from './Text'; type TextWithCopyProps = TextProps & { copyText: string; diff --git a/src/languages/en.ts b/src/languages/en.ts index 127de853ce29..746eb2ac6949 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -497,6 +497,7 @@ const translations = { filterLogs: 'Filter Logs', network: 'Network', reportID: 'Report ID', + longID: 'Long ID', bankAccounts: 'Bank accounts', chooseFile: 'Choose file', dropTitle: 'Let it go', diff --git a/src/languages/es.ts b/src/languages/es.ts index ba838537a2a7..82748b2f907a 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -490,6 +490,7 @@ const translations = { filterLogs: 'Registros de filtrado', network: 'La red', reportID: 'ID del informe', + longID: 'ID largo', bankAccounts: 'Cuentas bancarias', chooseFile: 'Elegir archivo', dropTitle: 'Suéltalo', diff --git a/src/pages/ReportDetailsPage.tsx b/src/pages/ReportDetailsPage.tsx index aa6a7c0f4d32..873899a3aae7 100644 --- a/src/pages/ReportDetailsPage.tsx +++ b/src/pages/ReportDetailsPage.tsx @@ -1030,7 +1030,7 @@ function ReportDetailsPage({policies, report, route, reportMetadata}: ReportDeta - Report ID: + {translate('common.reportID')}: - Long ID: + {translate('common.longID')}: Date: Thu, 6 Mar 2025 23:58:23 +0700 Subject: [PATCH 03/12] make pressing report id title copiable --- src/pages/ReportDetailsPage.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/pages/ReportDetailsPage.tsx b/src/pages/ReportDetailsPage.tsx index 873899a3aae7..90cebfb945cd 100644 --- a/src/pages/ReportDetailsPage.tsx +++ b/src/pages/ReportDetailsPage.tsx @@ -1030,21 +1030,19 @@ function ReportDetailsPage({policies, report, route, reportMetadata}: ReportDeta - {translate('common.reportID')}: - {getBase62ReportID(Number(report.reportID))} + {translate('common.reportID')}: {getBase62ReportID(Number(report.reportID))} - {translate('common.longID')}: - {report.reportID} + {translate('common.longID')}: {report.reportID} From dcb7205a7f200949040e4ae76e353f714b67ed1f Mon Sep 17 00:00:00 2001 From: mkzie2 Date: Mon, 10 Mar 2025 18:48:39 +0700 Subject: [PATCH 04/12] fix skew content in report details page --- src/pages/ReportDetailsPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/ReportDetailsPage.tsx b/src/pages/ReportDetailsPage.tsx index b66e924e95ea..3009659ee3d8 100644 --- a/src/pages/ReportDetailsPage.tsx +++ b/src/pages/ReportDetailsPage.tsx @@ -967,7 +967,7 @@ function ReportDetailsPage({policies, report, route, reportMetadata}: ReportDeta title={translate('common.details')} onBackButtonPress={() => Navigation.goBack(backTo)} /> - + {renderedAvatar} {isExpenseReport && (!shouldShowTitleField || !titleField) && nameSectionExpenseIOU} From 5390816201dce02b51363070930e2765e13bf31e Mon Sep 17 00:00:00 2001 From: mkzie2 Date: Wed, 12 Mar 2025 00:45:33 +0700 Subject: [PATCH 05/12] disable long press to copy --- src/components/TextWithCopy.tsx | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/components/TextWithCopy.tsx b/src/components/TextWithCopy.tsx index 7cf046922c27..95b0849c705d 100644 --- a/src/components/TextWithCopy.tsx +++ b/src/components/TextWithCopy.tsx @@ -2,8 +2,6 @@ import React, {useRef} from 'react'; // eslint-disable-next-line no-restricted-imports import type {Text as RNText} from 'react-native'; import Clipboard from '@libs/Clipboard'; -import {showContextMenu} from '@pages/home/report/ContextMenu/ReportActionContextMenu'; -import CONST from '@src/CONST'; import Text from './Text'; import type {TextProps} from './Text'; @@ -20,9 +18,6 @@ function TextWithCopy({children, copyText, ...rest}: TextWithCopyProps) { onPress={() => { Clipboard.setString(copyText); }} - onLongPress={(event) => { - showContextMenu(CONST.CONTEXT_MENU_TYPES.LINK, event, copyText, textRef.current); - }} // eslint-disable-next-line react/jsx-props-no-spreading {...rest} > From bf3553cb546ff0195d329291fa399c8189fc06cc Mon Sep 17 00:00:00 2001 From: mkzie2 Date: Wed, 12 Mar 2025 00:55:29 +0700 Subject: [PATCH 06/12] disable text selection on mobile chrome --- src/components/TextWithCopy.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/TextWithCopy.tsx b/src/components/TextWithCopy.tsx index 95b0849c705d..0816741e738c 100644 --- a/src/components/TextWithCopy.tsx +++ b/src/components/TextWithCopy.tsx @@ -1,6 +1,7 @@ import React, {useRef} from 'react'; // eslint-disable-next-line no-restricted-imports import type {Text as RNText} from 'react-native'; +import {isMobileChrome} from '@libs/Browser'; import Clipboard from '@libs/Clipboard'; import Text from './Text'; import type {TextProps} from './Text'; @@ -18,6 +19,7 @@ function TextWithCopy({children, copyText, ...rest}: TextWithCopyProps) { onPress={() => { Clipboard.setString(copyText); }} + selectable={!isMobileChrome()} // eslint-disable-next-line react/jsx-props-no-spreading {...rest} > From dd3ce9d0dc7d210b541447762fc83e104c971750 Mon Sep 17 00:00:00 2001 From: mkzie2 Date: Thu, 13 Mar 2025 00:33:18 +0700 Subject: [PATCH 07/12] add jsdoc --- src/components/TextWithCopy.tsx | 14 ++++++++------ src/pages/ReportDetailsPage.tsx | 5 +++-- 2 files changed, 11 insertions(+), 8 deletions(-) diff --git a/src/components/TextWithCopy.tsx b/src/components/TextWithCopy.tsx index 0816741e738c..16a86f549f90 100644 --- a/src/components/TextWithCopy.tsx +++ b/src/components/TextWithCopy.tsx @@ -1,24 +1,26 @@ -import React, {useRef} from 'react'; -// eslint-disable-next-line no-restricted-imports -import type {Text as RNText} from 'react-native'; +import React from 'react'; import {isMobileChrome} from '@libs/Browser'; import Clipboard from '@libs/Clipboard'; import Text from './Text'; import type {TextProps} from './Text'; type TextWithCopyProps = TextProps & { + /** The value to copy when the text component is pressed */ copyText: string; }; +/** + * A text component that copies the text to the clipboard when pressed. + * This is different from the `CopyTextToClipboard` component in that + * here the copy functionality is incorporated into the text itself. + */ function TextWithCopy({children, copyText, ...rest}: TextWithCopyProps) { - const textRef = useRef(null); - return ( { Clipboard.setString(copyText); }} + // Disable to prevent Chrome's Touch to Search popup showing up when text is selected selectable={!isMobileChrome()} // eslint-disable-next-line react/jsx-props-no-spreading {...rest} diff --git a/src/pages/ReportDetailsPage.tsx b/src/pages/ReportDetailsPage.tsx index 22c042b96b91..71b43f987a41 100644 --- a/src/pages/ReportDetailsPage.tsx +++ b/src/pages/ReportDetailsPage.tsx @@ -232,6 +232,7 @@ function ReportDetailsPage({policies, report, route, reportMetadata}: ReportDeta const isSelfDMTrackExpenseReport = isTrackExpenseReport && isSelfDMUtil(parentReport); const shouldDisableRename = useMemo(() => shouldDisableRenameUtil(report), [report]); const parentNavigationSubtitleData = getParentNavigationSubtitle(report); + const base62ReportID = getBase62ReportID(Number(report.reportID)); // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps -- policy is a dependency because `getChatRoomSubtitle` calls `getPolicyName` which in turn retrieves the value from the `policy` value stored in Onyx const chatRoomSubtitle = useMemo(() => { const subtitle = getChatRoomSubtitle(report); @@ -1071,10 +1072,10 @@ function ReportDetailsPage({policies, report, route, reportMetadata}: ReportDeta - {translate('common.reportID')}: {getBase62ReportID(Number(report.reportID))} + {translate('common.reportID')}: {base62ReportID} From 33d82493db0d7eef1bb8e6132c1fbdfbed941e1c Mon Sep 17 00:00:00 2001 From: mkzie2 Date: Tue, 25 Mar 2025 15:28:32 +0700 Subject: [PATCH 08/12] dont show cursor pointer or hover background --- src/pages/ReportDetailsPage.tsx | 33 ++++++++++++++------------------- 1 file changed, 14 insertions(+), 19 deletions(-) diff --git a/src/pages/ReportDetailsPage.tsx b/src/pages/ReportDetailsPage.tsx index 71b43f987a41..f6a4319c7a8c 100644 --- a/src/pages/ReportDetailsPage.tsx +++ b/src/pages/ReportDetailsPage.tsx @@ -30,7 +30,6 @@ import ScreenWrapper from '@components/ScreenWrapper'; import ScrollView from '@components/ScrollView'; import {useSearchContext} from '@components/Search/SearchContext'; import Text from '@components/Text'; -import TextWithCopy from '@components/TextWithCopy'; import useDelegateUserDetails from '@hooks/useDelegateUserDetails'; import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; @@ -1068,24 +1067,20 @@ function ReportDetailsPage({policies, report, route, reportMetadata}: ReportDeta /> )} - - - - - {translate('common.reportID')}: {base62ReportID} - - - - - {translate('common.longID')}: {report.reportID} - - + + + + From 18d9859334575280c167d242f55b45c1fe68e60a Mon Sep 17 00:00:00 2001 From: mkzie2 Date: Tue, 25 Mar 2025 15:33:50 +0700 Subject: [PATCH 09/12] prettier --- src/pages/ReportDetailsPage.tsx | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/src/pages/ReportDetailsPage.tsx b/src/pages/ReportDetailsPage.tsx index 032553619564..4bf0391cacf1 100644 --- a/src/pages/ReportDetailsPage.tsx +++ b/src/pages/ReportDetailsPage.tsx @@ -1063,18 +1063,18 @@ function ReportDetailsPage({policies, report, route, reportMetadata}: ReportDeta - - + + From 6e43fc97cf62410a351b550e72923d46ba991839 Mon Sep 17 00:00:00 2001 From: mkzie2 Date: Wed, 26 Mar 2025 14:31:04 +0700 Subject: [PATCH 10/12] apply new copy behavior --- src/components/TextWithCopy.tsx | 53 +++++++++++++++++++++++---------- src/pages/ReportDetailsPage.tsx | 25 ++++++++-------- 2 files changed, 50 insertions(+), 28 deletions(-) diff --git a/src/components/TextWithCopy.tsx b/src/components/TextWithCopy.tsx index 16a86f549f90..2899475d6c6a 100644 --- a/src/components/TextWithCopy.tsx +++ b/src/components/TextWithCopy.tsx @@ -1,32 +1,53 @@ -import React from 'react'; -import {isMobileChrome} from '@libs/Browser'; -import Clipboard from '@libs/Clipboard'; +import React, {useRef} from 'react'; +import type {GestureResponderEvent, View} from 'react-native'; +import {showContextMenu} from '@pages/home/report/ContextMenu/ReportActionContextMenu'; +import CONST from '@src/CONST'; +import PressableWithSecondaryInteraction from './PressableWithSecondaryInteraction'; import Text from './Text'; import type {TextProps} from './Text'; type TextWithCopyProps = TextProps & { /** The value to copy when the text component is pressed */ - copyText: string; + copyValue: string; }; /** * A text component that copies the text to the clipboard when pressed. - * This is different from the `CopyTextToClipboard` component in that + * This is different from the `copyValueToClipboard` component in that * here the copy functionality is incorporated into the text itself. + * Long press this text to toggle the context menu containing the copy option. */ -function TextWithCopy({children, copyText, ...rest}: TextWithCopyProps) { +function TextWithCopy({children, copyValue, ...rest}: TextWithCopyProps) { + const popoverAnchor = useRef(null); + + const toggleCopyContextMenu = (event: GestureResponderEvent | MouseEvent) => { + if (!copyValue) { + return; + } + showContextMenu({ + type: CONST.CONTEXT_MENU_TYPES.TEXT, + event, + selection: copyValue, + contextMenuAnchor: popoverAnchor.current, + }); + }; + return ( - { - Clipboard.setString(copyText); - }} - // Disable to prevent Chrome's Touch to Search popup showing up when text is selected - selectable={!isMobileChrome()} - // eslint-disable-next-line react/jsx-props-no-spreading - {...rest} + - {children} - + + {children} + + ); } diff --git a/src/pages/ReportDetailsPage.tsx b/src/pages/ReportDetailsPage.tsx index 4bf0391cacf1..5e2e98a22ac6 100644 --- a/src/pages/ReportDetailsPage.tsx +++ b/src/pages/ReportDetailsPage.tsx @@ -30,6 +30,7 @@ import ScreenWrapper from '@components/ScreenWrapper'; import ScrollView from '@components/ScrollView'; import {useSearchContext} from '@components/Search/SearchContext'; import Text from '@components/Text'; +import TextWithCopy from '@components/TextWithCopy'; import useDelegateUserDetails from '@hooks/useDelegateUserDetails'; import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; @@ -1061,20 +1062,20 @@ function ReportDetailsPage({policies, report, route, reportMetadata}: ReportDeta /> )} - - - + + - + {`${translate('common.reportID')}: ${base62ReportID}`} + + + style={styles.textMicroSupporting} + > + {`${translate('common.longID')}: ${report.reportID}`} + From 1388269e86a552bf2b20ae4cdc633fdeb4f6bfc2 Mon Sep 17 00:00:00 2001 From: mkzie2 Date: Thu, 27 Mar 2025 23:03:29 +0700 Subject: [PATCH 11/12] not show pointer cursor --- src/components/TextWithCopy.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/TextWithCopy.tsx b/src/components/TextWithCopy.tsx index 2899475d6c6a..ee8ea136efd4 100644 --- a/src/components/TextWithCopy.tsx +++ b/src/components/TextWithCopy.tsx @@ -1,5 +1,6 @@ import React, {useRef} from 'react'; import type {GestureResponderEvent, View} from 'react-native'; +import useThemeStyles from '@hooks/useThemeStyles'; import {showContextMenu} from '@pages/home/report/ContextMenu/ReportActionContextMenu'; import CONST from '@src/CONST'; import PressableWithSecondaryInteraction from './PressableWithSecondaryInteraction'; @@ -19,6 +20,7 @@ type TextWithCopyProps = TextProps & { */ function TextWithCopy({children, copyValue, ...rest}: TextWithCopyProps) { const popoverAnchor = useRef(null); + const styles = useThemeStyles(); const toggleCopyContextMenu = (event: GestureResponderEvent | MouseEvent) => { if (!copyValue) { @@ -38,6 +40,7 @@ function TextWithCopy({children, copyValue, ...rest}: TextWithCopyProps) { onSecondaryInteraction={toggleCopyContextMenu} accessibilityLabel={copyValue} accessible + style={styles.cursorDefault} > Date: Mon, 31 Mar 2025 18:30:20 +0700 Subject: [PATCH 12/12] modify function name --- src/components/TextWithCopy.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/TextWithCopy.tsx b/src/components/TextWithCopy.tsx index ee8ea136efd4..a969edf0dece 100644 --- a/src/components/TextWithCopy.tsx +++ b/src/components/TextWithCopy.tsx @@ -22,7 +22,7 @@ function TextWithCopy({children, copyValue, ...rest}: TextWithCopyProps) { const popoverAnchor = useRef(null); const styles = useThemeStyles(); - const toggleCopyContextMenu = (event: GestureResponderEvent | MouseEvent) => { + const showCopyContextMenu = (event: GestureResponderEvent | MouseEvent) => { if (!copyValue) { return; } @@ -37,7 +37,7 @@ function TextWithCopy({children, copyValue, ...rest}: TextWithCopyProps) { return (