@logicamente.info/react-lgmt-input

React-Lgmt-Input

Este componente cria inputs mascarados para alguns dados utilizados em cadastros aqui no Brasil.

Ele também da uma base para a criação de inputs personalizados com suas próprias máscaras através de expressões regulares e permite determinar uma função de validação para o input.

Para uma demonstração, faça o download e execute yarn start.

Instalação

$ npm i -S @logicamente.info/react-lgmt-input # NPM user
$ yarn add @logicamente.info/react-lgmt-input # NPM user

Uso

import React from 'react';
import LgmtInput from '@logicamente.info/react-select-brasil';

export default class Demo extends React.Component {
  render() {
    return (
      <LgmtInput.CPF
        value={this.state.cpf}
        onChange={(e) => this.setState({ cpf: e.target.value })}>
    );
  }
}

Tipos implementados

Componente	Temática
LgmtInput.CommonInput	Componente base para a criação de novos componentes input, não é possível renderizar este componente diretamente
LgmtInput.AgenciaBancaria	Input formatado para número de agências bancárias
LgmtInput.BoletoBancário	Input formatado para números de boletos com 47 dígitos
LgmtInput.CEP	Input formatado para CEP brasileiro
LgmtInput.CNPJ	Input formatado para número de registro de pessoa jurídica
LgmtInput.ContaBancaria	Input formatado para contas bancárias
LgmtInput.ConvenioBancario	Input formatado para números de boletos com 48 dígitos (água, luz, telefone...)
LgmtInput.CPF	Input formatado para número de registro de pessoa física
LgmtInput.Documento	Input formatado para CPF ou CNPJ, adaptando-se de acordo com a quantidade dígitos inseridos
LgmtInput.Moeda	Input formatado para valores monetários, com duas casas decimais por padrão (prop digits="2")
LgmtInput.Telefone	Input formatado para telefones com DDD

Props

Este componente é um DOM Input padrão do HTML de texto, portanto todas as propriedades de um input[type="text"] são aplicáveis a este componente como, por exemplo, required.

Como criar seus próprios inputs

Para criar inputs com suas próprias opções e formatos, crie uma classe que extenda CommonInput e defina as propriedades conforme tabela a seguir.

Propriedade	Descrição	Exemplo
masksRegex	Demostra através de expressões regulares a evolução da aplicação da máscara	masksRegex = /(^(\d)|(\d)(\d)|(\d)(\d)(\d)|(\d)(\d)(\d)(\d)$)/g
masksReplacement	Informa como os grupos capturados pelas expressões regulares vão compor a máscara	masksReplacement = ["$2", "$4.$5", "$7.$8.$9", "$11.$12.$12-$13"]
length	Tamanho máximo permitido para o input desconsiderando os caracteres da máscara	length = 4
pattern	Expressão regular que validará o valor final do input depois de aplicada a máscara	pattern = /^(\d\.){3}\d$/
invalidMessage	Mensagem que será exibida caso o valor do input seja inválido utilizando a validação padrão do HTML5 (anterior ao evento submit)	invalidMessage = "Preencha corretamente."
validator	Uma função opcional executada durante a validação de pattern que avalia o valor do input para determinar sua validade	const v = this.state.value .replace(/\D/g, '') .split('').map((e) => parseInt(e)); const ultimoDigito = v.pop(); const somaDigitos = v.reduce((acc, cur) => acc + cur); return somaDigitos === ultimoDigito;

Exemplo completo de classe

import LgmtInput from '@logicamente.info/react-lgmt-input';

export default class MeuInput extends LgmtInput.CommonInput {

  masksRegex = /(^(\d)|(\d)(\d)|(\d)(\d)(\d)|(\d)(\d)(\d)(\d)$)/g;

  masksReplacement = ["$2", "$4.$5", "$7.$8.$9", "$11.$12.$12-$13"];

  length = 4;

  pattern = /^(\d\.){3}\d$/;

  invalidMessage = "Preencha corretamente.";

  validator: () => {
    const v = this.state.value
                .replace(/\D/g, '') // remove a mascara
                .split('').map((e) => parseInt(e)); // transforma em um vetor de int
    const ultimoDigito = v.pop(); // retira o ultimo digito
    const somaDigitos = v.reduce((acc, cur) => acc + cur); // soma os tres primeiros
    return somaDigitos === ultimoDigito;
  }

}