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

package/dist/core.esm.js

@@ -155,42 +155,11 @@ var ArrayField = /*#__PURE__*/function (_Component) {
       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) {
@@ -369,6 +338,42 @@ var ArrayField = /*#__PURE__*/function (_Component) {
   /** 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() {
@@ -437,8 +442,9 @@ var ArrayField = /*#__PURE__*/function (_Component) {
     var _schemaItems = isObject(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;
@@ -452,6 +458,7 @@ var ArrayField = /*#__PURE__*/function (_Component) {
           key: key,
           index: index,
           name: name && name + "-" + index,
+          canAdd: canAdd,
           canMoveUp: index > 0,
           canMoveDown: index < formData.length - 1,
           itemSchema: itemSchema,
@@ -462,7 +469,8 @@ var ArrayField = /*#__PURE__*/function (_Component) {
           autofocus: autofocus && index === 0,
           onBlur: onBlur,
           onFocus: onFocus,
-          rawErrors: rawErrors
+          rawErrors: rawErrors,
+          totalItems: keyedFormData.length
         });
       }),
       className: "field field-array field-array-of-" + itemsSchema.type,
@@ -689,8 +697,9 @@ var ArrayField = /*#__PURE__*/function (_Component) {
       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,
@@ -710,6 +719,7 @@ var ArrayField = /*#__PURE__*/function (_Component) {
           key: key,
           index: index,
           name: name && name + "-" + index,
+          canAdd: canAdd,
           canRemove: additional,
           canMoveUp: index >= itemSchemas.length + 1,
           canMoveDown: additional && index < items.length - 1,
@@ -721,7 +731,8 @@ var ArrayField = /*#__PURE__*/function (_Component) {
           autofocus: autofocus && index === 0,
           onBlur: onBlur,
           onFocus: onFocus,
-          rawErrors: rawErrors
+          rawErrors: rawErrors,
+          totalItems: keyedFormData.length
         });
       }),
       onAddClick: this.onAddClick,
@@ -746,6 +757,7 @@ var ArrayField = /*#__PURE__*/function (_Component) {
     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,
@@ -760,7 +772,8 @@ var ArrayField = /*#__PURE__*/function (_Component) {
       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,
@@ -813,11 +826,13 @@ var ArrayField = /*#__PURE__*/function (_Component) {
       }),
       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,
@@ -1890,17 +1905,20 @@ function ArrayFieldItemTemplate(props) {
     style: btnStyle,
     disabled: disabled || readonly || !hasMoveUp,
     onClick: onReorderClick(index, index - 1),
-    uiSchema: uiSchema
+    uiSchema: uiSchema,
+    registry: registry
   }), (hasMoveUp || hasMoveDown) && /*#__PURE__*/React.createElement(MoveDownButton, {
     style: btnStyle,
     disabled: disabled || readonly || !hasMoveDown,
     onClick: onReorderClick(index, index + 1),
-    uiSchema: uiSchema
+    uiSchema: uiSchema,
+    registry: registry
   }), hasRemove && /*#__PURE__*/React.createElement(RemoveButton, {
     style: btnStyle,
     disabled: disabled || readonly,
     onClick: onDropIndexClick(index),
-    uiSchema: uiSchema
+    uiSchema: uiSchema,
+    registry: registry
   }))));
 }
 
@@ -1956,7 +1974,8 @@ function ArrayFieldTemplate(props) {
     className: "array-item-add",
     onClick: onAddClick,
     disabled: disabled || readonly,
-    uiSchema: uiSchema
+    uiSchema: uiSchema,
+    registry: registry
   }));
 }
 
@@ -2078,7 +2097,7 @@ function SubmitButton(_ref) {
   }), 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,
@@ -2123,7 +2142,8 @@ function RemoveButton(props) {
 function AddButton(_ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
-    disabled = _ref.disabled;
+    disabled = _ref.disabled,
+    registry = _ref.registry;
   return /*#__PURE__*/React.createElement("div", {
     className: "row"
   }, /*#__PURE__*/React.createElement("p", {
@@ -2134,7 +2154,8 @@ function AddButton(_ref) {
     className: "btn-add col-xs-12",
     title: "Add",
     onClick: onClick,
-    disabled: disabled
+    disabled: disabled,
+    registry: registry
   })));
 }
 
@@ -2337,7 +2358,8 @@ function ObjectFieldTemplate(props) {
     className: "object-property-expand",
     onClick: onAddClick(schema),
     disabled: disabled || readonly,
-    uiSchema: uiSchema
+    uiSchema: uiSchema,
+    registry: registry
   }));
 }
 
@@ -2429,7 +2451,8 @@ function WrapIfAdditionalTemplate(props) {
     },
     disabled: disabled || readonly,
     onClick: onDropPropertyClick(label),
-    uiSchema: uiSchema
+    uiSchema: uiSchema,
+    registry: registry
   }))));
 }
 
@@ -3567,9 +3590,10 @@ var Form = /*#__PURE__*/function (_Component) {
     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) {
@@ -3738,7 +3762,8 @@ var Form = /*#__PURE__*/function (_Component) {
       disabled: disabled,
       readonly: readonly
     }), children ? children : /*#__PURE__*/React.createElement(SubmitButton, {
-      uiSchema: uiSchema
+      uiSchema: uiSchema,
+      registry: registry
     }), showErrorList === "bottom" && this.renderErrors(registry));
   };
   return Form;