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.

  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."

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

}