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 && (
+
+
+
+ )}
);
}