form_builder

#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: Inputs.TextInput,
    label: 'Code',
    labelOn: true,
    labelClasses: 'col-sm-3',
    inputContainerClasses: 'col-sm-6'
    inputAttributes: {
      type: 'number',
      step: 0.1
    }
  },
  {
    name: 'description',
    elt: Inputs.TextArea,
    label: 'Description',
    labelOn: true,
    labelClasses: 'col-sm-3',
    inputContainerClasses: 'col-sm-6'
  }
];

####FormBuilder with React:

import React from 'react';
import {render} from 'react-dom'
import update from 'immutability-helper';
import FormBuilder from 'form_builder';

class Item extends React.Component{
    constructor(props){
        this.state = {
            form: {
                code: '',
                description: ''
            } // must have a form key
        }
    }

    onChange(field, value){
        this.setState({
          header: update(this.state.form,{
            $merge:{
              [field]: value
            }
          })
        });
    }

    render(){
        return (
            <FormBuilder
                fields={fields}
                form={this.state}
                formClasses='form-horizontal'
                onChange={this.onChange.bind(this)}
            />
        )
    }
}

render(
  <Item/>,
  document.getElementById('root')
)

####FormBuilder with React and Redux:

import React from 'react';
import {render} from 'react-dom'
import {Provider, connect} from 'react-redux';
import {bindActionCreators, createStore} from 'redux'
import * as itemActions from './actions/item_actions.js'
import rootReducer from './reducers/index.js';
import FormBuilder from 'form_builder';

// Set up form
const FormBuilderRedux = connect(
  state => state, 
  dispatch => ({actions: bindActionCreators(itemActions, dispatch)})
)(FormBuilder);

class Item extends React.Component{
    render(){
      return(
        <FormBuilderRedux
            fields={fields}
            formName='item'
            formClasses='form-horizontal'
            onChange='update'
        />
      )
    }
}

// Configure Store
const store = createStore(
    rootReducer,
);

//Render Component
render(
  <Provider store={store}>
    <Items/>
  </Provider>, 
  document.getElementById('root')
);

Item Actions (item_actions.js)

export const update = (name, value) =>({
  type: 'FORM_UPDATE_VALUE',
  name, 
  value
});

Reducer (item_reducer.js)

const initialState={
    item:{
        form:{
            code: '',
            description: ''
        }
    }
};

const item = (state=initialState.item, action) => {
  switch(action.type){
    case 'FORM_UPDATE_VALUE':
      return {
        ...state,
        form: {
            ...state.form
            [action.name]: action.value
        }
      }

    default:
      return state;
  }
}

import {combineReducers} from 'redux';

const rootReducer = combineReducers({
  item
})

export default rootReducer;

Redux: dispatch -> action -> reducer -> update state