Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: Parse Descriptions as Html for links #27462

Merged
merged 12 commits into from
Sep 18, 2023
Merged

fix: Parse Descriptions as Html for links #27462

Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
91cb214
Handled parsing of description as html
jeet-dhandha Sep 14, 2023
1396912
fix lint issue for imports
jeet-dhandha Sep 14, 2023
ad8bc7a
fix lint issue for boolean call
jeet-dhandha Sep 14, 2023
f69c2c8
handle title parsing in NewTask and NewMoneyRequest
jeet-dhandha Sep 15, 2023
8c71139
added default value in props
jeet-dhandha Sep 15, 2023
2b01abb
Merge branch 'main' into fix-23949
jeet-dhandha Sep 15, 2023
35a05b1
handled convertToLTR
jeet-dhandha Sep 15, 2023
c39ace2
refactored code for better readability
jeet-dhandha Sep 15, 2023
67db7aa
refactored code
jeet-dhandha Sep 15, 2023
a6804c9
Merge branch 'main' into fix-23949
jeet-dhandha Sep 16, 2023
7c01fc2
lint fix
jeet-dhandha Sep 18, 2023
d3dba3f
added shouldParseTitle for better conditions
jeet-dhandha Sep 18, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 18 additions & 2 deletions src/components/MenuItem.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -34,6 +35,7 @@ const defaultProps = {
shouldShowBasicTitle: false,
shouldShowDescriptionOnTop: false,
shouldShowHeaderTitle: false,
shouldParseTitle: false,
wrapperStyle: [],
style: styles.popoverMenuItem,
titleStyle: {},
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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 (
<Hoverable>
{(isHovered) => (
Expand Down Expand Up @@ -224,14 +237,17 @@ const MenuItem = React.forwardRef((props, ref) => {
<View style={[styles.flexRow, styles.alignItemsCenter]}>
{Boolean(props.title) && Boolean(props.shouldRenderAsHTML) && <RenderHTML html={convertToLTR(props.title)} />}

{Boolean(props.title) && !props.shouldRenderAsHTML && (
{Boolean(html.length) && !props.shouldRenderAsHTML && <RenderHTML html={`<comment>${html}</comment>`} />}

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks incorrect - if shouldRenderAsHTML is false, we use renderHTML?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@thienlnam if you see the code for updating html then you would be able to understand why we render html when shouldRenderAsHTML is false.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As they both have somewhat different usecases

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah I see, that is confusing - can we add another shouldParseTitle check in this conditional?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure

{!props.shouldRenderAsHTML && !html.length && Boolean(props.title) && (
<Text
style={titleTextStyle}
numberOfLines={props.numberOfLinesTitle || undefined}
>
{convertToLTR(props.title)}
</Text>
)}

{Boolean(props.shouldShowTitleIcon) && (
<View style={[styles.ml2]}>
<Icon
Expand Down
1 change: 1 addition & 0 deletions src/components/MoneyRequestConfirmationList.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -455,6 +455,7 @@ function MoneyRequestConfirmationList(props) {
)}
<MenuItemWithTopDescription
shouldShowRightIcon={!props.isReadOnly}
shouldParseTitle
title={props.iouComment}
description={translate('common.description')}
onPress={() => Navigation.navigate(ROUTES.getMoneyRequestDescriptionRoute(props.iouType, props.reportID))}
Expand Down
1 change: 1 addition & 0 deletions src/components/ReportActionItem/MoneyRequestView.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,6 +132,7 @@ function MoneyRequestView({report, parentReport, shouldShowHorizontalRule, trans
<OfflineWithFeedback pendingAction={lodashGet(transaction, 'pendingFields.comment') || lodashGet(transaction, 'pendingAction')}>
<MenuItemWithTopDescription
description={translate('common.description')}
shouldParseTitle
title={transactionDescription}
interactive={canEdit}
shouldShowRightIcon={canEdit}
Expand Down
1 change: 1 addition & 0 deletions src/components/ReportActionItem/TaskView.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,6 +119,7 @@ function TaskView(props) {
</Hoverable>
<OfflineWithFeedback pendingAction={lodashGet(props, 'report.pendingFields.description')}>
<MenuItemWithTopDescription
shouldParseTitle
description={props.translate('task.description')}
title={props.report.description || ''}
onPress={() => Navigation.navigate(ROUTES.getTaskReportDescriptionRoute(props.report.reportID))}
Expand Down
1 change: 1 addition & 0 deletions src/pages/tasks/NewTaskPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -162,6 +162,7 @@ function NewTaskPage(props) {
title={description}
onPress={() => Navigation.navigate(ROUTES.NEW_TASK_DESCRIPTION)}
shouldShowRightIcon
shouldParseTitle
numberOfLinesTitle={2}
titleStyle={styles.flex1}
/>
Expand Down
Loading