Fix #536: Pass uiSchema to custom array templates.

README.md

@@ -793,6 +793,7 @@ The following props are passed to each `ArrayFieldTemplate`:
 - `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.
+- `uiSchema`: The uiSchema object for this array field.
 - `title`: A string value containing the title for the array.
 - `formContext`: The `formContext` object that you passed to Form.
 

src/components/fields/ArrayField.js

@@ -323,6 +323,7 @@ class ArrayField extends Component {
       DescriptionField,
       disabled,
       idSchema,
+      uiSchema,
       onAddClick: this.onAddClick,
       readonly,
       required,
@@ -475,13 +476,14 @@ class ArrayField extends Component {
       readonly,
       required,
       schema,
+      uiSchema,
       title,
       TitleField,
     };
 
     // Check if a custom template template was passed in
-    const renderFunction = ArrayFieldTemplate || DefaultFixedArrayFieldTemplate;
-    return renderFunction(arrayProps);
+    const Template = ArrayFieldTemplate || DefaultFixedArrayFieldTemplate;
+    return <Template {...arrayProps} />;
   }
 
   renderArrayFieldItem(props) {

test/ArrayFieldTemplate_test.js

@@ -19,7 +19,7 @@ describe("ArrayFieldTemplate", () => {
   describe("Custom ArrayFieldTemplate of string array", () => {
     function ArrayFieldTemplate(props) {
       return (
-        <div className="custom-array">
+        <div className={props.uiSchema.classNames}>
           {props.canAdd && <button className="custom-array-add" />}
           {props.items.map(element => {
             return (
@@ -63,13 +63,18 @@ describe("ArrayFieldTemplate", () => {
         items: { type: "string" },
       };
 
+      const uiSchema = {
+        classNames: "custom-array",
+      };
+
       let node;
 
       beforeEach(() => {
         node = createFormComponent({
           ArrayFieldTemplate,
           formData,
           schema,
+          uiSchema,
         }).node;
       });
 
@@ -114,12 +119,18 @@ describe("ArrayFieldTemplate", () => {
         items: [{ type: "string" }, { type: "string" }, { type: "string" }],
       };
 
+      const uiSchema = {
+        classNames: "custom-array",
+      };
+
       let node;
+
       beforeEach(() => {
         node = createFormComponent({
           ArrayFieldTemplate,
           formData,
           schema,
+          uiSchema,
         }).node;
       });