Add an array field template component (rjsf-team#437)

Author: dehli

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 field template](#array-field-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 Field 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`: A boolean value stating whether new elements can be added to the array.
+- `className`: The className string.
+- `disabled`: A boolean value stating if the array is disabled.
+- `idSchema`: Object
+- `items`: An array of objects representing the items in the array. Each of the items represent a child with properties described below.
+- `onAddClick: (event) => (event) => void`: Returns a function that adds a new item to the array.
+- `readonly`: A boolean value stating if the array is readonly.
+- `required`: A boolean value stating if the array is required.
+- `schema`: The schema object for this array.
+- `title`: A string value containing the title for the array.
+
+The following props are part of each element in `items`:
+
+- `children`: The html for the item's content.
+- `className`: The className string.
+- `disabled`: A boolean value stating if the array item is disabled.
+- `hasMoveDown`: A boolean value stating whether the array item can be moved down.
+- `hasMoveUp`: A boolean value stating whether the array item can be moved up.
+- `hasRemove`: A boolean value stating whether the array item can be removed.
+- `hasToolbar`: A boolean value stating whether the array item has a toolbar.
+- `index`: A number stating the index the array item occurs in `items`.
+- `onDropIndexClick: (index) => (event) => void`: Returns a function that removes the item at `index`.
+- `onReorderClick: (index, newIndex) => (event) => void`: Returns a function that swaps the items at `index` with `newIndex`.
+- `readonly`: A boolean value stating if the array item is readonly.
+
 ### 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,40 @@
+import React, { Component } from "react";
+
+function ArrayFieldTemplate(props) {
+ return (
+ <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,