From 5d224960e18182f609c709bfcc9dad37a4e86f07 Mon Sep 17 00:00:00 2001 From: QichenZhu <57348009+QichenZhu@users.noreply.github.com> Date: Mon, 16 Dec 2024 12:00:13 +1300 Subject: [PATCH 1/4] Fix IOU amount input flicking on native platforms --- src/components/AmountTextInput.tsx | 2 +- src/components/MoneyRequestAmountInput.tsx | 5 ++++- .../TextInput/BaseTextInput/index.native.tsx | 8 +++----- src/components/TextInput/BaseTextInput/types.ts | 3 +++ src/components/TextInputWithCurrencySymbol/types.ts | 2 +- src/pages/iou/MoneyRequestAmountForm.tsx | 2 ++ src/styles/utils/index.ts | 10 ++++++++++ 7 files changed, 24 insertions(+), 8 deletions(-) diff --git a/src/components/AmountTextInput.tsx b/src/components/AmountTextInput.tsx index 6be2b43c09d7..12189d22dba0 100644 --- a/src/components/AmountTextInput.tsx +++ b/src/components/AmountTextInput.tsx @@ -39,7 +39,7 @@ type AmountTextInputProps = { /** Hide the focus styles on TextInput */ hideFocusedState?: boolean; -} & Pick; +} & Pick; function AmountTextInput( { diff --git a/src/components/MoneyRequestAmountInput.tsx b/src/components/MoneyRequestAmountInput.tsx index 9ef33900bb00..717659c16fd3 100644 --- a/src/components/MoneyRequestAmountInput.tsx +++ b/src/components/MoneyRequestAmountInput.tsx @@ -12,6 +12,7 @@ import CONST from '@src/CONST'; import isTextInputFocused from './TextInput/BaseTextInput/isTextInputFocused'; import type {BaseTextInputRef} from './TextInput/BaseTextInput/types'; import TextInputWithCurrencySymbol from './TextInputWithCurrencySymbol'; +import type {TextInputWithCurrencySymbolProps} from './TextInputWithCurrencySymbol/types'; type CurrentMoney = {amount: string; currency: string}; @@ -91,7 +92,7 @@ type MoneyRequestAmountInputProps = { /** The width of inner content */ contentWidth?: number; -}; +} & Pick; type Selection = { start: number; @@ -126,6 +127,7 @@ function MoneyRequestAmountInput( hideFocusedState = true, shouldKeepUserInput = false, autoGrow = true, + autoGrowExtraSpace, contentWidth, ...props }: MoneyRequestAmountInputProps, @@ -289,6 +291,7 @@ function MoneyRequestAmountInput( return ( = StyleSheet.flatten([ styles.textInputContainer, textInputContainerStyles, - (autoGrow || !!contentWidth) && StyleUtils.getWidthStyle(textInputWidth), + !!contentWidth && StyleUtils.getWidthStyle(textInputWidth), + autoGrow && StyleUtils.getAutoGrowWidthInputContainerStyles(textInputWidth, autoGrowExtraSpace), !hideFocusedState && isFocused && styles.borderColorFocus, (!!hasError || !!errorText) && styles.borderColorDanger, autoGrowHeight && {scrollPaddingTop: typeof maxAutoGrowHeight === 'number' ? 2 * maxAutoGrowHeight : undefined}, @@ -441,14 +443,10 @@ function BaseTextInput( )} {/* Text input component doesn't support auto grow by default. - We're using a hidden text input to achieve that. This text view is used to calculate width or height of the input value given textStyle in this component. This Text component is intentionally positioned out of the screen. */} {(!!autoGrow || autoGrowHeight) && !isAutoGrowHeightMarkdown && ( - // Add +2 to width on Safari browsers so that text is not cut off due to the cursor or when changing the value - // https://github.com/Expensify/App/issues/8158 - // https://github.com/Expensify/App/issues/26628 ; +} & Pick; type TextInputWithCurrencySymbolProps = Omit & { onSelectionChange?: (start: number, end: number) => void; diff --git a/src/pages/iou/MoneyRequestAmountForm.tsx b/src/pages/iou/MoneyRequestAmountForm.tsx index ba406c3ddef6..3b4f66c32738 100644 --- a/src/pages/iou/MoneyRequestAmountForm.tsx +++ b/src/pages/iou/MoneyRequestAmountForm.tsx @@ -19,6 +19,7 @@ import * as CurrencyUtils from '@libs/CurrencyUtils'; import * as DeviceCapabilities from '@libs/DeviceCapabilities'; import * as MoneyRequestUtils from '@libs/MoneyRequestUtils'; import Navigation from '@libs/Navigation/Navigation'; +import variables from '@styles/variables'; import type {BaseTextInputRef} from '@src/components/TextInput/BaseTextInput/types'; import CONST from '@src/CONST'; import type {Route} from '@src/ROUTES'; @@ -259,6 +260,7 @@ function MoneyRequestAmountForm( > ({ }; }, + /* + * Returns styles for the text input container, with extraSpace allowing overflow without affecting the layout. + */ + getAutoGrowWidthInputContainerStyles: (width: number, extraSpace: number): ViewStyle => { + if (!!width && !!extraSpace) { + return {marginRight: -extraSpace, width: width + extraSpace}; + } + return {width}; + }, + /* * Returns the actual maxHeight of the auto-growing markdown text input. */ From 2f4ae8224f6c28149730449ff664e599768989f1 Mon Sep 17 00:00:00 2001 From: Qichen Zhu <57348009+QichenZhu@users.noreply.github.com> Date: Wed, 18 Dec 2024 14:59:23 +1300 Subject: [PATCH 2/4] Update comment --- src/components/TextInput/BaseTextInput/types.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/TextInput/BaseTextInput/types.ts b/src/components/TextInput/BaseTextInput/types.ts index 70cfb028cef4..eef2d471a0d7 100644 --- a/src/components/TextInput/BaseTextInput/types.ts +++ b/src/components/TextInput/BaseTextInput/types.ts @@ -54,7 +54,7 @@ type CustomBaseTextInputProps = { */ autoGrow?: boolean; - /** If autoGrow is enabled, this reserves extra space for incoming characters to prevent flickering. */ + /** If autoGrow is enabled, this reserves extra space for incoming characters to prevent flickering on native platforms. */ autoGrowExtraSpace?: number; /** From 396f062efe55d1feb66b54800018a50d2ee821ca Mon Sep 17 00:00:00 2001 From: QichenZhu <57348009+QichenZhu@users.noreply.github.com> Date: Thu, 19 Dec 2024 12:16:27 +1300 Subject: [PATCH 3/4] Remove default IDs --- src/pages/iou/MoneyRequestAmountForm.tsx | 2 +- src/styles/utils/index.ts | 6 +++++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/pages/iou/MoneyRequestAmountForm.tsx b/src/pages/iou/MoneyRequestAmountForm.tsx index 3b4f66c32738..533c113c2a86 100644 --- a/src/pages/iou/MoneyRequestAmountForm.tsx +++ b/src/pages/iou/MoneyRequestAmountForm.tsx @@ -314,7 +314,7 @@ function MoneyRequestAmountForm( addBankAccountRoute={bankAccountRoute} addDebitCardRoute={ROUTES.IOU_SEND_ADD_DEBIT_CARD} currency={currency ?? CONST.CURRENCY.USD} - policyID={policyID ?? '-1'} + policyID={policyID} style={[styles.w100, canUseTouchScreen ? styles.mt5 : styles.mt3]} buttonSize={CONST.DROPDOWN_BUTTON_SIZE.LARGE} kycWallAnchorAlignment={{ diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts index 0747fcb83132..8a41e6882365 100644 --- a/src/styles/utils/index.ts +++ b/src/styles/utils/index.ts @@ -290,7 +290,11 @@ function getBackgroundColorAndFill(backgroundColor: string, fill: string): SVGAv */ function getEReceiptColorCode(transaction: OnyxEntry): EReceiptColorName { // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing - const transactionID = transaction?.parentTransactionID || transaction?.transactionID || ''; + const transactionID = transaction?.parentTransactionID || transaction?.transactionID; + + if (!transactionID) { + return CONST.ERECEIPT_COLORS.YELLOW; + } const colorHash = UserUtils.hashText(transactionID.trim(), eReceiptColors.length); From 21056fff170c35c8803dd2a7b7b11af423f79fd8 Mon Sep 17 00:00:00 2001 From: Qichen Zhu <57348009+QichenZhu@users.noreply.github.com> Date: Thu, 26 Dec 2024 12:24:08 +1300 Subject: [PATCH 4/4] Remove an empty line --- src/styles/utils/index.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts index 8a41e6882365..a2ca4c508320 100644 --- a/src/styles/utils/index.ts +++ b/src/styles/utils/index.ts @@ -291,7 +291,6 @@ function getBackgroundColorAndFill(backgroundColor: string, fill: string): SVGAv function getEReceiptColorCode(transaction: OnyxEntry): EReceiptColorName { // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing const transactionID = transaction?.parentTransactionID || transaction?.transactionID; - if (!transactionID) { return CONST.ERECEIPT_COLORS.YELLOW; }