Merge pull request #27769 from jeet-dhandha/fix-27722-follow-up

Expensify · Sep 22, 2023 · a240941 · a240941
2 parents 136c364 + c1e89ee
commit a240941
Show file tree

Hide file tree

Showing 6 changed files with 110 additions and 58 deletions.
diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js
@@ -24,11 +24,7 @@ import variables from '../styles/variables';
 import * as Session from '../libs/actions/Session';
 import Hoverable from './Hoverable';
 import useWindowDimensions from '../hooks/useWindowDimensions';
-import RenderHTML from './RenderHTML';
-import getPlatform from '../libs/getPlatform';
-
-const platform = getPlatform();
-const isNative = platform === CONST.PLATFORM.IOS || platform === CONST.PLATFORM.ANDROID;
+import MenuItemRenderHTMLTitle from './MenuItemRenderHTMLTitle';
 
 const propTypes = menuItemPropTypes;
 
@@ -251,16 +247,10 @@ const MenuItem = React.forwardRef((props, ref) => {
  </Text>
  )}
  <View style={[styles.flexRow, styles.alignItemsCenter]}>
- {Boolean(props.title) &&
- (Boolean(props.shouldRenderAsHTML) || (Boolean(props.shouldParseTitle) && Boolean(html.length))) &&
- (isNative ? (
- <RenderHTML html={getProcessedTitle} />
- ) : (
- <View style={styles.chatItemMessage}>
- <RenderHTML html={getProcessedTitle} />
- </View>
- ))}
- {!props.shouldRenderAsHTML && !html.length && Boolean(props.title) && (
+ {Boolean(props.title) && (Boolean(props.shouldRenderAsHTML) || (Boolean(props.shouldParseTitle) && Boolean(html.length))) && (
+ <MenuItemRenderHTMLTitle title={getProcessedTitle} />
+ )}
+ {!props.shouldRenderAsHTML && !props.shouldParseTitle && Boolean(props.title) && (
  <Text
  style={titleTextStyle}
  numberOfLines={props.numberOfLinesTitle || undefined}

diff --git a/src/components/MenuItemRenderHTMLTitle/index.js b/src/components/MenuItemRenderHTMLTitle/index.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import {View} from 'react-native';
+import styles from '../../styles/styles';
+import RenderHTML from '../RenderHTML';
+import menuItemRenderHTMLTitlePropTypes from './propTypes';
+
+const propTypes = menuItemRenderHTMLTitlePropTypes;
+
+const defaultProps = {};
+
+function MenuItemRenderHTMLTitle(props) {
+ return (
+ <View style={styles.renderHTMLTitle}>
+ <RenderHTML html={props.title} />
+ </View>
+ );
+}
+
+MenuItemRenderHTMLTitle.propTypes = propTypes;
+MenuItemRenderHTMLTitle.defaultProps = defaultProps;
+MenuItemRenderHTMLTitle.displayName = 'MenuItemRenderHTMLTitle';
+
+export default MenuItemRenderHTMLTitle;
diff --git a/src/components/MenuItemRenderHTMLTitle/index.native.js b/src/components/MenuItemRenderHTMLTitle/index.native.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import RenderHTML from '../RenderHTML';
+import menuItemRenderHTMLTitlePropTypes from './propTypes';
+
+const propTypes = menuItemRenderHTMLTitlePropTypes;
+
+const defaultProps = {};
+
+function MenuItemRenderHTMLTitle(props) {
+ return <RenderHTML html={props.title} />;
+}
+
+MenuItemRenderHTMLTitle.propTypes = propTypes;
+MenuItemRenderHTMLTitle.defaultProps = defaultProps;
+MenuItemRenderHTMLTitle.displayName = 'MenuItemRenderHTMLTitle';
+
+export default MenuItemRenderHTMLTitle;
diff --git a/src/components/MenuItemRenderHTMLTitle/propTypes.js b/src/components/MenuItemRenderHTMLTitle/propTypes.js
@@ -0,0 +1,8 @@
+import PropTypes from 'prop-types';
+
+const propTypes = {
+ /** Processed title to display for the MenuItem */
+ title: PropTypes.string.isRequired,
+};
+
+export default propTypes;
diff --git a/src/pages/tasks/NewTaskPage.js b/src/pages/tasks/NewTaskPage.js
@@ -1,5 +1,5 @@
 import React, {useEffect, useMemo, useState} from 'react';
-import {View} from 'react-native';
+import {ScrollView, View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import PropTypes from 'prop-types';
@@ -160,50 +160,54 @@ function NewTaskPage(props) {
  Navigation.goBack(ROUTES.NEW_TASK_DETAILS);
  }}
  />
- <View style={[styles.containerWithSpaceBetween]}>
- <View style={styles.mb5}>
- <MenuItemWithTopDescription
- description={props.translate('task.title')}
- title={title}
- onPress={() => Navigation.navigate(ROUTES.NEW_TASK_TITLE)}
- shouldShowRightIcon
- />
- <MenuItemWithTopDescription
- description={props.translate('task.description')}
- title={description}
- onPress={() => Navigation.navigate(ROUTES.NEW_TASK_DESCRIPTION)}
- shouldShowRightIcon
- shouldParseTitle
- numberOfLinesTitle={2}
- titleStyle={styles.flex1}
- />
- <MenuItem
- label={assignee.displayName ? props.translate('task.assignee') : ''}
- title={assignee.displayName || ''}
- description={assignee.displayName ? LocalePhoneNumber.formatPhoneNumber(assignee.subtitle) : props.translate('task.assignee')}
- icon={assignee.icons}
- onPress={() => Navigation.navigate(ROUTES.NEW_TASK_ASSIGNEE)}
- shouldShowRightIcon
- />
- <MenuItem
- label={shareDestination.displayName ? props.translate('newTaskPage.shareSomewhere') : ''}
- title={shareDestination.displayName || ''}
- description={shareDestination.displayName ? shareDestination.subtitle : props.translate('newTaskPage.shareSomewhere')}
- icon={shareDestination.icons}
- onPress={() => Navigation.navigate(ROUTES.NEW_TASK_SHARE_DESTINATION)}
- interactive={!props.task.parentReportID}
- shouldShowRightIcon={!props.task.parentReportID}
+ <ScrollView contentContainerStyle={styles.flexGrow1}>
+ <View style={[styles.flex1]}>
+ <View style={styles.mb5}>
+ <MenuItemWithTopDescription
+ description={props.translate('task.title')}
+ title={title}
+ onPress={() => Navigation.navigate(ROUTES.NEW_TASK_TITLE)}
+ shouldShowRightIcon
+ />
+ <MenuItemWithTopDescription
+ description={props.translate('task.description')}
+ title={description}
+ onPress={() => Navigation.navigate(ROUTES.NEW_TASK_DESCRIPTION)}
+ shouldShowRightIcon
+ shouldParseTitle
+ numberOfLinesTitle={2}
+ titleStyle={styles.flex1}
+ />
+ <MenuItem
+ label={assignee.displayName ? props.translate('task.assignee') : ''}
+ title={assignee.displayName || ''}
+ description={assignee.displayName ? LocalePhoneNumber.formatPhoneNumber(assignee.subtitle) : props.translate('task.assignee')}
+ icon={assignee.icons}
+ onPress={() => Navigation.navigate(ROUTES.NEW_TASK_ASSIGNEE)}
+ shouldShowRightIcon
+ />
+ <MenuItem
+ label={shareDestination.displayName ? props.translate('newTaskPage.shareSomewhere') : ''}
+ title={shareDestination.displayName || ''}
+ description={shareDestination.displayName ? shareDestination.subtitle : props.translate('newTaskPage.shareSomewhere')}
+ icon={shareDestination.icons}
+ onPress={() => Navigation.navigate(ROUTES.NEW_TASK_SHARE_DESTINATION)}
+ interactive={!props.task.parentReportID}
+ shouldShowRightIcon={!props.task.parentReportID}
+ />
+ </View>
+ </View>
+ <View style={[styles.flexShrink0]}>
+ <FormAlertWithSubmitButton
+ isAlertVisible={!_.isEmpty(errorMessage)}
+ message={errorMessage}
+ onSubmit={() => onSubmit()}
+ enabledWhenOffline
+ buttonText={props.translate('newTaskPage.confirmTask')}
+ containerStyles={[styles.mh0, styles.mt5, styles.flex1, styles.ph5]}
  />
  </View>
- <FormAlertWithSubmitButton
- isAlertVisible={!_.isEmpty(errorMessage)}
- message={errorMessage}
- onSubmit={() => onSubmit()}
- enabledWhenOffline
- buttonText={props.translate('newTaskPage.confirmTask')}
- containerStyles={[styles.mh0, styles.mt5, styles.flex1, styles.ph5]}
- />
- </View>
+ </ScrollView>
  </FullPageNotFoundView>
  </ScreenWrapper>
  );

diff --git a/src/styles/styles.js b/src/styles/styles.js
@@ -1603,6 +1603,16 @@ const styles = (theme) => ({
  ...wordBreak.breakWord,
  },
 
+ renderHTMLTitle: {
+ color: theme.text,
+ fontSize: variables.fontSizeNormal,
+ fontFamily: fontFamily.EXP_NEUE,
+ lineHeight: variables.lineHeightXLarge,
+ maxWidth: '100%',
+ ...whiteSpace.preWrap,
+ ...wordBreak.breakWord,
+ },
+
  chatItemComposeWithFirstRow: {
  minHeight: 90,
  },