add fix for keyboard (#593)

BirthdayResearch · Aug 15, 2021 · a4b7c4a · a4b7c4a
1 parent 77ca4a5
commit a4b7c4a
Show file tree

Hide file tree

Showing 7 changed files with 134 additions and 15 deletions.
diff --git a/app/components/NumberTextInput.test.tsx 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 = (
+      <NumberTextInput value={123} editable={true} placeholder='Enter an amount' />
+    )
+    const rendered = render(component)
+    expect(rendered.toJSON()).toMatchSnapshot()
+  })
+
+  it(`should match snapshot with period comma locale`, () => {
+    (Localization as any).decimalSeparator = ','
+    const component = (
+      <NumberTextInput value={123} editable={true} placeholder='Enter an amount' />
+    )
+    const rendered = render(component)
+    expect(rendered.toJSON()).toMatchSnapshot()
+  })
+
+  it(`should match snapshot with period unknown locale`, () => {
+    (Localization as any).decimalSeparator = ' '
+    const component = (
+      <NumberTextInput value={123} editable={true} placeholder='Enter an amount' />
+    )
+    const rendered = render(component)
+    expect(rendered.toJSON()).toMatchSnapshot()
+  })
+})
diff --git a/app/components/NumberTextInput.tsx 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<TextInputProps>): JSX.Element {
+  const keyboardType = Localization.decimalSeparator === '.' ? 'numeric' : 'default'
+  return (
+    <TextInput
+      placeholderTextColor='rgba(0, 0, 0, 0.4)'
+      {...props}
+      keyboardType={keyboardType}
+    />
+  )
+}
diff --git a/app/components/__snapshots__/NumberTextInput.test.tsx.snap b/app/components/__snapshots__/NumberTextInput.test.tsx.snap
diff --git 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<ViewStyle>, mode: 'input'
     <View style={[tailwind('flex-col w-full'), props.style]}>
       <SectionTitle text={title.toUpperCase()} testID={`text_input_convert_from_${props.mode}_text`} />
       <View style={tailwind('flex-row w-full bg-white items-center pl-4 pr-4')}>
-        <TextInput
-          placeholderTextColor='rgba(0, 0, 0, 0.4)'
+        <NumberTextInput
           placeholder={translate('screens/Convert', 'Enter an amount')}
           testID={`text_input_convert_from_${props.mode}`}
           value={props.current}
           style={tailwind('flex-1 mr-4 text-gray-500 px-1 py-4')}
-          keyboardType='numeric'
           editable={props.mode === 'input'}
           onChange={event => {
             if (props.onChange !== undefined) {

diff --git 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 } }) => (
           <View style={tailwind('flex-row w-full border-b border-gray-100')}>
-            <TextInput
-              placeholderTextColor='rgba(0, 0, 0, 0.4)'
+            <NumberTextInput
               testID='amount_input'
               style={tailwind('flex-grow p-4 bg-white')}
               autoCapitalize='none'
               onBlur={onBlur}
               onChangeText={onChange}
               value={value}
-              keyboardType='numeric'
               placeholder={translate('screens/SendScreen', 'Enter an amount')}
             />
             <View style={tailwind('flex-row bg-white pr-4 items-center')}>

diff --git 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
       />
       <View style={tailwind('flex-col w-full bg-white items-center')}>
         <View style={tailwind('w-full flex-row items-center')}>
-          <TextInput
-            placeholderTextColor='rgba(0, 0, 0, 0.4)'
+          <NumberTextInput
             testID={`token_input_${props.type}`}
             style={tailwind('flex-1 mr-4 text-gray-500 bg-white p-4')}
             value={props.current}
-            keyboardType='numeric'
             onChangeText={txt => 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
@@ -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 } }) => (
           <View style={tailwind('flex-row w-full border-b border-gray-100')}>
-            <TextInput
-              placeholderTextColor='rgba(0, 0, 0, 0.4)'
+            <NumberTextInput
               style={tailwind('flex-grow p-4 bg-white')}
               autoCapitalize='none'
               onBlur={onBlur}
@@ -231,7 +231,6 @@ function TokenRow (form: TokenForm): JSX.Element {
                 } else onChange(e)
               }}
               value={value}
-              keyboardType='numeric'
               placeholder={translate('screens/PoolSwapScreen', 'Enter an amount')}
               testID={`text_input_${controlName}`}
             />