Repository: mozilla-services/react-jsonschema-form (js)

Issue:
Multiple Array Types
I have two different kinds of arrays in my form which should be rendered differently. However, I cannot multiplex the ArrayField template because you do not pass the uiSchema as props to it (with which I would pass a 'ui:options' describing the array type).

Would it be possible to pass the uiSchema (or maybe there is another way to handle multiple custom array fields I'm not seeing).

### Version
v0.45.0

Thanks for the great library!

Pull request description:
Fix #536: Pass uiSchema to custom array templates.
Fix #536.

Patch:
diff --git a/README.md b/README.md
index 2ad800b25..0d8665cfb 100644
--- a/README.md
+++ b/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.
 
diff --git a/src/components/fields/ArrayField.js b/src/components/fields/ArrayField.js
index 0f9e1d37f..6c59dc5ed 100644
--- a/src/components/fields/ArrayField.js
+++ b/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 patch:
diff --git a/test/ArrayFieldTemplate_test.js b/test/ArrayFieldTemplate_test.js
index 128d1ec1a..b36a35c1e 100644
--- a/test/ArrayFieldTemplate_test.js
+++ b/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,6 +63,10 @@ describe("ArrayFieldTemplate", () => {
         items: { type: "string" },
       };
 
+      const uiSchema = {
+        classNames: "custom-array",
+      };
+
       let node;
 
       beforeEach(() => {
@@ -70,6 +74,7 @@ describe("ArrayFieldTemplate", () => {
           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;
       });