From 0713192eb733c43de033d6999452a3e212340b43 Mon Sep 17 00:00:00 2001 From: Eduardo Date: Wed, 22 Mar 2023 12:24:27 +0100 Subject: [PATCH 01/13] New locking height prop --- src/components/ScreenWrapper/index.js | 4 +-- src/components/ScreenWrapper/propTypes.js | 4 +++ src/pages/iou/IOUModal.js | 39 ++++++++++++----------- 3 files changed, 27 insertions(+), 20 deletions(-) diff --git a/src/components/ScreenWrapper/index.js b/src/components/ScreenWrapper/index.js index 5c83dda89619..c4032ada41b6 100644 --- a/src/components/ScreenWrapper/index.js +++ b/src/components/ScreenWrapper/index.js @@ -109,7 +109,7 @@ class ScreenWrapper extends React.Component { if (this.props.includeSafeAreaPaddingBottom || this.props.network.isOffline) { paddingStyle.paddingBottom = paddingBottom; } - + const maxHeight = this.props.lockHeight ? null : this.props.windowHeight; return ( - + {// If props.children is a function, call it to provide the insets to the children. _.isFunction(this.props.children) diff --git a/src/components/ScreenWrapper/propTypes.js b/src/components/ScreenWrapper/propTypes.js index 4345f60fad48..6e73ecdb57b2 100644 --- a/src/components/ScreenWrapper/propTypes.js +++ b/src/components/ScreenWrapper/propTypes.js @@ -31,6 +31,9 @@ const propTypes = { /** Whether to dismiss keyboard before leaving a screen */ shouldDismissKeyboardBeforeClose: PropTypes.bool, + + /** Whether to lock the max height with the initial window height */ + lockHeight: PropTypes.bool, }; const defaultProps = { @@ -41,6 +44,7 @@ const defaultProps = { onEntryTransitionEnd: () => {}, modal: {}, keyboardAvoidingViewBehavior: 'padding', + lockHeight: false, }; export {propTypes, defaultProps}; diff --git a/src/pages/iou/IOUModal.js b/src/pages/iou/IOUModal.js index e658dec5ccf1..e8a761e46904 100755 --- a/src/pages/iou/IOUModal.js +++ b/src/pages/iou/IOUModal.js @@ -30,6 +30,7 @@ import {withNetwork} from '../../components/OnyxProvider'; import reportPropTypes from '../reportPropTypes'; import * as ReportUtils from '../../libs/ReportUtils'; import * as ReportScrollManager from '../../libs/ReportScrollManager'; +import * as DeviceCapabilities from '../../libs/DeviceCapabilities'; /** * IOU modal for requesting money and splitting bills. @@ -420,8 +421,10 @@ class IOUModal extends Component { render() { const currentStep = this.steps[this.state.currentStepIndex]; const reportID = lodashGet(this.props, 'route.params.reportID', ''); + const lockHeight = DeviceCapabilities.canUseTouchScreen() && currentStep === Steps.IOUAmount; + return ( - + {({didScreenTransitionEnd, safeAreaPaddingBottomStyle}) => ( <> @@ -429,23 +432,23 @@ class IOUModal extends Component { {didScreenTransitionEnd && ( <> {currentStep === Steps.IOUAmount && ( - - {this.renderHeader()} - { - this.setState({amount}); - this.navigateToNextStep(); - }} - reportID={reportID} - hasMultipleParticipants={this.props.hasMultipleParticipants} - selectedAmount={this.state.amount} - navigation={this.props.navigation} - iouType={this.props.iouType} - /> - + + {this.renderHeader()} + { + this.setState({amount}); + this.navigateToNextStep(); + }} + reportID={reportID} + hasMultipleParticipants={this.props.hasMultipleParticipants} + selectedAmount={this.state.amount} + navigation={this.props.navigation} + iouType={this.props.iouType} + /> + )} {currentStep === Steps.IOUParticipants && ( Date: Thu, 23 Mar 2023 10:18:23 +0100 Subject: [PATCH 02/13] Cleanups --- src/components/ScreenWrapper/index.js | 4 ++- src/components/ScreenWrapper/propTypes.js | 2 +- src/pages/iou/IOUModal.js | 37 ++++++++++++----------- 3 files changed, 24 insertions(+), 19 deletions(-) diff --git a/src/components/ScreenWrapper/index.js b/src/components/ScreenWrapper/index.js index c4032ada41b6..9eeee4d41f36 100644 --- a/src/components/ScreenWrapper/index.js +++ b/src/components/ScreenWrapper/index.js @@ -94,6 +94,8 @@ class ScreenWrapper extends React.Component { } render() { + const maxHeight = this.props.lockHeight ? null : this.props.windowHeight; + return ( {({ @@ -109,7 +111,7 @@ class ScreenWrapper extends React.Component { if (this.props.includeSafeAreaPaddingBottom || this.props.network.isOffline) { paddingStyle.paddingBottom = paddingBottom; } - const maxHeight = this.props.lockHeight ? null : this.props.windowHeight; + return ( {currentStep === Steps.IOUAmount && ( - - {this.renderHeader()} - { - this.setState({amount}); - this.navigateToNextStep(); - }} - reportID={reportID} - hasMultipleParticipants={this.props.hasMultipleParticipants} - selectedAmount={this.state.amount} - navigation={this.props.navigation} - iouType={this.props.iouType} - /> - + + {this.renderHeader()} + { + this.setState({amount}); + this.navigateToNextStep(); + }} + reportID={reportID} + hasMultipleParticipants={this.props.hasMultipleParticipants} + selectedAmount={this.state.amount} + navigation={this.props.navigation} + iouType={this.props.iouType} + /> + )} {currentStep === Steps.IOUParticipants && ( Date: Mon, 27 Mar 2023 14:29:47 +0200 Subject: [PATCH 03/13] add lockHeight to Profile and SideBar Pages --- src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js | 1 + src/pages/settings/Profile/ProfilePage.js | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js b/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js index 0e99d72926f5..ecd6768ab489 100644 --- a/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js +++ b/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js @@ -51,6 +51,7 @@ class BaseSidebarScreen extends Component { {({insets}) => ( <> diff --git a/src/pages/settings/Profile/ProfilePage.js b/src/pages/settings/Profile/ProfilePage.js index 6672198dc7db..04437aa78a7b 100755 --- a/src/pages/settings/Profile/ProfilePage.js +++ b/src/pages/settings/Profile/ProfilePage.js @@ -63,7 +63,7 @@ const ProfilePage = (props) => { ]; return ( - + Date: Tue, 28 Mar 2023 16:47:14 +0200 Subject: [PATCH 04/13] locking height to ReportScreen for messages --- src/pages/home/ReportScreen.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js index 91351008220c..d5c9a8c696d0 100644 --- a/src/pages/home/ReportScreen.js +++ b/src/pages/home/ReportScreen.js @@ -34,6 +34,7 @@ import FullPageNotFoundView from '../../components/BlockingViews/FullPageNotFoun import ReportHeaderSkeletonView from '../../components/ReportHeaderSkeletonView'; import withViewportOffsetTop, {viewportOffsetTopPropTypes} from '../../components/withViewportOffsetTop'; import * as ReportActionsUtils from '../../libs/ReportActionsUtils'; +import * as DeviceCapabilities from '../../libs/DeviceCapabilities'; const propTypes = { /** Navigation route context info provided by react navigation */ @@ -217,6 +218,7 @@ class ReportScreen extends React.Component { return ( Date: Fri, 31 Mar 2023 17:12:41 +0200 Subject: [PATCH 05/13] lockheight for add payment screen --- src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js index 4026f6cdb459..853e772a1f84 100644 --- a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js +++ b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js @@ -34,6 +34,7 @@ import OfflineWithFeedback from '../../../../components/OfflineWithFeedback'; import ConfirmContent from '../../../../components/ConfirmContent'; import Button from '../../../../components/Button'; import themeColors from '../../../../styles/themes/default'; +import * as DeviceCapabilities from '../../../../libs/DeviceCapabilities'; class BasePaymentsPage extends React.Component { constructor(props) { @@ -390,7 +391,7 @@ class BasePaymentsPage extends React.Component { // Determines whether or not the modal popup is mounted from the bottom of the screen instead of the side mount on Web or Desktop screens const isPopoverBottomMount = this.state.anchorPositionTop === 0 || this.props.isSmallScreenWidth; return ( - + Date: Wed, 5 Apr 2023 16:59:01 +0200 Subject: [PATCH 06/13] Updated max height handling --- src/components/ScreenWrapper/index.js | 2 +- src/components/ScreenWrapper/propTypes.js | 7 ++++--- src/pages/NewChatPage.js | 2 +- src/pages/home/ReportScreen.js | 1 - src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js | 1 - src/pages/iou/MoneyRequestModal.js | 4 ++-- .../settings/Payments/PaymentsPage/BasePaymentsPage.js | 2 +- src/pages/settings/Profile/ProfilePage.js | 2 +- src/pages/workspace/WorkspaceInvitePage.js | 2 +- 9 files changed, 11 insertions(+), 12 deletions(-) diff --git a/src/components/ScreenWrapper/index.js b/src/components/ScreenWrapper/index.js index 3b10d81e2ae7..2673f9b08ea8 100644 --- a/src/components/ScreenWrapper/index.js +++ b/src/components/ScreenWrapper/index.js @@ -85,7 +85,7 @@ class ScreenWrapper extends React.Component { } render() { - const maxHeight = this.props.lockHeight ? null : this.props.windowHeight; + const maxHeight = this.props.enableMaxHeight ? this.props.windowHeight : false; return ( diff --git a/src/components/ScreenWrapper/propTypes.js b/src/components/ScreenWrapper/propTypes.js index 288448b4d01e..c084771f8226 100644 --- a/src/components/ScreenWrapper/propTypes.js +++ b/src/components/ScreenWrapper/propTypes.js @@ -1,4 +1,5 @@ import PropTypes from 'prop-types'; +import * as DeviceCapabilities from '../../libs/DeviceCapabilities'; const propTypes = { /** Array of additional styles to add */ @@ -32,8 +33,8 @@ const propTypes = { /** Whether to dismiss keyboard before leaving a screen */ shouldDismissKeyboardBeforeClose: PropTypes.bool, - /** Whether to use the maxHeight (false) or use the 100% of the height (true) */ - lockHeight: PropTypes.bool, + /** Whether to use the maxHeight (true) or use the 100% of the height (false) */ + enableMaxHeight: PropTypes.bool, }; const defaultProps = { @@ -44,7 +45,7 @@ const defaultProps = { onEntryTransitionEnd: () => {}, modal: {}, keyboardAvoidingViewBehavior: 'padding', - lockHeight: false, + enableMaxHeight: !DeviceCapabilities.canUseTouchScreen(), }; export {propTypes, defaultProps}; diff --git a/src/pages/NewChatPage.js b/src/pages/NewChatPage.js index 0ca8d13fbcc8..50794f903e9e 100755 --- a/src/pages/NewChatPage.js +++ b/src/pages/NewChatPage.js @@ -233,7 +233,7 @@ class NewChatPage extends Component { maxParticipantsReached, ); return ( - + {({didScreenTransitionEnd, safeAreaPaddingBottomStyle}) => ( <> {({insets}) => ( <> diff --git a/src/pages/iou/MoneyRequestModal.js b/src/pages/iou/MoneyRequestModal.js index 9d473a4f4d65..dab4e487ac81 100644 --- a/src/pages/iou/MoneyRequestModal.js +++ b/src/pages/iou/MoneyRequestModal.js @@ -344,10 +344,10 @@ const MoneyRequestModal = (props) => { const reportID = lodashGet(props, 'route.params.reportID', ''); const shouldShowBackButton = currentStepIndex > 0; const modalHeader = ; - const lockHeight = DeviceCapabilities.canUseTouchScreen() && currentStep === Steps.IOUAmount; + const enableMaxHeight = DeviceCapabilities.canUseTouchScreen() && currentStep !== Steps.IOUAmount; return ( - + {({didScreenTransitionEnd, safeAreaPaddingBottomStyle}) => ( <> diff --git a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js index 853e772a1f84..d5df61eb0f03 100644 --- a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js +++ b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js @@ -391,7 +391,7 @@ class BasePaymentsPage extends React.Component { // Determines whether or not the modal popup is mounted from the bottom of the screen instead of the side mount on Web or Desktop screens const isPopoverBottomMount = this.state.anchorPositionTop === 0 || this.props.isSmallScreenWidth; return ( - + { ]; return ( - + + {({didScreenTransitionEnd}) => ( Date: Wed, 5 Apr 2023 17:00:17 +0200 Subject: [PATCH 07/13] deleted again IOUModal --- src/pages/iou/IOUModal.js | 542 -------------------------------------- 1 file changed, 542 deletions(-) delete mode 100755 src/pages/iou/IOUModal.js diff --git a/src/pages/iou/IOUModal.js b/src/pages/iou/IOUModal.js deleted file mode 100755 index f7790f71ffb1..000000000000 --- a/src/pages/iou/IOUModal.js +++ /dev/null @@ -1,542 +0,0 @@ -import _ from 'underscore'; -import React, {Component} from 'react'; -import {View, TouchableOpacity} from 'react-native'; -import PropTypes from 'prop-types'; -import lodashGet from 'lodash/get'; -import {withOnyx} from 'react-native-onyx'; -import Str from 'expensify-common/lib/str'; -import IOUAmountPage from './steps/IOUAmountPage'; -import IOUParticipantsPage from './steps/IOUParticipantsPage/IOUParticipantsPage'; -import IOUConfirmPage from './steps/IOUConfirmPage'; -import Header from '../../components/Header'; -import styles from '../../styles/styles'; -import Icon from '../../components/Icon'; -import * as IOU from '../../libs/actions/IOU'; -import * as Expensicons from '../../components/Icon/Expensicons'; -import Navigation from '../../libs/Navigation/Navigation'; -import ONYXKEYS from '../../ONYXKEYS'; -import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize'; -import compose from '../../libs/compose'; -import * as OptionsListUtils from '../../libs/OptionsListUtils'; -import FullScreenLoadingIndicator from '../../components/FullscreenLoadingIndicator'; -import AnimatedStep from '../../components/AnimatedStep'; -import ScreenWrapper from '../../components/ScreenWrapper'; -import Tooltip from '../../components/Tooltip'; -import CONST from '../../CONST'; -import * as PersonalDetails from '../../libs/actions/PersonalDetails'; -import withCurrentUserPersonalDetails from '../../components/withCurrentUserPersonalDetails'; -import networkPropTypes from '../../components/networkPropTypes'; -import {withNetwork} from '../../components/OnyxProvider'; -import reportPropTypes from '../reportPropTypes'; -import * as ReportUtils from '../../libs/ReportUtils'; -import * as ReportScrollManager from '../../libs/ReportScrollManager'; -import * as DeviceCapabilities from '../../libs/DeviceCapabilities'; - -/** - * IOU modal for requesting money and splitting bills. - */ -const propTypes = { - /** Whether the IOU is for a single request or a group bill split */ - hasMultipleParticipants: PropTypes.bool, - - /** The type of IOU report, i.e. bill, request, send */ - iouType: PropTypes.string, - - /** The report passed via the route */ - // eslint-disable-next-line react/no-unused-prop-types - report: reportPropTypes, - - /** Information about the network */ - network: networkPropTypes.isRequired, - - // Holds data related to IOU view state, rather than the underlying IOU data. - iou: PropTypes.shape({ - /** Whether or not transaction creation has started */ - creatingIOUTransaction: PropTypes.bool, - - /** Whether or not transaction creation has resulted to error */ - error: PropTypes.bool, - - // Selected Currency Code of the current IOU - selectedCurrencyCode: PropTypes.string, - }), - - /** Personal details of all the users */ - personalDetails: PropTypes.shape({ - /** Primary login of participant */ - login: PropTypes.string, - - /** Display Name of participant */ - displayName: PropTypes.string, - - /** Avatar url of participant */ - avatar: PropTypes.string, - }), - - /** Personal details of the current user */ - currentUserPersonalDetails: PropTypes.shape({ - // Local Currency Code of the current user - localCurrencyCode: PropTypes.string, - }), - - ...withLocalizePropTypes, -}; - -const defaultProps = { - hasMultipleParticipants: false, - report: { - participants: [], - }, - iouType: CONST.IOU.IOU_TYPE.REQUEST, - currentUserPersonalDetails: { - localCurrencyCode: CONST.CURRENCY.USD, - }, - personalDetails: {}, - iou: { - creatingIOUTransaction: false, - error: false, - selectedCurrencyCode: null, - }, -}; - -// Determines type of step to display within Modal, value provides the title for that page. -const Steps = { - IOUAmount: 'iou.amount', - IOUParticipants: 'iou.participants', - IOUConfirm: 'iou.confirm', -}; - -class IOUModal extends Component { - constructor(props) { - super(props); - this.navigateToPreviousStep = this.navigateToPreviousStep.bind(this); - this.navigateToNextStep = this.navigateToNextStep.bind(this); - this.addParticipants = this.addParticipants.bind(this); - this.createTransaction = this.createTransaction.bind(this); - this.updateComment = this.updateComment.bind(this); - this.sendMoney = this.sendMoney.bind(this); - - const participants = lodashGet(props, 'report.participants', []); - const participantsWithDetails = _.map(OptionsListUtils.getPersonalDetailsForLogins(participants, props.personalDetails), personalDetails => ({ - login: personalDetails.login, - text: personalDetails.displayName, - firstName: lodashGet(personalDetails, 'firstName', ''), - lastName: lodashGet(personalDetails, 'lastName', ''), - alternateText: Str.isSMSLogin(personalDetails.login) ? Str.removeSMSDomain(personalDetails.login) : personalDetails.login, - icons: [{ - source: ReportUtils.getAvatar(personalDetails.avatar, personalDetails.login), - name: personalDetails.login, - type: CONST.ICON_TYPE_AVATAR, - }], - keyForList: personalDetails.login, - payPalMeAddress: lodashGet(personalDetails, 'payPalMeAddress', ''), - phoneNumber: lodashGet(personalDetails, 'phoneNumber', ''), - })); - - this.state = { - previousStepIndex: 0, - currentStepIndex: 0, - participants: participantsWithDetails, - - // amount is currency in decimal format - amount: '', - comment: '', - }; - - // Skip IOUParticipants step if participants are passed in - if (participants.length) { - // The steps to be shown within the create IOU flow. - this.steps = [Steps.IOUAmount, Steps.IOUConfirm]; - } else { - this.steps = [Steps.IOUAmount, Steps.IOUParticipants, Steps.IOUConfirm]; - } - } - - componentDidMount() { - PersonalDetails.openIOUModalPage(); - IOU.setIOUSelectedCurrency(this.props.currentUserPersonalDetails.localCurrencyCode); - } - - componentDidUpdate(prevProps) { - const wasCreatingIOUTransaction = lodashGet(prevProps, 'iou.creatingIOUTransaction'); - const iouError = lodashGet(this.props, 'iou.error'); - if (prevProps.network.isOffline && !this.props.network.isOffline) { - PersonalDetails.openIOUModalPage(); - } - - // Successfully close the modal if transaction creation has ended and there is no error - if (wasCreatingIOUTransaction && !lodashGet(this.props, 'iou.creatingIOUTransaction') && !iouError) { - Navigation.dismissModal(); - } - - // If transaction fails, handling it here - if (wasCreatingIOUTransaction && iouError === true) { - // Navigating to Enter Amount Page - // eslint-disable-next-line react/no-did-update-set-state - this.setState({currentStepIndex: 0}); - this.creatingIOUTransaction = false; - } - - const currentSelectedCurrencyCode = lodashGet(this.props, 'iou.selectedCurrencyCode'); - if (lodashGet(prevProps, 'iou.selectedCurrencyCode') !== currentSelectedCurrencyCode) { - IOU.setIOUSelectedCurrency(currentSelectedCurrencyCode); - } - } - - /** - * Decides our animation type based on whether we're increasing or decreasing - * our step index. - * @returns {String} - */ - getDirection() { - if (this.state.previousStepIndex < this.state.currentStepIndex) { - return 'in'; - } - if (this.state.previousStepIndex > this.state.currentStepIndex) { - return 'out'; - } - - // Doesn't animate the step when first opening the modal - if (this.state.previousStepIndex === this.state.currentStepIndex) { - return null; - } - } - - /** - * Retrieve title for current step, based upon current step and type of IOU - * - * @returns {String} - */ - getTitleForStep() { - const currentStepIndex = this.state.currentStepIndex; - const isSendingMoney = this.props.iouType === CONST.IOU.IOU_TYPE.SEND; - if (currentStepIndex === 1 || currentStepIndex === 2) { - const formattedAmount = this.props.numberFormat( - this.state.amount, { - style: 'currency', - currency: this.props.iou.selectedCurrencyCode, - }, - ); - if (isSendingMoney) { - return this.props.translate('iou.send', { - amount: formattedAmount, - }); - } - return this.props.translate( - this.props.hasMultipleParticipants ? 'iou.split' : 'iou.request', { - amount: formattedAmount, - }, - ); - } - if (currentStepIndex === 0) { - if (isSendingMoney) { - return this.props.translate('iou.sendMoney'); - } - return this.props.translate(this.props.hasMultipleParticipants ? 'iou.splitBill' : 'iou.requestMoney'); - } - - return this.props.translate(this.steps[currentStepIndex]) || ''; - } - - /** - * Update comment whenever user enters any new text - * - * @param {String} comment - */ - updateComment(comment) { - this.setState({ - comment, - }); - } - - /** - * Update participants whenever user selects the payment recipient - * - * @param {Array} participants - */ - addParticipants(participants) { - this.setState({ - participants, - }); - } - - /** - * Navigate to the next IOU step if possible - */ - navigateToPreviousStep() { - if (this.state.currentStepIndex <= 0) { - return; - } - this.setState(prevState => ({ - previousStepIndex: prevState.currentStepIndex, - currentStepIndex: prevState.currentStepIndex - 1, - })); - } - - /** - * Navigate to the previous IOU step if possible - */ - navigateToNextStep() { - if (this.state.currentStepIndex >= this.steps.length - 1) { - return; - } - - this.setState(prevState => ({ - previousStepIndex: prevState.currentStepIndex, - currentStepIndex: prevState.currentStepIndex + 1, - })); - } - - /** - * Checks if user has a GOLD wallet then creates a paid IOU report on the fly - * - * @param {String} paymentMethodType - */ - sendMoney(paymentMethodType) { - const amount = Math.round(this.state.amount * 100); - const currency = this.props.iou.selectedCurrencyCode; - const comment = this.state.comment.trim(); - const participant = this.state.participants[0]; - - if (paymentMethodType === CONST.IOU.PAYMENT_TYPE.ELSEWHERE) { - IOU.sendMoneyElsewhere( - this.props.report, - amount, - currency, - comment, - this.props.currentUserPersonalDetails.login, - participant, - ); - return; - } - - if (paymentMethodType === CONST.IOU.PAYMENT_TYPE.PAYPAL_ME) { - IOU.sendMoneyViaPaypal( - this.props.report, - amount, - currency, - comment, - this.props.currentUserPersonalDetails.login, - participant, - ); - return; - } - - if (paymentMethodType === CONST.IOU.PAYMENT_TYPE.EXPENSIFY) { - IOU.sendMoneyWithWallet( - this.props.report, - amount, - currency, - comment, - this.props.currentUserPersonalDetails.login, - participant, - ); - } - } - - /** - * @param {Array} selectedParticipants - */ - createTransaction(selectedParticipants) { - const reportID = lodashGet(this.props, 'route.params.reportID', ''); - const comment = this.state.comment.trim(); - - // IOUs created from a group report will have a reportID param in the route. - // Since the user is already viewing the report, we don't need to navigate them to the report - if (this.props.hasMultipleParticipants && CONST.REGEX.NUMBER.test(reportID)) { - IOU.splitBill( - selectedParticipants, - this.props.currentUserPersonalDetails.login, - this.state.amount, - comment, - this.props.iou.selectedCurrencyCode, - this.props.preferredLocale, - reportID, - ); - return; - } - - // If the IOU is created from the global create menu, we also navigate the user to the group report - if (this.props.hasMultipleParticipants) { - IOU.splitBillAndOpenReport( - selectedParticipants, - this.props.currentUserPersonalDetails.login, - this.state.amount, - comment, - this.props.iou.selectedCurrencyCode, - this.props.preferredLocale, - ); - return; - } - IOU.requestMoney( - this.props.report, - Math.round(this.state.amount * 100), - this.props.iou.selectedCurrencyCode, - this.props.currentUserPersonalDetails.login, - selectedParticipants[0], - comment, - ); - } - - renderHeader() { - return ( - - - {this.state.currentStepIndex > 0 - && ( - - - - - - - - )} -
- - - Navigation.dismissModal()} - style={[styles.touchableButtonImage]} - accessibilityRole="button" - accessibilityLabel={this.props.translate('common.close')} - > - - - - - - - ); - } - - render() { - const currentStep = this.steps[this.state.currentStepIndex]; - const reportID = lodashGet(this.props, 'route.params.reportID', ''); - - // We want to lock the height of the screen when the IOUAmount page is visible - // so that the keyboard doesn't cause the screen to resize and move the NumberPad up and down - const lockHeight = DeviceCapabilities.canUseTouchScreen() && currentStep === Steps.IOUAmount; - - return ( - - {({didScreenTransitionEnd, safeAreaPaddingBottomStyle}) => ( - <> - - {!didScreenTransitionEnd && } - {didScreenTransitionEnd && ( - <> - {currentStep === Steps.IOUAmount && ( - - {this.renderHeader()} - { - this.setState({amount}); - this.navigateToNextStep(); - }} - reportID={reportID} - hasMultipleParticipants={this.props.hasMultipleParticipants} - selectedAmount={this.state.amount} - navigation={this.props.navigation} - iouType={this.props.iouType} - /> - - )} - {currentStep === Steps.IOUParticipants && ( - - {this.renderHeader()} - - - )} - {currentStep === Steps.IOUConfirm && ( - - {this.renderHeader()} - { - // Prevent creating multiple transactions if the button is pressed repeatedly - if (this.creatingIOUTransaction) { - return; - } - this.creatingIOUTransaction = true; - this.createTransaction(selectedParticipants); - ReportScrollManager.scrollToBottom(); - }} - onSendMoney={(paymentMethodType) => { - if (this.creatingIOUTransaction) { - return; - } - this.creatingIOUTransaction = true; - this.sendMoney(paymentMethodType); - ReportScrollManager.scrollToBottom(); - }} - hasMultipleParticipants={this.props.hasMultipleParticipants} - participants={_.filter(this.state.participants, email => this.props.currentUserPersonalDetails.login !== email.login)} - iouAmount={this.state.amount} - comment={this.state.comment} - onUpdateComment={this.updateComment} - iouType={this.props.iouType} - - // The participants can only be modified when the action is initiated from directly within a group chat and not the floating-action-button. - // This is because when there is a group of people, say they are on a trip, and you have some shared expenses with some of the people, - // but not all of them (maybe someone skipped out on dinner). Then it's nice to be able to select/deselect people from the group chat bill - // split rather than forcing the user to create a new group, just for that expense. The reportID is empty, when the action was initiated from - // the floating-action-button (since it is something that exists outside the context of a report). - canModifyParticipants={!_.isEmpty(reportID)} - /> - - )} - - )} - - - )} - - ); - } -} - -IOUModal.propTypes = propTypes; -IOUModal.defaultProps = defaultProps; - -export default compose( - withLocalize, - withNetwork(), - withCurrentUserPersonalDetails, - withOnyx({ - report: { - key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT}${lodashGet(route, 'params.reportID', '')}`, - }, - iou: { - key: ONYXKEYS.IOU, - }, - personalDetails: { - key: ONYXKEYS.PERSONAL_DETAILS, - }, - }), -)(IOUModal); From 5a9acb2eeb7996da270da50f2137790ba4b93423 Mon Sep 17 00:00:00 2001 From: Eduardo Date: Fri, 7 Apr 2023 13:41:32 +0200 Subject: [PATCH 08/13] fixing comments --- src/components/ScreenWrapper/index.js | 2 +- src/components/ScreenWrapper/propTypes.js | 4 ++-- src/pages/home/ReportScreen.js | 1 - src/pages/iou/MoneyRequestModal.js | 2 +- src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js | 1 - 5 files changed, 4 insertions(+), 6 deletions(-) diff --git a/src/components/ScreenWrapper/index.js b/src/components/ScreenWrapper/index.js index 2673f9b08ea8..6786662359b2 100644 --- a/src/components/ScreenWrapper/index.js +++ b/src/components/ScreenWrapper/index.js @@ -85,7 +85,7 @@ class ScreenWrapper extends React.Component { } render() { - const maxHeight = this.props.enableMaxHeight ? this.props.windowHeight : false; + const maxHeight = this.props.shouldEnableMaxHeight ? this.props.windowHeight : null; return ( diff --git a/src/components/ScreenWrapper/propTypes.js b/src/components/ScreenWrapper/propTypes.js index c084771f8226..908bbc718481 100644 --- a/src/components/ScreenWrapper/propTypes.js +++ b/src/components/ScreenWrapper/propTypes.js @@ -34,7 +34,7 @@ const propTypes = { shouldDismissKeyboardBeforeClose: PropTypes.bool, /** Whether to use the maxHeight (true) or use the 100% of the height (false) */ - enableMaxHeight: PropTypes.bool, + shouldEnableMaxHeight: PropTypes.bool, }; const defaultProps = { @@ -45,7 +45,7 @@ const defaultProps = { onEntryTransitionEnd: () => {}, modal: {}, keyboardAvoidingViewBehavior: 'padding', - enableMaxHeight: !DeviceCapabilities.canUseTouchScreen(), + shouldEnableMaxHeight: !DeviceCapabilities.canUseTouchScreen(), }; export {propTypes, defaultProps}; diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js index 77acbb0221ea..8ea0eec9cb7f 100644 --- a/src/pages/home/ReportScreen.js +++ b/src/pages/home/ReportScreen.js @@ -35,7 +35,6 @@ import FullPageNotFoundView from '../../components/BlockingViews/FullPageNotFoun import ReportHeaderSkeletonView from '../../components/ReportHeaderSkeletonView'; import withViewportOffsetTop, {viewportOffsetTopPropTypes} from '../../components/withViewportOffsetTop'; import * as ReportActionsUtils from '../../libs/ReportActionsUtils'; -import * as DeviceCapabilities from '../../libs/DeviceCapabilities'; import personalDetailsPropType from '../personalDetailsPropType'; import getIsReportFullyVisible from '../../libs/getIsReportFullyVisible'; import EmojiPicker from '../../components/EmojiPicker/EmojiPicker'; diff --git a/src/pages/iou/MoneyRequestModal.js b/src/pages/iou/MoneyRequestModal.js index dab4e487ac81..29ff9e34824b 100644 --- a/src/pages/iou/MoneyRequestModal.js +++ b/src/pages/iou/MoneyRequestModal.js @@ -347,7 +347,7 @@ const MoneyRequestModal = (props) => { const enableMaxHeight = DeviceCapabilities.canUseTouchScreen() && currentStep !== Steps.IOUAmount; return ( - + {({didScreenTransitionEnd, safeAreaPaddingBottomStyle}) => ( <> diff --git a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js index d5df61eb0f03..4026f6cdb459 100644 --- a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js +++ b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js @@ -34,7 +34,6 @@ import OfflineWithFeedback from '../../../../components/OfflineWithFeedback'; import ConfirmContent from '../../../../components/ConfirmContent'; import Button from '../../../../components/Button'; import themeColors from '../../../../styles/themes/default'; -import * as DeviceCapabilities from '../../../../libs/DeviceCapabilities'; class BasePaymentsPage extends React.Component { constructor(props) { From 873a6e790952cc9009d5ec858ebb353fcce50667 Mon Sep 17 00:00:00 2001 From: Eduardo Date: Tue, 11 Apr 2023 11:27:06 +0200 Subject: [PATCH 09/13] Renamed enableMaxHeight to shouldEnableMaxHeight --- src/pages/NewChatPage.js | 2 +- src/pages/workspace/WorkspaceInvitePage.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/NewChatPage.js b/src/pages/NewChatPage.js index 50794f903e9e..b8f171574201 100755 --- a/src/pages/NewChatPage.js +++ b/src/pages/NewChatPage.js @@ -233,7 +233,7 @@ class NewChatPage extends Component { maxParticipantsReached, ); return ( - + {({didScreenTransitionEnd, safeAreaPaddingBottomStyle}) => ( <> + {({didScreenTransitionEnd}) => ( Date: Tue, 11 Apr 2023 15:44:27 +0200 Subject: [PATCH 10/13] removed shouldEnabledMaxHeight here isn't necessary because now is false by default --- src/pages/workspace/WorkspaceInvitePage.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/workspace/WorkspaceInvitePage.js b/src/pages/workspace/WorkspaceInvitePage.js index fecc9a212b70..e1fbdbeda817 100644 --- a/src/pages/workspace/WorkspaceInvitePage.js +++ b/src/pages/workspace/WorkspaceInvitePage.js @@ -300,7 +300,7 @@ class WorkspaceInvitePage extends React.Component { const policyName = lodashGet(this.props.policy, 'name'); return ( - + {({didScreenTransitionEnd}) => ( Date: Tue, 11 Apr 2023 17:40:30 +0200 Subject: [PATCH 11/13] setting undefined to the style to remove it --- src/components/ScreenWrapper/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ScreenWrapper/index.js b/src/components/ScreenWrapper/index.js index 6786662359b2..3cec71b8c238 100644 --- a/src/components/ScreenWrapper/index.js +++ b/src/components/ScreenWrapper/index.js @@ -85,7 +85,7 @@ class ScreenWrapper extends React.Component { } render() { - const maxHeight = this.props.shouldEnableMaxHeight ? this.props.windowHeight : null; + const maxHeight = this.props.shouldEnableMaxHeight ? this.props.windowHeight : undefined; return ( From 77345f19f677932f0d9724df2e34905a6c59cbff Mon Sep 17 00:00:00 2001 From: Eduardo Date: Wed, 12 Apr 2023 14:25:01 +0200 Subject: [PATCH 12/13] let the bottom button to move up --- src/pages/workspace/WorkspaceInvitePage.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/workspace/WorkspaceInvitePage.js b/src/pages/workspace/WorkspaceInvitePage.js index e1fbdbeda817..fecc9a212b70 100644 --- a/src/pages/workspace/WorkspaceInvitePage.js +++ b/src/pages/workspace/WorkspaceInvitePage.js @@ -300,7 +300,7 @@ class WorkspaceInvitePage extends React.Component { const policyName = lodashGet(this.props.policy, 'name'); return ( - + {({didScreenTransitionEnd}) => ( Date: Tue, 18 Apr 2023 16:26:05 +0200 Subject: [PATCH 13/13] Changed shouldEnableMaxHeight to be false as default --- src/components/ScreenWrapper/propTypes.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/ScreenWrapper/propTypes.js b/src/components/ScreenWrapper/propTypes.js index 03e55412e952..8e9bbadbb3ae 100644 --- a/src/components/ScreenWrapper/propTypes.js +++ b/src/components/ScreenWrapper/propTypes.js @@ -1,5 +1,4 @@ import PropTypes from 'prop-types'; -import * as DeviceCapabilities from '../../libs/DeviceCapabilities'; import {windowDimensionsPropTypes} from '../withWindowDimensions'; const propTypes = { @@ -48,7 +47,7 @@ const defaultProps = { onEntryTransitionEnd: () => {}, modal: {}, keyboardAvoidingViewBehavior: 'padding', - shouldEnableMaxHeight: !DeviceCapabilities.canUseTouchScreen(), + shouldEnableMaxHeight: false, }; export {propTypes, defaultProps};