Documentação do Componente SelectCityAsync

O SelectCityAsync é um componente React que fornece uma caixa de seleção para buscar cidades assincronamente através de uma API.

Importação

Importe o componente SelectCityAsync para utilizá-lo em seu projeto:

import { SelectCityAsync } from 'adasi_components';

Props

O componente SelectCityAsync aceita as seguintes props:

| Prop | Tipo | Descrição | | ----------- | ----------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | | apiRoute | string | Opcional. Rota da API para buscar as cidades. | | onChange | (e: { target: { name: string; value: unknown } }) => void | Função para lidar com a mudança de valor da caixa de seleção. | | onBlur | (e: { target: { name: string; value: unknown } }) => void | Função para lidar com o evento "blur" (quando o campo perde o foco). | | value | { value: string; label: string } | O valor atual selecionado na caixa de seleção. | | id | string | Um identificador único para a caixa de seleção. | | isDark | boolean | Opcional. Indica se o componente deve ser renderizado em modo escuro. | | ...rest | Props | Outras props disponíveis do componente react-select - Lista de Props. |

Exemplo de Uso

import React, { useState } from 'react';
import { SelectCityAsync } from './caminho/para/SelectCityAsync';

const MyComponent = () => {
  const [selectedCity, setSelectedCity] = useState(null);

  const handleCityChange = (selectedOption) => {
    setSelectedCity(selectedOption);
  };

  return (
    <div>
      <h2>Selecione uma cidade:</h2>
      <SelectCityAsync
        apiRoute="https://www.example.com.br/cities"
        onChange={handleCityChange}
        value={selectedCity}
        id="citySelect"
        isDark={true}
      />
    </div>
  );
};

export default MyComponent;

Detalhes de Implementação

O componente SelectCityAsync utiliza a biblioteca react-select para renderizar a caixa de seleção. Ele faz uma busca assincrona de cidades através da API especificada na prop apiRoute e retorna as opções disponíveis para seleção.

Notas

• Certifique-se de fornecer uma rota válida na prop apiRoute para que a busca das cidades funcione corretamente.
• A prop isDark é opcional, e se definida como true, aplicará um estilo de modo escuro ao componente. Caso contrário, o estilo padrão será aplicado.

Documentação do Componente CnpjInput

O CnpjInput é um componente React que fornece uma caixa de entrada para inserir um CNPJ e formata automaticamente o valor conforme o usuário digita.

Importação

Importe o componente `CnpjInput` para utilizá-lo em seu projeto:

import { CnpjInput } from 'adasi_components';

Props

O componente CnpjInput aceita as seguintes props:

| Prop | Tipo | Descrição | | --------------- | ----------------------------------------------------- | --------------------------------------------------------------------- | | value | string | O valor do CNPJ na caixa de entrada. | | handleChange| (e: { target: { name: string; value: string } }) => void | Função para lidar com a mudança de valor da caixa de entrada do CNPJ. | | inputId | string | Um identificador único para a caixa de entrada. | | ...rest | InputProps | Outras props disponíveis do componente reactstrap Input. |

Exemplo de Uso

import React, { useState } from 'react';
import { CnpjInput } from './caminho/para/CnpjInput';

const MyComponent = () => {
  const [cnpj, setCnpj] = useState('');

  const handleCnpjChange = (e) => {
    setCnpj(e.target.value);
  };

  return (
    <div>
      <h2>Digite um CNPJ:</h2>
      <CnpjInput
        value={cnpj}
        handleChange={handleCnpjChange}
        inputId="cnpjInput"
        placeholder="Digite o CNPJ"
      />
    </div>
  );
};

export default MyComponent;

Detalhes de Implementação

O componente CnpjInput utiliza a biblioteca reactstrap para renderizar a caixa de entrada do CNPJ. Ele também inclui a função replace para formatar o valor do CNPJ conforme o usuário digita.

Notas

• Certifique-se de fornecer um identificador único na prop inputId para a caixa de entrada do CNPJ.
• O componente exibe um placeholder padrão "Digite o CNPJ", mas você pode personalizá-lo utilizando a prop placeholder.

Documentação do Componente CpfInput

O CpfInput é um componente React que fornece uma caixa de entrada para inserir um CPF e formata automaticamente o valor conforme o usuário digita.

Importação

Importe o componente `CnpjInput` para utilizá-lo em seu projeto:

import { CpfInput } from 'adasi_components';

Props

O componente CpfInput aceita as seguintes props:

| Prop | Tipo | Descrição | | --------------- | ----------------------------------------------------- | --------------------------------------------------------------------- | | value | string | O valor do CPF na caixa de entrada. | | handleChange| (e: { target: { name: string; value: string } }) => void | Função para lidar com a mudança de valor da caixa de entrada do CPF. | | inputId | string | Um identificador único para a caixa de entrada. | | ...rest | InputProps | Outras props disponíveis do componente reactstrap Input. |

Exemplo de Uso

import React, { useState } from 'react';
import { CpfInput } from './caminho/para/CpfInput';

const MyComponent = () => {
  const [cpf, setCpf] = useState('');

  const handleCpfChange = (e) => {
    setCpf(e.target.value);
  };

  return (
    <div>
      <h2>Digite um CPF:</h2>
      <CpfInput
        value={cpf}
        handleChange={handleCpfChange}
        inputId="cpfInput"
        placeholder="Digite o CPF"
      />
    </div>
  );
};

export default MyComponent;

Detalhes de Implementação

O componente CpfInput utiliza a biblioteca reactstrap para renderizar a caixa de entrada do CPF. Ele também inclui as funções hasCpfSize e replace para formatar o valor do CPF conforme o usuário digita.

Notas

• Certifique-se de fornecer um identificador único na prop inputId para a caixa de entrada do CPF.
• O componente exibe um placeholder padrão "Digite o CPF", mas você pode personalizá-lo utilizando a prop placeholder.

Documentação do Componente CpfCnpjInput

O CpfCnpjInput é um componente React que fornece uma caixa de entrada para inserir um CPF ou CNPJ e formata automaticamente o valor conforme o usuário digita. Ele é um componente de seleção entre CpfInput e CnpjInput, que são componentes responsáveis por formatar e tratar entradas de CPF e CNPJ, respectivamente.

Importação

Importe o componente `CnpjInput` para utilizá-lo em seu projeto:

import { CpfCnpjInput } from 'adasi_components';

Props

O componente CpfCnpjInput aceita as seguintes props:

| Prop | Tipo | Descrição | | --------------- | ----------------------------------------------------- | ------------------------------------------------------------------------------ | | isCpf | boolean | Opcional. Indica se o componente deve ser renderizado como CpfInput ou CnpjInput. O valor padrão é true (CpfInput). | | value | string | O valor do CPF ou CNPJ na caixa de entrada. | | handleChange| (e: { target: { name: string; value: string } }) => void | Função para lidar com a mudança de valor da caixa de entrada do CPF ou CNPJ. | | inputId | string | Um identificador único para a caixa de entrada. | | ...rest | InputProps | Outras props disponíveis do componente reactstrap Input. |

Exemplo de Uso

import React, { useState } from 'react';
import { CpfCnpjInput } from './caminho/para/CpfCnpjInput';

const MyComponent = () => {
  const [document, setDocument] = useState('');

  const handleDocumentChange = (e) => {
    setDocument(e.target.value);
  };

  return (
    <div>
      <h2>Digite um CPF ou CNPJ:</h2>
      <CpfCnpjInput
        value={document}
        handleChange={handleDocumentChange}
        inputId="documentInput"
        placeholder="Digite o CPF ou CNPJ"
      />
    </div>
  );
};

export default MyComponent;

Detalhes de Implementação

O componente CpfCnpjInput utiliza a biblioteca reactstrap para renderizar a caixa de entrada do CPF ou CNPJ. Ele decide qual componente utilizar (CpfInput ou CnpjInput) com base na prop isCpf.

Notas

• Certifique-se de fornecer um identificador único na prop inputId para a caixa de entrada do CPF ou CNPJ.
• O componente exibe um placeholder padrão "Digite o CPF ou CNPJ", mas você pode personalizá-lo utilizando a prop placeholder.

Documentação do Componente SelectInput

O SelectInput é um componente React que fornece uma caixa de seleção personalizada. Ele utiliza a biblioteca react-select para renderizar a caixa de seleção e permite a escolha de uma ou várias opções, dependendo da prop isMulti.

Instalação

Para utilizar o componente, você precisa ter o react-select instalado em seu projeto. Caso ainda não o tenha instalado, utilize o seguinte comando:

npm install react-select

Importação

Importe o componente `CnpjInput` para utilizá-lo em seu projeto:

import { selectInput } from 'adasi_components';

Props

O componente SelectInput aceita as seguintes props:

| Prop | Tipo | Descrição | | -------------- | ----------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | | invalid | boolean | Opcional. Indica se o componente está inválido ou não. O valor padrão é false. | | options | Option[] | As opções disponíveis para seleção no formato de um array de objetos com as propriedades value e label. | | isDark | boolean | Opcional. Indica se o componente deve ser renderizado em modo escuro ou não. O valor padrão é true. | | inputId | string | Um identificador único para o componente de seleção. | | isMulti | boolean | Opcional. Indica se o componente deve permitir seleção múltipla ou não. O valor padrão é false. | | onChange | (target: any) => any | Função para lidar com a mudança de valor do componente de seleção. | | onBlur | (target: any) => any | Função para lidar com o evento de perda de foco do componente de seleção. | | ...rest | Props | Outras props disponíveis do componente react-select. |

Exemplo de Uso

import React, { useState } from 'react';
import { SelectInput } from './caminho/para/SelectInput';

const MyComponent = () => {
  const [selectedOption, setSelectedOption] = useState(null);

  const options = [
    { value: 'option1', label: 'Opção 1' },
    { value: 'option2', label: 'Opção 2' },
    { value: 'option3', label: 'Opção 3' },
  ];

  const handleSelectChange = (target) => {
    setSelectedOption(target.value);
  };

  return (
    <div>
      <h2>Selecione uma opção:</h2>
      <SelectInput
        options={options}
        isMulti={false}
        isDark={true}
        inputId="selectOption"
        value={selectedOption}
        onChange={handleSelectChange}
        placeholder="Selecione uma opção..."
      />
    </div>
  );
};

export default MyComponent;

Detalhes de Implementação

O componente SelectInput utiliza a biblioteca react-select para renderizar a caixa de seleção personalizada. Ele inclui a função convertEventSelectToTarget para converter o evento do Select em um objeto "target", que pode ser usado para manipular os dados selecionados.

Notas

• Certifique-se de fornecer um identificador único na prop inputId para o componente de seleção.
• O componente exibe um placeholder padrão "Selecione uma opção...", mas você pode personalizá-lo utilizando a prop placeholder.

Documentação do Componente ZipCodeInput

O ZipCodeInput é um componente React que fornece uma caixa de entrada para inserir um CEP e automaticamente completa as informações de logradouro, bairro, cidade, estado, etc., através da API de consulta de CEP do ViaCEP.

Importação

import { ZipCodeInput } from 'adasi_components';

Props

O componente ZipCodeInput aceita as seguintes props:

| Prop | Tipo | Descrição | | -------------- | ---------------------------------------- | -------------------------------------------------------------------------------------------------------- | | changeInputs| (e: IApiResponseZipcode) => void | Função para lidar com a resposta da API de consulta de CEP, passando as informações obtidas do CEP. | | ...rest | InputProps | Outras props disponíveis do componente reactstrap Input. |

Exemplo de Uso

import React, { useState } from 'react';
import { ZipCodeInput } from './caminho/para/ZipCodeInput';

const MyComponent = () => {
  const [zipcodeInfo, setZipcodeInfo] = useState({});

  const handleZipcodeChange = (zipcodeData) => {
    setZipcodeInfo(zipcodeData);
  };

  return (
    <div>
      <h2>Digite um CEP:</h2>
      <ZipCodeInput
        value={zipcodeInfo.cep}
        changeInputs={handleZipcodeChange}
        inputId="zipcodeInput"
        placeholder="Digite o CEP"
      />
      <div>
        <h3>Informações do CEP:</h3>
        <p>Logradouro: {zipcodeInfo.logradouro}</p>
        <p>Bairro: {zipcodeInfo.bairro}</p>
        <p>Cidade: {zipcodeInfo.localidade}</p>
        <p>Estado: {zipcodeInfo.uf}</p>
      </div>
    </div>
  );
};

export default MyComponent;

Detalhes de Implementação

O componente ZipCodeInput utiliza a biblioteca cleave.js para formatar o CEP e inclui a função validate para obter informações do CEP através da API do ViaCEP.

Notas

• Certifique-se de fornecer um identificador único na prop inputId para a caixa de entrada do CEP.
• O componente exibe um placeholder padrão "Digite o CEP para pesquisar", mas você pode personalizá-lo utilizando a prop placeholder. `