FancyForm React Component

by FancyGrid Inc.

HTML

<script src="https://unpkg.com/react@15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fancygrid/client/fancy.min.js"></script>

<div id="container" style=""></div>

Babel + JSX

class Form extends React.Component {
  render() {
	  var me = this,
  	  containerProps = me.props.containerProps || {};

    // Add ref to div props
    containerProps.ref = function (container) {
	    me.container = container 
	  }

    // Create temp container for our grid
    return React.createElement('div', containerProps);
  }
  
  componentDidMount() {
    var me = this,
	    props = me.props,
	    config = me.props.config || {},
	    container = me.container;
	
	  for(let p in props){
	    switch(p){
		    case 'config':
		      break;
		    default:
		      config[p] = props[p];
	    }
	  }
	
	  config.renderOuter = container;
	
    me.widget = new Fancy.Form(config);
  }
}

const myConfig = {
  theme: 'extra-gray',
  title: 'User Data',
  width: 290,
  height: 500,
  defaults: {
    type: 'string'
  },
  items: [{
    name: 'id',
    type: 'hidden'
  }, {
    label: 'Name',
    emptyText: 'Name',
    name: 'name'
  }, {
    label: 'SurName',
    emptyText: 'SurName',
    name: 'surname'
  }, {
    label: 'E-mail',
    emptyText: 'E-mail',
    name: 'email',
    valid: {
      type: 'email',
      blank: false,
      blankText: 'Required',
      text: 'Incorect email'
    }
  }, {
    type: 'date',
    label: 'Birthday',
    name: 'birthday'
  }, {
    type: 'checkbox',
    label: 'Active',
    name: 'active',
    value: true
  }, {
    type: 'number',
    label: 'Hour rate',
    name: 'hour',
    min: 0
  }, {
    type: 'string',
    label: 'Position',
    name: 'position'
  }, {
    type: 'combo',
    label: 'Country',
    name: 'country',
    data: [{
      country: 'USA'
    }, {
      country: 'Canada'
    }, {
      country: 'England'
    }, {
      country: 'Germany'
    }],
    displayKey: 'country',
    valueKey: 'country'
  }, {
    type: 'textarea',
    label: 'About',
    name: 'about'
  }],
  buttons: ['side', {
    text: 'Clear',
    handler() {
      form.clear();
    }
  }, {
    text: 'Save',
    handler() {
      var values =...