ArrayFieldTemplate

README.md

@@ -49,6 +49,7 @@ A [live playground](https://mozilla-services.github.io/react-jsonschema-form/) i
      - [Form attributes](#form-attributes)
   - [Advanced customization](#advanced-customization)
      - [Field template](#field-template)
+     - [Array template](#array-template)
      - [Custom widgets and fields](#custom-widgets-and-fields)
      - [Custom widget components](#custom-widget-components)
         - [Custom component registration](#custom-component-registration)
@@ -700,6 +701,58 @@ The following props are passed to a custom field template component:
 
 > Note: you can only define a single field template for a form. If you need many, it's probably time to look at [custom fields](#custom-field-components) instead.
 
+### Array Template
+
+Similarly to the `FieldTemplate` you can use an `ArrayFieldTemplate` to customize how your
+arrays are rendered. This allows you to customize your array, and each element in the array.
+
+```jsx
+function ArrayFieldTemplate(props) {
+  return (
+    <div>
+      {props.items.map(element => element.children)}
+      {props.canAdd && <button onClick={props.onAddClick}></button>}
+    </div>
+  );
+}
+
+render((
+  <Form schema={schema}
+        ArrayFieldTemplate={ArrayFieldTemplate} />,
+), document.getElementById("app"));
+```
+
+Please see [customArray.js](https://github.com/mozilla-services/react-jsonschema-form/blob/master/playground/samples/customArray.js) for a better example.
+
+The following props are passed to each `ArrayFieldTemplate`:
+
+- `DescriptionField`: The generated `DescriptionField` (if you wanted to utilize it)
+- `TitleField`: The generated `TitleField` (if you wanted to utilize it)
+- `canAdd`: boolean whether new elements can be added to array
+- `className`: string
+- `disabled`: boolean
+- `idSchema`: Object
+- `items`: Object[] - Each of the items represent a child with properties described below.
+- `onAddClick`: (event) => void
+- `readonly`: boolean
+- `required`: boolean
+- `schema`: Object
+- `title`: string
+
+The following props are part of each element in `items`:
+
+- `children`: JSX.Element
+- `className`: string
+- `disabled`: boolean
+- `hasMoveDown`: boolean whether the element can be moved down
+- `hasMoveUp`: boolean whether the element can be moved up
+- `hasRemove`: boolean whether the element can be removed
+- `hasToolbar`: boolean
+- `index`: number
+- `onDropIndexClick`: (index) => void
+- `onReorderClick`: (index, newIndex) => void
+- `readonly`: boolean
+
 ### Custom widgets and fields
 
 The API allows to specify your own custom *widget* and *field* components:

playground/app.js

@@ -283,9 +283,11 @@ class App extends Component {
   }
 
   load = (data) => {
+    // Reset the ArrayFieldTemplate whenever you load new data
+    const { ArrayFieldTemplate } = data;
     // force resetting form component instance
     this.setState({form: false},
-      _ => this.setState({...data, form: true}));
+      _ => this.setState({...data, form: true, ArrayFieldTemplate}));
   };
 
   onSchemaEdited   = (schema) => this.setState({schema});
@@ -314,7 +316,8 @@ class App extends Component {
       liveValidate,
       validate,
       theme,
-      editor
+      editor,
+      ArrayFieldTemplate
     } = this.state;
 
     return (
@@ -352,6 +355,7 @@ class App extends Component {
         <div className="col-sm-5">
           {!this.state.form ? null :
             <Form
+              ArrayFieldTemplate={ArrayFieldTemplate}
               liveValidate={liveValidate}
               schema={schema}
               uiSchema={uiSchema}

playground/samples/customArray.js

@@ -0,0 +1,38 @@
+import React, { Component } from "react";
+
+const ArrayFieldTemplate = props => (
+  <div className={props.className}>
+
+    {props.items && props.items.map(element => (
+      <div key={element.index}>
+        <div>{element.children}</div>
+        {element.hasMoveDown &&
+          <button onClick={element.onReorderClick(element.index, element.index + 1)}>Down</button>}
+        {element.hasMoveUp &&
+          <button onClick={element.onReorderClick(element.index, element.index - 1)}>Up</button>}
+        <button onClick={element.onDropIndexClick(element.index)}>Delete</button>
+        <hr />
+      </div>
+    ))}
+
+    {props.canAdd &&
+      <div className="row">
+        <p className="col-xs-3 col-xs-offset-9 array-item-add text-right">
+          <button onClick={props.onAddClick} type="button">Custom +</button>
+        </p>
+      </div>}
+
+  </div>
+);
+
+module.exports = {
+  schema: {
+    title: "Custom array of strings",
+    type: "array",
+    items: {
+      type: "string"
+    }
+  },
+  formData: ["react", "jsonschema", "form"],
+  ArrayFieldTemplate
+};

playground/samples/index.js

@@ -12,6 +12,7 @@ import date from "./date";
 import validation from "./validation";
 import files from "./files";
 import single from "./single";
+import customArray from "./customArray";
 
 export const samples = {
   Simple: simple,
@@ -27,5 +28,6 @@ export const samples = {
   "Date & time": date,
   Validation: validation,
   Files: files,
-  Single: single
-};
+  Single: single,
+  "Custom Array": customArray
+};

src/components/Form.js

@@ -119,6 +119,7 @@ export default class Form extends Component {
     return {
       fields: {...fields, ...this.props.fields},
       widgets: {...widgets, ...this.props.widgets},
+      ArrayFieldTemplate: this.props.ArrayFieldTemplate,
       FieldTemplate: this.props.FieldTemplate,
       definitions: this.props.schema.definitions || {},
       formContext: this.props.formContext || {},
@@ -184,6 +185,7 @@ if (process.env.NODE_ENV !== "production") {
       PropTypes.object,
     ])),
     fields: PropTypes.objectOf(PropTypes.func),
+    ArrayFieldTemplate: PropTypes.func,
     FieldTemplate: PropTypes.func,
     onChange: PropTypes.func,
     onError: PropTypes.func,