diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx index 6757d0602691..3993633da58d 100644 --- a/src/components/MenuItem.tsx +++ b/src/components/MenuItem.tsx @@ -178,6 +178,9 @@ type MenuItemBaseProps = { /** Text that appears above the title */ label?: string; + /** Character limit after which the menu item text will be truncated */ + characterLimit?: number; + isLabelHoverable?: boolean; /** Label to be displayed on the right */ @@ -201,6 +204,9 @@ type MenuItemBaseProps = { /** Should we make this selectable with a checkbox */ shouldShowSelectedState?: boolean; + /** Should we truncate the title */ + shouldTruncateTitle?: boolean; + /** Whether this item is selected */ isSelected?: boolean; @@ -325,7 +331,6 @@ type MenuItemBaseProps = { }; type MenuItemProps = (IconProps | AvatarProps | NoIcon) & MenuItemBaseProps; - function MenuItem( { interactive = true, @@ -376,6 +381,8 @@ function MenuItem( subtitle, shouldShowBasicTitle, label, + shouldTruncateTitle = false, + characterLimit = 200, isLabelHoverable = true, rightLabel, shouldShowSelectedState = false, @@ -477,8 +484,12 @@ function MenuItem( titleToWrap = html; } + if (shouldTruncateTitle) { + titleToWrap = Parser.truncateHTML(titleToWrap, characterLimit, {ellipsis: '...'}); + } + return titleToWrap ? `${titleToWrap}` : ''; - }, [title, shouldRenderAsHTML, shouldParseTitle, html]); + }, [title, shouldRenderAsHTML, shouldParseTitle, characterLimit, shouldTruncateTitle, html]); const processedHelperText = useMemo(() => { let textToWrap = ''; diff --git a/src/libs/Parser.ts b/src/libs/Parser.ts index 18e37658f220..9d791b1d4f7b 100644 --- a/src/libs/Parser.ts +++ b/src/libs/Parser.ts @@ -43,6 +43,10 @@ class ExpensiMarkWithContext extends ExpensiMark { cacheVideoAttributes: extras?.cacheVideoAttributes, }); } + + truncateHTML(htmlString: string, limit: number, extras?: {ellipsis: string | undefined}): string { + return super.truncateHTML(htmlString, limit, extras); + } } ExpensiMarkWithContext.setLogger(Log); diff --git a/src/pages/ReportDetailsPage.tsx b/src/pages/ReportDetailsPage.tsx index 690e9e86e588..de93ed7a3ced 100644 --- a/src/pages/ReportDetailsPage.tsx +++ b/src/pages/ReportDetailsPage.tsx @@ -127,7 +127,6 @@ function ReportDetailsPage({policies, report, session, personalDetails}: ReportD const isExpenseReport = isMoneyRequestReport || isInvoiceReport || isMoneyRequest; const isSingleTransactionView = isMoneyRequest || isTrackExpenseReport; const isSelfDMTrackExpenseReport = isTrackExpenseReport && ReportUtils.isSelfDM(parentReport); - const shouldDisableRename = useMemo(() => ReportUtils.shouldDisableRename(report), [report]); const parentNavigationSubtitleData = ReportUtils.getParentNavigationSubtitle(report); // 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 @@ -720,10 +719,12 @@ function ReportDetailsPage({policies, report, session, personalDetails}: ReportD {shouldShowReportDescription && ( Navigation.navigate(ROUTES.REPORT_DESCRIPTION.getRoute(report.reportID))} diff --git a/src/pages/RoomDescriptionPage.tsx b/src/pages/RoomDescriptionPage.tsx index 1103b0ba3d8a..6589a73c88e8 100644 --- a/src/pages/RoomDescriptionPage.tsx +++ b/src/pages/RoomDescriptionPage.tsx @@ -2,11 +2,12 @@ import {useFocusEffect} from '@react-navigation/native'; import React, {useCallback, useRef, useState} from 'react'; import {View} from 'react-native'; import type {OnyxCollection} from 'react-native-onyx'; -import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView'; import FormProvider from '@components/Form/FormProvider'; import InputWrapper from '@components/Form/InputWrapper'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; +import RenderHTML from '@components/RenderHTML'; import ScreenWrapper from '@components/ScreenWrapper'; +import ScrollView from '@components/ScrollView'; import Text from '@components/Text'; import TextInput from '@components/TextInput'; import type {BaseTextInputRef} from '@components/TextInput/BaseTextInput/types'; @@ -60,14 +61,15 @@ function RoomDescriptionPage({report, policies}: RoomDescriptionPageProps) { }, []), ); + const canEdit = ReportUtils.canEditReportDescription(report, policy); return ( - - + + {canEdit && ( - + )} + {!canEdit && ( + + + + )} ); }