Package Exports

jsonschema-form-for-material-ui-linkplay

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (jsonschema-form-for-material-ui-linkplay) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

jsonschema-form-for-material-ui-linkplay

A Material UI port of react-jsonschema-form.

Project forked from Graham King.

The initial project had lots of stuff in it, including a strict node version and demo server.

This package:

Updated packages
Not pre-bundled
Better layout
Will be supported and updated

I will be monitoring Mozilla's repo for changes: they plan on becoming ui-agnostic, and I will migrate this project into a wrapper of that one when that happens (which will be a major version bump)

Update: Mozilla is doing something similar: See https://github.com/mozilla-services/react-jsonschema-form/issues/1222 for details

Installation

npm install --save jsonschema-form-for-material-ui-linkplay

Usage

import SchemaForm from 'jsonschema-form-for-material-ui-linkplay';

const styles = theme => ({
  field: {},
  formButtons: {},
  root: {},
});

const schema = {
  "title": "A registration form",
  "description": "A simple form example.",
  "type": "object",
  "required": [
    "firstName",
    "lastName"
  ],
  "properties": {
    "firstName": {
      "type": "string",
      "title": "First name"
    },
    "lastName": {
      "type": "string",
      "title": "Last name"
    },
    "age": {
      "type": "integer",
      "title": "Age"
    }
  }
}

const uiSchema = {
  "firstName": {
    "ui:autofocus": true,
    "ui:emptyValue": ""
  },
  "age": {
    "ui:widget": "updown",
    "ui:title": "Age of person",
    "ui:description": "This description will be in a Popover"
  }
}

const initialFormData = {
  "firstName": "Chuck",
  "lastName": "Norris",
  "age": 75,
}

<SchemaForm
  classes={classes}
  schema={schema}
  uiSchema={uiSchema}
  formData={initialFormData}
  onCancel={this.onCancel}
  onSubmit={this.onSubmit}
  onChange={this.onFormChanged}
/>

API

Prop	Description
schema	The JSON Schema that will be the base of the form
classes	`withStyles()` classes that get passed to root components for better styling of the form
uiSchema	Extra styling for fields. Each key references one schema key
formData	The initial data with which to populate the form
onCancel	Called when the `Cancel` button is pressed
onSubmit	Called when the `Submit` button is pressed
onChange	Called when form data is changed
cancelText	Text for the `Cancel` button (`Cancel` by default)
submitText	Text for the `Submit` button (`Submit` by default)
showErrorList	Boolean to display the error list
showHelperError	Boolean to display error in FormHelperText

Classes

name	element
root	The surrounding `Paper` element
field	Fields container
formButtons	Button div
button	Cancel/Submit form button
cancel	Cancel form button
submit	Submit form button

In-depth prop descriptions

uiSchema

ui:widget - `string`

This setting handles the input type that will be shown.

Default - textarea

radio
updown
password
textarea
checkboxes
~~alt-datetime (~~todo)

ui:title - `string`

Title of field that will be shown

ui:description - `string`

The description text that will be shown when hovering on the info icon

ui:options - `object`

inline - boolean

disabled - boolean

disabled - function(data, objectData) should return boolean

~~inputType (~~todo~~) - Format the input to a specific type (e.g. Phone, Credit Card, Date, etc)~~

ui:help - `string`

Help text that will be shown below the input

ui:orientation - `string`

row

default

Contributing

Issues and pull requests welcome!

Give the initial author credit, too.