@wecareu/input-masked

Campo de texto com máscara dinâmica para o design system WeCareU. Aplica formatação visual automática (CPF, CNPJ, CEP, telefone, cartão de crédito, data) enquanto mantém o valor bruto sem máscara no onChangeText.

Instalação

yarn add @wecareu/input-masked

Peer dependencies

yarn add @wecareu/input-text @wecareu/theme @wecareu/tokens

Uso básico

import { InputMasked } from '@wecareu/input-masked'

// Com preset
<InputMasked
  preset="cpf"
  value={cpf}
  onChangeText={setCpf}
  label="CPF"
/>

// Com máscara customizada
<InputMasked
  mask="999.999.999-99"
  value={cpf}
  onChangeText={setCpf}
  label="CPF"
/>

Presets disponíveis

| Preset | Máscara | Exemplo de exibição | Valor bruto | |--------|---------|---------------------|-------------| | cpf | 999.999.999-99 | 123.456.789-09 | 12345678909 | | cnpj | 99.999.999/9999-99 | 12.345.678/0001-90 | 12345678000190 | | cep | 99999-999 | 01310-100 | 01310100 | | phone | (99) 9999-9999 / (99) 99999-9999 | (11) 98765-4321 | 11987654321 | | credit-card | 9999 9999 9999 9999 | 4111 1111 1111 1111 | 4111111111111111 | | date | 99/99/9999 | 31/12/2025 | 31122025 |

O preset phone alterna automaticamente entre a máscara de 8 e 9 dígitos conforme o usuário digita.

Máscara customizada

Use os tokens abaixo para montar qualquer padrão:

| Token | Aceita | |-------|--------| | 9 | Dígito [0-9] | | A | Letra [a-zA-Z] | | * | Alfanumérico [a-zA-Z0-9] |

Qualquer outro caractere é tratado como literal e inserido automaticamente.

// Placa de veículo (Mercosul): AAA9A99
<InputMasked mask="AAA9A99" value={placa} onChangeText={setPlaca} label="Placa" />

// Processo judicial: 9999999-99.9999.9.99.9999
<InputMasked
  mask="9999999-99.9999.9.99.9999"
  value={processo}
  onChangeText={setProcesso}
  label="Número do processo"
/>

Props

InputMasked herda todas as props de InputText (exceto formatter, parser e type), acrescentando:

| Prop | Tipo | Padrão | Descrição | |------|------|--------|-----------| | preset | 'cpf' \| 'cnpj' \| 'cep' \| 'phone' \| 'credit-card' \| 'date' | — | Preset predefinido. Quando informado junto com mask, mask tem precedência | | mask | string | — | Padrão de máscara customizado com tokens 9, A, * |

Props herdadas relevantes (InputText)

| Prop | Tipo | Padrão | Descrição | |------|------|--------|-----------| | value | string | — | Valor bruto controlado (sem máscara) | | onChangeText | (value: string) => void | — | Callback com o valor bruto (sem máscara) | | label | string | — | Label do campo | | placeholder | string | — | Placeholder exibido quando vazio | | disabled | boolean | false | Bloqueia interação | | readonly | boolean | false | Somente leitura | | validator | (value: string) => boolean | — | Validação customizada (recebe valor bruto) | | validatorMessage | string | — | Mensagem exibida quando validator retorna false | | onValidation | (isValid: boolean) => void | — | Callback com resultado da validação | | validateOnBlur | boolean | true | Valida ao perder foco | | inputError | boolean | false | Força estado de erro externamente | | errorMessage | string | — | Mensagem usada com inputError | | maxLength | number | — | Sobrescreve o limite de caracteres do preset/mask | | leftIcon | InputTextIconProps | — | Ícone à esquerda | | rightIcon | InputTextIconProps | — | Ícone à direita | | testID | string | — | Identificador para testes |

Validação

O validator recebe o valor bruto (sem máscara), facilitando qualquer lógica de validação:

function validarCPF(cpf: string): boolean {
  if (cpf.length !== 11) return false
  // ... algoritmo de verificação dos dígitos verificadores
  return true
}

<InputMasked
  preset="cpf"
  value={cpf}
  onChangeText={setCpf}
  label="CPF"
  validator={validarCPF}
  validatorMessage="CPF inválido"
  onValidation={(isValid) => setFormValid(isValid)}
/>

A validação é acionada no onBlur por padrão e exibe a mensagem de erro com animação de shake.

Exemplos

// CPF com validação
<InputMasked
  preset="cpf"
  value={cpf}
  onChangeText={setCpf}
  label="CPF"
  validator={(v) => v.length === 11}
  validatorMessage="CPF deve ter 11 dígitos"
/>

// Telefone com ícone
<InputMasked
  preset="phone"
  value={phone}
  onChangeText={setPhone}
  label="Telefone"
  leftIcon={{ name: 'phone' }}
/>

// Data de nascimento com limite de data
<InputMasked
  preset="date"
  value={birthDate}
  onChangeText={setBirthDate}
  label="Data de nascimento"
  placeholder="DD/MM/AAAA"
/>

// Placa customizada
<InputMasked
  mask="AAA-9999"
  value={plate}
  onChangeText={setPlate}
  label="Placa"
/>

// Desabilitado
<InputMasked
  preset="cpf"
  value="12345678909"
  onChangeText={() => {}}
  disabled
  label="CPF"
/>

Notas

• O valor armazenado em value e retornado em onChangeText é sempre bruto (sem os literais da máscara).
• Quando mask e preset são informados simultaneamente, mask tem precedência.
• Se nenhum dos dois for informado, o componente exibe um InputText simples e loga um aviso em modo de desenvolvimento.