jsonschema_form_generator.js

var React = require('react');
var forms = require('newforms');
var _     = require('underscore');
var RegexValidator = forms.validators.RegexValidator
var $ = require('jquery');

var schema = {
  "$schema": "http://json-schema.org/draft-04/schema#",
  "id": "/",
  "type": "object",
  "properties": {
    "url": {
      "id": "url",
      "type": "string",
	  "pattern": "^(http|https)://.+"
    },
    "interval": {
      "id": "interval",
      "type": "string",
	  "pattern": "^\\d+(m|s)$"
    },
    "size": {
      "id": "size",
      "type": "number",
	  "default": 20
    }
  },
  "required": [
    "url",
    "interval"
  ]
};

module.exports = React.createClass({
    _onSubmit: function(e) {
        e.preventDefault();

        var form = this.refs.VVV.getForm()
        var isValid = form.validate()

        if (isValid) {
            this.props.onSubmit(form.cleanedData)
        }
    },

    render: function() {
        var form = generateForm(schema);

        return (
            <div>
            <h1>{name}</h1>

            <form onSubmit={this._onSubmit}>
                <forms.RenderForm form={form} ref="VVV"/>
                <button>Sign Up</button>
            </form>
            </div>
        )
    }
});


function generateForm(s) {
    var schema = normalize(s);

    var fields = _.map(schema.properties, generateProperty).reduce(function(o, v, i) {
        return $.extend(o, v);
    }, {});

    return forms.Form.extend(fields);
}

function normalize(s) {
    var schema = jQuery.extend(true, {}, s);

    if (schema.required != undefined) {
        _.map(schema.required, function(property) {
            schema.properties[property].required = true;
        });

        delete schema["required"];
    }

    return schema;
}

function generateProperty(property, name) {
    var ret = {};
    ret[name] = getType(property); 
    return ret;
}

var typeMap = {
    string: createStringField,
    number: createNumberField
}

function getType(property) {
    var constroctor = typeMap[property.type];

    if (constroctor == undefined) {
        console.log("unknown type " + property.type);
        return
    }

    return constroctor(property);
}

function createStringField(property) {
    var args = {required: property.required};

    if (property.default != undefined) {
         args.initial = property.default;
    }

    if (property.pattern != undefined) {
        args.validators = [
            RegexValidator({regex: property.pattern})
        ];
    }

    return forms.CharField(args);
}

function createNumberField(property) {
    var args = {required: property.required};

    if (property.default != undefined) {
         args.initial = property.default;
    }

    return forms.DecimalField(args);
}