@cosva-lab/form-builder
React form builder.
Last updated 17 days ago by cosva .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @cosva-lab/form-builder 
SYNC missed versions from official npm registry.

@cosva-lab/form-builder

React form builder.

NPM JavaScript Style Guide

Install

npm install --save @cosva-lab/form-builder

Usage

import React from 'react';
import {
  FieldsRender,
  FieldsBuilder,
  createField,
  FieldTranslateProvider,
} from './@cosva-lab/form-builder';
import { Grid, Button, ButtonGroup } from '@material-ui/core';

export default function App() {
  const [fieldsBuilder] = React.useState(
    new FieldsBuilder({
      validate: false,
      fields: [
        {
          name: 'name',
          label: 'Name',
          value: '',
          breakpoints: {
            sm: 6,
          },
          validChange: true,
          validations: [
            {
              rule: 'isEmpty',
              message: 'This field can not be empty',
            },
          ],
        },
        {
          name: 'birth_date',
          label: 'Birth date',
          type: 'date',
          value: '',
          breakpoints: {
            sm: 6,
          },
          validations: [
            {
              rule: 'isEmpty',
              message: 'This field can not be empty',
            },
          ],
        },
        {
          name: 'email',
          label: 'Email',
          value: '',
          breakpoints: {
            sm: 6,
          },
          validations: [
            {
              rule: 'isEmail',
              message: "This field don't is email",
            },
          ],
        },
        createField<File[]>({
          name: 'files',
          type: 'file',
          value: [],
          breakpoints: {
            sm: 12,
          },
          validChange: true,
          validations: [
            {
              rule: 'isEmpty',
              message: 'This field can not be empty',
            },
            ({ value }) => {
              const max = 3;
              return value && value.length > max
                ? {
                    message: `You cannot upload more than ${max} files`,
                    state: true,
                  }
                : undefined;
            },
          ],
        }),
      ],
    }),
  );
  const {
    fields,
    changeField,
    validate,
    restoreLast,
    saveData,
    restore,
  } = fieldsBuilder;

  return (
    <FieldTranslateProvider translator={({ message }) => message}>
      <Grid container>
        <ButtonGroup
          fullWidth
          aria-label="full width outlined button group"
        >
          <Button
            color="default"
            onClick={async () => {
              restore();
            }}
          >
            Reset
          </Button>
          <Button
            color="default"
            onClick={async () => {
              restoreLast();
            }}
          >
            Restore
          </Button>
          <Button
            color="default"
            onClick={async () => {
              saveData();
            }}
          >
            Save
          </Button>
        </ButtonGroup>
      </Grid>
      <Grid container spacing={4}>
        <FieldsRender
          {...{
            fields,
            changeField: changeField(),
            validate,
          }}
        />
      </Grid>
      <Grid container justify="flex-end">
        <Button
          variant="outlined"
          color="primary"
          onClick={() => {
            fieldsBuilder.hasErrors({
              setErrors: true,
            });
          }}
        >
          Validate
        </Button>
        <Button
          variant="outlined"
          color="secondary"
          onClick={async () => {
            if (!(await fieldsBuilder.hasErrors())) {
              console.log(fieldsBuilder.getFieldsObject());
            }
          }}
        >
          Get Values
        </Button>
      </Grid>
    </FieldTranslateProvider>
  );
}

License

MIT © andres112013

Current Tags

  • 1.1.15                                ...           beta (2 months ago)
  • 1.3.1                                ...           latest (17 days ago)

62 Versions

  • 1.3.1                                ...           17 days ago
  • 1.3.0                                ...           19 days ago
  • 1.2.5                                ...           19 days ago
  • 1.2.4                                ...           20 days ago
  • 1.2.3                                ...           20 days ago
  • 1.2.1                                ...           2 months ago
  • 1.2.0                                ...           2 months ago
  • 1.1.21                                ...           2 months ago
  • 1.1.20                                ...           2 months ago
  • 1.1.19                                ...           2 months ago
  • 1.1.18                                ...           2 months ago
  • 1.1.17                                ...           2 months ago
  • 1.1.16                                ...           2 months ago
  • 1.1.15                                ...           2 months ago
  • 1.1.14                                ...           2 months ago
  • 1.1.13                                ...           2 months ago
  • 1.1.12                                ...           2 months ago
  • 1.1.11                                ...           2 months ago
  • 1.1.10                                ...           2 months ago
  • 1.1.9                                ...           2 months ago
  • 1.1.8                                ...           2 months ago
  • 1.1.6                                ...           2 months ago
  • 1.1.5                                ...           2 months ago
  • 1.1.4                                ...           2 months ago
  • 1.1.3                                ...           2 months ago
  • 1.1.2                                ...           3 months ago
  • 1.1.1                                ...           4 months ago
  • 1.1.0                                ...           4 months ago
  • 1.0.31                                ...           4 months ago
  • 1.0.30                                ...           4 months ago
  • 1.0.29                                ...           4 months ago
  • 1.0.28                                ...           4 months ago
  • 1.0.27                                ...           4 months ago
  • 1.0.26                                ...           4 months ago
  • 1.0.25                                ...           4 months ago
  • 1.0.23                                ...           4 months ago
  • 1.0.22                                ...           4 months ago
  • 1.0.21                                ...           4 months ago
  • 1.0.20                                ...           4 months ago
  • 1.0.19                                ...           4 months ago
  • 1.0.18                                ...           4 months ago
  • 1.0.17                                ...           4 months ago
  • 1.0.16                                ...           4 months ago
  • 1.0.15                                ...           5 months ago
  • 1.0.14                                ...           5 months ago
  • 1.0.1-3.1                                ...           5 months ago
  • 1.0.13                                ...           6 months ago
  • 1.0.12                                ...           6 months ago
  • 1.0.11                                ...           6 months ago
  • 1.0.10                                ...           6 months ago
  • 1.0.9                                ...           6 months ago
  • 1.0.8                                ...           6 months ago
  • 1.0.7                                ...           6 months ago
  • 1.0.6                                ...           6 months ago
  • 1.0.5                                ...           6 months ago
  • 1.0.4                                ...           6 months ago
  • 1.0.3                                ...           6 months ago
  • 1.0.2                                ...           6 months ago
  • 1.0.1                                ...           6 months ago
  • 1.0.0                                ...           6 months ago
  • 3.1.1 [deprecated]           ...           6 months ago
  • 0.1.1                                ...           a year ago
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 150
Dependencies (7)
Dev Dependencies (0)
None
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |