From 91cb214a02336a292acd24a16b604a96498a6aed Mon Sep 17 00:00:00 2001 From: jeet-dhandha Date: Thu, 14 Sep 2023 23:19:46 +0530 Subject: [PATCH 01/10] Handled parsing of description as html --- src/components/MenuItem.js | 34 ++++++++++++++----- .../ReportActionItem/MoneyRequestView.js | 1 + src/components/ReportActionItem/TaskView.js | 1 + 3 files changed, 28 insertions(+), 8 deletions(-) diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js index adf3fa0cdd80..86df53b7c9d3 100644 --- a/src/components/MenuItem.js +++ b/src/components/MenuItem.js @@ -1,5 +1,5 @@ import _ from 'underscore'; -import React from 'react'; +import React, {useEffect} from 'react'; import {View} from 'react-native'; import Text from './Text'; import styles from '../styles/styles'; @@ -24,6 +24,8 @@ import variables from '../styles/variables'; import * as Session from '../libs/actions/Session'; import Hoverable from './Hoverable'; import useWindowDimensions from '../hooks/useWindowDimensions'; +import ExpensiMark from 'expensify-common/lib/ExpensiMark'; +import RenderHTML from './RenderHTML'; const propTypes = menuItemPropTypes; @@ -78,6 +80,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; @@ -105,6 +108,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(props.title)); + titleRef.current = props.title; + }, [props.title, props.shouldParseTitle]); + return ( {(isHovered) => ( @@ -221,14 +234,19 @@ const MenuItem = React.forwardRef((props, ref) => { )} - {Boolean(props.title) && ( - - {convertToLTR(props.title)} - + {Boolean(html.length) ? ( + ${html}`} /> + ) : ( + Boolean(props.title) && ( + + {convertToLTR(props.title)} + + ) )} + {Boolean(props.shouldShowTitleIcon) && ( Navigation.navigate(ROUTES.getTaskReportDescriptionRoute(props.report.reportID))} From 1396912e78dc1203dd80703ad90a582a099c37ad Mon Sep 17 00:00:00 2001 From: jeet-dhandha Date: Thu, 14 Sep 2023 23:52:06 +0530 Subject: [PATCH 02/10] fix lint issue for imports --- src/components/MenuItem.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js index 86df53b7c9d3..6179676b81f0 100644 --- a/src/components/MenuItem.js +++ b/src/components/MenuItem.js @@ -1,6 +1,7 @@ import _ from 'underscore'; 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'; @@ -24,7 +25,6 @@ import variables from '../styles/variables'; import * as Session from '../libs/actions/Session'; import Hoverable from './Hoverable'; import useWindowDimensions from '../hooks/useWindowDimensions'; -import ExpensiMark from 'expensify-common/lib/ExpensiMark'; import RenderHTML from './RenderHTML'; const propTypes = menuItemPropTypes; From ad8bc7a3b6e8c19aa21a59eedf7eecc6613977a7 Mon Sep 17 00:00:00 2001 From: jeet-dhandha Date: Thu, 14 Sep 2023 23:52:48 +0530 Subject: [PATCH 03/10] fix lint issue for boolean call --- src/components/MenuItem.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js index 6179676b81f0..a4f265df4878 100644 --- a/src/components/MenuItem.js +++ b/src/components/MenuItem.js @@ -234,7 +234,7 @@ const MenuItem = React.forwardRef((props, ref) => { )} - {Boolean(html.length) ? ( + {html.length ? ( ${html}`} /> ) : ( Boolean(props.title) && ( From f69c2c8ad7056beb290610d5f0da1d9aaa81d07e Mon Sep 17 00:00:00 2001 From: jeet-dhandha Date: Fri, 15 Sep 2023 21:00:13 +0530 Subject: [PATCH 04/10] handle title parsing in NewTask and NewMoneyRequest --- src/components/MoneyRequestConfirmationList.js | 1 + src/pages/tasks/NewTaskPage.js | 1 + 2 files changed, 2 insertions(+) diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js index da98d324681e..cba2359eb257 100755 --- a/src/components/MoneyRequestConfirmationList.js +++ b/src/components/MoneyRequestConfirmationList.js @@ -455,6 +455,7 @@ function MoneyRequestConfirmationList(props) { )} Navigation.navigate(ROUTES.getMoneyRequestDescriptionRoute(props.iouType, props.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} /> From 8c7113956bd6a5a4b22c5cf3833f5e137e048e0f Mon Sep 17 00:00:00 2001 From: jeet-dhandha Date: Fri, 15 Sep 2023 21:04:29 +0530 Subject: [PATCH 05/10] added default value in props --- src/components/MenuItem.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js index a4f265df4878..bceaa57432cb 100644 --- a/src/components/MenuItem.js +++ b/src/components/MenuItem.js @@ -36,6 +36,7 @@ const defaultProps = { shouldShowBasicTitle: false, shouldShowDescriptionOnTop: false, shouldShowHeaderTitle: false, + shouldParseTitle: false, wrapperStyle: [], style: styles.popoverMenuItem, titleStyle: {}, From 35a05b1c18493246c0b37d6578731930ceb9d04b Mon Sep 17 00:00:00 2001 From: jeet-dhandha Date: Fri, 15 Sep 2023 21:12:43 +0530 Subject: [PATCH 06/10] handled convertToLTR --- src/components/MenuItem.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js index 5f66cd6e1174..ce6e6d53455b 100644 --- a/src/components/MenuItem.js +++ b/src/components/MenuItem.js @@ -115,7 +115,7 @@ const MenuItem = React.forwardRef((props, ref) => { return; } const parser = new ExpensiMark(); - setHtml(parser.replace(props.title)); + setHtml(parser.replace(convertToLTR(props.title))); titleRef.current = props.title; }, [props.title, props.shouldParseTitle]); From c39ace290fb0a9c6b32a19c39dd48beb5ed6f623 Mon Sep 17 00:00:00 2001 From: jeet-dhandha Date: Fri, 15 Sep 2023 21:26:25 +0530 Subject: [PATCH 07/10] refactored code for better readability --- src/components/MenuItem.js | 23 ++++++++++------------- 1 file changed, 10 insertions(+), 13 deletions(-) diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js index ce6e6d53455b..2fc89e7542a0 100644 --- a/src/components/MenuItem.js +++ b/src/components/MenuItem.js @@ -235,19 +235,16 @@ const MenuItem = React.forwardRef((props, ref) => { )} - {!props.shouldRenderAsHTML && - (html.length ? ( - ${html}`} /> - ) : ( - Boolean(props.title) && ( - - {convertToLTR(props.title)} - - ) - ))} + {!props.shouldRenderAsHTML && Boolean(html.length) && ${html}`} />} + + {!props.shouldRenderAsHTML && !Boolean(html.length) && Boolean(props.title) && ( + + {convertToLTR(props.title)} + + )} {Boolean(props.title) && Boolean(props.shouldRenderAsHTML) && } From 67db7aa35f0ae17df49b15ca88420227b7dee4a5 Mon Sep 17 00:00:00 2001 From: jeet-dhandha Date: Fri, 15 Sep 2023 21:28:55 +0530 Subject: [PATCH 08/10] refactored code --- src/components/MenuItem.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js index 2fc89e7542a0..9840531aa1bf 100644 --- a/src/components/MenuItem.js +++ b/src/components/MenuItem.js @@ -235,7 +235,9 @@ const MenuItem = React.forwardRef((props, ref) => { )} - {!props.shouldRenderAsHTML && Boolean(html.length) && ${html}`} />} + {Boolean(props.title) && Boolean(props.shouldRenderAsHTML) && } + + {Boolean(html.length) && !props.shouldRenderAsHTML && ${html}`} />} {!props.shouldRenderAsHTML && !Boolean(html.length) && Boolean(props.title) && ( { )} - {Boolean(props.title) && Boolean(props.shouldRenderAsHTML) && } - {Boolean(props.shouldShowTitleIcon) && ( Date: Mon, 18 Sep 2023 09:49:10 +0530 Subject: [PATCH 09/10] lint fix --- src/components/MenuItem.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js index 9840531aa1bf..426056c9db4a 100644 --- a/src/components/MenuItem.js +++ b/src/components/MenuItem.js @@ -239,7 +239,7 @@ const MenuItem = React.forwardRef((props, ref) => { {Boolean(html.length) && !props.shouldRenderAsHTML && ${html}`} />} - {!props.shouldRenderAsHTML && !Boolean(html.length) && Boolean(props.title) && ( + {!props.shouldRenderAsHTML && !html.length && Boolean(props.title) && ( Date: Mon, 18 Sep 2023 14:55:43 +0530 Subject: [PATCH 10/10] added shouldParseTitle for better conditions --- src/components/MenuItem.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js index 426056c9db4a..d12394766054 100644 --- a/src/components/MenuItem.js +++ b/src/components/MenuItem.js @@ -237,7 +237,7 @@ const MenuItem = React.forwardRef((props, ref) => { {Boolean(props.title) && Boolean(props.shouldRenderAsHTML) && } - {Boolean(html.length) && !props.shouldRenderAsHTML && ${html}`} />} + {Boolean(props.shouldParseTitle) && Boolean(html.length) && !props.shouldRenderAsHTML && ${html}`} />} {!props.shouldRenderAsHTML && !html.length && Boolean(props.title) && (