Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/vwapplications/vwapp-react-form

Campo para uso em projetos com a biblioteca react-final-form (React e ReactNative)
https://github.com/vwapplications/vwapp-react-form

bootstrap components fields final-form form react vwapp

Last synced: about 1 year ago
JSON representation

Campo para uso em projetos com a biblioteca react-final-form (React e ReactNative)

Awesome Lists containing this project

README 

          
# vwapp-react-form



Componentes relacionados a criação de formulários. Usado em conjunto com libs como [react-final-form](https://github.com/final-form/react-final-form), [redux-form](https://github.com/redux-form/redux-form) e [formik](https://github.com/jaredpalmer/formik).



O mais aconselhado é o **react-final-form**.



[![NPM](https://img.shields.io/npm/v/vwapp-react-form.svg)](https://www.npmjs.com/package/vwapp-react-form) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)



## Instalação.



```bash

npm install --save vwapp-react-form

```



## Uso



```jsx

import React from 'react';

import { Form as FinalForm, Field } from 'react-final-form';

import { InputField, Fieldset, Json } from 'vwapp-react-form';

import { Form, Button } from 'react-bootstrap';



class Example extends Component {

  __onSubmit = data => {

    console.log(data);

  }



  __validate = values => {

    const errors = {};



    if (!values.first_name)

      errors.first_name = "Nome é obrigatório.";



    return errors;

  }



  render() {

    return (

       (

          

            

              

                

                  

                

              

            



            



            Enviar

          

        )}

      />

    )

  }

}



export default Example;

```



## Documentação



### 1. InputField



Campo de pequenos textos.



#### Propriedades especificas:



* **name**: Nome do atributo que irá ser populado pelo usuário. É esse atributo que irá para a submissão do formulário, ele deve ser único. (String - Obrigatório)



* **id**: Identificado do campo no formulário. (String - Para o CheckField é obrigatório, para os outros ele é o atributo name.)



* **label**: Label que acompanhará o input. (String - Opcional)



* **component**: Componente do input. É aqui que fica os componentes citados acima. (Component - Obrigatório.)



* **disabled**: Desativa o component. (Booleano - Opcional)



* **className**: Conjunto de classes dos campos. (String - Opcional)



* **column**: Faz a label ficar em cima do campo. (Booleano - defaul false)



* **placeholder**: Leve descrição do campo. (String - Opcional)



* **size**: Tamanho do input: "sm", "md", "lg". (String - padrão "mg")



* **readOnly**: Fazer o campo ser um texto só de leitura. (Booleano - default false)



#### Exemplo:



```jsx



  

    

      

    

  



  Enviar



```



### 2. InputGroupField



Campo de pequenos textos com componentes laterais.



#### Propriedades especificas:



* **name**: Nome do atributo que irá ser populado pelo usuário. É esse atributo que irá para a submissão do formulário, ele deve ser único. (String - Obrigatório)



* **id**: Identificado do campo no formulário. (String - Para o CheckField é obrigatório, para os outros ele é o atributo name.)



* **label**: Label que acompanhará o input. (String - Opcional)



* **component**: Componente do input. É aqui que fica os componentes citados acima. (Component - Obrigatório.)



* **disabled**: Desativa o component. (Booleano - Opcional)



* **className**: Conjunto de classes dos campos. (String - Opcional)



* **column**: Faz a label ficar em cima do campo. (Booleano - defaul false)



* **placeholder**: Leve descrição do campo. (String - Opcional)



* **left**: Insere componentes do lado esquerdo do input. Por exemplo: ```InputGroup.Text```. (Component - Opcional)



* **right**: Insere componentes do lado direiro do input. Por exemplo: ```Button```. (Component - Opcional)



#### Exemplo:



```jsx



  

    

      $}

        right={

          

             console.log("Action 1")}>Action 1

             console.log("Action 2")}>Action 2

            

             console.log("Action 3")}>Action 3

          

        }

        component={InputGroupField}

      />

    

  



  Enviar



```



### 3. CheckField



Campos de checkbox, switch e radio



#### Propriedades especificas:



* **name**: Nome do atributo que irá ser populado pelo usuário. É esse atributo que irá para a submissão do formulário, ele deve ser único. (String - Obrigatório)



* **id**: Identificado do campo no formulário. (String - Para o CheckField é obrigatório, para os outros ele é o atributo name.)



* **label**: Label que acompanhará o input. (String - Opcional)



* **component**: Componente do input. É aqui que fica os componentes citados acima. (Component - Obrigatório.)



* **disabled**: Desativa o component. (Booleano - Opcional)



* **className**: Conjunto de classes dos campos. (String - Opcional)



* **column**: Faz a label ficar em cima do campo. (Booleano - defaul false)



* **inline**: Coloca o conjunto de campos com esse atributo na horizontal. (Booleano - Opcional)



* **type**: Tipo do input. (String - Obrigatória)



  - **checkbox**: Input do tipo checkbox, retorna true ou false.

  - **radio**: Input do tipo radio, retorna o valor inserido no atributo **value** do radio.

  - **switch** Input do tipo switch, retorna true ou false.



#### Exemplo:



```jsx



  

    

        

        

      



      

        

        

      

  



  Enviar



```



### 4. SelectField



Campo de seleção e seleção multipla



#### Propriedades especificas:



* **name**: Nome do atributo que irá ser populado pelo usuário. É esse atributo que irá para a submissão do formulário, ele deve ser único. (String - Obrigatório)



* **id**: Identificado do campo no formulário. (String - Para o CheckField é obrigatório, para os outros ele é o atributo name.)



* **label**: Label que acompanhará o input. (String - Opcional)



* **component**: Componente do input. É aqui que fica os componentes citados acima. (Component - Obrigatório.)



* **disabled**: Desativa o component. (Booleano - Opcional)



* **className**: Conjunto de classes dos campos. (String - Opcional)



* **column**: Faz a label ficar em cima do campo. (Booleano - defaul false)



* **placeholder**: Leve descrição do campo. (String - Opcional - defalt "Selecione uma opção")



* **size**: Tamanho do input: "sm", "md", "lg". (String - padrão "mg")



* **options**: Lista de opções. (Lista de Objetos (title, value) - Obrigatório)



* **type**: É obrigatório colocar o type como "select" nesse input. (String - Obrigatório - valor "select")



* **multiple**: Transforma o select em escolhas multiplas. (Booleano - default false)



#### Exemplo:



```jsx



  

    

        

        

        

      

  



  Enviar



```



### 5. TextAreaField



Campo de grandes textos.



#### Propriedades especificas:



* **name**: Nome do atributo que irá ser populado pelo usuário. É esse atributo que irá para a submissão do formulário, ele deve ser único. (String - Obrigatório)



* **id**: Identificado do campo no formulário. (String - Para o CheckField é obrigatório, para os outros ele é o atributo name.)



* **label**: Label que acompanhará o input. (String - Opcional)



* **component**: Componente do input. É aqui que fica os componentes citados acima. (Component - Obrigatório.)



* **disabled**: Desativa o component. (Booleano - Opcional)



* **className**: Conjunto de classes dos campos. (String - Opcional)



* **column**: Faz a label ficar em cima do campo. (Booleano - defaul false)



* **placeholder**: Leve descrição do campo. (String - Opcional)



* **size**: Tamanho do input: "sm", "md", "lg". (String - padrão "mg")



* **readOnly**: Fazer o campo ser um texto só de leitura. (Booleano - default false)



* **rows**: Tamanho da caixa do campos. (Inteiro - Opcional)



#### Exemplo:



```jsx



  

    

      

    

  



  Enviar



```



### 6. DateTimeField



Campo de data e hora.



#### Propriedades especificas:



* **name**: Nome do atributo que irá ser populado pelo usuário. É esse atributo que irá para a submissão do formulário, ele deve ser único. (String - Obrigatório)



* **id**: Identificado do campo no formulário. (String - Para o CheckField é obrigatório, para os outros ele é o atributo name.)



* **label**: Label que acompanhará o input. (String - Opcional)



* **component**: Componente do input. É aqui que fica os componentes citados acima. (Component - Obrigatório.)



* **disabled**: Desativa o component. (Booleano - Opcional)



* **className**: Conjunto de classes dos campos. (String - Opcional)



* **column**: Faz a label ficar em cima do campo. (Booleano - defaul false)



* **maxDate**: Data limite de inserção. Só funciona nos tipos **date** e **datetime**. (Date, Opcional)



* **minDate**: Data mínima de inserção. Só funciona nos tipos **date** e **datetime**. (Date, Opcional)



* **type**: Tipo do input. (String - Padrão "datetime")



  - **date**: Inserir somente a data.

  - **time**: Inserir somente a hora.

  - **datetime**: Inserir hora e data.



#### Exemplo:



```jsx



  

    

        

      

      

        

      

      

        

      

  



  Enviar



```



### 7. ImageField



Campo de imagens



#### Propriedades especificas:



* **name**: Nome do atributo que irá ser populado pelo usuário. É esse atributo que irá para a submissão do formulário, ele deve ser único. (String - Obrigatório)



* **id**: Identificado do campo no formulário. (String - Para o CheckField é obrigatório, para os outros ele é o atributo name.)



* **label**: Label que acompanhará o input. (String - Opcional)



* **component**: Componente do input. É aqui que fica os componentes citados acima. (Component - Obrigatório.)



* **disabled**: Desativa o component. (Booleano - Opcional)



* **className**: Conjunto de classes dos campos. (String - Opcional)



* **column**: Faz a label ficar em cima do campo. (Booleano - defaul false)



* **type**: Tipo do input. (String - Obrigatória - valor "file")



* **placeholder**: Leve descrição do campo. (String - Opcional)



#### Exemplo:



```jsx



  

    

      

    

  



  Enviar



```



### 8. FileField



Campo de arquivos



#### Propriedades especificas:



* **name**: Nome do atributo que irá ser populado pelo usuário. É esse atributo que irá para a submissão do formulário, ele deve ser único. (String - Obrigatório)



* **id**: Identificado do campo no formulário. (String - Para o CheckField é obrigatório, para os outros ele é o atributo name.)



* **label**: Label que acompanhará o input. (String - Opcional)



* **component**: Componente do input. É aqui que fica os componentes citados acima. (Component - Obrigatório.)



* **disabled**: Desativa o component. (Booleano - Opcional)



* **className**: Conjunto de classes dos campos. (String - Opcional)



* **column**: Faz a label ficar em cima do campo. (Booleano - defaul false)



* **type**: Tipo do input. (String - Obrigatória - valor "file")



* **placeholder**: Leve descrição do campo. (String - Opcional)



#### Exemplo:



```jsx



  

    

      

      

  



  Enviar



```



### 9. RangeField



Campo de range númerico



#### Propriedades especificas:



* **name**: Nome do atributo que irá ser populado pelo usuário. É esse atributo que irá para a submissão do formulário, ele deve ser único. (String - Obrigatório)



* **id**: Identificado do campo no formulário. (String - Para o CheckField é obrigatório, para os outros ele é o atributo name.)



* **label**: Label que acompanhará o input. (String - Opcional)



* **component**: Componente do input. É aqui que fica os componentes citados acima. (Component - Obrigatório.)



* **disabled**: Desativa o component. (Booleano - Opcional)



* **className**: Conjunto de classes dos campos. (String - Opcional)



* **column**: Faz a label ficar em cima do campo. (Booleano - defaul false)



* **max**: Valor máximo que o range pode alcançar. (Inteiro - default 100)



* **min**: Valor mínimo que o range pode alcançar. (Inteiro - default 0)



#### Exemplo:



```jsx



  

    

      

    

  



  Enviar



```



### 10. ColorField



Campo de cores.



#### Propriedades especificas:



* **name**: Nome do atributo que irá ser populado pelo usuário. É esse atributo que irá para a submissão do formulário, ele deve ser único. (String - Obrigatório)



* **id**: Identificado do campo no formulário. (String - Para o CheckField é obrigatório, para os outros ele é o atributo name.)



* **label**: Label que acompanhará o input. (String - Opcional)



* **component**: Componente do input. É aqui que fica os componentes citados acima. (Component - Obrigatório.)



* **disabled**: Desativa o component. (Booleano - Opcional)



* **className**: Conjunto de classes dos campos. (String - Opcional)



* **column**: Faz a label ficar em cima do campo. (Booleano - defaul false)



#### Exemplo:



```jsx



  

    

      

    

  



  Enviar



```



### 11. DateListField



Campo de inserção de texto com autocomplete.



#### Propriedades especificas:



* **name**: Nome do atributo que irá ser populado pelo usuário. É esse atributo que irá para a submissão do formulário, ele deve ser único. (String - Obrigatório)



* **id**: Identificado do campo no formulário. (String - Para o CheckField é obrigatório, para os outros ele é o atributo name.)



* **label**: Label que acompanhará o input. (String - Opcional)



* **component**: Componente do input. É aqui que fica os componentes citados acima. (Component - Obrigatório.)



* **disabled**: Desativa o component. (Booleano - Opcional)



* **className**: Conjunto de classes dos campos. (String - Opcional)



* **column**: Faz a label ficar em cima do campo. (Booleano - defaul false)



* **placeholder**: Leve descrição do campo. (String - Opcional)



* **size**: Tamanho do input: "sm", "md", "lg". (String - padrão "mg")



#### Exemplo:



```jsx



    

      

        

      

    



  



  Enviar



```



### 12. Json



Componente para printar na tela dicionários/Json.



#### Propriedades especificas:



* **values**: Dicionário Json para ser inserido na tela (Json - Obrigatório)



#### Exemplo:



```jsx



```



### 13. Fieldset



Componente para encapsular Campos de formulários.



#### Propriedades especificas:



* **title**: Nome do formulário dos campos inseridos (String - Obrigatório)



#### Exemplo:



```jsx



  ...



```



## Contribuir



#### 1. Como rodar o ambiente de desenvolvimento:



Rode os dois comandos abaixo em 2 abas diferentes. O primeiro comando vai ficar observando modificações do seu pacote e o segundo

comando consome essas modificações no html.



No diretorio raiz rode o npm start



```

npm start

```



No diretorio example rode o npm start.



```

cd example

npm start

```



#### 2. Como instalar ou remove um pacote.



Para instalar um novo pacote tem que fazer o seguinte comando:



```

npm install --save-dev nome-do-pacote

```



Com ele instalado tem que coloca-lo no package.json



```json

"dependencies": {

  "nome-do-pacote": "^versao",

  "...": "..."

},

"peerDependencies": {

  "nome-do-pacote": "^versao",

  "...": "..."

}

```



Com isso, teste se esse pacote está sendo utilizado, caso não rode o npm install e reinicie os servidores.



#### 3. Publicar no npmjs



1. Crie uma conta no https://www.npmjs.com/

2. Execute no terminal ```npm login``` e logar com as credenciais criadas no npmjs

3. Execute ```npm publish``` na pasta do projeto

4. E então use em outros projetos!



#### 4. Publicar documentação github pages



Rode o comando para criar uma pagina com a build do projeto example do seu repositório.



```

npm run deploy

```



#### 5. Atualizando um projeto.



Versões: MAJOR.MINOR.PATCH



* **MAJOR**: Versão em que fizeste modificações incompatives com versões anteriores, ou seja, que irá quebrar algo anteriormente feito.

* **MINOR**: Quando você adicionar funcionalidades que são compativeis com versões anteriores.

* **PATCH**: Correções de erros/bugs compativeis com versões anteriores.



## Licença



MIT © [VictorDeon](https://github.com/VictorDeon)



Criado a partir do pacote: [Create React Library](https://github.com/transitive-bullshit/create-react-library)