Form Builder
Is a component that generates a form using predefined input elements. The input elements available are:
- TextInput
- Checkbox
- TextArea
- FileInput
- SelectInput
- SelectReact
- SelectAsync
- DateInput
- DateTimeInput
- TimeInput
- TypeaheadBootstrap
Form Builder Items
Form builder for line items. Some usage examples would be purchase orders, work orders and invoices where there is a main table and an items table related to it(hasMany relationships)
TODOS
- Unit tests (Jest)
- Continuous Integration (Circle Ci)
- Extend for custom inputs
- Documentation for FormBuilderItems
- Add examples
- Webpack tests
Props
It receives the following props:
Prop | Default Value | Description |
---|---|---|
value | Empty String | value of the controlled input |
label | Empty String | label of the input |
labelOn | False Boolean | flag to show label |
name | Empty String | html name attribute |
labelClasses | Empty String | classes of label tag |
inputContainerClasses | Empty String | classes of div containing input |
onChange | Callback Function | callback that modifies value |
disabled | False Boolean | flag that disables input interaction |
options | Empty Array | on select inputs, array of all options that can be selected |
multiple | False Boolean | on select inputs, enables multiple selection |
placeholder | Empty String | placeholder html attribute |
inputAttributes | Empty Object | key-value pairs of input attributes (e.g placeholder, type, number) |
Form Configuration File
This is an array of fields and its props that will be passed FormBuilder.
Fields array example:
const fields = name: 'code' elt: InputsTextInput label: 'Code' labelOn: true labelClasses: 'col-sm-3' inputContainerClasses: 'col-sm-6' inputAttributes: type: 'number' step: 01 name: 'description' elt: InputsTextArea label: 'Description' labelOn: true labelClasses: 'col-sm-3' inputContainerClasses: 'col-sm-6' ;
FormBuilder with React:
;;; Component { thisstate = form: code: '' description: '' // must have a form key } { this; } { return <FormBuilder fields=fields form=thisstate formClasses='form-horizontal' onChange=thisonChange /> }
FormBuilder with React and Redux:
;;;; // Set up formconst FormBuilderRedux = FormBuilder; Component { return <FormBuilderRedux fields=fields formName='item' formClasses='form-horizontal' onChange='update' /> } // Configure Storeconst store = ; //Render Component;
Item Actions (item_actions.js)
const update = type: 'FORM_UPDATE_VALUE' name value;
Reducer (item_reducer.js)
const initialState= item: form: code: '' description: '' ; const item = { } ; const rootReducer = ;
Redux: dispatch -> action -> reducer -> update state