From 508c4ce1b71a87b4a3cd27992a403daa4695eece Mon Sep 17 00:00:00 2001 From: Aldo Canepa Date: Tue, 2 Apr 2024 16:29:51 -0700 Subject: [PATCH 1/6] Add supporting-text custom element with supporting text style --- src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx index a06e2dbbf421..dadbc20d9a1d 100755 --- a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx +++ b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx @@ -42,6 +42,11 @@ function BaseHTMLEngineProvider({textSelectable = false, children, enableExperim mixedUAStyles: {...styles.colorMuted, ...styles.mb0}, contentModel: HTMLContentModel.block, }), + 'supporting-text': HTMLElementModel.fromCustomModel({ + tagName: 'supporting-text', + mixedUAStyles: {...styles.textLabelSupporting, ...styles.textNormal, ...styles.lh20}, + contentModel: HTMLContentModel.block, + }), comment: HTMLElementModel.fromCustomModel({ tagName: 'comment', mixedUAStyles: {whiteSpace: 'pre'}, From d8ffc6d8a7da8c948ad228b97bf0ddbf351ecd4b Mon Sep 17 00:00:00 2001 From: Aldo Canepa Date: Tue, 2 Apr 2024 16:30:46 -0700 Subject: [PATCH 2/6] Render report preview subtitle as html --- .../ReportActionItem/ReportPreview.tsx | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/src/components/ReportActionItem/ReportPreview.tsx b/src/components/ReportActionItem/ReportPreview.tsx index 2581359b4543..45d8fc7df922 100644 --- a/src/components/ReportActionItem/ReportPreview.tsx +++ b/src/components/ReportActionItem/ReportPreview.tsx @@ -8,6 +8,7 @@ import Icon from '@components/Icon'; import * as Expensicons from '@components/Icon/Expensicons'; import OfflineWithFeedback from '@components/OfflineWithFeedback'; import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback'; +import RenderHTML from '@components/RenderHTML'; import SettlementButton from '@components/SettlementButton'; import {showContextMenuForReport} from '@components/ShowContextMenuContext'; import Text from '@components/Text'; @@ -32,6 +33,7 @@ import ROUTES from '@src/ROUTES'; import type {Policy, Report, ReportAction, Transaction, TransactionViolations, UserWallet} from '@src/types/onyx'; import type {PaymentMethodType} from '@src/types/onyx/OriginalMessage'; import ReportActionItemImages from './ReportActionItemImages'; +import ExpensiMark from 'expensify-common/lib/ExpensiMark'; type ReportPreviewOnyxProps = { /** The policy tied to the money request report */ @@ -234,6 +236,15 @@ function ReportPreview({ numberOfRequests === 1 && (!!formattedMerchant || !!formattedDescription) && !(hasOnlyTransactionsWithPendingRoutes && !totalDisplaySpend); const shouldShowSubtitle = !isScanning && (shouldShowSingleRequestMerchantOrDescription || numberOfRequests > 1); + const subtitle = previewSubtitle || moneyRequestComment; + const htmlSubtitle = useMemo(() => { + if (!subtitle || !shouldShowSubtitle) { + return ''; + } + const parsedSubtitle = new ExpensiMark().replace(subtitle); + return parsedSubtitle ? `${parsedSubtitle}` : ''; + }, [subtitle, shouldShowSubtitle]); + return ( - {shouldShowSubtitle && ( + {shouldShowSubtitle && htmlSubtitle && ( - - {previewSubtitle || moneyRequestComment} + + )} From 4cc379b2e6969d2b9264bb6dd6381e01c4a1e708 Mon Sep 17 00:00:00 2001 From: Aldo Canepa Date: Tue, 2 Apr 2024 16:31:36 -0700 Subject: [PATCH 3/6] Use useMemo instead of unnecessary state and ref --- src/components/MenuItem.tsx | 23 ++++++++++------------- 1 file changed, 10 insertions(+), 13 deletions(-) diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx index 110256ba166b..8f09bd27e462 100644 --- a/src/components/MenuItem.tsx +++ b/src/components/MenuItem.tsx @@ -325,8 +325,6 @@ function MenuItem( const StyleUtils = useStyleUtils(); const combinedStyle = [style, styles.popoverMenuItem]; const {isSmallScreenWidth} = useWindowDimensions(); - const [html, setHtml] = useState(''); - const titleRef = useRef(''); const {isExecuting, singleExecution, waitForNavigate} = useContext(MenuItemGroupContext) ?? {}; const isDeleted = style && Array.isArray(style) ? style.includes(styles.offlineFeedback.deleted) : false; @@ -354,26 +352,25 @@ function MenuItem( isDeleted ? styles.offlineFeedback.deleted : {}, ]); - useEffect(() => { - if (!title || (titleRef.current.length && titleRef.current === title) || !shouldParseTitle) { - return; + const html = useMemo(() => { + if (!title || !shouldParseTitle) { + return ''; } const parser = new ExpensiMark(); - setHtml(parser.replace(title)); - titleRef.current = title; + return parser.replace(title); }, [title, shouldParseTitle]); - const getProcessedTitle = useMemo(() => { - let processedTitle = ''; + const processedTitle = useMemo(() => { + let titleToWrap = ''; if (shouldRenderAsHTML) { - processedTitle = title ? convertToLTR(title) : ''; + titleToWrap = title ? convertToLTR(title) : ''; } if (shouldParseTitle) { - processedTitle = html; + titleToWrap = html; } - return processedTitle ? `${processedTitle}` : ''; + return titleToWrap ? `${titleToWrap}` : ''; }, [title, shouldRenderAsHTML, shouldParseTitle, html]); const hasPressableRightComponent = iconRight || (shouldShowRightComponent && rightComponent); @@ -536,7 +533,7 @@ function MenuItem( {!!title && (shouldRenderAsHTML || (shouldParseTitle && !!html.length)) && ( - + )} {!shouldRenderAsHTML && !shouldParseTitle && !!title && ( From 5f8d91b3d2e14209556d2f1d083f26df10b88bee Mon Sep 17 00:00:00 2001 From: Aldo Canepa Date: Tue, 2 Apr 2024 16:44:37 -0700 Subject: [PATCH 4/6] Use muted-text and remove supporting-text --- src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx | 5 ----- src/components/ReportActionItem/ReportPreview.tsx | 2 +- 2 files changed, 1 insertion(+), 6 deletions(-) diff --git a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx index dadbc20d9a1d..a06e2dbbf421 100755 --- a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx +++ b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx @@ -42,11 +42,6 @@ function BaseHTMLEngineProvider({textSelectable = false, children, enableExperim mixedUAStyles: {...styles.colorMuted, ...styles.mb0}, contentModel: HTMLContentModel.block, }), - 'supporting-text': HTMLElementModel.fromCustomModel({ - tagName: 'supporting-text', - mixedUAStyles: {...styles.textLabelSupporting, ...styles.textNormal, ...styles.lh20}, - contentModel: HTMLContentModel.block, - }), comment: HTMLElementModel.fromCustomModel({ tagName: 'comment', mixedUAStyles: {whiteSpace: 'pre'}, diff --git a/src/components/ReportActionItem/ReportPreview.tsx b/src/components/ReportActionItem/ReportPreview.tsx index 45d8fc7df922..3c67f40b7c89 100644 --- a/src/components/ReportActionItem/ReportPreview.tsx +++ b/src/components/ReportActionItem/ReportPreview.tsx @@ -242,7 +242,7 @@ function ReportPreview({ return ''; } const parsedSubtitle = new ExpensiMark().replace(subtitle); - return parsedSubtitle ? `${parsedSubtitle}` : ''; + return parsedSubtitle ? `${parsedSubtitle}` : ''; }, [subtitle, shouldShowSubtitle]); return ( From 861a746f74c7c3bf9f296a3e165b680f8a870575 Mon Sep 17 00:00:00 2001 From: Aldo Canepa Date: Tue, 2 Apr 2024 17:26:53 -0700 Subject: [PATCH 5/6] Lint --- src/components/ReportActionItem/ReportPreview.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ReportActionItem/ReportPreview.tsx b/src/components/ReportActionItem/ReportPreview.tsx index 3c67f40b7c89..5cfb1895719f 100644 --- a/src/components/ReportActionItem/ReportPreview.tsx +++ b/src/components/ReportActionItem/ReportPreview.tsx @@ -1,3 +1,4 @@ +import ExpensiMark from 'expensify-common/lib/ExpensiMark'; import React, {useMemo} from 'react'; import type {StyleProp, ViewStyle} from 'react-native'; import {View} from 'react-native'; @@ -33,7 +34,6 @@ import ROUTES from '@src/ROUTES'; import type {Policy, Report, ReportAction, Transaction, TransactionViolations, UserWallet} from '@src/types/onyx'; import type {PaymentMethodType} from '@src/types/onyx/OriginalMessage'; import ReportActionItemImages from './ReportActionItemImages'; -import ExpensiMark from 'expensify-common/lib/ExpensiMark'; type ReportPreviewOnyxProps = { /** The policy tied to the money request report */ From e6ebbc2e5fdbd110d8376d771b662d1252917343 Mon Sep 17 00:00:00 2001 From: Aldo Canepa Date: Tue, 2 Apr 2024 17:40:21 -0700 Subject: [PATCH 6/6] Style / Only apply html render for description and not merchant --- src/components/MenuItem.tsx | 2 +- .../ReportActionItem/ReportPreview.tsx | 42 ++++++++++--------- 2 files changed, 24 insertions(+), 20 deletions(-) diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx index 8f09bd27e462..46a0766c1057 100644 --- a/src/components/MenuItem.tsx +++ b/src/components/MenuItem.tsx @@ -1,7 +1,7 @@ import ExpensiMark from 'expensify-common/lib/ExpensiMark'; import type {ImageContentFit} from 'expo-image'; import type {ForwardedRef, ReactNode} from 'react'; -import React, {forwardRef, useContext, useEffect, useMemo, useRef, useState} from 'react'; +import React, {forwardRef, useContext, useMemo} from 'react'; import type {GestureResponderEvent, StyleProp, TextStyle, ViewStyle} from 'react-native'; import {View} from 'react-native'; import type {AnimatedStyle} from 'react-native-reanimated'; diff --git a/src/components/ReportActionItem/ReportPreview.tsx b/src/components/ReportActionItem/ReportPreview.tsx index 5cfb1895719f..efe0b71b1012 100644 --- a/src/components/ReportActionItem/ReportPreview.tsx +++ b/src/components/ReportActionItem/ReportPreview.tsx @@ -147,15 +147,6 @@ function ReportPreview({ if (TransactionUtils.isPartialMerchant(formattedMerchant ?? '')) { formattedMerchant = null; } - const previewSubtitle = - // Formatted merchant can be an empty string - // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing - (formattedMerchant ?? formattedDescription) || - translate('iou.requestCount', { - count: numberOfRequests - numberOfScanningReceipts - numberOfPendingRequests, - scanningReceipts: numberOfScanningReceipts, - pendingReceipts: numberOfPendingRequests, - }); const shouldShowSubmitButton = isOpenExpenseReport && reimbursableSpend !== 0; const shouldDisableSubmitButton = shouldShowSubmitButton && !ReportUtils.isAllowedToSubmitDraftExpenseReport(iouReport); @@ -236,14 +227,23 @@ function ReportPreview({ numberOfRequests === 1 && (!!formattedMerchant || !!formattedDescription) && !(hasOnlyTransactionsWithPendingRoutes && !totalDisplaySpend); const shouldShowSubtitle = !isScanning && (shouldShowSingleRequestMerchantOrDescription || numberOfRequests > 1); - const subtitle = previewSubtitle || moneyRequestComment; - const htmlSubtitle = useMemo(() => { - if (!subtitle || !shouldShowSubtitle) { - return ''; + const {isSupportTextHtml, supportText} = useMemo(() => { + if (formattedMerchant) { + return {isSupportTextHtml: false, supportText: formattedMerchant}; + } + if (formattedDescription ?? moneyRequestComment) { + const parsedSubtitle = new ExpensiMark().replace(formattedDescription ?? moneyRequestComment); + return {isSupportTextHtml: !!parsedSubtitle, supportText: parsedSubtitle ? `${parsedSubtitle}` : ''}; } - const parsedSubtitle = new ExpensiMark().replace(subtitle); - return parsedSubtitle ? `${parsedSubtitle}` : ''; - }, [subtitle, shouldShowSubtitle]); + return { + isSupportTextHtml: false, + supportText: translate('iou.requestCount', { + count: numberOfRequests - numberOfScanningReceipts - numberOfPendingRequests, + scanningReceipts: numberOfScanningReceipts, + pendingReceipts: numberOfPendingRequests, + }), + }; + }, [formattedMerchant, formattedDescription, moneyRequestComment, translate, numberOfRequests, numberOfScanningReceipts, numberOfPendingRequests]); return ( - {shouldShowSubtitle && htmlSubtitle && ( + {shouldShowSubtitle && supportText && ( - - + + {isSupportTextHtml ? ( + + ) : ( + {supportText} + )} )}