Added ui:*Template properties

package.json

@@ -7,8 +7,8 @@
     "build:lib": "rimraf lib && cross-env NODE_ENV=production babel -d lib/ src/",
     "build:dist": "rimraf dist && cross-env NODE_ENV=production webpack --config webpack.config.dist.js",
     "build:playground": "rimraf build && cross-env NODE_ENV=production webpack --config webpack.config.prod.js && cp playground/index.prod.html build/index.html",
-    "cs-check": "prettier -l $npm_package_prettierOptions '{playground,src,test}/**/*.js'",
-    "cs-format": "prettier --jsx-bracket-same-line --trailing-comma es5 --use-tabs false --semi --tab-width 2 '{playground,src,test}/**/*.js' --write",
+    "cs-check": "prettier -l $npm_package_prettierOptions \"{playground,src,test}/**/*.js\"",
+    "cs-format": "prettier --jsx-bracket-same-line --trailing-comma es5 --use-tabs false --semi --tab-width 2 \"{playground,src,test}/**/*.js\" --write",
     "dist": "npm run build:lib && npm run build:dist",
     "lint": "eslint src test playground",
     "prepare": "npm run dist",

src/components/fields/ArrayField.js

@@ -411,7 +411,10 @@ class ArrayField extends Component {
     };
 
     // Check if a custom render function was passed in
-    const Component = ArrayFieldTemplate || DefaultNormalArrayFieldTemplate;
+    const Component =
+      uiSchema["ui:ArrayFieldTemplate"] ||
+      ArrayFieldTemplate ||
+      DefaultNormalArrayFieldTemplate;
     return <Component {...arrayProps} />;
   }
 
@@ -585,7 +588,10 @@ class ArrayField extends Component {
     };
 
     // Check if a custom template template was passed in
-    const Template = ArrayFieldTemplate || DefaultFixedArrayFieldTemplate;
+    const Template =
+      uiSchema["ui:ArrayFieldTemplate"] ||
+      ArrayFieldTemplate ||
+      DefaultFixedArrayFieldTemplate;
     return <Template {...arrayProps} />;
   }
 

src/components/fields/ObjectField.js

@@ -212,7 +212,10 @@ class ObjectField extends Component {
       );
     }
 
-    const Template = registry.ObjectFieldTemplate || DefaultObjectFieldTemplate;
+    const Template =
+      uiSchema["ui:ObjectFieldTemplate"] ||
+      registry.ObjectFieldTemplate ||
+      DefaultObjectFieldTemplate;
 
     const templateProps = {
       title: uiSchema["ui:title"] || title,

src/components/fields/SchemaField.js

@@ -221,12 +221,9 @@ function SchemaFieldRender(props) {
     required,
     registry = getDefaultRegistry(),
   } = props;
-  const {
-    definitions,
-    fields,
-    formContext,
-    FieldTemplate = DefaultTemplate,
-  } = registry;
+  const { definitions, fields, formContext } = registry;
+  const FieldTemplate =
+    uiSchema["ui:FieldTemplate"] || registry.FieldTemplate || DefaultTemplate;
   let idSchema = props.idSchema;
   const schema = retrieveSchema(props.schema, definitions, formData);
   idSchema = mergeObjects(

test/ArrayFieldTemplate_test.js

@@ -46,14 +46,33 @@ describe("ArrayFieldTemplate", () => {
         }
       }
 
-      it("should render a stateful custom component", () => {
-        const { node } = createFormComponent({
-          schema: { type: "array", items: { type: "string" } },
-          formData,
-          ArrayFieldTemplate,
+      describe("with template globally configured", () => {
+        it("should render a stateful custom component", () => {
+          const { node } = createFormComponent({
+            schema: { type: "array", items: { type: "string" } },
+            formData,
+            ArrayFieldTemplate,
+          });
+
+          expect(node.querySelectorAll(".field-array div")).to.have.length.of(
+            6
+          );
+        });
+      });
+      describe("with template configured in ui:ArrayFieldTemplate", () => {
+        it("should render a stateful custom component", () => {
+          const { node } = createFormComponent({
+            schema: { type: "array", items: { type: "string" } },
+            formData,
+            uiSchema: {
+              "ui:ArrayFieldTemplate": ArrayFieldTemplate,
+            },
+          });
+
+          expect(node.querySelectorAll(".field-array div")).to.have.length.of(
+            6
+          );
         });
-
-        expect(node.querySelectorAll(".field-array div")).to.have.length.of(6);
       });
     });
 
@@ -65,52 +84,74 @@ describe("ArrayFieldTemplate", () => {
         items: { type: "string" },
       };
 
-      const uiSchema = {
-        classNames: "custom-array",
-      };
-
       let node;
 
-      beforeEach(() => {
-        node = createFormComponent({
-          ArrayFieldTemplate,
-          formData,
-          schema,
-          uiSchema,
-        }).node;
-      });
+      describe("with template globally configured", () => {
+        const uiSchema = {
+          classNames: "custom-array",
+        };
+
+        beforeEach(() => {
+          node = createFormComponent({
+            ArrayFieldTemplate,
+            formData,
+            schema,
+            uiSchema,
+          }).node;
+        });
 
-      it("should render one root element for the array", () => {
-        expect(node.querySelectorAll(".custom-array")).to.have.length.of(1);
+        sharedIts();
       });
-
-      it("should render one add button", () => {
-        expect(node.querySelectorAll(".custom-array-add")).to.have.length.of(1);
+      describe("with template configured in ui:ArrayFieldTemplate", () => {
+        const uiSchema = {
+          classNames: "custom-array",
+          "ui:ArrayFieldTemplate": ArrayFieldTemplate,
+        };
+
+        beforeEach(() => {
+          node = createFormComponent({
+            formData,
+            schema,
+            uiSchema,
+          }).node;
+        });
+        sharedIts();
       });
+      function sharedIts() {
+        it("should render one root element for the array", () => {
+          expect(node.querySelectorAll(".custom-array")).to.have.length.of(1);
+        });
 
-      it("should render one child for each array item", () => {
-        expect(node.querySelectorAll(".custom-array-item")).to.have.length.of(
-          formData.length
-        );
-      });
+        it("should render one add button", () => {
+          expect(node.querySelectorAll(".custom-array-add")).to.have.length.of(
+            1
+          );
+        });
 
-      it("should render text input for each array item", () => {
-        expect(
-          node.querySelectorAll(".custom-array-item .field input[type=text]")
-        ).to.have.length.of(formData.length);
-      });
+        it("should render one child for each array item", () => {
+          expect(node.querySelectorAll(".custom-array-item")).to.have.length.of(
+            formData.length
+          );
+        });
 
-      it("should render move up button for all but one array items", () => {
-        expect(
-          node.querySelectorAll(".custom-array-item-move-up")
-        ).to.have.length.of(formData.length - 1);
-      });
+        it("should render text input for each array item", () => {
+          expect(
+            node.querySelectorAll(".custom-array-item .field input[type=text]")
+          ).to.have.length.of(formData.length);
+        });
 
-      it("should render move down button for all but one array items", () => {
-        expect(
-          node.querySelectorAll(".custom-array-item-move-down")
-        ).to.have.length.of(formData.length - 1);
-      });
+        it("should render move up button for all but one array items", () => {
+          expect(
+            node.querySelectorAll(".custom-array-item-move-up")
+          ).to.have.length.of(formData.length - 1);
+        });
+
+        it("should render move down button for all but one array items", () => {
+          expect(
+            node.querySelectorAll(".custom-array-item-move-down")
+          ).to.have.length.of(formData.length - 1);
+        });
+      }
     });
 
     describe("fixed items", () => {
@@ -121,52 +162,72 @@ describe("ArrayFieldTemplate", () => {
         items: [{ type: "string" }, { type: "string" }, { type: "string" }],
       };
 
-      const uiSchema = {
-        classNames: "custom-array",
-      };
-
       let node;
 
-      beforeEach(() => {
-        node = createFormComponent({
-          ArrayFieldTemplate,
-          formData,
-          schema,
-          uiSchema,
-        }).node;
+      describe("with template globally configured", () => {
+        const uiSchema = {
+          classNames: "custom-array",
+        };
+        beforeEach(() => {
+          node = createFormComponent({
+            formData,
+            schema,
+            uiSchema,
+            ArrayFieldTemplate,
+          }).node;
+        });
+        sharedIts();
       });
 
-      it("should render one root element for the array", () => {
-        expect(node.querySelectorAll(".custom-array")).to.have.length.of(1);
+      describe("with template configured in ui:ArrayFieldTemplate", () => {
+        const uiSchema = {
+          classNames: "custom-array",
+          "ui:ArrayFieldTemplate": ArrayFieldTemplate,
+        };
+        beforeEach(() => {
+          node = createFormComponent({
+            formData,
+            schema,
+            uiSchema,
+          }).node;
+        });
+        sharedIts();
       });
+      function sharedIts() {
+        it("should render one root element for the array", () => {
+          expect(node.querySelectorAll(".custom-array")).to.have.length.of(1);
+        });
 
-      it("should not render an add button", () => {
-        expect(node.querySelectorAll(".custom-array-add")).to.have.length.of(0);
-      });
+        it("should not render an add button", () => {
+          expect(node.querySelectorAll(".custom-array-add")).to.have.length.of(
+            0
+          );
+        });
 
-      it("should render one child for each array item", () => {
-        expect(node.querySelectorAll(".custom-array-item")).to.have.length.of(
-          formData.length
-        );
-      });
+        it("should render one child for each array item", () => {
+          expect(node.querySelectorAll(".custom-array-item")).to.have.length.of(
+            formData.length
+          );
+        });
 
-      it("should render text input for each array item", () => {
-        expect(
-          node.querySelectorAll(".custom-array-item .field input[type=text]")
-        ).to.have.length.of(formData.length);
-      });
+        it("should render text input for each array item", () => {
+          expect(
+            node.querySelectorAll(".custom-array-item .field input[type=text]")
+          ).to.have.length.of(formData.length);
+        });
 
-      it("should not render any move up buttons", () => {
-        expect(
-          node.querySelectorAll(".custom-array-item-move-up")
-        ).to.have.length.of(0);
-      });
+        it("should not render any move up buttons", () => {
+          expect(
+            node.querySelectorAll(".custom-array-item-move-up")
+          ).to.have.length.of(0);
+        });
 
-      it("should not render any move down buttons", () => {
-        expect(
-          node.querySelectorAll(".custom-array-item-move-down")
-        ).to.have.length.of(0);
-      });
+        it("should not render any move down buttons", () => {
+          expect(
+            node.querySelectorAll(".custom-array-item-move-down")
+          ).to.have.length.of(0);
+        });
+      }
     });
   });
 });

test/FieldTemplate_test.js

@@ -19,22 +19,41 @@ describe("FieldTemplate", () => {
       return <div className={props.disabled ? "disabled" : "foo"} />;
     }
 
-    it("should render with disabled when ui:disabled is truthy", () => {
-      const { node } = createFormComponent({
-        schema: { type: "string" },
-        uiSchema: { "ui:disabled": true },
-        FieldTemplate,
+    describe("with template globally configured", () => {
+      it("should render with disabled when ui:disabled is truthy", () => {
+        const { node } = createFormComponent({
+          schema: { type: "string" },
+          uiSchema: { "ui:disabled": true },
+          FieldTemplate,
+        });
+        expect(node.querySelectorAll(".disabled")).to.have.length.of(1);
+      });
+
+      it("should render with disabled when ui:disabled is falsey", () => {
+        const { node } = createFormComponent({
+          schema: { type: "string" },
+          uiSchema: { "ui:disabled": false },
+          FieldTemplate,
+        });
+        expect(node.querySelectorAll(".disabled")).to.have.length.of(0);
       });
-      expect(node.querySelectorAll(".disabled")).to.have.length.of(1);
     });
+    describe("with template configured in ui:ObjectFieldTemplate", () => {
+      it("should render with disabled when ui:disabled is truthy", () => {
+        const { node } = createFormComponent({
+          schema: { type: "string" },
+          uiSchema: { "ui:disabled": true, "ui:FieldTemplate": FieldTemplate },
+        });
+        expect(node.querySelectorAll(".disabled")).to.have.length.of(1);
+      });
 
-    it("should render with disabled when ui:disabled is falsey", () => {
-      const { node } = createFormComponent({
-        schema: { type: "string" },
-        uiSchema: { "ui:disabled": false },
-        FieldTemplate,
+      it("should render with disabled when ui:disabled is falsey", () => {
+        const { node } = createFormComponent({
+          schema: { type: "string" },
+          uiSchema: { "ui:disabled": false, "ui:FieldTemplate": FieldTemplate },
+        });
+        expect(node.querySelectorAll(".disabled")).to.have.length.of(0);
       });
-      expect(node.querySelectorAll(".disabled")).to.have.length.of(0);
     });
   });
 });