Spread formContext to ArrayTemplateField, files and multiselect arrays (

#456)

README.md

@@ -776,6 +776,7 @@ The following props are passed to each `ArrayFieldTemplate`:
 - `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.
+- `formContext`: The `formContext` object that you passed to Form.
 
 The following props are part of each element in `items`:
 

src/components/fields/ArrayField.js

@@ -283,6 +283,7 @@ class ArrayField extends Component {
       readonly,
       autofocus,
       registry,
+      formContext,
       onBlur
     } = this.props;
     const title = (schema.title === undefined) ? name : schema.title;
@@ -320,7 +321,8 @@ class ArrayField extends Component {
       required,
       schema,
       title,
-      TitleField
+      TitleField,
+      formContext
     };
 
     // Check if a custom render function was passed in
@@ -331,7 +333,7 @@ class ArrayField extends Component {
   renderMultiSelect() {
     const {schema, idSchema, uiSchema, disabled, readonly, autofocus, onBlur} = this.props;
     const {items} = this.state;
-    const {widgets, definitions} = this.props.registry;
+    const {widgets, definitions, formContext} = this.props.registry;
     const itemsSchema = retrieveSchema(schema.items, definitions);
     const enumOptions = optionsList(itemsSchema);
     const {widget="select", ...options} = {...getUiOptions(uiSchema), enumOptions};
@@ -347,6 +349,7 @@ class ArrayField extends Component {
         value={items}
         disabled={disabled}
         readonly={readonly}
+        formContext={formContext}
         autofocus={autofocus}/>
     );
   }
@@ -355,7 +358,7 @@ class ArrayField extends Component {
     const {schema, uiSchema, idSchema, name, disabled, readonly, autofocus, onBlur} = this.props;
     const title = schema.title || name;
     const {items} = this.state;
-    const {widgets} = this.props.registry;
+    const {widgets, formContext} = this.props.registry;
     const {widget="files", ...options} = getUiOptions(uiSchema);
     const Widget = getWidget(schema, widget, widgets);
     return (
@@ -370,6 +373,7 @@ class ArrayField extends Component {
         value={items}
         disabled={disabled}
         readonly={readonly}
+        formContext={formContext}
         autofocus={autofocus}/>
     );
   }

test/FormContext_test.js

@@ -66,7 +66,6 @@ describe("FormContext", () => {
     const {node} = createFormComponent({
       schema: {
         type: "object",
-        title: "A title",
         properties: {
           prop: {
             type:  "string"
@@ -81,6 +80,26 @@ describe("FormContext", () => {
       .to.exist;
   });
 
+  it("should be passed to ArrayTemplateField", () => {
+    function CustomArrayTemplateField({formContext}) {
+      return <div id={formContext.foo}/>;
+    }
+
+    const {node} = createFormComponent({
+      schema: {
+        type: "array",
+        items: {
+          type:  "string"
+        }
+      },
+      ArrayFieldTemplate: CustomArrayTemplateField,
+      formContext
+    });
+
+    expect(node.querySelector("#" + formContext.foo))
+      .to.exist;
+  });
+
   it("should be passed to custom TitleField", () => {
     const fields = {TitleField: CustomComponent};
 
@@ -114,4 +133,43 @@ describe("FormContext", () => {
     expect(node.querySelector("#" + formContext.foo))
       .to.exist;
   });
+
+
+  it("should be passed to multiselect", () => {
+    const widgets = {SelectWidget: CustomComponent};
+    const {node} = createFormComponent({
+      schema: {
+        type: "array",
+        items: {
+          type: "string",
+          enum: ["foo"],
+          enumNames: ["bar"]
+        },
+        uniqueItems: true
+      },
+      widgets,
+      formContext
+    });
+
+    expect(node.querySelector("#" + formContext.foo))
+      .to.exist;
+  });
+
+  it("should be passed to files array", () => {
+    const widgets = {FileWidget: CustomComponent};
+    const {node} = createFormComponent({
+      schema: {
+        type: "array",
+        items: {
+          type: "string",
+          format: "data-url"
+        }
+      },
+      widgets,
+      formContext
+    });
+
+    expect(node.querySelector("#" + formContext.foo))
+      .to.exist;
+  });
 });