ebs-form v0.2.6

ebs-form

EbsForm were developed to help the EBS FontEnd team to develop standardized interfaces faster.

Installation

You can use the package manager npm or yarn to install ebs-form.

npm install ebs-form

yarn add ebs-form

Usage

import React from "react";
import { Button } from "@material-ui/core";
import EbsForm from "ebs-form";

const normalDefinition = (props) => {
    const { getValues, setValue, reset } = props;
    return {
      name: "myForm",
      components: [
        {
          sizes: [12, 6, 4, 3, 2],
          component: "TextField",
          name: "TextField",
          inputProps: {
            label: "textfield",
          },
          rules: { required: "It's required" },
        },
        {
          sizes: [12, 6, 4, 3, 2],
          component: "CheckBox",
          name: "checkbox",
          title: "Check Box Group",
          options: [{ label: "Hello" }, { label: "World" }],
        },
        {
          sizes: [12, 6, 4, 3, 2],
          component: "DatePicker",
          name: "datepicker",
          inputProps: {
            label: "DatePicker",
          },
        },
        {
          sizes: [12, 6, 4, 3, 2],
          component: "Radio",
          name: "radiogroup",
          label: "Radio Group",
          row: false,
          options: [
            { label: "Uno", value: 1, disabled: true },
            { label: "Dos", value: 2, color: "primary" },
          ],
        },
        {
          sizes: [12, 6, 4, 3, 2],
          component: "Select",
          name: "select",
          options: users,
          inputProps: {
            placeholder: "Hello",
          },
          defaultValue: { label: "Uno", value: 1 },
        },
        {
          sizes: [12, 6, 4, 3, 2],
          component: "Switch",
          name: "switch",
          label: "Switch",
          defaultValue: true,
          inputProps: { disabled: true, color: "primary" },
        },
        {
          sizes: [12, 6, 4, 3, 2],
          component: "Button",
          name: "button",
          label: "Button",
          buttonProps: {
            color: "primary",
            variant: "outlined",
          },
        },
        {
          sizes: [12, 6, 4, 3, 2],
          component: "File",
          name: "file",
          label: "Choose a file...",
          customProps: {
            button: {
              color: "primary",
              variant: "outlined",
              size: "small",
            },
            input: {
                acceptedFiles: [".csv"],
                cancelButtonText: "cancel",
                submitButtonText: "submit",
                maxFileSize: 5000000,
                showPreviews: true,
                showFileNamesInPreview: true,
              },
        },
      ],
    };
  };

const onSubmit = (data) => {
  console.log(data);
};

const Demo = (props) => {

  return (
    <div>
      <EbsForm definition={normalDefinition} onSubmit={onSubmit}>
        <Button type="submit" variant="contained" color="primary">
          Submit
        </Button>
      </EbsForm>
    </div>
  );
};

Properties

getValues: (payload?: string | string[]) => Object

1. getValues(): Read all form values.
2. getValues('test'): Read an individual field value by name.
3. getValues('test', 'test1'): Read multiple fields by name.

setValues: (name: string, value: any, config?: Object) => void

1. setValue('name', 'value'): Set a component value.
2. You can also set the shouldValidate parameter to true in order to trigger a field validation.
   • setValue('name', 'value', { shouldValidate: true })

reset: (values?: Record<string, any>, omitResetState?: Record<string, boolean>) => void

When invoking reset({ value }) without supply defaultValues, the form will replace defaultValues with shallow clone value object which you have supplied

Examples

Accordion Form

import React from "react";
import { Button } from "@material-ui/core";
import EbsForm from "ebs-form";

const accordionDefinition = (props) => {
  const { getValues, setValue, reset } = props;

  return {
    name: "accordion",
    groups: [
      {
        name: "myForm",
        title: "My Form",
        components: [
          {
            sizes: [12, 6, 4, 3, 2],
            component: "TextField",
            name: "TextField",
            inputProps: {
              label: "textfield",
            },
          },
          {
            sizes: [12, 6, 4, 3, 2],
            component: "CheckBox",
            name: "checkbox",
            title: "Check Box Group",
            options: [{ label: "Hello" }, { label: "World" }],
          },
          {
            sizes: [12, 6, 4, 3, 2],
            component: "DatePicker",
            name: "datepicker",
            inputProps: {
              label: "DatePicker",
            },
          },
          {
            sizes: [12, 6, 4, 3, 2],
            component: "Radio",
            name: "radiogroup",
            label: "Radio Group",
            options: [
              { label: "One", value: 1, disabled: true },
              { label: "Two", value: 2, color: "primary" },
            ],
            defaultValue: { label: "One", value: 1 },
          },
          {
            sizes: [12, 6, 4, 3, 2],
            component: "Select",
            name: "select",
            options: [
              { label: "Uno", value: 1 },
              { label: "Dos", value: 2 },
            ],
            inputProps: {
              placeholder: "hola",
            },
          },
          {
            sizes: [12, 6, 4, 3, 2],
            component: "Switch",
            name: "switch",
            label: "Switch",
          },
          {
            sizes: [12, 6, 4, 3, 2],
            component: "Button",
            name: "button",
            label: "Button",
            onClick: (e) => {
              reset({});
            },
            buttonProps: {
              color: "primary",
              variant: "outlined",
            },
          },
          {
            sizes: [12, 6, 4, 3, 2],
            component: "File",
            name: "file",
            label: "Choose a file...",
            customProps: {
              button: { color: "primary", variant: "contained" },
              input: {
                acceptedFiles: [".csv"],
                cancelButtonText: "cancel",
                submitButtonText: "submit",
                maxFileSize: 5000000,
                showPreviews: true,
                showFileNamesInPreview: true,
              },
            },
            rules: {
              required: <p>Is required</p>,
            },
          },
        ],
      },
    ],
  };
};

const onSubmit = (data) => {
  console.log(data);
};

const Demo = (props) => {
  return (
    <div>
            
      <EbsForm definition={accordionDefinition} onSubmit={onSubmit}>
                
        <Button type="submit" variant="contained" color="primary">
                    Submit         
        </Button>
              
      </EbsForm>
          
    </div>
  );
};

Normal Form

import React from "react";
import { Button } from "@material-ui/core";
import EbsForm from "ebs-form";

const normalDefinition = (props) => {
    const { getValues, setValue, reset } = props;
    return {
      name: "myForm",
      components: [
        {
          sizes: [12, 6, 4, 3, 2],
          component: "TextField",
          name: "TextField",
          inputProps: {
            label: "textfield",
          },
          rules: { required: "It's required" },
        },
        {
          sizes: [12, 6, 4, 3, 2],
          component: "CheckBox",
          name: "checkbox",
          title: "Check Box Group",
          options: [{ label: "Hello" }, { label: "World" }],
        },
        {
          sizes: [12, 6, 4, 3, 2],
          component: "DatePicker",
          name: "datepicker",
          inputProps: {
            label: "DatePicker",
          },
        },
        {
          sizes: [12, 6, 4, 3, 2],
          component: "Radio",
          name: "radiogroup",
          label: "Radio Group",
          row: false,
          options: [
            { label: "Uno", value: 1, disabled: true },
            { label: "Dos", value: 2, color: "primary" },
          ],
        },
        {
          sizes: [12, 6, 4, 3, 2],
          component: "Select",
          name: "select",
          options: users,
          inputProps: {
            placeholder: "Hello",
          },
          defaultValue: { label: "Uno", value: 1 },
        },
        {
          sizes: [12, 6, 4, 3, 2],
          component: "Switch",
          name: "switch",
          label: "Switch",
          defaultValue: true,
          inputProps: { disabled: true, color: "primary" },
        },
        {
          sizes: [12, 6, 4, 3, 2],
          component: "Button",
          name: "button",
          label: "Button",
          buttonProps: {
            color: "primary",
            variant: "outlined",
          },
        },
        {
          sizes: [12, 6, 4, 3, 2],
          component: "File",
          name: "file",
          label: "Choose a file...",
          customProps: {
            button: {
              color: "primary",
              variant: "outlined",
              size: "small",
            },
            input: {
                acceptedFiles: [".csv"],
                cancelButtonText: "cancel",
                submitButtonText: "submit",
                maxFileSize: 5000000,
                showPreviews: true,
                showFileNamesInPreview: true,
              },
        },
      ],
    };
  };

const onSubmit = (data) => {
  console.log(data);
};

const Demo = (props) => {
  
  return (
    <div>
      <EbsForm definition={normalDefinition} onSubmit={onSubmit}>
        <Button type="submit" variant="contained" color="primary">
          Submit
        </Button>
      </EbsForm>
    </div>
  );
};

Components API

Helper Attributes

1. arrow: bool => If true, adds an arrow to the helper.
2. classes: object => Override or extend the styles applied to the component.
3. placement: 'bottom-end'| 'bottom-start'| 'bottom'| 'left-end'| 'left-start'| 'left'| 'right-end'| 'right-start'| 'right'| 'top-end'| 'top-start'| 'top'
4. title: node => label to show

Button

buttonProps Attributes

• classes: Override or extend the styles applied to the component color: 'default'| 'inherit'| 'primary'| 'secondary'
• disabled: bool
• endIcon: node
• fullWidth: bool
• size: 'large'| 'medium'| 'small'
• startIcon: node

CheckBox

checkProps Attributes

• classes: Override or extend the styles applied to the component
• color: 'default'| 'primary'| 'secondary'
• disabled: bool
• icon: node
• size: 'medium'| 'small'

DatePicker

Select

inputProps Attributes

• className: Override or extend the styles applied to the component
• color: 'default'| 'primary'| 'secondary'
• isDisabled: bool
• placeholder: node
• isMulti: bool

RadioGroup

Switch

inputProps Attributes

• classes: Override or extend the styles applied to the component
• color: 'default'| 'primary'| 'secondary'
• disabled: bool
• size: 'medium'| 'small'

TextField

inputProps Attributes

• classes: Override or extend the styles applied to the component
• color: 'primary'| 'secondary'
• disabled: bool
• label: node
• multiline: bool
• fullWidth: bool
• size: 'medium'| 'small'
• rows: int => Number of rows to display when multiline option is set to true.

File

customProps Attributes

• button: object
  • classes: Override or extend the styles applied to the component
  • color: 'default'| 'inherit'| 'primary'| 'secondary'
  • disabled: bool
  • endIcon: node
  • fullWidth: bool
  • size: 'large'| 'medium'| 'small'
  • startIcon: node
• input: object
  • acceptedFiles: {'image/*'}
  • cancelButtonText: {"cancel"}
  • submitButtonText: {"submit"}
  • maxFileSize: {5000000}
  • showPreviews: {true}
  • showFileNamesInPreview: {true}

Apply Validations

List of validation rules supported:

• required
• min
• max
• minLength
• maxLength
• pattern
• validate

Example

{
          sizes: [12, 6, 4, 3, 2],
          component: "TextField",
          name: "TextField",
          inputProps: {
            label: "textfield",
            disabled: false,
            rows: 5,
            size: "medium",
            variant: "outlined",
          },
          helper: { title: "ayuda", placement: "right", arrow: true },
          defaultValue: "Hola mundo",
          rules: {
            min: 8,
            max: 99,
            patern: /^[A-Za-z]+$/i,
            validate: (value) => {
              return value == "Hello world";
            },
            required: "It's required",
          },
        },

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

License

MIT