From 6cd6194de98f08fe1545b42008eb36796dadfc5e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Barbara=20Gawe=C5=82-Kucab?= Date: Tue, 28 May 2024 10:40:49 +0200 Subject: [PATCH] move isAnimatedTextInputRef function to common file --- src/components/AmountForm.tsx | 5 +---- src/components/EmojiPicker/EmojiPickerMenu/index.tsx | 5 +---- src/components/MoneyRequestAmountInput.tsx | 5 +---- .../TextInput/BaseTextInput/isAnimatedTextInoutRef.ts | 6 ++++++ src/pages/iou/MoneyRequestAmountForm.tsx | 5 +---- src/pages/signin/LoginForm/BaseLoginForm.tsx | 7 ++----- 6 files changed, 12 insertions(+), 21 deletions(-) create mode 100644 src/components/TextInput/BaseTextInput/isAnimatedTextInoutRef.ts diff --git a/src/components/AmountForm.tsx b/src/components/AmountForm.tsx index f5d460ed5caa..0d05c54029cf 100644 --- a/src/components/AmountForm.tsx +++ b/src/components/AmountForm.tsx @@ -12,7 +12,7 @@ import * as MoneyRequestUtils from '@libs/MoneyRequestUtils'; import CONST from '@src/CONST'; import BigNumberPad from './BigNumberPad'; import FormHelpMessage from './FormHelpMessage'; -import type {AnimatedTextInputRef} from './RNTextInput'; +import isAnimatedTextInputRef from './TextInput/BaseTextInput/isAnimatedTextInoutRef'; import type {BaseTextInputProps, BaseTextInputRef} from './TextInput/BaseTextInput/types'; import TextInputWithCurrencySymbol from './TextInputWithCurrencySymbol'; import type TextInputWithCurrencySymbolProps from './TextInputWithCurrencySymbol/types'; @@ -52,9 +52,6 @@ const getNewSelection = (oldSelection: {start: number; end: number}, prevLength: return {start: cursorPosition, end: cursorPosition}; }; -const isAnimatedTextInputRef = (textInput: React.MutableRefObject) => - textInput.current && 'isFocused' in textInput.current && (textInput.current as AnimatedTextInputRef).isFocused(); - const AMOUNT_VIEW_ID = 'amountView'; const NUM_PAD_CONTAINER_VIEW_ID = 'numPadContainerView'; const NUM_PAD_VIEW_ID = 'numPadView'; diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.tsx b/src/components/EmojiPicker/EmojiPickerMenu/index.tsx index 87cd50bd3cdb..26a81f787123 100755 --- a/src/components/EmojiPicker/EmojiPickerMenu/index.tsx +++ b/src/components/EmojiPicker/EmojiPickerMenu/index.tsx @@ -5,9 +5,9 @@ import type {ForwardedRef} from 'react'; import {View} from 'react-native'; import {scrollTo} from 'react-native-reanimated'; import EmojiPickerMenuItem from '@components/EmojiPicker/EmojiPickerMenuItem'; -import type {AnimatedTextInputRef} from '@components/RNTextInput'; import Text from '@components/Text'; import TextInput from '@components/TextInput'; +import isAnimatedTextInputRef from '@components/TextInput/BaseTextInput/isAnimatedTextInoutRef'; import type {BaseTextInputRef} from '@components/TextInput/BaseTextInput/types'; import useArrowKeyFocusManager from '@hooks/useArrowKeyFocusManager'; import useLocalize from '@hooks/useLocalize'; @@ -28,9 +28,6 @@ import useEmojiPickerMenu from './useEmojiPickerMenu'; const throttleTime = Browser.isMobile() ? 200 : 50; -const isAnimatedTextInputRef = (textInput: React.MutableRefObject) => - textInput.current && 'isFocused' in textInput.current && (textInput.current as AnimatedTextInputRef).isFocused(); - function EmojiPickerMenu({onEmojiSelected, activeEmoji}: EmojiPickerMenuProps, ref: ForwardedRef) { const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); diff --git a/src/components/MoneyRequestAmountInput.tsx b/src/components/MoneyRequestAmountInput.tsx index 5ac3ee347cb9..03aaf460fe0f 100644 --- a/src/components/MoneyRequestAmountInput.tsx +++ b/src/components/MoneyRequestAmountInput.tsx @@ -7,7 +7,7 @@ import * as CurrencyUtils from '@libs/CurrencyUtils'; import getOperatingSystem from '@libs/getOperatingSystem'; import * as MoneyRequestUtils from '@libs/MoneyRequestUtils'; import CONST from '@src/CONST'; -import type {AnimatedTextInputRef} from './RNTextInput'; +import isAnimatedTextInputRef from './TextInput/BaseTextInput/isAnimatedTextInoutRef'; import type {BaseTextInputRef} from './TextInput/BaseTextInput/types'; import TextInputWithCurrencySymbol from './TextInputWithCurrencySymbol'; @@ -90,9 +90,6 @@ const getNewSelection = (oldSelection: Selection, prevLength: number, newLength: return {start: cursorPosition, end: cursorPosition}; }; -const isAnimatedTextInputRef = (textInput: React.MutableRefObject) => - textInput.current && 'isFocused' in textInput.current && (textInput.current as AnimatedTextInputRef).isFocused(); - function MoneyRequestAmountInput( { amount = 0, diff --git a/src/components/TextInput/BaseTextInput/isAnimatedTextInoutRef.ts b/src/components/TextInput/BaseTextInput/isAnimatedTextInoutRef.ts new file mode 100644 index 000000000000..e596b91d95b9 --- /dev/null +++ b/src/components/TextInput/BaseTextInput/isAnimatedTextInoutRef.ts @@ -0,0 +1,6 @@ +import type {AnimatedTextInputRef} from '@components/RNTextInput'; +import type {BaseTextInputRef} from './types'; + +export default function isAnimatedTextInputRef(textInput: React.MutableRefObject): boolean | null { + return textInput.current && 'isFocused' in textInput.current && (textInput.current as AnimatedTextInputRef).isFocused(); +} diff --git a/src/pages/iou/MoneyRequestAmountForm.tsx b/src/pages/iou/MoneyRequestAmountForm.tsx index b363d13af98f..755efc12ccdb 100644 --- a/src/pages/iou/MoneyRequestAmountForm.tsx +++ b/src/pages/iou/MoneyRequestAmountForm.tsx @@ -8,9 +8,9 @@ import Button from '@components/Button'; import FormHelpMessage from '@components/FormHelpMessage'; import MoneyRequestAmountInput from '@components/MoneyRequestAmountInput'; import type {MoneyRequestAmountInputRef} from '@components/MoneyRequestAmountInput'; -import type {AnimatedTextInputRef} from '@components/RNTextInput'; import ScrollView from '@components/ScrollView'; import SettlementButton from '@components/SettlementButton'; +import isAnimatedTextInputRef from '@components/TextInput/BaseTextInput/isAnimatedTextInoutRef'; import useLocalize from '@hooks/useLocalize'; import usePrevious from '@hooks/usePrevious'; import useThemeStyles from '@hooks/useThemeStyles'; @@ -67,9 +67,6 @@ type MoneyRequestAmountFormProps = { selectedTab?: SelectedTabRequest; }; -const isAnimatedTextInputRef = (textInput: React.MutableRefObject) => - textInput.current && 'isFocused' in textInput.current && (textInput.current as AnimatedTextInputRef).isFocused(); - const isAmountInvalid = (amount: string) => !amount.length || parseFloat(amount) < 0.01; const isTaxAmountInvalid = (currentAmount: string, taxAmount: number, isTaxAmountForm: boolean) => isTaxAmountForm && Number.parseFloat(currentAmount) > CurrencyUtils.convertToFrontendAmount(Math.abs(taxAmount)); diff --git a/src/pages/signin/LoginForm/BaseLoginForm.tsx b/src/pages/signin/LoginForm/BaseLoginForm.tsx index 780998cfb6e6..07e1ef928ac2 100644 --- a/src/pages/signin/LoginForm/BaseLoginForm.tsx +++ b/src/pages/signin/LoginForm/BaseLoginForm.tsx @@ -7,11 +7,11 @@ import {withOnyx} from 'react-native-onyx'; import type {OnyxEntry} from 'react-native-onyx'; import DotIndicatorMessage from '@components/DotIndicatorMessage'; import FormAlertWithSubmitButton from '@components/FormAlertWithSubmitButton'; -import type {AnimatedTextInputRef} from '@components/RNTextInput'; import AppleSignIn from '@components/SignInButtons/AppleSignIn'; import GoogleSignIn from '@components/SignInButtons/GoogleSignIn'; import Text from '@components/Text'; import TextInput from '@components/TextInput'; +import isAnimatedTextInputRef from '@components/TextInput/BaseTextInput/isAnimatedTextInoutRef'; import type {BaseTextInputRef} from '@components/TextInput/BaseTextInput/types'; import withToggleVisibilityView from '@components/withToggleVisibilityView'; import type {WithToggleVisibilityViewProps} from '@components/withToggleVisibilityView'; @@ -54,9 +54,6 @@ type BaseLoginFormProps = WithToggleVisibilityViewProps & BaseLoginFormOnyxProps const willBlurTextInputOnTapOutside = willBlurTextInputOnTapOutsideFunc(); -const isAnimatedTextInputRef = (textInput: React.MutableRefObject) => - textInput.current && 'isFocused' in textInput.current && (textInput.current as AnimatedTextInputRef).isFocused(); - function BaseLoginForm({account, credentials, closeAccount, blurOnSubmit = false, isVisible}: BaseLoginFormProps, ref: ForwardedRef) { const styles = useThemeStyles(); const {isOffline} = useNetwork(); @@ -204,7 +201,7 @@ function BaseLoginForm({account, credentials, closeAccount, blurOnSubmit = false if (!input.current) { return false; } - return (isAnimatedTextInputRef(input) ?? input.current.focus()) as boolean; + return !!isAnimatedTextInputRef(input); }, clearDataAndFocus(clearLogin = true) { if (!input.current) {