Add widget capability to Array and Object fields

README.md

@@ -504,6 +504,8 @@ You can provide your own custom widgets to a uiSchema for the following json dat
 - `number`
 - `integer`
 - `boolean`
+- `array`
+- `object`
 
 ```jsx
 const schema = {

src/components/fields/ArrayField.js

@@ -2,6 +2,7 @@ import React, { Component, PropTypes } from "react";
 
 import {
  getDefaultFormState,
+ getAlternativeWidget,
  isMultiSelect,
  isFilesArray,
  isFixedItems,
@@ -121,6 +122,10 @@ class ArrayField extends Component {
 
  render() {
  const {schema, uiSchema} = this.props;
+ const widget = uiSchema["ui:widget"] || schema.format;
+ if (widget && widget !== 'checkboxes') {
+ return this.renderWidget();
+ }
  if (isFilesArray(schema, uiSchema)) {
  return this.renderFiles();
  }
@@ -133,6 +138,25 @@ class ArrayField extends Component {
  return this.renderNormalArray();
  }
 
+ renderWidget() {
+ const {schema, idSchema, uiSchema, name, required} = this.props;
+ const {title, description} = schema;
+ const {items} = this.state;
+ const {widgets} = this.props.registry;
+
+ const widget = uiSchema["ui:widget"] || schema.format;
+ const Widget = getAlternativeWidget(schema, widget, widgets);
+ return <Widget
+ id={idSchema && idSchema.id}
+ label={title || name}
+ placeholder={description}
+ onChange={this.onSelectChange}
+ schema={schema}
+ value={items}
+ required={required}
+ />;
+ }
+
  renderNormalArray() {
  const {
  schema,

src/components/fields/ObjectField.js

@@ -2,6 +2,7 @@ import React, { Component, PropTypes } from "react";
 
 import {
  getDefaultFormState,
+ getAlternativeWidget,
  orderProperties,
  retrieveSchema,
  shouldRender,
@@ -57,6 +58,10 @@ class ObjectField extends Component {
  };
  };
 
+ onObjectChange = (value) => {
+ this.asyncSetState(value);
+ };
+
  render() {
  const {
  uiSchema,
@@ -67,10 +72,12 @@ class ObjectField extends Component {
  disabled,
  readonly
  } = this.props;
- const {definitions, fields} = this.props.registry;
+ const {definitions, fields, widgets} = this.props.registry;
  const {SchemaField, TitleField, DescriptionField} = fields;
  const schema = retrieveSchema(this.props.schema, definitions);
  const title = schema.title || name;
+ const {description} = schema;
+ const widget = uiSchema['ui:widget'] || schema.format;
  let orderedProperties;
  try {
  const properties = Object.keys(schema.properties);
@@ -86,6 +93,18 @@ class ObjectField extends Component {
  </div>
  );
  }
+ if(widget) {
+ const Widget = getAlternativeWidget(schema, widget, widgets);
+ return <Widget
+ id={idSchema && idSchema.id}
+ label={title}
+ placeholder={description}
+ onChange={this.onObjectChange}
+ schema={schema}
+ value={this.state}
+ required={required}
+ />;
+ }
  return (
  <fieldset>
  {title ? <TitleField