From e70b5cbaba845c3990b4176b941e8dbc6747d476 Mon Sep 17 00:00:00 2001 From: ahmedGaber93 Date: Mon, 26 Jun 2023 18:42:00 +0200 Subject: [PATCH 01/14] allow Request money 'Description' to accept multiline --- src/components/MenuItem.js | 5 +++-- src/components/MoneyRequestHeader.js | 1 + src/pages/iou/MoneyRequestDescriptionPage.js | 3 +++ 3 files changed, 7 insertions(+), 2 deletions(-) diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js index eae6069783f3..89e5d0e73201 100644 --- a/src/components/MenuItem.js +++ b/src/components/MenuItem.js @@ -67,6 +67,7 @@ const defaultProps = { hoverAndPressStyle: [], furtherDetails: '', furtherDetailsIcon: undefined, + numberOfLines: 1, }; function MenuItem(props) { @@ -80,7 +81,7 @@ function MenuItem(props) { props.shouldShowBasicTitle ? undefined : styles.textStrong, props.shouldShowHeaderTitle ? styles.textHeadlineH1 : undefined, props.interactive && props.disabled ? {...styles.disabledText, ...styles.userSelectNone} : undefined, - styles.pre, + props.numberOfLines === 1 && styles.pre, styles.ltr, isDeleted ? styles.offlineFeedback.deleted : undefined, ], @@ -192,7 +193,7 @@ function MenuItem(props) { {Boolean(props.title) && ( {convertToLTR(props.title)} diff --git a/src/components/MoneyRequestHeader.js b/src/components/MoneyRequestHeader.js index a0e0fc3b70ad..b857bfa342a4 100644 --- a/src/components/MoneyRequestHeader.js +++ b/src/components/MoneyRequestHeader.js @@ -196,6 +196,7 @@ function MoneyRequestHeader(props) { description={props.translate('common.description')} title={transactionDescription} disabled={isSettled} + numberOfLines={6} // shouldShowRightIcon={!isSettled} // onPress={() => Navigation.navigate(ROUTES.getEditRequestRoute(props.report.reportID, CONST.EDIT_REQUEST_FIELD.DESCRIPTION))} /> diff --git a/src/pages/iou/MoneyRequestDescriptionPage.js b/src/pages/iou/MoneyRequestDescriptionPage.js index 1c9af254a162..a7edc509d239 100644 --- a/src/pages/iou/MoneyRequestDescriptionPage.js +++ b/src/pages/iou/MoneyRequestDescriptionPage.js @@ -112,6 +112,9 @@ class MoneyRequestDescriptionPage extends Component { defaultValue={this.props.iou.comment} label={this.props.translate('moneyRequestConfirmationList.whatsItFor')} ref={(el) => (this.descriptionInputRef = el)} + autoGrowHeight + containerStyles={[styles.autoGrowHeightMultilineInput]} + textAlignVertical="top" /> From 8d96ea11aa0cf970af16c04d9ae4b1700fcc4aa0 Mon Sep 17 00:00:00 2001 From: ahmedGaber93 Date: Tue, 27 Jun 2023 10:53:07 +0200 Subject: [PATCH 02/14] add prop type numberOfLines for menuItemPropTypes.js --- src/components/menuItemPropTypes.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/menuItemPropTypes.js b/src/components/menuItemPropTypes.js index 3909f446c907..881f5626d59c 100644 --- a/src/components/menuItemPropTypes.js +++ b/src/components/menuItemPropTypes.js @@ -119,6 +119,9 @@ const propTypes = { /** An icon to display under the main item */ furtherDetailsIcon: PropTypes.oneOfType([PropTypes.elementType, PropTypes.string]), + + /** Number of lines for the title */ + numberOfLines: PropTypes.number, }; export default propTypes; From c99bec96f3a9f7cc99ef1f91e88c90e4145ca9f3 Mon Sep 17 00:00:00 2001 From: ahmedGaber93 Date: Tue, 27 Jun 2023 21:49:22 +0200 Subject: [PATCH 03/14] allow Request money 'Description' to accept multiline - remove header changes --- src/components/MenuItem.js | 5 ++--- src/components/MoneyRequestHeader.js | 1 - src/components/menuItemPropTypes.js | 3 --- 3 files changed, 2 insertions(+), 7 deletions(-) diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js index 89e5d0e73201..eae6069783f3 100644 --- a/src/components/MenuItem.js +++ b/src/components/MenuItem.js @@ -67,7 +67,6 @@ const defaultProps = { hoverAndPressStyle: [], furtherDetails: '', furtherDetailsIcon: undefined, - numberOfLines: 1, }; function MenuItem(props) { @@ -81,7 +80,7 @@ function MenuItem(props) { props.shouldShowBasicTitle ? undefined : styles.textStrong, props.shouldShowHeaderTitle ? styles.textHeadlineH1 : undefined, props.interactive && props.disabled ? {...styles.disabledText, ...styles.userSelectNone} : undefined, - props.numberOfLines === 1 && styles.pre, + styles.pre, styles.ltr, isDeleted ? styles.offlineFeedback.deleted : undefined, ], @@ -193,7 +192,7 @@ function MenuItem(props) { {Boolean(props.title) && ( {convertToLTR(props.title)} diff --git a/src/components/MoneyRequestHeader.js b/src/components/MoneyRequestHeader.js index b857bfa342a4..a0e0fc3b70ad 100644 --- a/src/components/MoneyRequestHeader.js +++ b/src/components/MoneyRequestHeader.js @@ -196,7 +196,6 @@ function MoneyRequestHeader(props) { description={props.translate('common.description')} title={transactionDescription} disabled={isSettled} - numberOfLines={6} // shouldShowRightIcon={!isSettled} // onPress={() => Navigation.navigate(ROUTES.getEditRequestRoute(props.report.reportID, CONST.EDIT_REQUEST_FIELD.DESCRIPTION))} /> diff --git a/src/components/menuItemPropTypes.js b/src/components/menuItemPropTypes.js index 881f5626d59c..3909f446c907 100644 --- a/src/components/menuItemPropTypes.js +++ b/src/components/menuItemPropTypes.js @@ -119,9 +119,6 @@ const propTypes = { /** An icon to display under the main item */ furtherDetailsIcon: PropTypes.oneOfType([PropTypes.elementType, PropTypes.string]), - - /** Number of lines for the title */ - numberOfLines: PropTypes.number, }; export default propTypes; From 015b933129c6050c1477fe7f2edc6bb04cd6d737 Mon Sep 17 00:00:00 2001 From: ahmedGaber93 Date: Thu, 29 Jun 2023 09:36:18 +0200 Subject: [PATCH 04/14] fix Request money 'Description' auto focus && submit on enter --- src/pages/iou/MoneyRequestDescriptionPage.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/pages/iou/MoneyRequestDescriptionPage.js b/src/pages/iou/MoneyRequestDescriptionPage.js index a7edc509d239..969e1c9aa9a5 100644 --- a/src/pages/iou/MoneyRequestDescriptionPage.js +++ b/src/pages/iou/MoneyRequestDescriptionPage.js @@ -16,6 +16,7 @@ import ROUTES from '../../ROUTES'; import compose from '../../libs/compose'; import * as IOU from '../../libs/actions/IOU'; import optionPropTypes from '../../components/optionPropTypes'; +import focusAndUpdateMultilineInputRange from '../../libs/focusAndUpdateMultilineInputRange'; const propTypes = { ...withLocalizePropTypes, @@ -92,7 +93,7 @@ class MoneyRequestDescriptionPage extends Component { this.descriptionInputRef && this.descriptionInputRef.focus()} + onEntryTransitionEnd={() => focusAndUpdateMultilineInputRange(this.descriptionInputRef)} > From e3c7cc65608224d86e7a3b4b89020c9163c14faf Mon Sep 17 00:00:00 2001 From: ahmedGaber93 Date: Fri, 7 Jul 2023 18:37:45 +0200 Subject: [PATCH 05/14] request money description max lines --- src/components/MoneyRequestConfirmationList.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js index 512018706bcb..7e3b87c06f6d 100755 --- a/src/components/MoneyRequestConfirmationList.js +++ b/src/components/MoneyRequestConfirmationList.js @@ -306,6 +306,7 @@ function MoneyRequestConfirmationList(props) { onPress={() => Navigation.navigate(ROUTES.getMoneyRequestDescriptionRoute(props.iouType, props.reportID))} style={[styles.moneyRequestMenuItem, styles.mb2]} disabled={didConfirm || props.isReadOnly} + numberOfLinesTitle={2} /> ); From 104140ad27108b0c6a50118cc7b151552755e4c7 Mon Sep 17 00:00:00 2001 From: ahmedGaber93 Date: Sat, 19 Aug 2023 07:38:08 +0200 Subject: [PATCH 06/14] money request mobile fix submitOnEnter behaviour --- src/pages/EditRequestDescriptionPage.js | 8 +++++++- src/pages/iou/MoneyRequestDescriptionPage.js | 3 ++- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/src/pages/EditRequestDescriptionPage.js b/src/pages/EditRequestDescriptionPage.js index 1db81c88daae..a596f865028f 100644 --- a/src/pages/EditRequestDescriptionPage.js +++ b/src/pages/EditRequestDescriptionPage.js @@ -10,6 +10,8 @@ import styles from '../styles/styles'; import Navigation from '../libs/Navigation/Navigation'; import CONST from '../CONST'; import useLocalize from '../hooks/useLocalize'; +import * as Browser from "../libs/Browser" +import focusAndUpdateMultilineInputRange from "../libs/focusAndUpdateMultilineInputRange" const propTypes = { /** Transaction default description value */ @@ -26,7 +28,7 @@ function EditRequestDescriptionPage({defaultDescription, onSubmit}) { descriptionInputRef.current && descriptionInputRef.current.focus()} + onEntryTransitionEnd={() => focusAndUpdateMultilineInputRange(descriptionInputRef.current)} > (descriptionInputRef.current = e)} + autoGrowHeight + containerStyles={[styles.autoGrowHeightMultilineInput]} + textAlignVertical="top" + submitOnEnter={!Browser.isMobile()} /> diff --git a/src/pages/iou/MoneyRequestDescriptionPage.js b/src/pages/iou/MoneyRequestDescriptionPage.js index e1a48ae25309..0f71be5da04f 100644 --- a/src/pages/iou/MoneyRequestDescriptionPage.js +++ b/src/pages/iou/MoneyRequestDescriptionPage.js @@ -18,6 +18,7 @@ import * as IOU from '../../libs/actions/IOU'; import optionPropTypes from '../../components/optionPropTypes'; import CONST from '../../CONST'; import focusAndUpdateMultilineInputRange from '../../libs/focusAndUpdateMultilineInputRange'; +import * as Browser from '../../libs/Browser'; const propTypes = { ...withLocalizePropTypes, @@ -119,7 +120,7 @@ class MoneyRequestDescriptionPage extends Component { autoGrowHeight containerStyles={[styles.autoGrowHeightMultilineInput]} textAlignVertical="top" - submitOnEnter + submitOnEnter={!Browser.isMobile()} /> From 6645bab78a78c8b980aefa4bd6a7f5d4b19eebe7 Mon Sep 17 00:00:00 2001 From: ahmedGaber93 Date: Wed, 23 Aug 2023 13:45:43 +0200 Subject: [PATCH 07/14] money request mobile fix submitOnEnter behaviour --- .../DisplayNames/DisplayNamesWithTooltip.js | 2 +- .../MoneyRequestConfirmationList.js | 2 +- .../OptionsSelector/BaseOptionsSelector.js | 92 +++++++++++-------- src/pages/EditRequestDescriptionPage.js | 8 +- .../iou/steps/MoneyRequestConfirmPage.js | 4 + 5 files changed, 62 insertions(+), 46 deletions(-) diff --git a/src/components/DisplayNames/DisplayNamesWithTooltip.js b/src/components/DisplayNames/DisplayNamesWithTooltip.js index 77e3319af266..f9fa8af66f7c 100644 --- a/src/components/DisplayNames/DisplayNamesWithTooltip.js +++ b/src/components/DisplayNames/DisplayNamesWithTooltip.js @@ -51,7 +51,7 @@ function DisplayNamesWithToolTip(props) { return ( // Tokenization of string only support prop numberOfLines on Web (containerRef.current = el)} > diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js index 65794240599f..2732c252155c 100755 --- a/src/components/MoneyRequestConfirmationList.js +++ b/src/components/MoneyRequestConfirmationList.js @@ -355,7 +355,7 @@ function MoneyRequestConfirmationList(props) { onConfirmSelection={confirm} selectedOptions={selectedOptions} canSelectMultipleOptions={canModifyParticipants} - disableArrowKeysActions={!canModifyParticipants} + disableArrowKeysActions={props.disableArrowKeysActions || !canModifyParticipants} boldStyle showTitleTooltip shouldTextInputAppearBelowOptions diff --git a/src/components/OptionsSelector/BaseOptionsSelector.js b/src/components/OptionsSelector/BaseOptionsSelector.js index 7273616ea57e..911727ebeef4 100755 --- a/src/components/OptionsSelector/BaseOptionsSelector.js +++ b/src/components/OptionsSelector/BaseOptionsSelector.js @@ -64,41 +64,22 @@ class BaseOptionsSelector extends Component { } componentDidMount() { - const enterConfig = CONST.KEYBOARD_SHORTCUTS.ENTER; - this.unsubscribeEnter = KeyboardShortcut.subscribe( - enterConfig.shortcutKey, - this.selectFocusedOption, - enterConfig.descriptionKey, - enterConfig.modifiers, - true, - () => !this.state.allOptions[this.state.focusedIndex], - ); - - const CTRLEnterConfig = CONST.KEYBOARD_SHORTCUTS.CTRL_ENTER; - this.unsubscribeCTRLEnter = KeyboardShortcut.subscribe( - CTRLEnterConfig.shortcutKey, - () => { - if (this.props.canSelectMultipleOptions) { - this.props.onConfirmSelection(); - return; - } - - const focusedOption = this.state.allOptions[this.state.focusedIndex]; - if (!focusedOption) { - return; - } - - this.selectRow(focusedOption); - }, - CTRLEnterConfig.descriptionKey, - CTRLEnterConfig.modifiers, - true, - ); + if(!this.props.disableArrowKeysActions) { + this.subscribeToKeyboardShortcut(); + } this.scrollToIndex(this.props.selectedOptions.length ? 0 : this.state.focusedIndex, false); } componentDidUpdate(prevProps) { + if (prevProps.disableArrowKeysActions !== this.props.disableArrowKeysActions) { + if(this.props.disableArrowKeysActions) { + this.unSubscribeToKeyboardShortcut(); + }else { + this.subscribeToKeyboardShortcut(); + } + } + if (this.textInput && this.props.autoFocus && !prevProps.isFocused && this.props.isFocused) { InteractionManager.runAfterInteractions(() => { // If we automatically focus on a text input when mounting a component, @@ -148,13 +129,7 @@ class BaseOptionsSelector extends Component { clearTimeout(this.focusTimeout); } - if (this.unsubscribeEnter) { - this.unsubscribeEnter(); - } - - if (this.unsubscribeCTRLEnter) { - this.unsubscribeCTRLEnter(); - } + this.unSubscribeToKeyboardShortcut(); } /** @@ -179,6 +154,49 @@ class BaseOptionsSelector extends Component { return defaultIndex; } + subscribeToKeyboardShortcut() { + const enterConfig = CONST.KEYBOARD_SHORTCUTS.ENTER; + this.unsubscribeEnter = KeyboardShortcut.subscribe( + enterConfig.shortcutKey, + this.selectFocusedOption, + enterConfig.descriptionKey, + enterConfig.modifiers, + true, + () => !this.state.allOptions[this.state.focusedIndex], + ); + + const CTRLEnterConfig = CONST.KEYBOARD_SHORTCUTS.CTRL_ENTER; + this.unsubscribeCTRLEnter = KeyboardShortcut.subscribe( + CTRLEnterConfig.shortcutKey, + () => { + if (this.props.canSelectMultipleOptions) { + this.props.onConfirmSelection(); + return; + } + + const focusedOption = this.state.allOptions[this.state.focusedIndex]; + if (!focusedOption) { + return; + } + + this.selectRow(focusedOption); + }, + CTRLEnterConfig.descriptionKey, + CTRLEnterConfig.modifiers, + true, + ); + } + + unSubscribeToKeyboardShortcut() { + if (this.unsubscribeEnter) { + this.unsubscribeEnter(); + } + + if (this.unsubscribeCTRLEnter) { + this.unsubscribeCTRLEnter(); + } + } + selectFocusedOption() { const focusedOption = this.state.allOptions[this.state.focusedIndex]; diff --git a/src/pages/EditRequestDescriptionPage.js b/src/pages/EditRequestDescriptionPage.js index a596f865028f..1db81c88daae 100644 --- a/src/pages/EditRequestDescriptionPage.js +++ b/src/pages/EditRequestDescriptionPage.js @@ -10,8 +10,6 @@ import styles from '../styles/styles'; import Navigation from '../libs/Navigation/Navigation'; import CONST from '../CONST'; import useLocalize from '../hooks/useLocalize'; -import * as Browser from "../libs/Browser" -import focusAndUpdateMultilineInputRange from "../libs/focusAndUpdateMultilineInputRange" const propTypes = { /** Transaction default description value */ @@ -28,7 +26,7 @@ function EditRequestDescriptionPage({defaultDescription, onSubmit}) { focusAndUpdateMultilineInputRange(descriptionInputRef.current)} + onEntryTransitionEnd={() => descriptionInputRef.current && descriptionInputRef.current.focus()} > (descriptionInputRef.current = e)} - autoGrowHeight - containerStyles={[styles.autoGrowHeightMultilineInput]} - textAlignVertical="top" - submitOnEnter={!Browser.isMobile()} /> diff --git a/src/pages/iou/steps/MoneyRequestConfirmPage.js b/src/pages/iou/steps/MoneyRequestConfirmPage.js index a81e3a8bf825..eeaf37dcf0ae 100644 --- a/src/pages/iou/steps/MoneyRequestConfirmPage.js +++ b/src/pages/iou/steps/MoneyRequestConfirmPage.js @@ -4,6 +4,7 @@ import PropTypes from 'prop-types'; import {withOnyx} from 'react-native-onyx'; import _ from 'underscore'; import lodashGet from 'lodash/get'; +import {useIsFocused} from '@react-navigation/native' import MoneyRequestConfirmationList from '../../../components/MoneyRequestConfirmationList'; import CONST from '../../../CONST'; import ScreenWrapper from '../../../components/ScreenWrapper'; @@ -75,6 +76,8 @@ function MoneyRequestConfirmPage(props) { [props.iou.participants, props.personalDetails], ); + const isFocused = useIsFocused(); + useEffect(() => { const policyExpenseChat = _.find(participants, (participant) => participant.isPolicyExpenseChat); if (policyExpenseChat) { @@ -261,6 +264,7 @@ function MoneyRequestConfirmPage(props) { iouMerchant={props.iou.merchant} iouModifiedMerchant={props.iou.modifiedMerchant} iouDate={props.iou.date} + disableArrowKeysActions={!isFocused} /> )} From e2f09bb17a1b48b3174d53d4e929913112261329 Mon Sep 17 00:00:00 2001 From: ahmedGaber93 Date: Wed, 23 Aug 2023 13:50:21 +0200 Subject: [PATCH 08/14] prettier --- src/components/OptionsSelector/BaseOptionsSelector.js | 6 +++--- src/pages/iou/steps/MoneyRequestConfirmPage.js | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/OptionsSelector/BaseOptionsSelector.js b/src/components/OptionsSelector/BaseOptionsSelector.js index 911727ebeef4..0662998139fa 100755 --- a/src/components/OptionsSelector/BaseOptionsSelector.js +++ b/src/components/OptionsSelector/BaseOptionsSelector.js @@ -64,7 +64,7 @@ class BaseOptionsSelector extends Component { } componentDidMount() { - if(!this.props.disableArrowKeysActions) { + if (!this.props.disableArrowKeysActions) { this.subscribeToKeyboardShortcut(); } @@ -73,9 +73,9 @@ class BaseOptionsSelector extends Component { componentDidUpdate(prevProps) { if (prevProps.disableArrowKeysActions !== this.props.disableArrowKeysActions) { - if(this.props.disableArrowKeysActions) { + if (this.props.disableArrowKeysActions) { this.unSubscribeToKeyboardShortcut(); - }else { + } else { this.subscribeToKeyboardShortcut(); } } diff --git a/src/pages/iou/steps/MoneyRequestConfirmPage.js b/src/pages/iou/steps/MoneyRequestConfirmPage.js index eeaf37dcf0ae..42dc86cdbd2d 100644 --- a/src/pages/iou/steps/MoneyRequestConfirmPage.js +++ b/src/pages/iou/steps/MoneyRequestConfirmPage.js @@ -4,7 +4,7 @@ import PropTypes from 'prop-types'; import {withOnyx} from 'react-native-onyx'; import _ from 'underscore'; import lodashGet from 'lodash/get'; -import {useIsFocused} from '@react-navigation/native' +import {useIsFocused} from '@react-navigation/native'; import MoneyRequestConfirmationList from '../../../components/MoneyRequestConfirmationList'; import CONST from '../../../CONST'; import ScreenWrapper from '../../../components/ScreenWrapper'; From 8b0c4d892e8691a570392118c9565e9d0339de07 Mon Sep 17 00:00:00 2001 From: ahmedGaber93 Date: Wed, 23 Aug 2023 17:28:28 +0200 Subject: [PATCH 09/14] update DisplayNamesWithToolTip.js Text style --- src/components/DisplayNames/DisplayNamesWithTooltip.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/DisplayNames/DisplayNamesWithTooltip.js b/src/components/DisplayNames/DisplayNamesWithTooltip.js index f9fa8af66f7c..c8a3a3a1f37f 100644 --- a/src/components/DisplayNames/DisplayNamesWithTooltip.js +++ b/src/components/DisplayNames/DisplayNamesWithTooltip.js @@ -51,7 +51,7 @@ function DisplayNamesWithToolTip(props) { return ( // Tokenization of string only support prop numberOfLines on Web (containerRef.current = el)} > From fef13b2561d237814e5f0ad1eb7323c35916d8a7 Mon Sep 17 00:00:00 2001 From: ahmedGaber93 Date: Thu, 24 Aug 2023 03:57:37 +0200 Subject: [PATCH 10/14] fix lastMessageText multiline on request money. --- src/libs/actions/IOU.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/libs/actions/IOU.js b/src/libs/actions/IOU.js index ee9afa8b0eb8..1341b156fe7b 100644 --- a/src/libs/actions/IOU.js +++ b/src/libs/actions/IOU.js @@ -116,7 +116,7 @@ function buildOnyxDataForMoneyRequest( key: `${ONYXKEYS.COLLECTION.REPORT}${iouReport.reportID}`, value: { ...iouReport, - lastMessageText: iouAction.message[0].text, + lastMessageText: ReportUtils.formatReportLastMessageText(iouAction.message[0].text), lastMessageHtml: iouAction.message[0].html, ...(isNewIOUReport ? {pendingFields: {createChat: CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD}} : {}), }, From 646b62170b38f8757c58c5cc7e553d9ac95d4147 Mon Sep 17 00:00:00 2001 From: ahmedGaber93 Date: Thu, 24 Aug 2023 05:26:10 +0200 Subject: [PATCH 11/14] fix request money merchant text not break. --- src/components/ReportActionItem/MoneyRequestPreview.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ReportActionItem/MoneyRequestPreview.js b/src/components/ReportActionItem/MoneyRequestPreview.js index e7a66bca8bba..643b77987364 100644 --- a/src/components/ReportActionItem/MoneyRequestPreview.js +++ b/src/components/ReportActionItem/MoneyRequestPreview.js @@ -256,7 +256,7 @@ function MoneyRequestPreview(props) { {!props.isBillSplit && !_.isEmpty(requestMerchant) && ( - {requestMerchant} + {requestMerchant} )} From b8839f067127c9cf4fa09f2caf1017d29295ee15 Mon Sep 17 00:00:00 2001 From: ahmedGaber93 Date: Fri, 25 Aug 2023 03:54:52 +0200 Subject: [PATCH 12/14] fix BaseOptionsSelector.js keyboard shortcut listener --- src/components/MoneyRequestConfirmationList.js | 2 +- .../OptionsSelector/BaseOptionsSelector.js | 12 +++++------- src/pages/iou/steps/MoneyRequestConfirmPage.js | 4 ---- 3 files changed, 6 insertions(+), 12 deletions(-) diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js index 4198eb1bf0fe..7c775990922c 100755 --- a/src/components/MoneyRequestConfirmationList.js +++ b/src/components/MoneyRequestConfirmationList.js @@ -324,7 +324,7 @@ function MoneyRequestConfirmationList(props) { onConfirmSelection={confirm} selectedOptions={selectedOptions} canSelectMultipleOptions={canModifyParticipants} - disableArrowKeysActions={props.disableArrowKeysActions || !canModifyParticipants} + disableArrowKeysActions={!canModifyParticipants} boldStyle showTitleTooltip shouldTextInputAppearBelowOptions diff --git a/src/components/OptionsSelector/BaseOptionsSelector.js b/src/components/OptionsSelector/BaseOptionsSelector.js index 0662998139fa..4b6209d11a28 100755 --- a/src/components/OptionsSelector/BaseOptionsSelector.js +++ b/src/components/OptionsSelector/BaseOptionsSelector.js @@ -64,19 +64,17 @@ class BaseOptionsSelector extends Component { } componentDidMount() { - if (!this.props.disableArrowKeysActions) { - this.subscribeToKeyboardShortcut(); - } + this.subscribeToKeyboardShortcut(); this.scrollToIndex(this.props.selectedOptions.length ? 0 : this.state.focusedIndex, false); } componentDidUpdate(prevProps) { - if (prevProps.disableArrowKeysActions !== this.props.disableArrowKeysActions) { - if (this.props.disableArrowKeysActions) { - this.unSubscribeToKeyboardShortcut(); - } else { + if (prevProps.isFocused !== this.props.isFocused) { + if (this.props.isFocused) { this.subscribeToKeyboardShortcut(); + } else { + this.unSubscribeToKeyboardShortcut(); } } diff --git a/src/pages/iou/steps/MoneyRequestConfirmPage.js b/src/pages/iou/steps/MoneyRequestConfirmPage.js index 810e9cd02839..c22a81cd7299 100644 --- a/src/pages/iou/steps/MoneyRequestConfirmPage.js +++ b/src/pages/iou/steps/MoneyRequestConfirmPage.js @@ -4,7 +4,6 @@ import PropTypes from 'prop-types'; import {withOnyx} from 'react-native-onyx'; import _ from 'underscore'; import lodashGet from 'lodash/get'; -import {useIsFocused} from '@react-navigation/native'; import MoneyRequestConfirmationList from '../../../components/MoneyRequestConfirmationList'; import CONST from '../../../CONST'; import ScreenWrapper from '../../../components/ScreenWrapper'; @@ -80,8 +79,6 @@ function MoneyRequestConfirmPage(props) { [props.iou.participants, props.personalDetails], ); - const isFocused = useIsFocused(); - useEffect(() => { const policyExpenseChat = _.find(participants, (participant) => participant.isPolicyExpenseChat); if (policyExpenseChat) { @@ -269,7 +266,6 @@ function MoneyRequestConfirmPage(props) { bankAccountRoute={ReportUtils.getBankAccountRoute(props.report)} iouMerchant={props.iou.merchant} iouCreated={props.iou.created} - disableArrowKeysActions={!isFocused} /> )} From 37476d733c071e2cb8a644d1be7aaca5d96bb606 Mon Sep 17 00:00:00 2001 From: ahmedGaber93 Date: Sat, 26 Aug 2023 05:17:03 +0200 Subject: [PATCH 13/14] fix lastMessageText display on LHN. --- src/components/LHNOptionsList/OptionRowLHN.js | 4 ++-- src/libs/actions/IOU.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/LHNOptionsList/OptionRowLHN.js b/src/components/LHNOptionsList/OptionRowLHN.js index a3fbb5e41378..89f41666df2d 100644 --- a/src/components/LHNOptionsList/OptionRowLHN.js +++ b/src/components/LHNOptionsList/OptionRowLHN.js @@ -78,8 +78,8 @@ function OptionRowLHN(props) { const displayNameStyle = StyleUtils.combineStyles([styles.optionDisplayName, styles.optionDisplayNameCompact, styles.pre, ...textUnreadStyle], props.style); const alternateTextStyle = StyleUtils.combineStyles( props.viewMode === CONST.OPTION_MODE.COMPACT - ? [textStyle, styles.optionAlternateText, styles.pre, styles.textLabelSupporting, styles.optionAlternateTextCompact, styles.ml2] - : [textStyle, styles.optionAlternateText, styles.pre, styles.textLabelSupporting], + ? [textStyle, styles.optionAlternateText, styles.noWrap, styles.textLabelSupporting, styles.optionAlternateTextCompact, styles.ml2] + : [textStyle, styles.optionAlternateText, styles.noWrap, styles.textLabelSupporting], props.style, ); const contentContainerStyles = diff --git a/src/libs/actions/IOU.js b/src/libs/actions/IOU.js index 1341b156fe7b..ee9afa8b0eb8 100644 --- a/src/libs/actions/IOU.js +++ b/src/libs/actions/IOU.js @@ -116,7 +116,7 @@ function buildOnyxDataForMoneyRequest( key: `${ONYXKEYS.COLLECTION.REPORT}${iouReport.reportID}`, value: { ...iouReport, - lastMessageText: ReportUtils.formatReportLastMessageText(iouAction.message[0].text), + lastMessageText: iouAction.message[0].text, lastMessageHtml: iouAction.message[0].html, ...(isNewIOUReport ? {pendingFields: {createChat: CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD}} : {}), }, From a9faa80169ec6efba96259dc379c16b34915593c Mon Sep 17 00:00:00 2001 From: ahmedGaber93 Date: Mon, 28 Aug 2023 19:22:06 +0200 Subject: [PATCH 14/14] rename unSubscribeFromKeyboardShortcut --- src/components/OptionsSelector/BaseOptionsSelector.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/OptionsSelector/BaseOptionsSelector.js b/src/components/OptionsSelector/BaseOptionsSelector.js index 4b6209d11a28..ab17c5de322d 100755 --- a/src/components/OptionsSelector/BaseOptionsSelector.js +++ b/src/components/OptionsSelector/BaseOptionsSelector.js @@ -74,7 +74,7 @@ class BaseOptionsSelector extends Component { if (this.props.isFocused) { this.subscribeToKeyboardShortcut(); } else { - this.unSubscribeToKeyboardShortcut(); + this.unSubscribeFromKeyboardShortcut(); } } @@ -127,7 +127,7 @@ class BaseOptionsSelector extends Component { clearTimeout(this.focusTimeout); } - this.unSubscribeToKeyboardShortcut(); + this.unSubscribeFromKeyboardShortcut(); } /** @@ -185,7 +185,7 @@ class BaseOptionsSelector extends Component { ); } - unSubscribeToKeyboardShortcut() { + unSubscribeFromKeyboardShortcut() { if (this.unsubscribeEnter) { this.unsubscribeEnter(); }