Handle fixed items arrays (rjsf-team#132)

Author: rhgb

README.md

@@ -42,6 +42,7 @@ A [live playground](https://mozilla-services.github.io/react-jsonschema-form/) i
  - [Live form data validation](#live-form-data-validation)
  - [Styling your forms](#styling-your-forms)
  - [Schema definitions and references](#schema-definitions-and-references)
+ - [JSON Schema supporting status](#json-schema-supporting-status)
  - [Troubleshooting](#troubleshooting)
  - [Build error wrt missing "buffertools" module](#build-error-wrt-missing-buffertools-module)
  - [Contributing](#contributing)
@@ -636,6 +637,13 @@ This library partially supports [inline schema definition dereferencing]( http:/
 
 Note that it only supports local definition referencing, we do not plan on fetching foreign schemas over HTTP anytime soon. Basically, you can only reference a definition from the very schema object defining it.
 
+## JSON Schema supporting status
+
+This component follows [JSON Schema](http://json-schema.org/documentation.html) specs. Due to the limitation of form widgets, there are some exceptions as follows:
+
+* `additionalItems` keyword for arrays
+ This keyword works when `items` is an array. `additionalItems: true` is not supported because there's no widget to represent an item of any type. In this case it will be treated as no additional items allowed. `additionalItems` being a valid schema is supported.
+
 ## Troubleshooting
 
 ### Build error wrt missing "buffertools" module

playground/samples/arrays.js

@@ -18,12 +18,55 @@ module.exports = {
  enum: ["foo", "bar", "fuzz"],
  },
  uniqueItems: true
+ },
+ fixedItemsList: {
+ type: "array",
+ title: "A list of fixed items",
+ items: [
+ {
+ title: "A string value",
+ type: "string",
+ default: "lorem ipsum"
+ },
+ {
+ title: "a boolean value",
+ type: "boolean"
+ }
+ ],
+ additionalItems: {
+ title: "Additional item",
+ type: "number"
+ }
+ },
+ nestedList: {
+ type: "array",
+ title: "Nested list",
+ items: {
+ type: "array",
+ title: "Inner list",
+ items: {
+ type: "string",
+ default: "lorem ipsum"
+ }
+ }
+ }
+ }
+ },
+ uiSchema: {
+ fixedItemsList: {
+ items: [
+ {"ui:widget": "textarea"},
+ {"ui:widget": "select"}
+ ],
+ additionalItems: {
+ "ui:widget": "updown"
  }
  }
  },
- uiSchema: {},
  formData: {
  listOfStrings: ["foo", "bar"],
- multipleChoicesList: ["foo", "bar"]
+ multipleChoicesList: ["foo", "bar"],
+ fixedItemsList: ["Some text", true, 123],
+ nestedList: [["lorem", "ipsum"], ["dolor"]]
  }
 };

src/components/fields/ArrayField.js

@@ -3,6 +3,8 @@ import React, { Component, PropTypes } from "react";
 import {
  getDefaultFormState,
  isMultiSelect,
+ isFixedItems,
+ allowAdditionalItems,
  optionsList,
  retrieveSchema,
  toIdSchema,
@@ -59,8 +61,12 @@ class ArrayField extends Component {
  const {items} = this.state;
  const {schema, registry} = this.props;
  const {definitions} = registry;
+ let itemSchema = schema.items;
+ if (isFixedItems(schema) && allowAdditionalItems(schema)) {
+ itemSchema = schema.additionalItems;
+ }
  this.asyncSetState({
- items: items.concat([getDefaultFormState(schema.items, undefined, definitions)])
+ items: items.concat([getDefaultFormState(itemSchema, undefined, definitions)])
  }, {validate: false});
  };
 
@@ -88,25 +94,22 @@ class ArrayField extends Component {
  };
 
  render() {
+ const {schema} = this.props;
+ if (isFixedItems(schema)) {
+ return this.renderFixedArray();
+ }
+ if (isMultiSelect(schema)) {
+ return this.renderMultiSelect();
+ }
+ return this.renderNormalArray();
+ }
+
+ renderNormalArray() {
  const {schema, uiSchema, errorSchema, idSchema, name} = this.props;
  const title = schema.title || name;
  const {items} = this.state;
- const {fields, definitions} = this.props.registry;
- const {SchemaField} = fields;
+ const {definitions} = this.props.registry;
  const itemsSchema = retrieveSchema(schema.items, definitions);
- if (isMultiSelect(schema)) {
- return (
- <SelectWidget
- id={idSchema && idSchema.id}
- multiple
- onChange={this.onSelectChange}
- options={optionsList(itemsSchema)}
- schema={schema}
- title={title}
- value={items}
- />
- );
- }
 
  return (
  <fieldset
@@ -119,37 +122,138 @@ class ArrayField extends Component {
  const itemErrorSchema = errorSchema ? errorSchema[index] : undefined;
  const itemIdPrefix = idSchema.id + "_" + index;
  const itemIdSchema = toIdSchema(itemsSchema, itemIdPrefix, definitions);
- return (
- <div key={index}>
- <div className="col-xs-10">
- <SchemaField
- schema={itemsSchema}
- uiSchema={uiSchema.items}
- formData={items[index]}
- errorSchema={itemErrorSchema}
- idSchema={itemIdSchema}
- required={this.isItemRequired(itemsSchema)}
- onChange={this.onChangeForIndex(index)}
- registry={this.props.registry}/>
- </div>
- <div className="col-xs-2 array-item-remove text-right">
- <button type="button" className="btn btn-danger col-xs-12"
- tabIndex="-1"
- onClick={this.onDropIndexClick(index)}>Delete</button>
- </div>
- </div>
- );
+ return this.renderArrayFieldItem({
+ index,
+ itemSchema: itemsSchema,
+ itemIdSchema,
+ itemErrorSchema,
+ itemData: items[index],
+ itemUiSchema: uiSchema.items
+ });
  })
  }</div>
- <div className="row">
- <p className="col-xs-2 col-xs-offset-10 array-item-add text-right">
- <button type="button" className="btn btn-info col-xs-12"
- tabIndex="-1" onClick={this.onAddClick}>Add</button>
- </p>
- </div>
+ <AddButton onClick={this.onAddClick}/>
  </fieldset>
  );
  }
+
+ renderMultiSelect() {
+ const {schema, idSchema, name} = this.props;
+ const title = schema.title || name;
+ const {items} = this.state;
+ const {definitions} = this.props.registry;
+ const itemsSchema = retrieveSchema(schema.items, definitions);
+ return (
+ <SelectWidget
+ id={idSchema && idSchema.id}
+ multiple
+ onChange={this.onSelectChange}
+ options={optionsList(itemsSchema)}
+ schema={schema}
+ title={title}
+ value={items}
+ />
+ );
+ }
+
+ renderFixedArray() {
+ const {schema, uiSchema, errorSchema, idSchema, name} = this.props;
+ const title = schema.title || name;
+ let {items} = this.state;
+ const {definitions} = this.props.registry;
+ const itemSchemas = schema.items.map(item =>
+ retrieveSchema(item, definitions));
+ const additionalSchema = allowAdditionalItems(schema) ?
+ retrieveSchema(schema.additionalItems, definitions) : null;
+
+ if (!items || items.length < itemSchemas.length) {
+ // to make sure at least all fixed items are generated
+ items = items || [];
+ items = items.concat(new Array(itemSchemas.length - items.length));
+ }
+
+ return (
+ <fieldset className="field field-array field-array-fixed-items">
+ {title ? <legend>{title}</legend> : null}
+ {schema.description ?
+ <div className="field-description">{schema.description}</div> : null}
+ <div className="row array-item-list">{
+ items.map((item, index) => {
+ const additional = index >= itemSchemas.length;
+ const itemSchema = additional ?
+ additionalSchema : itemSchemas[index];
+ const itemIdPrefix = idSchema.id + "_" + index;
+ const itemIdSchema = toIdSchema(itemSchema, itemIdPrefix, definitions);
+ const itemUiSchema = additional ?
+ uiSchema.additionalItems || {} :
+ Array.isArray(uiSchema.items) ?
+ uiSchema.items[index] : uiSchema.items || {};
+ const itemErrorSchema = errorSchema ? errorSchema[index] : undefined;
+
+ return this.renderArrayFieldItem({
+ index,
+ removable: additional,
+ itemSchema,
+ itemData: item,
+ itemUiSchema,
+ itemIdSchema,
+ itemErrorSchema
+ });
+ })
+ }</div>
+ {
+ additionalSchema ? <AddButton onClick={this.onAddClick}/> : null
+ }
+ </fieldset>
+ );
+ }
+
+ renderArrayFieldItem({
+ index,
+ removable=true,
+ itemSchema,
+ itemData,
+ itemUiSchema,
+ itemIdSchema,
+ itemErrorSchema
+ }) {
+ const {SchemaField} = this.props.registry.fields;
+ return (
+ <div key={index}>
+ <div className={removable ? "col-xs-10" : "col-xs-12"}>
+ <SchemaField
+ schema={itemSchema}
+ uiSchema={itemUiSchema}
+ formData={itemData}
+ errorSchema={itemErrorSchema}
+ idSchema={itemIdSchema}
+ required={this.isItemRequired(itemSchema)}
+ onChange={this.onChangeForIndex(index)}
+ registry={this.props.registry}/>
+ </div>
+ {
+ removable ?
+ <div className="col-xs-2 array-item-remove text-right">
+ <button type="button" className="btn btn-danger col-xs-12"
+ tabIndex="-1"
+ onClick={this.onDropIndexClick(index)}>Delete</button>
+ </div>
+ : null
+ }
+ </div>
+ );
+ }
+}
+
+function AddButton({onClick}) {
+ return (
+ <div className="row">
+ <p className="col-xs-2 col-xs-offset-10 array-item-add text-right">
+ <button type="button" className="btn btn-info col-xs-12"
+ tabIndex="-1" onClick={onClick}>Add</button>
+ </p>
+ </div>
+ );
 }
 
 if (process.env.NODE_ENV !== "production") {

src/utils.js

@@ -13,7 +13,7 @@ import URLWidget from "./components/widgets/URLWidget";
 import TextareaWidget from "./components/widgets/TextareaWidget";
 import HiddenWidget from "./components/widgets/HiddenWidget";
 
-const RE_ERROR_ARRAY_PATH = /(.*)\[(\d+)\]$/;
+const RE_ERROR_ARRAY_PATH = /\[\d+]/g;
 
 const altWidgetMap = {
  boolean: {
@@ -111,6 +111,8 @@ function computeDefaults(schema, parentDefaults, definitions={}) {
  // Use referenced schema defaults for this node.
  const refSchema = findSchemaDefinition(schema.$ref, definitions);
  defaults = computeDefaults(refSchema, defaults, definitions);
+ } else if (isFixedItems(schema)) {
+ defaults = schema.items.map(itemSchema => computeDefaults(itemSchema, undefined, definitions));
  }
  // Not defaults defined for this node, fallback to generic typed ones.
  if (typeof(defaults) === "undefined") {
@@ -193,6 +195,19 @@ export function isMultiSelect(schema) {
  return Array.isArray(schema.items.enum) && schema.uniqueItems;
 }
 
+export function isFixedItems(schema) {
+ return Array.isArray(schema.items) &&
+ schema.items.length > 0 &&
+ schema.items.every(item => isObject(item));
+}
+
+export function allowAdditionalItems(schema) {
+ if (schema.additionalItems === true) {
+ console.warn("additionalItems=true is currently not supported");
+ }
+ return isObject(schema.additionalItems);
+}
+
 export function optionsList(schema) {
  return schema.enum.map((value, i) => {
  const label = schema.enumNames && schema.enumNames[i] || String(value);
@@ -227,9 +242,11 @@ function errorPropertyToPath(property) {
  // Parse array indices, eg. "instance.level1.level2[2].level3"
  // => ["instance", "level1", "level2", 2, "level3"]
  return property.split(".").reduce((path, node) => {
- const match = RE_ERROR_ARRAY_PATH.exec(node);
+ const match = node.match(RE_ERROR_ARRAY_PATH);
  if (match) {
- path = path.concat([match[1], parseInt(match[2], 10)]);
+ const nodeName = node.slice(0, node.indexOf('['));
+ const indices = match.map(str => parseInt(str.slice(1, -1), 10));
+ path = path.concat(nodeName, indices);
  } else {
  path.push(node);
  }