Vue>> vwapp-react-form>> 返回
项目作者： VWApplications

项目描述 ：
Campo para uso em projetos com a biblioteca react-final-form (React e ReactNative)
高级语言： JavaScript
项目地址: git://github.com/VWApplications/vwapp-react-form.git
创建时间： 2020-04-13T22:45:44Z
项目社区：https://github.com/VWApplications/vwapp-react-form
开源协议：
下载


vwapp-react-form

Componentes relacionados a criação de formulários. Usado em conjunto com libs como react-final-form, redux-form e formik.

O mais aconselhado é o react-final-form.

NPM JavaScript Style Guide

Instalação.

  1. npm install --save vwapp-react-form

Uso

  1. import React from 'react';
  2. import { Form as FinalForm, Field } from 'react-final-form';
  3. import { InputField, Fieldset, Json } from 'vwapp-react-form';
  4. import { Form, Button } from 'react-bootstrap';
  6. class Example extends Component {
  7.   __onSubmit = data => {
  8.     console.log(data);
  9.   }
  11.   __validate = values => {
  12.     const errors = {};
  14.     if (!values.first_name)
  15.       errors.first_name = "Nome é obrigatório.";
  17.     return errors;
  18.   }
  20.   render() {
  21.     return (
  22.       <FinalForm
  23.         onSubmit={this.__onSubmit}
  24.         initialValues={{first_name: "Pedro"}}
  25.         validate={this.__validate}
  26.         render={({ handleSubmit, submitting, pristine, values }) => (
  27.           <Form noValidate onSubmit={handleSubmit}>
  28.             <Fieldset title="Formulário principal">
  29.               <Form.Row>
  30.                 <Form.Group as={Col} md="12">
  31.                   <Field
  32.                     column
  33.                     name="first_name"
  34.                     placeholder="Primeiro Nome"
  35.                     label="Primeiro Nome"
  36.                     component={InputField}
  37.                   ></Field>
  38.                 </Form.Group>
  39.               </Form.Row>
  40.             </Fieldset>
  42.             <Json values={values} ></Json>
  44.             <Button variant="dark" type="submit" disabled={submitting || pristine}>Enviar</Button>
  45.           </Form>
  46.         )}
  47.       />
  48.     )
  49.   }
  50. }
  52. 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:

  1. <Form noValidate onSubmit={handleSubmit}>
  2.   <Form.Row>
  3.     <Form.Group as={Col} md="12" controlId="formFirstName">
  4.       <Field
  5.         column
  6.         name="first_name"
  7.         placeholder="Primeiro Nome"
  8.         label="Primeiro Nome"
  9.         component={InputField}
  10.       ></Field>
  11.     </Form.Group>
  12.   </Form.Row>
  14.   <Button variant="dark" type="submit" disabled={submitting || pristine}>Enviar</Button>
  15. </Form>

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:

  1. <Form noValidate onSubmit={handleSubmit}>
  2.   <Form.Row>
  3.     <Form.Group as={Col} md="6" controlId="formLastName">
  4.       <Field
  5.         column
  6.         name="last_name"
  7.         placeholder="Último Nome"
  8.         label="Último Nome"
  9.         left={<InputGroup.Text>$</InputGroup.Text>}
  10.         right={
  11.           <DropdownButton
  12.             variant="outline-secondary"
  13.             title="Dropdown"
  14.             id="input-group-dropdown-1">
  15.             <Dropdown.Item onClick={() => console.log("Action 1")}>Action 1</Dropdown.Item>
  16.             <Dropdown.Item onClick={() => console.log("Action 2")}>Action 2</Dropdown.Item>
  17.             <Dropdown.Divider ></Dropdown.Divider>
  18.             <Dropdown.Item onClick={() => console.log("Action 3")}>Action 3</Dropdown.Item>
  19.           </DropdownButton>
  20.         }
  21.         component={InputGroupField}
  22.       />
  23.     </Form.Group>
  24.   </Form.Row>
  26.   <Button variant="dark" type="submit" disabled={submitting || pristine}>Enviar</Button>
  27. </Form>

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:

  1. <Form noValidate onSubmit={handleSubmit}>
  2.   <Form.Row>
  3.     <Form.Group as={Col} md="4" controlId="formCheckbox">
  4.         <Field
  5.           name="check"
  6.           type="checkbox"
  7.           label="Teste Checkbox"
  8.           id="check"
  9.           component={CheckField}
  10.         ></Field>
  11.         <Field
  12.           name="switch"
  13.           type="switch"
  14.           label="Teste Switch"
  15.           id="switch"
  16.           component={CheckField}
  17.         ></Field>
  18.       </Form.Group>
  20.       <Form.Group as={Col} md="4" controlId="formRadioButton">
  21.         <Field
  22.           name="choice"
  23.           type="radio"
  24.           label="Teste Radio 01"
  25.           value="teste01"
  26.           id="radio1"
  27.           component={CheckField}
  28.         ></Field>
  29.         <Field
  30.           name="choice"
  31.           type="radio"
  32.           label="Teste Radio 02"
  33.           value="teste02"
  34.           id="radio2"
  35.           component={CheckField}
  36.         ></Field>
  37.       </Form.Group>
  38.   </Form.Row>
  40.   <Button variant="dark" type="submit" disabled={submitting || pristine}>Enviar</Button>
  41. </Form>

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:

  1. <Form noValidate onSubmit={handleSubmit}>
  2.   <Form.Row>
  3.     <Form.Group as={Col} md="4" controlId="formSelect">
  4.         <Field
  5.           column
  6.           multiple
  7.           name="multiselect"
  8.           type="select"
  9.           label="Selecione as melhores opções"
  10.           options={[
  11.             {title: "1", value: 1},
  12.             {title: "2", value: 2},
  13.             {title: "3", value: 3},
  14.             {title: "4", value: 4},
  15.           ]}
  16.           component={SelectField}
  17.         ></Field>
  18.         <Line ></Line>
  19.         <Field
  20.           name="select"
  21.           type="select"
  22.           placeholder="Selecione a melhor opção"
  23.           options={[
  24.             {title: "1", value: 1},
  25.             {title: "2", value: 2},
  26.             {title: "3", value: 3},
  27.             {title: "4", value: 4},
  28.           ]}
  29.           component={SelectField}
  30.         ></Field>
  31.       </Form.Group>
  32.   </Form.Row>
  34.   <Button variant="dark" type="submit" disabled={submitting || pristine}>Enviar</Button>
  35. </Form>

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:

  1. <Form noValidate onSubmit={handleSubmit}>
  2.   <Form.Row>
  3.     <Form.Group as={Col} md="12" controlId="formDescription">
  4.       <Field
  5.         name="description"
  6.         placeholder="Descrição"
  7.         rows={5}
  8.         component={TextAreaField}
  9.       ></Field>
  10.     </Form.Group>
  11.   </Form.Row>
  13.   <Button variant="dark" type="submit" disabled={submitting || pristine}>Enviar</Button>
  14. </Form>

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:

  1. <Form noValidate onSubmit={handleSubmit}>
  2.   <Form.Row>
  3.     <Form.Group as={Col} md="4" controlId="formDateTime">
  4.         <Field
  5.           column
  6.           name="datetime"
  7.           label="Date e Hora:"
  8.           type="datetime"
  9.           minDate={new Date()}
  10.           component={DateTimePicker}
  11.         ></Field>
  12.       </Form.Group>
  13.       <Form.Group as={Col} md="4" controlId="formDate">
  14.         <Field
  15.           name="date"
  16.           label="Data:"
  17.           type="date"
  18.           minDate={new Date()}
  19.           component={DateTimePicker}
  20.         ></Field>
  21.       </Form.Group>
  22.       <Form.Group as={Col} md="4" controlId="formTime">
  23.         <Field
  24.           name="time"
  25.           label="Hora:"
  26.           type="time"
  27.           component={DateTimePicker}
  28.         ></Field>
  29.       </Form.Group>
  30.   </Form.Row>
  32.   <Button variant="dark" type="submit" disabled={submitting || pristine}>Enviar</Button>
  33. </Form>

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:

  1. <Form noValidate onSubmit={handleSubmit}>
  2.   <Form.Row>
  3.     <Form.Group as={Col} md="4" controlId="formImage">
  4.       <Field
  5.         name="image"
  6.         type='file'
  7.         label="Imagem"
  8.         placeholder="Clique aqui para inserir a imagem."
  9.         component={ImageField}
  10.       ></Field>
  11.     </Form.Group>
  12.   </Form.Row>
  14.   <Button variant="dark" type="submit" disabled={submitting || pristine}>Enviar</Button>
  15. </Form>

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:

  1. <Form noValidate onSubmit={handleSubmit}>
  2.   <Form.Row>
  3.     <Form.Group as={Col} md="4" controlId="formFile">
  4.       <Field
  5.           name="file"
  6.           label="Arquivo:"
  7.           type='file'
  8.           placeholder="Clique para inserir o arquivo."
  9.           component={FileField}
  10.         ></Field>
  11.       </Form.Group>
  12.   </Form.Row>
  14.   <Button variant="dark" type="submit" disabled={submitting || pristine}>Enviar</Button>
  15. </Form>

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:

  1. <Form noValidate onSubmit={handleSubmit}>
  2.   <Form.Row>
  3.     <Form.Group as={Col} md="8" controlId="formRange" className="d-flex flex-column justify-content-between">
  4.       <Field
  5.         column
  6.         name="range"
  7.         label="Range"
  8.         max={80}
  9.         component={RangeField}
  10.       ></Field>
  11.     </Form.Group>
  12.   </Form.Row>
  14.   <Button variant="dark" type="submit" disabled={submitting || pristine}>Enviar</Button>
  15. </Form>

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:

  1. <Form noValidate onSubmit={handleSubmit}>
  2.   <Form.Row>
  3.     <Form.Group as={Col} md="4" controlId="formCheckbox">
  4.       <Field
  5.         column
  6.         name="color"
  7.         label="Teste Color"
  8.         component={ColorField}
  9.       ></Field>
  10.     </Form.Group>
  11.   </Form.Row>
  13.   <Button variant="dark" type="submit" disabled={submitting || pristine}>Enviar</Button>
  14. </Form>

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:

  1. <Form noValidate onSubmit={handleSubmit}>
  2.     <Form.Row className="d-flex flex-row">
  3.       <Form.Group as={Col} md="4" controlId="formRadioButton">
  4.         <Field
  5.           column
  6.           name="browsers"
  7.           label="Data List"
  8.           placeholder="Insira um navegador."
  9.           options={[
  10.             {title: "Internet Explore", value: "Internet Explore"},
  11.             {title: "Firefox", value: "Firefox"},
  12.             {title: "Chrome", value: "Chrome"},
  13.             {title: "Safari", value: "Safari"},
  14.           ]}
  15.           component={DataListField}
  16.         ></Field>
  17.       </Form.Group>
  18.     </Form.Row>
  20.   <Json values={values} ></Json>
  22.   <Button variant="dark" type="submit" disabled={submitting || pristine}>Enviar</Button>
  23. </Form>

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:

  1. <Json values={{...}} ></Json>

13. Fieldset

Componente para encapsular Campos de formulários.

Propriedades especificas:

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

Exemplo:

  1. <Fieldset title="Formulário de pagamento">
  2.   <Form.Row>...</Form.Row>
  3. </Fieldset>

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

  1. npm start

No diretorio example rode o npm start.

  1. cd example
  2. npm start

2. Como instalar ou remove um pacote.

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

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

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

  1. "dependencies": {
  2.   "nome-do-pacote": "^versao",
  3.   "...": "..."
  4. },
  5. "peerDependencies": {
  6.   "nome-do-pacote": "^versao",
  7.   "...": "..."
  8. }

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.

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

Criado a partir do pacote: Create React Library