@data-driven-forms/react-form-renderer - npm Package Compare versions

Comparing version 3.16.11 to 3.17.0

esm/form-renderer/form-renderer.js

@@ -7,3 +7,3 @@ import _typeof from "@babel/runtime/helpers/typeof";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["componentMapper", "FormTemplate", "onSubmit", "onCancel", "onReset", "clearOnUnmount", "subscription", "clearedValue", "schema", "validatorMapper", "actionMapper", "schemaValidatorMapper"],
+var _excluded = ["actionMapper", "children", "clearedValue", "clearOnUnmount", "componentMapper", "decorators", "FormTemplate", "FormTemplateProps", "mutators", "onCancel", "onError", "onReset", "onSubmit", "schema", "schemaValidatorMapper", "subscription", "validatorMapper"],
     _excluded2 = ["reset", "mutators", "getState", "submit"];
@@ -19,26 +19,35 @@
 
-import React, { useState, useRef } from 'react';
-import Form from '../form';
 import arrayMutators from 'final-form-arrays';
+import createFocusDecorator from 'final-form-focus';
 import PropTypes from 'prop-types';
-import createFocusDecorator from 'final-form-focus';
+import React, { useCallback, useMemo, useRef, useState, cloneElement } from 'react';
+import defaultSchemaValidator from '../default-schema-validator';
+import defaultValidatorMapper from '../validator-mapper';
+import Form from '../form';
 import RendererContext from '../renderer-context';
 import renderForm from './render-form';
-import defaultSchemaValidator from '../default-schema-validator';
 import SchemaErrorComponent from './schema-error-component';
-import defaultValidatorMapper from '../validator-mapper';
 
+var isFunc = function isFunc(fn) {
+  return typeof fn === 'function';
+};
+
 var FormRenderer = function FormRenderer(_ref) {
-  var componentMapper = _ref.componentMapper,
+  var actionMapper = _ref.actionMapper,
+      children = _ref.children,
+      clearedValue = _ref.clearedValue,
+      clearOnUnmount = _ref.clearOnUnmount,
+      componentMapper = _ref.componentMapper,
+      decorators = _ref.decorators,
       FormTemplate = _ref.FormTemplate,
-      _onSubmit = _ref.onSubmit,
+      FormTemplateProps = _ref.FormTemplateProps,
+      mutators = _ref.mutators,
       onCancel = _ref.onCancel,
-      _onReset = _ref.onReset,
-      clearOnUnmount = _ref.clearOnUnmount,
+      onError = _ref.onError,
+      onReset = _ref.onReset,
+      onSubmit = _ref.onSubmit,
+      schema = _ref.schema,
+      schemaValidatorMapper = _ref.schemaValidatorMapper,
       subscription = _ref.subscription,
-      clearedValue = _ref.clearedValue,
-      schema = _ref.schema,
       validatorMapper = _ref.validatorMapper,
-      actionMapper = _ref.actionMapper,
-      schemaValidatorMapper = _ref.schemaValidatorMapper,
       props = _objectWithoutProperties(_ref, _excluded);
@@ -51,17 +60,67 @@
 
+  var formFields = useMemo(function () {
+    return renderForm(schema.fields);
+  }, [schema]);
   var registeredFields = useRef({});
   var focusDecorator = useRef(createFocusDecorator());
-  var schemaError;
+  var validatorMapperMerged = useMemo(function () {
+    return _objectSpread(_objectSpread({}, defaultValidatorMapper), validatorMapper);
+  }, [validatorMapper]);
+  var mutatorsMerged = useMemo(function () {
+    return _objectSpread(_objectSpread({}, arrayMutators), mutators);
+  }, [mutators]);
+  var decoratorsMerged = useMemo(function () {
+    return [focusDecorator.current].concat(_toConsumableArray(Array.isArray(decorators) ? decorators : []));
+  }, [decorators]);
+  var handleSubmitCallback = useCallback(function (values, formApi) {
+    for (var _len = arguments.length, args = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
+      args[_key - 2] = arguments[_key];
+    }
 
-  var setRegisteredFields = function setRegisteredFields(fn) {
+    return !isFunc(onSubmit) ? undefined : onSubmit.apply(void 0, [values, _objectSpread(_objectSpread({}, formApi), {}, {
+      fileInputs: fileInputs
+    })].concat(args));
+  }, [onSubmit, fileInputs]);
+  var handleCancelCallback = useCallback(function (getState) {
+    return function () {
+      for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+        args[_key2] = arguments[_key2];
+      }
+
+      return onCancel.apply(void 0, [getState().values].concat(args));
+    };
+  }, [onCancel]);
+  var handleResetCallback = useCallback(function (reset) {
+    return function () {
+      reset();
+      return !isFunc(onReset) ? void 0 : onReset.apply(void 0, arguments);
+    };
+  }, [onReset]);
+  var handleErrorCallback = useCallback(function () {
+    var _console;
+
+    // eslint-disable-next-line no-console
+    (_console = console).error.apply(_console, arguments);
+
+    return !isFunc(onError) ? void 0 : onError.apply(void 0, arguments);
+  }, [onError]);
+  var registerInputFile = useCallback(function (name) {
+    setFileInputs(function (prevFiles) {
+      return [].concat(_toConsumableArray(prevFiles), [name]);
+    });
+  }, []);
+  var unRegisterInputFile = useCallback(function (name) {
+    setFileInputs(function (prevFiles) {
+      return _toConsumableArray(prevFiles.splice(prevFiles.indexOf(name)));
+    });
+  }, []);
+  var setRegisteredFields = useCallback(function (fn) {
     return registeredFields.current = fn(_objectSpread({}, registeredFields.current));
-  };
-
-  var internalRegisterField = function internalRegisterField(name) {
+  }, []);
+  var internalRegisterField = useCallback(function (name) {
     setRegisteredFields(function (prev) {
       return prev[name] ? _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, name, prev[name] + 1)) : _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, name, 1));
     });
-  };
-
-  var internalUnRegisterField = function internalUnRegisterField(name) {
+  }, []);
+  var internalUnRegisterField = useCallback(function (name) {
     setRegisteredFields(function (_ref2) {
@@ -73,6 +132,6 @@ var currentField = _ref2[name],
     });
-  };
-
-  var internalGetRegisteredFields = function internalGetRegisteredFields() {
-    return Object.entries(registeredFields.current).reduce(function (acc, _ref3) {
+  }, []);
+  var internalGetRegisteredFields = useCallback(function () {
+    var fields = registeredFields.current;
+    return Object.entries(fields).reduce(function (acc, _ref3) {
       var _ref4 = _slicedToArray(_ref3, 2),
@@ -84,6 +143,4 @@ name = _ref4[0],
     }, []);
-  };
+  }, []);
 
-  var validatorMapperMerged = _objectSpread(_objectSpread({}, defaultValidatorMapper), validatorMapper);
-
   try {
@@ -94,40 +151,13 @@ var validatorTypes = Object.keys(validatorMapperMerged);
   } catch (error) {
-    schemaError = error; // eslint-disable-next-line no-console
-
-    console.error(error); // eslint-disable-next-line no-console
-
-    console.log('error: ', error.message);
-  }
-
-  if (schemaError) {
+    handleErrorCallback('schema-error', error);
     return /*#__PURE__*/React.createElement(SchemaErrorComponent, {
-      name: schemaError.name,
-      message: schemaError.message
+      name: error.name,
+      message: error.message
     });
   }
 
-  var registerInputFile = function registerInputFile(name) {
-    return setFileInputs(function (prevFiles) {
-      return [].concat(_toConsumableArray(prevFiles), [name]);
-    });
-  };
-
-  var unRegisterInputFile = function unRegisterInputFile(name) {
-    return setFileInputs(function (prevFiles) {
-      return _toConsumableArray(prevFiles.splice(prevFiles.indexOf(name)));
-    });
-  };
-
-  return /*#__PURE__*/React.createElement(Form, _extends({}, props, {
-    onSubmit: function onSubmit(values, formApi) {
-      for (var _len = arguments.length, args = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
-        args[_key - 2] = arguments[_key];
-      }
-
-      return _onSubmit.apply(void 0, [values, _objectSpread(_objectSpread({}, formApi), {}, {
-        fileInputs: fileInputs
-      })].concat(args));
-    },
-    mutators: _objectSpread({}, arrayMutators),
-    decorators: [focusDecorator.current],
+  return /*#__PURE__*/React.createElement(Form, _extends({
+    onSubmit: handleSubmitCallback,
+    mutators: mutatorsMerged,
+    decorators: decoratorsMerged,
     subscription: _objectSpread({
@@ -158,14 +188,6 @@ pristine: true,
             pristine: pristine,
-            onSubmit: _onSubmit,
-            onCancel: onCancel ? function () {
-              for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-                args[_key2] = arguments[_key2];
-              }
-
-              return onCancel.apply(void 0, [getState().values].concat(args));
-            } : undefined,
-            onReset: function onReset() {
-              _onReset && _onReset.apply(void 0, arguments);
-              reset();
-            },
+            onSubmit: onSubmit,
+            onCancel: isFunc(onCancel) ? handleCancelCallback(getState) : undefined,
+            onReset: handleResetCallback(reset),
+            onError: handleErrorCallback,
             getState: getState,
@@ -187,14 +209,22 @@ valid: valid,
         }
-      }, /*#__PURE__*/React.createElement(FormTemplate, {
-        formFields: renderForm(schema.fields),
+      }, FormTemplate && /*#__PURE__*/React.createElement(FormTemplate, _extends({
+        formFields: formFields,
         schema: schema
+      }, FormTemplateProps)), isFunc(children) && children({
+        formFields: formFields,
+        schema: schema
+      }), _typeof(children) === 'object' && /*#__PURE__*/cloneElement(children, {
+        formFields: formFields,
+        schema: schema
       }));
     }
-  }));
+  }, props));
 };
 
 FormRenderer.propTypes = {
-  onSubmit: PropTypes.func.isRequired,
+  children: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
+  onSubmit: PropTypes.func,
   onCancel: PropTypes.func,
   onReset: PropTypes.func,
+  onError: PropTypes.func,
   schema: PropTypes.object.isRequired,
@@ -205,3 +235,4 @@ clearOnUnmount: PropTypes.bool,
   componentMapper: PropTypes.shape(_defineProperty({}, PropTypes.string, PropTypes.oneOfType([PropTypes.node, PropTypes.element, PropTypes.func, PropTypes.elementType]))).isRequired,
-  FormTemplate: PropTypes.elementType.isRequired,
+  FormTemplate: PropTypes.elementType,
+  FormTemplateProps: PropTypes.object,
   validatorMapper: PropTypes.shape(_defineProperty({}, PropTypes.string, PropTypes.func)),
@@ -214,3 +245,5 @@ actionMapper: PropTypes.shape(_defineProperty({}, PropTypes.string, PropTypes.func)),
   }),
-  initialValues: PropTypes.object
+  initialValues: PropTypes.object,
+  decorators: PropTypes.array,
+  mutators: PropTypes.object
 };
@@ -217,0 +250,0 @@ FormRenderer.defaultProps = {

form-renderer/form-renderer.d.ts

@@ -1,2 +0,2 @@
-import { ComponentType, FunctionComponent } from 'react';
+import { ComponentType, FunctionComponent, ReactNode } from 'react';
 import { FormProps } from 'react-final-form';
@@ -15,2 +15,3 @@ import Schema from '../common-types/schema';
   onReset?: () => void;
+  onError?: (...args: any[]) => void;
   schema: Schema;
@@ -24,2 +25,4 @@ clearOnUnmount?: boolean;
   schemaValidatorMapper?: SchemaValidatorMapper;
+  FormTemplateProps?: AnyObject;
+  children?: ReactNode | ((props: FormTemplateRenderProps) => ReactNode)
 }
@@ -26,0 +29,0 @@

form-renderer/form-renderer.js

@@ -5,3 +5,3 @@ "use strict";
 
-var _typeof = require("@babel/runtime/helpers/typeof");
+var _typeof3 = require("@babel/runtime/helpers/typeof");
 
@@ -13,2 +13,4 @@ Object.defineProperty(exports, "__esModule", {
 
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
@@ -24,12 +26,16 @@
 
+var _finalFormArrays = _interopRequireDefault(require("final-form-arrays"));
+
+var _finalFormFocus = _interopRequireDefault(require("final-form-focus"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _react = _interopRequireWildcard(require("react"));
 
-var _form = _interopRequireDefault(require("../form"));
+var _defaultSchemaValidator = _interopRequireDefault(require("../default-schema-validator"));
 
-var _finalFormArrays = _interopRequireDefault(require("final-form-arrays"));
+var _validatorMapper = _interopRequireDefault(require("../validator-mapper"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _form = _interopRequireDefault(require("../form"));
 
-var _finalFormFocus = _interopRequireDefault(require("final-form-focus"));
-
 var _rendererContext = _interopRequireDefault(require("../renderer-context"));
@@ -39,9 +45,5 @@
 
-var _defaultSchemaValidator = _interopRequireDefault(require("../default-schema-validator"));
-
 var _schemaErrorComponent = _interopRequireDefault(require("./schema-error-component"));
 
-var _validatorMapper = _interopRequireDefault(require("../validator-mapper"));
-
-var _excluded = ["componentMapper", "FormTemplate", "onSubmit", "onCancel", "onReset", "clearOnUnmount", "subscription", "clearedValue", "schema", "validatorMapper", "actionMapper", "schemaValidatorMapper"],
+var _excluded = ["actionMapper", "children", "clearedValue", "clearOnUnmount", "componentMapper", "decorators", "FormTemplate", "FormTemplateProps", "mutators", "onCancel", "onError", "onReset", "onSubmit", "schema", "schemaValidatorMapper", "subscription", "validatorMapper"],
     _excluded2 = ["reset", "mutators", "getState", "submit"];
@@ -51,7 +53,7 @@
 
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof3(key) === "symbol" ? key : String(key); }
 
-function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _toPrimitive(input, hint) { if (_typeof3(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof3(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 
@@ -62,15 +64,24 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
+var isFunc = function isFunc(fn) {
+  return typeof fn === 'function';
+};
+
 var FormRenderer = function FormRenderer(_ref) {
-  var componentMapper = _ref.componentMapper,
+  var actionMapper = _ref.actionMapper,
+      children = _ref.children,
+      clearedValue = _ref.clearedValue,
+      clearOnUnmount = _ref.clearOnUnmount,
+      componentMapper = _ref.componentMapper,
+      decorators = _ref.decorators,
       FormTemplate = _ref.FormTemplate,
-      _onSubmit = _ref.onSubmit,
+      FormTemplateProps = _ref.FormTemplateProps,
+      mutators = _ref.mutators,
       onCancel = _ref.onCancel,
-      _onReset = _ref.onReset,
-      clearOnUnmount = _ref.clearOnUnmount,
+      onError = _ref.onError,
+      onReset = _ref.onReset,
+      onSubmit = _ref.onSubmit,
+      schema = _ref.schema,
+      schemaValidatorMapper = _ref.schemaValidatorMapper,
       subscription = _ref.subscription,
-      clearedValue = _ref.clearedValue,
-      schema = _ref.schema,
       validatorMapper = _ref.validatorMapper,
-      actionMapper = _ref.actionMapper,
-      schemaValidatorMapper = _ref.schemaValidatorMapper,
       props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
@@ -83,17 +94,67 @@
 
+  var formFields = (0, _react.useMemo)(function () {
+    return (0, _renderForm["default"])(schema.fields);
+  }, [schema]);
   var registeredFields = (0, _react.useRef)({});
   var focusDecorator = (0, _react.useRef)((0, _finalFormFocus["default"])());
-  var schemaError;
+  var validatorMapperMerged = (0, _react.useMemo)(function () {
+    return _objectSpread(_objectSpread({}, _validatorMapper["default"]), validatorMapper);
+  }, [validatorMapper]);
+  var mutatorsMerged = (0, _react.useMemo)(function () {
+    return _objectSpread(_objectSpread({}, _finalFormArrays["default"]), mutators);
+  }, [mutators]);
+  var decoratorsMerged = (0, _react.useMemo)(function () {
+    return [focusDecorator.current].concat((0, _toConsumableArray2["default"])(Array.isArray(decorators) ? decorators : []));
+  }, [decorators]);
+  var handleSubmitCallback = (0, _react.useCallback)(function (values, formApi) {
+    for (var _len = arguments.length, args = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
+      args[_key - 2] = arguments[_key];
+    }
 
-  var setRegisteredFields = function setRegisteredFields(fn) {
+    return !isFunc(onSubmit) ? undefined : onSubmit.apply(void 0, [values, _objectSpread(_objectSpread({}, formApi), {}, {
+      fileInputs: fileInputs
+    })].concat(args));
+  }, [onSubmit, fileInputs]);
+  var handleCancelCallback = (0, _react.useCallback)(function (getState) {
+    return function () {
+      for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+        args[_key2] = arguments[_key2];
+      }
+
+      return onCancel.apply(void 0, [getState().values].concat(args));
+    };
+  }, [onCancel]);
+  var handleResetCallback = (0, _react.useCallback)(function (reset) {
+    return function () {
+      reset();
+      return !isFunc(onReset) ? void 0 : onReset.apply(void 0, arguments);
+    };
+  }, [onReset]);
+  var handleErrorCallback = (0, _react.useCallback)(function () {
+    var _console;
+
+    // eslint-disable-next-line no-console
+    (_console = console).error.apply(_console, arguments);
+
+    return !isFunc(onError) ? void 0 : onError.apply(void 0, arguments);
+  }, [onError]);
+  var registerInputFile = (0, _react.useCallback)(function (name) {
+    setFileInputs(function (prevFiles) {
+      return [].concat((0, _toConsumableArray2["default"])(prevFiles), [name]);
+    });
+  }, []);
+  var unRegisterInputFile = (0, _react.useCallback)(function (name) {
+    setFileInputs(function (prevFiles) {
+      return (0, _toConsumableArray2["default"])(prevFiles.splice(prevFiles.indexOf(name)));
+    });
+  }, []);
+  var setRegisteredFields = (0, _react.useCallback)(function (fn) {
     return registeredFields.current = fn(_objectSpread({}, registeredFields.current));
-  };
-
-  var internalRegisterField = function internalRegisterField(name) {
+  }, []);
+  var internalRegisterField = (0, _react.useCallback)(function (name) {
     setRegisteredFields(function (prev) {
       return prev[name] ? _objectSpread(_objectSpread({}, prev), {}, (0, _defineProperty2["default"])({}, name, prev[name] + 1)) : _objectSpread(_objectSpread({}, prev), {}, (0, _defineProperty2["default"])({}, name, 1));
     });
-  };
-
-  var internalUnRegisterField = function internalUnRegisterField(name) {
+  }, []);
+  var internalUnRegisterField = (0, _react.useCallback)(function (name) {
     setRegisteredFields(function (_ref2) {
@@ -104,6 +165,6 @@ var currentField = _ref2[name],
     });
-  };
-
-  var internalGetRegisteredFields = function internalGetRegisteredFields() {
-    return Object.entries(registeredFields.current).reduce(function (acc, _ref3) {
+  }, []);
+  var internalGetRegisteredFields = (0, _react.useCallback)(function () {
+    var fields = registeredFields.current;
+    return Object.entries(fields).reduce(function (acc, _ref3) {
       var _ref4 = (0, _slicedToArray2["default"])(_ref3, 2),
@@ -115,6 +176,4 @@ name = _ref4[0],
     }, []);
-  };
+  }, []);
 
-  var validatorMapperMerged = _objectSpread(_objectSpread({}, _validatorMapper["default"]), validatorMapper);
-
   try {
@@ -125,40 +184,13 @@ var validatorTypes = Object.keys(validatorMapperMerged);
   } catch (error) {
-    schemaError = error; // eslint-disable-next-line no-console
-
-    console.error(error); // eslint-disable-next-line no-console
-
-    console.log('error: ', error.message);
-  }
-
-  if (schemaError) {
+    handleErrorCallback('schema-error', error);
     return /*#__PURE__*/_react["default"].createElement(_schemaErrorComponent["default"], {
-      name: schemaError.name,
-      message: schemaError.message
+      name: error.name,
+      message: error.message
     });
   }
 
-  var registerInputFile = function registerInputFile(name) {
-    return setFileInputs(function (prevFiles) {
-      return [].concat((0, _toConsumableArray2["default"])(prevFiles), [name]);
-    });
-  };
-
-  var unRegisterInputFile = function unRegisterInputFile(name) {
-    return setFileInputs(function (prevFiles) {
-      return (0, _toConsumableArray2["default"])(prevFiles.splice(prevFiles.indexOf(name)));
-    });
-  };
-
-  return /*#__PURE__*/_react["default"].createElement(_form["default"], (0, _extends2["default"])({}, props, {
-    onSubmit: function onSubmit(values, formApi) {
-      for (var _len = arguments.length, args = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
-        args[_key - 2] = arguments[_key];
-      }
-
-      return _onSubmit.apply(void 0, [values, _objectSpread(_objectSpread({}, formApi), {}, {
-        fileInputs: fileInputs
-      })].concat(args));
-    },
-    mutators: _objectSpread({}, _finalFormArrays["default"]),
-    decorators: [focusDecorator.current],
+  return /*#__PURE__*/_react["default"].createElement(_form["default"], (0, _extends2["default"])({
+    onSubmit: handleSubmitCallback,
+    mutators: mutatorsMerged,
+    decorators: decoratorsMerged,
     subscription: _objectSpread({
@@ -188,14 +220,6 @@ pristine: true,
             pristine: pristine,
-            onSubmit: _onSubmit,
-            onCancel: onCancel ? function () {
-              for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-                args[_key2] = arguments[_key2];
-              }
-
-              return onCancel.apply(void 0, [getState().values].concat(args));
-            } : undefined,
-            onReset: function onReset() {
-              _onReset && _onReset.apply(void 0, arguments);
-              reset();
-            },
+            onSubmit: onSubmit,
+            onCancel: isFunc(onCancel) ? handleCancelCallback(getState) : undefined,
+            onReset: handleResetCallback(reset),
+            onError: handleErrorCallback,
             getState: getState,
@@ -217,14 +241,22 @@ valid: valid,
         }
-      }, /*#__PURE__*/_react["default"].createElement(FormTemplate, {
-        formFields: (0, _renderForm["default"])(schema.fields),
+      }, FormTemplate && /*#__PURE__*/_react["default"].createElement(FormTemplate, (0, _extends2["default"])({
+        formFields: formFields,
         schema: schema
+      }, FormTemplateProps)), isFunc(children) && children({
+        formFields: formFields,
+        schema: schema
+      }), (0, _typeof2["default"])(children) === 'object' && /*#__PURE__*/(0, _react.cloneElement)(children, {
+        formFields: formFields,
+        schema: schema
       }));
     }
-  }));
+  }, props));
 };
 
 FormRenderer.propTypes = {
-  onSubmit: _propTypes["default"].func.isRequired,
+  children: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].element]),
+  onSubmit: _propTypes["default"].func,
   onCancel: _propTypes["default"].func,
   onReset: _propTypes["default"].func,
+  onError: _propTypes["default"].func,
   schema: _propTypes["default"].object.isRequired,
@@ -235,3 +267,4 @@ clearOnUnmount: _propTypes["default"].bool,
   componentMapper: _propTypes["default"].shape((0, _defineProperty2["default"])({}, _propTypes["default"].string, _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].element, _propTypes["default"].func, _propTypes["default"].elementType]))).isRequired,
-  FormTemplate: _propTypes["default"].elementType.isRequired,
+  FormTemplate: _propTypes["default"].elementType,
+  FormTemplateProps: _propTypes["default"].object,
   validatorMapper: _propTypes["default"].shape((0, _defineProperty2["default"])({}, _propTypes["default"].string, _propTypes["default"].func)),
@@ -244,3 +277,5 @@ actionMapper: _propTypes["default"].shape((0, _defineProperty2["default"])({}, _propTypes["default"].string, _propTypes["default"].func)),
   }),
-  initialValues: _propTypes["default"].object
+  initialValues: _propTypes["default"].object,
+  decorators: _propTypes["default"].array,
+  mutators: _propTypes["default"].object
 };
@@ -247,0 +282,0 @@ FormRenderer.defaultProps = {

package.json

 {
   "name": "@data-driven-forms/react-form-renderer",
-  "version": "3.16.11",
+  "version": "3.17.0",
   "description": "React Form Renderer. Data Driven Forms converts JSON form definitions into fully functional React forms.",
@@ -5,0 +5,0 @@ "main": "index.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

292695

increased by1.31%

Lines of code

5916

increased by1.48%

No dependency changes