folio3dynamicform v1.0.2

Dynamic Form Handler

This package is used for creating dynamic form elements.

Installation

You can install the package via npm:

npm install folio3-dynamic-form-handler

## Usage

The package exposes a default export of DynamicFormHandler. This is the main component of the package that renders the dynamic form. The DynamicFormHandler accepts the following props:
    1. data - an array of objects
    2. form - Ant Design's form instance
    3. onFinish - function which runs after the form successfully submits

data is an array of objects, in which each object has the following properties:

1. dataKey - (string) uniquely identifies the form element
2. name - (string) the label that appears on the Form element
3. fieldSuffix - (string) appears on Number fields e.g "kg"
4. placeholder - (string) placeholder for form element
5. isSingleValue - (boolean) used to distinguish between Dropdown and Multi-select (true for dropdown)
6. allowAddMore - (boolean) used for dropdowns and multi-selects with Add-More feature (true if Add-More feature is to be shown)
7. entityType - (string) used for dropdowns and multi-selects with Add-More feature
8. isDisabled - (boolean) used to enable/disable a form element (default is enabled)
9. isHidden - (boolean) if we wish to render a form element but not display it we will set isHidden to true
10. fieldType - (string) can have the following values:

    "Text" (Renders DynamicText)
    "Number" (Renders DynamicNumber with Integers)
    "Decimal" (Renders DynamicNumber with decimal points)
    "Email" (Renders DynamicEmail)
    "Password" (Renders DynamicPassword)
    "Date" (Renders DynamicPicker)
    "Checkbox" (Renders DynamicCheckBox)
    "Bool" (Renders DynamicRadioButton)
    "TextArea" (Renders DynamicTextArea)
    "RangePicker" (Renders DynamicRangePicker)
    "Select" (Renders DynamicDropdown)
    "MultiSelect" (Renders DynamicMultiSelect)

11. defaultValueString - default value for text field, text Area, password and email field
12. defaultValueInt - default value for Numbers, Radio Buttons and Dropdowns 
13. defaultValueDouble - default value for Numbers 
15. defaultValueDate - default value Date Field and Range Picker
16. rules - (array of objects) e.g
[
    {
        "name": "required",
        "required": true
    },
    {
        "name": "allowFutureDates",
        "allowFutureDates": false
    },
    {
        "name": "max",
        "max": 5
    },
    {
        "name": "min",
        "min": 1
    },
    {
        "name": "pattern",
        "pattern": "fdhfj"
    },
]
17. selectionValues (array of objects) e.g
[
    {
        "id": 1,
        "name": "Active",
        "selected": true
    },
    {
        "id": 2,
        "name": "Dead",
        "selected": false
    },
    {
        "id": 3,
        "name": "Sold",
        "selected": false
    },
    {
        "id": 4,
        "name": "Reference",
        "selected": false
    }
]
18. visibilityRules:  An array of visibility rules that will be applied to the form element. The visibility rules are used to determine whether the form element should be visible or not based on the other form elements.

e.g
This field will only be visible if AnimalStatusId is 1
[
    {
        "dataKey": "AnimalStatusId",
        "valueString": 1
    }
]

19. className: you can now add custom classNames to each form item
20. colSize: use to adjust the grid layout 
21. groupName: Every group has a title denoted by groupName (which can be null)
22. groupClass: The styling of the title is controlled by groupClass