diff --git a/app/components/NumberTextInput.test.tsx b/app/components/NumberTextInput.test.tsx new file mode 100644 index 0000000000..1bb73b0a9c --- /dev/null +++ b/app/components/NumberTextInput.test.tsx @@ -0,0 +1,35 @@ +import { render } from "@testing-library/react-native"; +import * as Localization from 'expo-localization'; +import * as React from "react"; +import { NumberTextInput } from "./NumberTextInput" + +jest.mock('expo-localization') + +describe('NumberTextInput', () => { + it(`should match snapshot with period decimal locale`, () => { + (Localization as any).decimalSeparator = '.' + const component = ( + + ) + const rendered = render(component) + expect(rendered.toJSON()).toMatchSnapshot() + }) + + it(`should match snapshot with period comma locale`, () => { + (Localization as any).decimalSeparator = ',' + const component = ( + + ) + const rendered = render(component) + expect(rendered.toJSON()).toMatchSnapshot() + }) + + it(`should match snapshot with period unknown locale`, () => { + (Localization as any).decimalSeparator = ' ' + const component = ( + + ) + const rendered = render(component) + expect(rendered.toJSON()).toMatchSnapshot() + }) +}) diff --git a/app/components/NumberTextInput.tsx b/app/components/NumberTextInput.tsx new file mode 100644 index 0000000000..ab176ce7e3 --- /dev/null +++ b/app/components/NumberTextInput.tsx @@ -0,0 +1,15 @@ +import * as Localization from 'expo-localization' +import React from 'react' +import { TextInputProps } from 'react-native' +import { TextInput } from './index' + +export function NumberTextInput (props: React.PropsWithChildren): JSX.Element { + const keyboardType = Localization.decimalSeparator === '.' ? 'numeric' : 'default' + return ( + + ) +} diff --git a/app/components/__snapshots__/NumberTextInput.test.tsx.snap b/app/components/__snapshots__/NumberTextInput.test.tsx.snap new file mode 100644 index 0000000000..bf6f5e855c --- /dev/null +++ b/app/components/__snapshots__/NumberTextInput.test.tsx.snap @@ -0,0 +1,73 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`NumberTextInput should match snapshot with period comma locale 1`] = ` + +`; + +exports[`NumberTextInput should match snapshot with period decimal locale 1`] = ` + +`; + +exports[`NumberTextInput should match snapshot with period unknown locale 1`] = ` + +`; diff --git a/app/screens/AppNavigator/screens/Balances/screens/ConvertScreen.tsx b/app/screens/AppNavigator/screens/Balances/screens/ConvertScreen.tsx index d51c40fd20..abe39196a9 100644 --- a/app/screens/AppNavigator/screens/Balances/screens/ConvertScreen.tsx +++ b/app/screens/AppNavigator/screens/Balances/screens/ConvertScreen.tsx @@ -9,10 +9,11 @@ import { ScrollView, StyleProp, TouchableOpacity, ViewStyle } from 'react-native import NumberFormat from 'react-number-format' import { useSelector } from 'react-redux' import { Logging } from '../../../../../api' -import { Text, TextInput, View } from '../../../../../components' +import { Text, View } from '../../../../../components' import { Button } from '../../../../../components/Button' import { getTokenIcon } from '../../../../../components/icons/tokens/_index' import LoadingScreen from '../../../../../components/LoadingScreen' +import { NumberTextInput } from '../../../../../components/NumberTextInput' import { SectionTitle } from '../../../../../components/SectionTitle' import { AmountButtonTypes, SetAmountButton } from '../../../../../components/SetAmountButton' import { useWhaleApiClient } from '../../../../../contexts/WhaleContext' @@ -130,13 +131,11 @@ function ConversionIOCard (props: { style?: StyleProp, mode: 'input' - { if (props.onChange !== undefined) { diff --git a/app/screens/AppNavigator/screens/Balances/screens/SendScreen.tsx b/app/screens/AppNavigator/screens/Balances/screens/SendScreen.tsx index 0c529daea2..28df2d64ec 100644 --- a/app/screens/AppNavigator/screens/Balances/screens/SendScreen.tsx +++ b/app/screens/AppNavigator/screens/Balances/screens/SendScreen.tsx @@ -13,6 +13,7 @@ import { Text, TextInput } from '../../../../../components' import { Button } from '../../../../../components/Button' import { getTokenIcon } from '../../../../../components/icons/tokens/_index' import { IconLabelScreenType, InputIconLabel } from '../../../../../components/InputIconLabel' +import { NumberTextInput } from '../../../../../components/NumberTextInput' import { SectionTitle } from '../../../../../components/SectionTitle' import { AmountButtonTypes, SetAmountButton } from '../../../../../components/SetAmountButton' import { useNetworkContext } from '../../../../../contexts/NetworkContext' @@ -185,15 +186,13 @@ function AmountRow ({ token, control, onAmountButtonPress, fee }: AmountForm): J }} render={({ field: { onBlur, onChange, value } }) => ( - diff --git a/app/screens/AppNavigator/screens/Dex/DexAddLiquidity.tsx b/app/screens/AppNavigator/screens/Dex/DexAddLiquidity.tsx index b79b40c16f..bf65166892 100644 --- a/app/screens/AppNavigator/screens/Dex/DexAddLiquidity.tsx +++ b/app/screens/AppNavigator/screens/Dex/DexAddLiquidity.tsx @@ -6,11 +6,12 @@ import * as React from 'react' import { useCallback, useEffect, useState } from 'react' import { ScrollView } from 'react-native' import NumberFormat from 'react-number-format' -import { Text, TextInput, View } from '../../../../components' +import { Text, View } from '../../../../components' import { Button } from '../../../../components/Button' import { getTokenIcon } from '../../../../components/icons/tokens/_index' import { IconLabelScreenType, InputIconLabel } from '../../../../components/InputIconLabel' import LoadingScreen from '../../../../components/LoadingScreen' +import { NumberTextInput } from '../../../../components/NumberTextInput' import { SectionTitle } from '../../../../components/SectionTitle' import { AmountButtonTypes, SetAmountButton } from '../../../../components/SetAmountButton' import { usePoolPairsAPI } from '../../../../hooks/wallet/PoolPairsAPI' @@ -145,12 +146,10 @@ function TokenInput (props: { symbol: string, balance: BigNumber, current: strin /> - props.onChange(txt)} placeholder={translate('screens/AddLiquidity', 'Enter an amount')} /> diff --git a/app/screens/AppNavigator/screens/Dex/PoolSwap/PoolSwapScreen.tsx b/app/screens/AppNavigator/screens/Dex/PoolSwap/PoolSwapScreen.tsx index bf9c0b992e..a84fdc6f72 100644 --- a/app/screens/AppNavigator/screens/Dex/PoolSwap/PoolSwapScreen.tsx +++ b/app/screens/AppNavigator/screens/Dex/PoolSwap/PoolSwapScreen.tsx @@ -9,11 +9,12 @@ import { ScrollView, TouchableOpacity, View } from 'react-native' import NumberFormat from 'react-number-format' import { useSelector } from 'react-redux' import { Logging } from '../../../../../api' -import { Text, TextInput } from '../../../../../components' +import { Text } from '../../../../../components' import { Button } from '../../../../../components/Button' import { getTokenIcon } from '../../../../../components/icons/tokens/_index' import { IconLabelScreenType, InputIconLabel } from '../../../../../components/InputIconLabel' import LoadingScreen from '../../../../../components/LoadingScreen' +import { NumberTextInput } from '../../../../../components/NumberTextInput' import { SectionTitle } from '../../../../../components/SectionTitle' import { AmountButtonTypes, SetAmountButton } from '../../../../../components/SetAmountButton' import { useWhaleApiClient } from '../../../../../contexts/WhaleContext' @@ -220,8 +221,7 @@ function TokenRow (form: TokenForm): JSX.Element { rules={rules} render={({ field: { onBlur, onChange, value } }) => ( -