1 | # @cosva-lab/form-builder
|
2 |
|
3 | > React form builder.
|
4 |
|
5 | [![NPM](https://img.shields.io/npm/v/@cosva-lab/form-builder.svg)](https://www.npmjs.com/package/@cosva-lab/form-builder) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
|
6 |
|
7 | ## Install
|
8 |
|
9 | ```bash
|
10 | npm install --save @cosva-lab/form-builder
|
11 | ```
|
12 |
|
13 | ## Usage
|
14 |
|
15 | ```tsx
|
16 | import React from 'react';
|
17 | import {
|
18 | FieldsRender,
|
19 | FieldsBuilder,
|
20 | createField,
|
21 | FieldTranslateProvider,
|
22 | } from '@cosva-lab/form-builder';
|
23 | import { Grid, Button, ButtonGroup } from '@material-ui/core';
|
24 |
|
25 | export default function App() {
|
26 | const [fieldsBuilder] = React.useState(
|
27 | new FieldsBuilder({
|
28 | validate: false,
|
29 | fields: [
|
30 | {
|
31 | name: 'name',
|
32 | label: 'Name',
|
33 | value: '',
|
34 | breakpoints: {
|
35 | sm: 6,
|
36 | },
|
37 | validChange: true,
|
38 | validations: [
|
39 | {
|
40 | rule: 'isEmpty',
|
41 | message: 'This field can not be empty',
|
42 | },
|
43 | ],
|
44 | },
|
45 | {
|
46 | name: 'birth_date',
|
47 | label: 'Birth date',
|
48 | type: 'date',
|
49 | value: '',
|
50 | breakpoints: {
|
51 | sm: 6,
|
52 | },
|
53 | validations: [
|
54 | {
|
55 | rule: 'isEmpty',
|
56 | message: 'This field can not be empty',
|
57 | },
|
58 | ],
|
59 | },
|
60 | {
|
61 | name: 'email',
|
62 | label: 'Email',
|
63 | value: '',
|
64 | breakpoints: {
|
65 | sm: 6,
|
66 | },
|
67 | validations: [
|
68 | {
|
69 | rule: 'isEmail',
|
70 | message: "This field don't is email",
|
71 | },
|
72 | ],
|
73 | },
|
74 | createField<File[]>({
|
75 | name: 'files',
|
76 | type: 'file',
|
77 | value: [],
|
78 | breakpoints: {
|
79 | sm: 12,
|
80 | },
|
81 | validChange: true,
|
82 | validations: [
|
83 | {
|
84 | rule: 'isEmpty',
|
85 | message: 'This field can not be empty',
|
86 | },
|
87 | ({ value }) => {
|
88 | const max = 3;
|
89 | return value && value.length > max
|
90 | ? {
|
91 | message: `You cannot upload more than ${max} files`,
|
92 | state: true,
|
93 | }
|
94 | : undefined;
|
95 | },
|
96 | ],
|
97 | }),
|
98 | ],
|
99 | }),
|
100 | );
|
101 | const {
|
102 | fields,
|
103 | changeField,
|
104 | validate,
|
105 | restoreLast,
|
106 | saveData,
|
107 | restore,
|
108 | } = fieldsBuilder;
|
109 |
|
110 | return (
|
111 | <FieldTranslateProvider translator={({ message }) => message}>
|
112 | <Grid container>
|
113 | <ButtonGroup
|
114 | fullWidth
|
115 | aria-label="full width outlined button group"
|
116 | >
|
117 | <Button
|
118 | color="default"
|
119 | onClick={async () => {
|
120 | restore();
|
121 | }}
|
122 | >
|
123 | Reset
|
124 | </Button>
|
125 | <Button
|
126 | color="default"
|
127 | onClick={async () => {
|
128 | restoreLast();
|
129 | }}
|
130 | >
|
131 | Restore
|
132 | </Button>
|
133 | <Button
|
134 | color="default"
|
135 | onClick={async () => {
|
136 | saveData();
|
137 | }}
|
138 | >
|
139 | Save
|
140 | </Button>
|
141 | </ButtonGroup>
|
142 | </Grid>
|
143 | <Grid container spacing={4}>
|
144 | <FieldsRender
|
145 | {...{
|
146 | fields,
|
147 | changeField: changeField(),
|
148 | validate,
|
149 | }}
|
150 | />
|
151 | </Grid>
|
152 | <Grid container justify="flex-end">
|
153 | <Button
|
154 | variant="outlined"
|
155 | color="primary"
|
156 | onClick={() => {
|
157 | fieldsBuilder.hasErrors({
|
158 | setErrors: true,
|
159 | });
|
160 | }}
|
161 | >
|
162 | Validate
|
163 | </Button>
|
164 | <Button
|
165 | variant="outlined"
|
166 | color="secondary"
|
167 | onClick={async () => {
|
168 | if (!(await fieldsBuilder.hasErrors())) {
|
169 | console.log(fieldsBuilder.getFieldsObject());
|
170 | }
|
171 | }}
|
172 | >
|
173 | Get Values
|
174 | </Button>
|
175 | </Grid>
|
176 | </FieldTranslateProvider>
|
177 | );
|
178 | }
|
179 | ```
|
180 |
|
181 | ## License
|
182 |
|
183 | MIT © [andres112013](https://github.com/andres112013)
|