@rjsf/core 5.0.0-beta.15 → 5.0.0-beta.16

package/dist/core.umd.development.js

@@ -1,7 +1,7 @@
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@rjsf/utils'), require('lodash-es/get'), require('lodash-es/isEmpty'), require('lodash-es/pick'), require('lodash-es/isObject'), require('lodash-es/set'), require('nanoid'), require('lodash-es/unset'), require('lodash-es/has'), require('lodash-es/omit')) :
   typeof define === 'function' && define.amd ? define(['exports', 'react', '@rjsf/utils', 'lodash-es/get', 'lodash-es/isEmpty', 'lodash-es/pick', 'lodash-es/isObject', 'lodash-es/set', 'nanoid', 'lodash-es/unset', 'lodash-es/has', 'lodash-es/omit'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@rjsf/core"] = {}, global.React, global.utils, global.get, global._isEmpty, global._pick, global.isObject, global.set, global.nanoid, global.unset, global.has, global.omit));
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.JSONSchemaForm = {}, global.React, global.utils, global.get, global._isEmpty, global._pick, global.isObject, global.set, global.nanoid, global.unset, global.has, global.omit));
 })(this, (function (exports, React, utils, get, _isEmpty, _pick, isObject, set, nanoid, unset, has, omit) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -161,42 +161,11 @@
         return schemaUtils.getDefaultFormState(itemSchema);
       };
       _this.onAddClick = function (event) {
-        if (event) {
-          event.preventDefault();
-        }
-        var onChange = _this.props.onChange;
-        var keyedFormData = _this.state.keyedFormData;
-        var newKeyedFormDataRow = {
-          key: generateRowId(),
-          item: _this._getNewFormDataRow()
-        };
-        var newKeyedFormData = [].concat(keyedFormData, [newKeyedFormDataRow]);
-        _this.setState({
-          keyedFormData: newKeyedFormData,
-          updatedKeyedFormData: true
-        }, function () {
-          return onChange(keyedToPlainFormData(newKeyedFormData));
-        });
+        _this._handleAddClick(event);
       };
       _this.onAddIndexClick = function (index) {
         return function (event) {
-          if (event) {
-            event.preventDefault();
-          }
-          var onChange = _this.props.onChange;
-          var keyedFormData = _this.state.keyedFormData;
-          var newKeyedFormDataRow = {
-            key: generateRowId(),
-            item: _this._getNewFormDataRow()
-          };
-          var newKeyedFormData = [].concat(keyedFormData);
-          newKeyedFormData.splice(index, 0, newKeyedFormDataRow);
-          _this.setState({
-            keyedFormData: newKeyedFormData,
-            updatedKeyedFormData: true
-          }, function () {
-            return onChange(keyedToPlainFormData(newKeyedFormData));
-          });
+          _this._handleAddClick(event, index);
         };
       };
       _this.onDropIndexClick = function (index) {
@@ -375,6 +344,42 @@
     /** Returns the default form information for an item based on the schema for that item. Deals with the possibility
      * that the schema is fixed and allows additional items.
      */;
+    /** Callback handler for when the user clicks on the add or add at index buttons. Creates a new row of keyed form data
+     * either at the end of the list (when index is not specified) or inserted at the `index` when it is, adding it into
+     * the state, and then returning `onChange()` with the plain form data converted from the keyed data
+     *
+     * @param event - The event for the click
+     * @param [index] - The optional index at which to add the new data
+     */
+    _proto._handleAddClick = function _handleAddClick(event, index) {
+      if (event) {
+        event.preventDefault();
+      }
+      var onChange = this.props.onChange;
+      var keyedFormData = this.state.keyedFormData;
+      var newKeyedFormDataRow = {
+        key: generateRowId(),
+        item: this._getNewFormDataRow()
+      };
+      var newKeyedFormData = [].concat(keyedFormData);
+      if (index !== undefined) {
+        newKeyedFormData.splice(index, 0, newKeyedFormDataRow);
+      } else {
+        newKeyedFormData.push(newKeyedFormDataRow);
+      }
+      this.setState({
+        keyedFormData: newKeyedFormData,
+        updatedKeyedFormData: true
+      }, function () {
+        return onChange(keyedToPlainFormData(newKeyedFormData));
+      });
+    }
+    /** Callback handler for when the user clicks on the add button. Creates a new row of keyed form data at the end of
+     * the list, adding it into the state, and then returning `onChange()` with the plain form data converted from the
+     * keyed data
+     *
+     * @param event - The event for the click
+     */;
     /** Renders the `ArrayField` depending on the specific needs of the schema and uischema elements
      */
     _proto.render = function render() {
@@ -443,8 +448,9 @@
       var _schemaItems = isObject__default["default"](schema.items) ? schema.items : {};
       var itemsSchema = schemaUtils.retrieveSchema(_schemaItems);
       var formData = keyedToPlainFormData(this.state.keyedFormData);
+      var canAdd = this.canAddItem(formData);
       var arrayProps = {
-        canAdd: this.canAddItem(formData),
+        canAdd: canAdd,
         items: keyedFormData.map(function (keyedItem, index) {
           var key = keyedItem.key,
             item = keyedItem.item;
@@ -458,6 +464,7 @@
             key: key,
             index: index,
             name: name && name + "-" + index,
+            canAdd: canAdd,
             canMoveUp: index > 0,
             canMoveDown: index < formData.length - 1,
             itemSchema: itemSchema,
@@ -468,7 +475,8 @@
             autofocus: autofocus && index === 0,
             onBlur: onBlur,
             onFocus: onFocus,
-            rawErrors: rawErrors
+            rawErrors: rawErrors,
+            totalItems: keyedFormData.length
           });
         }),
         className: "field field-array field-array-of-" + itemsSchema.type,
@@ -695,8 +703,9 @@
         items = items.concat(new Array(itemSchemas.length - items.length));
       }
       // These are the props passed into the render function
+      var canAdd = this.canAddItem(items) && !!additionalSchema;
       var arrayProps = {
-        canAdd: this.canAddItem(items) && !!additionalSchema,
+        canAdd: canAdd,
         className: "field field-array field-array-fixed-items",
         disabled: disabled,
         idSchema: idSchema,
@@ -716,6 +725,7 @@
             key: key,
             index: index,
             name: name && name + "-" + index,
+            canAdd: canAdd,
             canRemove: additional,
             canMoveUp: index >= itemSchemas.length + 1,
             canMoveDown: additional && index < items.length - 1,
@@ -727,7 +737,8 @@
             autofocus: autofocus && index === 0,
             onBlur: onBlur,
             onFocus: onFocus,
-            rawErrors: rawErrors
+            rawErrors: rawErrors,
+            totalItems: keyedFormData.length
           });
         }),
         onAddClick: this.onAddClick,
@@ -752,6 +763,7 @@
       var key = props.key,
         index = props.index,
         name = props.name,
+        canAdd = props.canAdd,
         _props$canRemove = props.canRemove,
         canRemove = _props$canRemove === void 0 ? true : _props$canRemove,
         _props$canMoveUp = props.canMoveUp,
@@ -766,7 +778,8 @@
         autofocus = props.autofocus,
         onBlur = props.onBlur,
         onFocus = props.onFocus,
-        rawErrors = props.rawErrors;
+        rawErrors = props.rawErrors,
+        totalItems = props.totalItems;
       var _this$props13 = this.props,
         disabled = _this$props13.disabled,
         hideError = _this$props13.hideError,
@@ -819,11 +832,13 @@
         }),
         className: "array-item",
         disabled: disabled,
+        canAdd: canAdd,
         hasToolbar: has.toolbar,
         hasMoveUp: has.moveUp,
         hasMoveDown: has.moveDown,
         hasRemove: has.remove,
         index: index,
+        totalItems: totalItems,
         key: key,
         onAddIndexClick: this.onAddIndexClick,
         onDropIndexClick: this.onDropIndexClick,
@@ -1896,17 +1911,20 @@
       style: btnStyle,
       disabled: disabled || readonly || !hasMoveUp,
       onClick: onReorderClick(index, index - 1),
-      uiSchema: uiSchema
+      uiSchema: uiSchema,
+      registry: registry
     }), (hasMoveUp || hasMoveDown) && /*#__PURE__*/React__default["default"].createElement(MoveDownButton, {
       style: btnStyle,
       disabled: disabled || readonly || !hasMoveDown,
       onClick: onReorderClick(index, index + 1),
-      uiSchema: uiSchema
+      uiSchema: uiSchema,
+      registry: registry
     }), hasRemove && /*#__PURE__*/React__default["default"].createElement(RemoveButton, {
       style: btnStyle,
       disabled: disabled || readonly,
       onClick: onDropIndexClick(index),
-      uiSchema: uiSchema
+      uiSchema: uiSchema,
+      registry: registry
     }))));
   }
 
@@ -1962,7 +1980,8 @@
       className: "array-item-add",
       onClick: onAddClick,
       disabled: disabled || readonly,
-      uiSchema: uiSchema
+      uiSchema: uiSchema,
+      registry: registry
     }));
   }
 
@@ -2084,7 +2103,7 @@
     }), submitText));
   }
 
-  var _excluded$2 = ["iconType", "icon", "className", "uiSchema"];
+  var _excluded$2 = ["iconType", "icon", "className", "uiSchema", "registry"];
   function IconButton(props) {
     var _props$iconType = props.iconType,
       iconType = _props$iconType === void 0 ? "default" : _props$iconType,
@@ -2129,7 +2148,8 @@
   function AddButton(_ref) {
     var className = _ref.className,
       onClick = _ref.onClick,
-      disabled = _ref.disabled;
+      disabled = _ref.disabled,
+      registry = _ref.registry;
     return /*#__PURE__*/React__default["default"].createElement("div", {
       className: "row"
     }, /*#__PURE__*/React__default["default"].createElement("p", {
@@ -2140,7 +2160,8 @@
       className: "btn-add col-xs-12",
       title: "Add",
       onClick: onClick,
-      disabled: disabled
+      disabled: disabled,
+      registry: registry
     })));
   }
 
@@ -2343,7 +2364,8 @@
       className: "object-property-expand",
       onClick: onAddClick(schema),
       disabled: disabled || readonly,
-      uiSchema: uiSchema
+      uiSchema: uiSchema,
+      registry: registry
     }));
   }
 
@@ -2435,7 +2457,8 @@
       },
       disabled: disabled || readonly,
       onClick: onDropPropertyClick(label),
-      uiSchema: uiSchema
+      uiSchema: uiSchema,
+      registry: registry
     }))));
   }
 
@@ -3573,9 +3596,10 @@
       var schemaUtils = altSchemaUtils ? altSchemaUtils : this.state.schemaUtils;
       var _this$props3 = this.props,
         customValidate = _this$props3.customValidate,
-        transformErrors = _this$props3.transformErrors;
+        transformErrors = _this$props3.transformErrors,
+        uiSchema = _this$props3.uiSchema;
       var resolvedSchema = schemaUtils.retrieveSchema(schema, formData);
-      return schemaUtils.getValidator().validateFormData(formData, resolvedSchema, customValidate, transformErrors);
+      return schemaUtils.getValidator().validateFormData(formData, resolvedSchema, customValidate, transformErrors, uiSchema);
     }
     /** Renders any errors contained in the `state` in using the `ErrorList`, if not disabled by `showErrorList`. */;
     _proto.renderErrors = function renderErrors(registry) {
@@ -3744,7 +3768,8 @@
         disabled: disabled,
         readonly: readonly
       }), children ? children : /*#__PURE__*/React__default["default"].createElement(SubmitButton, {
-        uiSchema: uiSchema
+        uiSchema: uiSchema,
+        registry: registry
       }), showErrorList === "bottom" && this.renderErrors(registry));
     };
     return Form;