@rjsf/core 5.0.0-beta.6 → 5.0.0-beta.9

package/dist/core.cjs.development.js

@@ -784,9 +784,11 @@ class ArrayField extends React.Component {
     } = this.props;
     const {
       fields: {
+        ArraySchemaField,
         SchemaField
       }
     } = registry;
+    const ItemSchemaField = ArraySchemaField || SchemaField;
     const {
       orderable = true,
       removable = true
@@ -799,7 +801,7 @@ class ArrayField extends React.Component {
     };
     has.toolbar = Object.keys(has).some(key => has[key]);
     return {
-      children: /*#__PURE__*/React__default["default"].createElement(SchemaField, {
+      children: /*#__PURE__*/React__default["default"].createElement(ItemSchemaField, {
         name: name,
         index: index,
         schema: itemSchema,
@@ -833,7 +835,8 @@ class ArrayField extends React.Component {
       onDropIndexClick: this.onDropIndexClick,
       onReorderClick: this.onReorderClick,
       readonly,
-      registry
+      registry,
+      uiSchema: itemUiSchema
     };
   }
 
@@ -1595,58 +1598,6 @@ function getFieldComponent(schema, uiOptions, idSchema, registry) {
     });
   };
 }
-/** The `Help` component renders any help desired for a field
- *
- * @param props - The id and help information to be rendered
- */
-
-
-function Help(props) {
-  const {
-    id,
-    help
-  } = props;
-
-  if (!help) {
-    return null;
-  }
-
-  if (typeof help === "string") {
-    return /*#__PURE__*/React__default["default"].createElement("p", {
-      id: id,
-      className: "help-block"
-    }, help);
-  }
-
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    id: id,
-    className: "help-block"
-  }, help);
-}
-/** The `ErrorList` component renders the errors local to the particular field
- *
- * @param props - The list of errors to show
- */
-
-
-function ErrorList$1(props) {
-  const {
-    errors = []
-  } = props;
-
-  if (errors.length === 0) {
-    return null;
-  }
-
-  return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("ul", {
-    className: "error-detail bs-callout bs-callout-info"
-  }, errors.filter(elem => !!elem).map((error, index) => {
-    return /*#__PURE__*/React__default["default"].createElement("li", {
-      className: "text-danger",
-      key: index
-    }, error);
-  })));
-}
 /** The `SchemaFieldRender` component is the work-horse of react-jsonschema-form, determining what kind of real field to
  * render based on the `schema`, `uiSchema` and all the other props. It also deals with rendering the `anyOf` and
  * `oneOf` fields.
@@ -1679,6 +1630,8 @@ function SchemaFieldRender(props) {
   const uiOptions = utils.getUiOptions(uiSchema);
   const FieldTemplate = utils.getTemplate("FieldTemplate", registry, uiOptions);
   const DescriptionFieldTemplate = utils.getTemplate("DescriptionFieldTemplate", registry, uiOptions);
+  const FieldHelpTemplate = utils.getTemplate("FieldHelpTemplate", registry, uiOptions);
+  const FieldErrorTemplate = utils.getTemplate("FieldErrorTemplate", registry, uiOptions);
   const schema = schemaUtils.retrieveSchema(_schema, formData);
   const idSchema = utils.mergeObjects(schemaUtils.toIdSchema(schema, _idSchema.$id, formData, idPrefix, idSeparator), _idSchema);
   const FieldComponent = getFieldComponent(schema, uiOptions, idSchema, registry);
@@ -1724,16 +1677,15 @@ function SchemaFieldRender(props) {
   if (wasPropertyKeyModified) {
     label = name;
   } else {
-    label = uiOptions.title || props.schema.title || schema.title || name;
+    label = utils.ADDITIONAL_PROPERTY_FLAG in schema ? name : uiOptions.title || props.schema.title || schema.title || name;
   }
 
   const description = uiOptions.description || props.schema.description || schema.description || "";
-  const errors = __errors;
   const help = uiOptions.help;
   const hidden = uiOptions.widget === "hidden";
   const classNames = ["form-group", "field", "field-" + schema.type];
 
-  if (!hideError && errors && errors.length > 0) {
+  if (!hideError && __errors && __errors.length > 0) {
     classNames.push("field-error has-error has-danger");
   }
 
@@ -1749,6 +1701,22 @@ function SchemaFieldRender(props) {
     classNames.push(uiOptions.classNames);
   }
 
+  const helpComponent = /*#__PURE__*/React__default["default"].createElement(FieldHelpTemplate, {
+    help: help,
+    idSchema: idSchema,
+    schema: schema,
+    uiSchema: uiSchema,
+    hasErrors: !hideError && __errors && __errors.length > 0,
+    registry: registry
+  });
+  const errorsComponent = hideError ? undefined : /*#__PURE__*/React__default["default"].createElement(FieldErrorTemplate, {
+    errors: __errors,
+    errorSchema: errorSchema,
+    idSchema: idSchema,
+    schema: schema,
+    uiSchema: uiSchema,
+    registry: registry
+  });
   const fieldProps = {
     description: /*#__PURE__*/React__default["default"].createElement(DescriptionFieldTemplate, {
       id: id + "__description",
@@ -1756,15 +1724,10 @@ function SchemaFieldRender(props) {
       registry: registry
     }),
     rawDescription: description,
-    help: /*#__PURE__*/React__default["default"].createElement(Help, {
-      id: id + "__help",
-      help: help
-    }),
+    help: helpComponent,
     rawHelp: typeof help === "string" ? help : undefined,
-    errors: hideError ? undefined : /*#__PURE__*/React__default["default"].createElement(ErrorList$1, {
-      errors: errors
-    }),
-    rawErrors: hideError ? undefined : errors,
+    errors: errorsComponent,
+    rawErrors: hideError ? undefined : __errors,
     id,
     label,
     hidden,
@@ -1932,6 +1895,7 @@ function NullField(props) {
 const fields = {
   AnyOfField: AnyOfField,
   ArrayField,
+  // ArrayField falls back to SchemaField if ArraySchemaField is not defined, which it isn't by default
   BooleanField,
   NumberField,
   ObjectField,
@@ -1987,7 +1951,8 @@ function ArrayFieldItemTemplate(props) {
     onDropIndexClick,
     onReorderClick,
     readonly,
-    registry
+    registry,
+    uiSchema
   } = props;
   const {
     MoveDownButton,
@@ -2015,15 +1980,18 @@ function ArrayFieldItemTemplate(props) {
   }, (hasMoveUp || hasMoveDown) && /*#__PURE__*/React__default["default"].createElement(MoveUpButton, {
     style: btnStyle,
     disabled: disabled || readonly || !hasMoveUp,
-    onClick: onReorderClick(index, index - 1)
+    onClick: onReorderClick(index, index - 1),
+    uiSchema: uiSchema
   }), (hasMoveUp || hasMoveDown) && /*#__PURE__*/React__default["default"].createElement(MoveDownButton, {
     style: btnStyle,
     disabled: disabled || readonly || !hasMoveDown,
-    onClick: onReorderClick(index, index + 1)
+    onClick: onReorderClick(index, index + 1),
+    uiSchema: uiSchema
   }), hasRemove && /*#__PURE__*/React__default["default"].createElement(RemoveButton, {
     style: btnStyle,
     disabled: disabled || readonly,
-    onClick: onDropIndexClick(index)
+    onClick: onDropIndexClick(index),
+    uiSchema: uiSchema
   }))));
 }
 
@@ -2085,7 +2053,8 @@ function ArrayFieldTemplate(props) {
   })), canAdd && /*#__PURE__*/React__default["default"].createElement(AddButton, {
     className: "array-item-add",
     onClick: onAddClick,
-    disabled: disabled || readonly
+    disabled: disabled || readonly,
+    uiSchema: uiSchema
   }));
 }
 
@@ -2242,6 +2211,7 @@ function IconButton(props) {
     iconType = "default",
     icon,
     className,
+    uiSchema,
     ...otherProps
   } = props;
   return /*#__PURE__*/React__default["default"].createElement("button", {
@@ -2405,6 +2375,7 @@ function WrapIfAdditional(props) {
     required,
     schema,
     children,
+    uiSchema,
     registry
   } = props;
   const {
@@ -2448,7 +2419,8 @@ function WrapIfAdditional(props) {
       border: "0"
     },
     disabled: disabled || readonly,
-    onClick: onDropPropertyClick(label)
+    onClick: onDropPropertyClick(label),
+    uiSchema: uiSchema
   }))));
 }
 
@@ -2485,6 +2457,63 @@ function FieldTemplate(props) {
   }), displayLabel && description ? description : null, children, errors, help);
 }
 
+/** The `FieldErrorTemplate` component renders the errors local to the particular field
+ *
+ * @param props - The `FieldErrorProps` for the errors being rendered
+ */
+
+function FieldErrorTemplate(props) {
+  const {
+    errors = [],
+    idSchema
+  } = props;
+
+  if (errors.length === 0) {
+    return null;
+  }
+
+  const id = idSchema.$id + "__error";
+  return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("ul", {
+    id: id,
+    className: "error-detail bs-callout bs-callout-info"
+  }, errors.filter(elem => !!elem).map((error, index) => {
+    return /*#__PURE__*/React__default["default"].createElement("li", {
+      className: "text-danger",
+      key: index
+    }, error);
+  })));
+}
+
+/** The `FieldHelpTemplate` component renders any help desired for a field
+ *
+ * @param props - The `FieldHelpProps` to be rendered
+ */
+
+function FieldHelpTemplate(props) {
+  const {
+    idSchema,
+    help
+  } = props;
+
+  if (!help) {
+    return null;
+  }
+
+  const id = idSchema.$id + "__help";
+
+  if (typeof help === "string") {
+    return /*#__PURE__*/React__default["default"].createElement("p", {
+      id: id,
+      className: "help-block"
+    }, help);
+  }
+
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    id: id,
+    className: "help-block"
+  }, help);
+}
+
 /** The `ObjectFieldTemplate` is the template to use to render all the inner properties of an object along with the
  * title and description if available. If the object is expandable, then an `AddButton` is also rendered after all
  * the properties.
@@ -2531,7 +2560,8 @@ function ObjectFieldTemplate(props) {
   }), properties.map(prop => prop.content), utils.canExpand(schema, uiSchema, formData) && /*#__PURE__*/React__default["default"].createElement(AddButton, {
     className: "object-property-expand",
     onClick: onAddClick(schema),
-    disabled: disabled || readonly
+    disabled: disabled || readonly,
+    uiSchema: uiSchema
   }));
 }
 
@@ -2581,6 +2611,8 @@ const templates = {
   DescriptionFieldTemplate: DescriptionField,
   ErrorListTemplate: ErrorList,
   FieldTemplate,
+  FieldErrorTemplate,
+  FieldHelpTemplate,
   ObjectFieldTemplate,
   TitleFieldTemplate: TitleField,
   UnsupportedFieldTemplate: UnsupportedField
@@ -3645,8 +3677,7 @@ class Form extends React.Component {
         omitExtraData,
         extraErrors,
         noValidate,
-        onSubmit,
-        onError
+        onSubmit
       } = this.props;
       let {
         formData: newFormData
@@ -3663,54 +3694,26 @@ class Form extends React.Component {
         newFormData = this.getUsedFormData(newFormData, fieldNames);
       }
 
-      if (!noValidate) {
-        const schemaValidation = this.validate(schemaUtils, newFormData);
-        let errors = schemaValidation.errors;
-        let errorSchema = schemaValidation.errorSchema;
-        const schemaValidationErrors = errors;
-        const schemaValidationErrorSchema = errorSchema;
-
-        if (errors.length > 0) {
-          if (extraErrors) {
-            const merged = schemaUtils.mergeValidationData(schemaValidation, extraErrors);
-            errorSchema = merged.errorSchema;
-            errors = merged.errors;
+      if (noValidate || this.validateForm()) {
+        // There are no errors generated through schema validation.
+        // Check for user provided errors and update state accordingly.
+        const errorSchema = extraErrors || {};
+        const errors = extraErrors ? schemaUtils.getValidator().toErrorList(extraErrors) : [];
+        this.setState({
+          formData: newFormData,
+          errors,
+          errorSchema,
+          schemaValidationErrors: [],
+          schemaValidationErrorSchema: {}
+        }, () => {
+          if (onSubmit) {
+            onSubmit({ ...this.state,
+              formData: newFormData,
+              status: "submitted"
+            }, event);
           }
-
-          this.setState({
-            errors,
-            errorSchema,
-            schemaValidationErrors,
-            schemaValidationErrorSchema
-          }, () => {
-            if (onError) {
-              onError(errors);
-            } else {
-              console.error("Form validation failed", errors);
-            }
-          });
-          return;
-        }
-      } // There are no errors generated through schema validation.
-      // Check for user provided errors and update state accordingly.
-
-
-      const errorSchema = extraErrors || {};
-      const errors = extraErrors ? schemaUtils.getValidator().toErrorList(extraErrors) : [];
-      this.setState({
-        formData: newFormData,
-        errors,
-        errorSchema,
-        schemaValidationErrors: [],
-        schemaValidationErrorSchema: {}
-      }, () => {
-        if (onSubmit) {
-          onSubmit({ ...this.state,
-            formData: newFormData,
-            status: "submitted"
-          }, event);
-        }
-      });
+        });
+      }
     };
 
     if (!props.validator) {
@@ -3938,6 +3941,54 @@ class Form extends React.Component {
       this.formElement.current.requestSubmit();
     }
   }
+  /** Programmatically validate the form. If `onError` is provided, then it will be called with the list of errors the
+   * same way as would happen on form submission.
+   *
+   * @returns - True if the form is valid, false otherwise.
+   */
+
+
+  validateForm() {
+    const {
+      extraErrors,
+      onError
+    } = this.props;
+    const {
+      formData
+    } = this.state;
+    const {
+      schemaUtils
+    } = this.state;
+    const schemaValidation = this.validate(schemaUtils, formData);
+    let errors = schemaValidation.errors;
+    let errorSchema = schemaValidation.errorSchema;
+    const schemaValidationErrors = errors;
+    const schemaValidationErrorSchema = errorSchema;
+
+    if (errors.length > 0) {
+      if (extraErrors) {
+        const merged = schemaUtils.mergeValidationData(schemaValidation, extraErrors);
+        errorSchema = merged.errorSchema;
+        errors = merged.errors;
+      }
+
+      this.setState({
+        errors,
+        errorSchema,
+        schemaValidationErrors,
+        schemaValidationErrorSchema
+      }, () => {
+        if (onError) {
+          onError(errors);
+        } else {
+          console.error("Form validation failed", errors);
+        }
+      });
+      return false;
+    }
+
+    return true;
+  }
   /** Renders the `Form` fields inside the <form> | `tagName` or `_internalFormWrapper`, rendering any errors if
    * needed along with the submit button or any children of the form.
    */