placeHolder : é uma propriedade opcional que recebe uma string
value : propriedade opcional que permite acessar o valor do input
label : propriedade opcional que recebe uma string com um texto que fica acima do input
error: propriedade opcional que recebe uma string de erro
testID : propriedade que recebe uma string para identificação do componente para ser usada no teste
ref : Refs fornecem uma forma de acessar os nós do DOM ou elementos React criados no método render
onChange() : propriedade que recebe uma função para controle de estado do componente
onFocusProps() : recebe uma função para ser executada no Focus do componente
type : recebe o tipo do input, que pode ser default ou textArea
mask : recebeo tipo de máscara do input
style : permite midifcar o estilo do componente
onRightIconPress() : recebe uma função a ser executada no clique do ícone direito
rightIconName : recebe o nome do ícone a ser exibido no lado direito do input
leftIconName : recebe o nome do ícone a ser exibido no lado esquerdo do input
showRightIcon: recebe um boolean que indica se o ícone direito deve ser exibido ou nãop
maxLength : recebe um mas tamanho do input
keyboardType : define o tipo de teclado a ser exibido no aparelho do Usuário
autoFocus : habilita o autoFocus do componente
Utilização
Existem duas abordagens na hora de utilizar um input:
A primeira, não é a maneira ideal, é importando o componente direto e utilizando onChange para controle de estado e value para acessar esse valor. Só é recomendado caso você precise fazer implementações bem específicas no seu input.
A outra maneira, caso ideal, é utilizando o form field. É um componente que faz referência direta com o Input, passando para este todas propriedades necessárias para sua renderização. Este deve ser utilizado dentro de <Form/> , e para seu devido funcionamento deve-se passar uma máscara, referente ao tipo de input. Estas máscaras podem ser as seguintes:
import {Input} from '@vizir-banking/banking-app-core/dist/fuel-design';
Utilização
<Input
leftIconName="search_debounce_icon"
value={searchTerm}
testID={tID('flatlist-gas-station-input-search')}
onChange={(text: string) => setSearchTerm(text)}
placeHolder="Pesquise alguma coisa"
/>
Importando Form Field
O exemplo abaixo é referente a utilização de um input de Valores em R$. Deve-se passar no Form o schema para validação desse formulário, a função a ser executada no submit onSubmit. Já para o FormField é importante atribuir um name , uma mask com a especificação do formulário, uma label e um placeHolder. Além disso, é necessário definir o botão com a propriedade isSubmit que só vai ser habilitado quando os dados estiverem preenchidos corretamentes dentro do form.
import {
Button,
FormField,
} from '@vizir-banking/banking-app-core/dist/fuel-design';