Explore

Inputs/ Form Field

Figma

⁠

https://www.figma.com/file/ZyjX1N95LswyRecxKwg9Xs/Componentes-Fintech---Alinhamento-Dev?node-id=0-1&t=GlecBquzyZ3LMOKc-0⁠

⁠

Props

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:

enum MaskTypes {

CEP = "CEP",

PHONE = "PHONE",

CPF = "CPF",

CNPJ = "CNPJ",

DATE = "DATE",

CPF_CNPJ = "CPF_CNPJ",

CNAE = "CNAE",

STATE_INSCRIPTION = "STATE_INSCRIPTION",

UF = "UF",

MONEY = "MONEY",

BANK_BILLET = "BANK_BILLET",

EXCHANGE_BILLET = "EXCHANGE_BILLET",

FOUR_DIGITS = "FOUR_DIGITS",

DEFAUlT_CARD_NUMBER = "DEFAUlT_CARD_NUMBER",

AMEX_CARD_NUMBER = "AMEX_CARD_NUMBER",

DEFAULT_SECURITY_CODE = "DEFAULT_SECURITY_CODE",

AMEX_SECURITY_CODE = "AMEX_SECURITY_CODE",

SHORTEN_MONTH_YEAR_DATE = "SHORTEN_MONTH_YEAR_DATE"

}

Importação Direta

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';

Utilização

<Form

schema={CONTACTLESS_SCHEMA}

onSubmit={onSubmit}

extraValidationData={{currentValue: 50.0}}

<FormField

label="Label de Teste"

name="value"

mask={MaskTypes.MONEY}

placeHolder="0,00"

<Button

label={translate(

`profileSettings.Contactless.editLimitButtonLabel`,

)}

isSubmit

</Form>

⁠

⁠

Want to print your doc?
This is not the way.

Try clicking the ··· in the right corner or using a keyboard shortcut (

CtrlP

) instead.