diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js index 88d3df3b7001..c8906889612f 100644 --- a/src/components/MenuItem.js +++ b/src/components/MenuItem.js @@ -1,6 +1,7 @@ import _ from 'underscore'; -import React from 'react'; +import React, {useEffect} from 'react'; import {View} from 'react-native'; +import ExpensiMark from 'expensify-common/lib/ExpensiMark'; import Text from './Text'; import styles from '../styles/styles'; import themeColors from '../styles/themes/default'; @@ -34,6 +35,7 @@ const defaultProps = { shouldShowBasicTitle: false, shouldShowDescriptionOnTop: false, shouldShowHeaderTitle: false, + shouldParseTitle: false, wrapperStyle: [], style: styles.popoverMenuItem, titleStyle: {}, @@ -79,6 +81,7 @@ const defaultProps = { const MenuItem = React.forwardRef((props, ref) => { const {isSmallScreenWidth} = useWindowDimensions(); + const [html, setHtml] = React.useState(''); const isDeleted = _.contains(props.style, styles.offlineFeedback.deleted); const descriptionVerticalMargin = props.shouldShowDescriptionOnTop ? styles.mb1 : styles.mt1; @@ -106,6 +109,16 @@ const MenuItem = React.forwardRef((props, ref) => { const fallbackAvatarSize = props.viewMode === CONST.OPTION_MODE.COMPACT ? CONST.AVATAR_SIZE.SMALL : CONST.AVATAR_SIZE.DEFAULT; + const titleRef = React.useRef(''); + useEffect(() => { + if (!props.title || (titleRef.current.length && titleRef.current === props.title) || !props.shouldParseTitle) { + return; + } + const parser = new ExpensiMark(); + setHtml(parser.replace(convertToLTR(props.title))); + titleRef.current = props.title; + }, [props.title, props.shouldParseTitle]); + return ( {(isHovered) => ( @@ -224,7 +237,9 @@ const MenuItem = React.forwardRef((props, ref) => { {Boolean(props.title) && Boolean(props.shouldRenderAsHTML) && } - {Boolean(props.title) && !props.shouldRenderAsHTML && ( + {Boolean(props.shouldParseTitle) && Boolean(html.length) && !props.shouldRenderAsHTML && ${html}`} />} + + {!props.shouldRenderAsHTML && !html.length && Boolean(props.title) && ( { {convertToLTR(props.title)} )} + {Boolean(props.shouldShowTitleIcon) && ( Navigation.navigate(ROUTES.getMoneyRequestDescriptionRoute(props.iouType, props.reportID))} diff --git a/src/components/ReportActionItem/MoneyRequestView.js b/src/components/ReportActionItem/MoneyRequestView.js index 902e21b9ce25..712c7ded6ab0 100644 --- a/src/components/ReportActionItem/MoneyRequestView.js +++ b/src/components/ReportActionItem/MoneyRequestView.js @@ -133,6 +133,7 @@ function MoneyRequestView({report, parentReport, shouldShowHorizontalRule, trans Navigation.navigate(ROUTES.getTaskReportDescriptionRoute(props.report.reportID))} diff --git a/src/pages/tasks/NewTaskPage.js b/src/pages/tasks/NewTaskPage.js index 99050e73bda0..9fb600e40753 100644 --- a/src/pages/tasks/NewTaskPage.js +++ b/src/pages/tasks/NewTaskPage.js @@ -162,6 +162,7 @@ function NewTaskPage(props) { title={description} onPress={() => Navigation.navigate(ROUTES.NEW_TASK_DESCRIPTION)} shouldShowRightIcon + shouldParseTitle numberOfLinesTitle={2} titleStyle={styles.flex1} />