Separate templates and allow a completely custom UI components

.gitignore

@@ -4,3 +4,5 @@ build
 dist
 lib
 yarn.lock
+.vscode
+.directory

playground/app.js

@@ -266,6 +266,7 @@ function ThemeSelector({ theme, select }) {
   };
   return (
     <Form
+      idPrefix="theme-selector"
       schema={themeSchema}
       formData={theme}
       onChange={({ formData }) => select(formData, themes[formData])}>
@@ -346,15 +347,12 @@ class App extends Component {
   }
 
   load = data => {
-    // Reset the ArrayFieldTemplate whenever you load new data
-    const { ArrayFieldTemplate, ObjectFieldTemplate } = data;
     // force resetting form component instance
     this.setState({ form: false }, _ =>
       this.setState({
         ...data,
         form: true,
-        ArrayFieldTemplate,
-        ObjectFieldTemplate,
+        templates: data.templates,
       })
     );
   };
@@ -400,8 +398,7 @@ class App extends Component {
       validate,
       theme,
       editor,
-      ArrayFieldTemplate,
-      ObjectFieldTemplate,
+      templates,
       transformErrors,
     } = this.state;
 
@@ -415,6 +412,7 @@ class App extends Component {
             </div>
             <div className="col-sm-2">
               <Form
+                idPrefix="live-validate"
                 schema={liveValidateSchema}
                 formData={liveValidate}
                 onChange={this.setLiveValidate}>
@@ -455,8 +453,7 @@ class App extends Component {
         <div className="col-sm-5">
           {this.state.form && (
             <Form
-              ArrayFieldTemplate={ArrayFieldTemplate}
-              ObjectFieldTemplate={ObjectFieldTemplate}
+              templates={templates}
               liveValidate={liveValidate}
               schema={schema}
               uiSchema={uiSchema}

playground/samples/customArray.js

@@ -54,5 +54,5 @@ module.exports = {
     },
   },
   formData: ["react", "jsonschema", "form"],
-  ArrayFieldTemplate,
+  templates: { ArrayFieldTemplate },
 };

playground/samples/customObject.js

@@ -1,9 +1,10 @@
 import React from "react";
 
-function ObjectFieldTemplate({ TitleField, properties, title, description }) {
+function ObjectFieldTemplate({ registry, properties, title, description, id }) {
+  const { TitleTemplate, DescriptionTemplate } = registry.templates;
   return (
     <div>
-      <TitleField title={title} />
+      <TitleTemplate title={title} />
       <div className="row">
         {properties.map(prop => (
           <div
@@ -13,7 +14,10 @@ function ObjectFieldTemplate({ TitleField, properties, title, description }) {
           </div>
         ))}
       </div>
-      {description}
+      <DescriptionTemplate
+        id={`${id}__description`}
+        description={description}
+      />
     </div>
   );
 }
@@ -61,5 +65,5 @@ module.exports = {
     bio: "Roundhouse kicking asses since 1940",
     password: "noneed",
   },
-  ObjectFieldTemplate,
+  templates: { ObjectFieldTemplate },
 };

src/components/Form.js

@@ -1,14 +1,12 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
 
-import { default as DefaultErrorList } from "./ErrorList";
 import {
   getDefaultFormState,
   retrieveSchema,
   shouldRender,
   toIdSchema,
   setState,
-  getDefaultRegistry,
 } from "../utils";
 import validateFormData, { toErrorList } from "../validate";
 
@@ -19,7 +17,6 @@ export default class Form extends Component {
     liveValidate: false,
     safeRenderCompletion: false,
     noHtml5Validate: false,
-    ErrorList: DefaultErrorList,
   };
 
   constructor(props) {
@@ -82,13 +79,13 @@ export default class Form extends Component {
     );
   }
 
-  renderErrors() {
+  renderErrors(ErrorListTemplate) {
     const { errors, errorSchema, schema, uiSchema } = this.state;
-    const { ErrorList, showErrorList, formContext } = this.props;
+    const { showErrorList, formContext } = this.props;
 
     if (errors.length && showErrorList != false) {
       return (
-        <ErrorList
+        <ErrorListTemplate
           errors={errors}
           errorSchema={errorSchema}
           schema={schema}
@@ -157,15 +154,10 @@ export default class Form extends Component {
   };
 
   getRegistry() {
-    // For BC, accept passed SchemaField and TitleField props and pass them to
-    // the "fields" registry one.
-    const { fields, widgets } = getDefaultRegistry();
     return {
-      fields: { ...fields, ...this.props.fields },
-      widgets: { ...widgets, ...this.props.widgets },
-      ArrayFieldTemplate: this.props.ArrayFieldTemplate,
-      ObjectFieldTemplate: this.props.ObjectFieldTemplate,
-      FieldTemplate: this.props.FieldTemplate,
+      fields: this.props.fields,
+      widgets: this.props.widgets,
+      templates: this.props.templates,
       definitions: this.props.schema.definitions || {},
       formContext: this.props.formContext || {},
     };
@@ -190,7 +182,10 @@ export default class Form extends Component {
 
     const { schema, uiSchema, formData, errorSchema, idSchema } = this.state;
     const registry = this.getRegistry();
-    const _SchemaField = registry.fields.SchemaField;
+    const {
+      fields: { SchemaField },
+      templates: { SubmitTemplate, ErrorListTemplate },
+    } = registry;
 
     return (
       <form
@@ -205,8 +200,8 @@ export default class Form extends Component {
         acceptCharset={acceptcharset}
         noValidate={noHtml5Validate}
         onSubmit={this.onSubmit}>
-        {this.renderErrors()}
-        <_SchemaField
+        {this.renderErrors(ErrorListTemplate)}
+        <SchemaField
           schema={schema}
           uiSchema={uiSchema}
           errorSchema={errorSchema}
@@ -219,15 +214,7 @@ export default class Form extends Component {
           registry={registry}
           safeRenderCompletion={safeRenderCompletion}
         />
-        {children ? (
-          children
-        ) : (
-          <p>
-            <button type="submit" className="btn btn-info">
-              Submit
-            </button>
-          </p>
-        )}
+        {children ? children : <SubmitTemplate />}
       </form>
     );
   }
@@ -240,12 +227,11 @@ if (process.env.NODE_ENV !== "production") {
     formData: PropTypes.any,
     widgets: PropTypes.objectOf(
       PropTypes.oneOfType([PropTypes.func, PropTypes.object])
-    ),
-    fields: PropTypes.objectOf(PropTypes.func),
-    ArrayFieldTemplate: PropTypes.func,
-    ObjectFieldTemplate: PropTypes.func,
-    FieldTemplate: PropTypes.func,
-    ErrorList: PropTypes.func,
+    ).isRequired,
+    templates: PropTypes.objectOf(
+      PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+    ).isRequired,
+    fields: PropTypes.objectOf(PropTypes.func).isRequired,
     onChange: PropTypes.func,
     onError: PropTypes.func,
     showErrorList: PropTypes.bool,