feat: Add Phone field

package.json

@@ -34,6 +34,7 @@
     "prettier": "^1.19.1"
   },
   "dependencies": {
-    "@react-navigation/native": "^5.0.9"
+    "@react-navigation/native": "^5.0.9",
+    "react-native-masked-text": "^1.13.0"
   }
 }

src/components/Form/PhoneField.js

@@ -0,0 +1,55 @@
+import React from 'react'
+import { TextInputMask } from 'react-native-masked-text'
+import { View } from 'react-native'
+
+import TextInput from '../TextInput'
+import Label from '../Label'
+import Spacer from '../Spacer'
+import Footnote from '../Footnote'
+import { useTheme } from '../../lib/theme'
+
+const PhoneInput = props => (
+  <TextInputMask
+    type={'cel-phone'}
+    options={{
+      maskType: 'BRL',
+      withDDD: true,
+      dddMask: '(99) '
+    }}
+    customTextInput={TextInput}
+    {...props}
+  />
+)
+
+const PhoneField = ({
+  field = {},
+  placeholder,
+  form = {},
+  label,
+  ...props
+}) => {
+  const { colors } = useTheme()
+  const { name, value } = field
+  const { error, handleChange, handleBlur } = form
+  const baseErrorStyle = {
+    color: colors.negative,
+  }
+  return (
+    <View>
+      <Label>{label || name}</Label>
+      <Spacer size="xs" />
+      <PhoneInput
+        error={error}
+        placeholder={placeholder}
+        onChangeText={handleChange && handleChange(name)}
+        onBlur={handleChange && handleBlur(name)}
+        value={value}
+        {...props}
+      />
+      <Footnote style={baseErrorStyle}>{error}</Footnote>
+      <Spacer size="s" />
+    </View>
+  )
+}
+
+export default PhoneField

src/components/TextField.js

@@ -10,7 +10,8 @@ function TextField({
   field = {},
   placeholder,
   form ={},
-  label
+  label,
+  ...props
 }) {
   const {colors} = useTheme()
   const {name, value} = field
@@ -28,6 +29,7 @@ function TextField({
         onChangeText={handleChange && handleChange(name)}
         onBlur={handleChange && handleBlur(name)}
         value={value}
+        {...props}
       />
       <Footnote style={baseErrorStyle}>{error}</Footnote>
       <Spacer size="s" />

src/components/TextInput.js

@@ -1,13 +1,12 @@
-import React, {useState} from 'react'
+import React from 'react'
 import {TextInput as BaseTextInput} from 'react-native'
 import {useTheme} from '../lib/theme'
 
 function TextInput({style, error, ...props}) {
-  const [focus, setFocus] = useState(false)
   const {colors} = useTheme()
   const baseStyle = {
     padding: 12,
-    borderColor: error ? colors.negative : focus ? colors.link : colors.border,
+    borderColor: error ? colors.negative : colors.border,
     borderWidth: 1,
     borderRadius: 14,
     fontSize: 16,
@@ -21,8 +20,6 @@ function TextInput({style, error, ...props}) {
   return (
     <BaseTextInput
       style={[baseStyle, style]}
-      onFocus={() => setFocus(true)}
-      onBlur={() => setFocus(false)}
       placeholderTextColor={colors.placeholder}
       {...props}
     />

src/index.js

@@ -24,4 +24,5 @@ export {default as TextInput} from "./components/TextInput"
 export {default as Theme} from "./components/Theme"
 export {default as DrawerContent} from "./components/DrawerContent"
 export {default as Screen} from "./components/Screen"
+export {default as PhoneField} from "@vela/ui/src/components/Form/PhoneField"
 export {useTheme} from "./lib/theme"