react-jsonschema-form - npm Package Compare versions

Comparing version 1.8.0 to 2.0.0-alpha.1

lib/components/fields/ArrayField.js

@@ -47,4 +47,2 @@ "use strict";
 
-var _reactLifecyclesCompat = require("react-lifecycles-compat");
-
 var _includes = _interopRequireDefault(require("core-js/library/fn/array/includes"));
@@ -243,3 +241,4 @@
       _this.setState({
-        keyedFormData: newKeyedFormData
+        keyedFormData: newKeyedFormData,
+        updatedKeyedFormData: true
       }, function () {
@@ -264,3 +263,4 @@ return onChange(keyedToPlainFormData(newKeyedFormData));
         _this.setState({
-          keyedFormData: newKeyedFormData
+          keyedFormData: newKeyedFormData,
+          updatedKeyedFormData: true
         }, function () {
@@ -302,3 +302,4 @@ return onChange(keyedToPlainFormData(newKeyedFormData));
         _this.setState({
-          keyedFormData: newKeyedFormData
+          keyedFormData: newKeyedFormData,
+          updatedKeyedFormData: true
         }, function () {
@@ -379,3 +380,4 @@ return onChange(keyedToPlainFormData(newKeyedFormData), newErrorSchema);
     _this.state = {
-      keyedFormData: _keyedFormData
+      keyedFormData: _keyedFormData,
+      updatedKeyedFormData: false
     };
@@ -755,2 +757,3 @@ return _this;
         children: _react["default"].createElement(SchemaField, {
+          index: index,
           schema: itemSchema,
@@ -794,2 +797,9 @@ uiSchema: itemUiSchema,
     value: function getDerivedStateFromProps(nextProps, prevState) {
+      // Don't call getDerivedStateFromProps if keyed formdata was just updated.
+      if (prevState.updatedKeyedFormData) {
+        return {
+          updatedKeyedFormData: false
+        };
+      }
+
       var nextFormData = nextProps.formData;
@@ -825,4 +835,3 @@ var previousKeyedFormData = prevState.keyedFormData;
 
-(0, _reactLifecyclesCompat.polyfill)(ArrayField);
 var _default = ArrayField;
 exports["default"] = _default;

lib/components/fields/MultiSchemaField.js

@@ -124,13 +124,15 @@ "use strict";
   (0, _createClass2["default"])(AnyOfField, [{
-    key: "componentWillReceiveProps",
-    value: function componentWillReceiveProps(nextProps) {
-      var matchingOption = this.getMatchingOption(nextProps.formData, nextProps.options);
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps, prevState) {
+      if (!(0, _utils.deepEquals)(this.props.formData, prevProps.formData) && this.props.idSchema.$id === prevProps.idSchema.$id) {
+        var matchingOption = this.getMatchingOption(this.props.formData, this.props.options);
 
-      if (matchingOption === this.state.selectedOption) {
-        return;
+        if (!prevState || matchingOption === this.state.selectedOption) {
+          return;
+        }
+
+        this.setState({
+          selectedOption: matchingOption
+        });
       }
-
-      this.setState({
-        selectedOption: matchingOption
-      });
     }
@@ -166,3 +168,2 @@ }, {
           registry = _this$props3.registry,
-          safeRenderCompletion = _this$props3.safeRenderCompletion,
           uiSchema = _this$props3.uiSchema;
@@ -226,3 +227,2 @@ var _SchemaField = registry.fields.SchemaField;
         registry: registry,
-        safeRenderCompletion: safeRenderCompletion,
         disabled: disabled
@@ -229,0 +229,0 @@ }));

lib/components/fields/SchemaField.js

@@ -388,3 +388,2 @@ "use strict";
     registry: registry,
-    safeRenderCompletion: props.safeRenderCompletion,
     schema: schema,
@@ -404,3 +403,2 @@ uiSchema: uiSchema
     registry: registry,
-    safeRenderCompletion: props.safeRenderCompletion,
     schema: schema,
@@ -424,9 +422,3 @@ uiSchema: uiSchema
     value: function shouldComponentUpdate(nextProps, nextState) {
-      // if schemas are equal idSchemas will be equal as well,
-      // so it is not necessary to compare
-      return !(0, _utils.deepEquals)((0, _objectSpread2["default"])({}, this.props, {
-        idSchema: undefined
-      }), (0, _objectSpread2["default"])({}, nextProps, {
-        idSchema: undefined
-      }));
+      return !(0, _utils.deepEquals)(this.props, nextProps);
     }
@@ -433,0 +425,0 @@ }, {

lib/components/Form.js

@@ -136,2 +136,7 @@ "use strict";
 
+        if (_this.props.extraErrors) {
+          errorSchema = (0, _utils.mergeObjects)(errorSchema, _this.props.extraErrors);
+          errors = (0, _validate.toErrorList)(errorSchema);
+        }
+
         state = {
@@ -143,13 +148,13 @@ formData: newFormData,
       } else if (!_this.props.noValidate && newErrorSchema) {
+        var _errorSchema = _this.props.extraErrors ? (0, _utils.mergeObjects)(newErrorSchema, _this.props.extraErrors) : newErrorSchema;
+
         state = {
           formData: newFormData,
-          errorSchema: newErrorSchema,
-          errors: (0, _validate.toErrorList)(newErrorSchema)
+          errorSchema: _errorSchema,
+          errors: (0, _validate.toErrorList)(_errorSchema)
         };
       }
 
-      (0, _utils.setState)((0, _assertThisInitialized2["default"])(_this), state, function () {
-        if (_this.props.onChange) {
-          _this.props.onChange(_this.state);
-        }
+      _this.setState(state, function () {
+        return _this.props.onChange && _this.props.onChange(state);
       });
@@ -192,16 +197,22 @@ });
         var _this$validate2 = _this.validate(newFormData),
-            errors = _this$validate2.errors,
-            errorSchema = _this$validate2.errorSchema;
+            _errors = _this$validate2.errors,
+            _errorSchema2 = _this$validate2.errorSchema;
 
-        if ((0, _keys["default"])(errors).length > 0) {
-          (0, _utils.setState)((0, _assertThisInitialized2["default"])(_this), {
-            errors: errors,
-            errorSchema: errorSchema
+        if ((0, _keys["default"])(_errors).length > 0) {
+          if (_this.props.extraErrors) {
+            _errorSchema2 = (0, _utils.mergeObjects)(_errorSchema2, _this.props.extraErrors);
+            _errors = (0, _validate.toErrorList)(_errorSchema2);
+          }
+
+          _this.setState({
+            errors: _errors,
+            errorSchema: _errorSchema2
           }, function () {
             if (_this.props.onError) {
-              _this.props.onError(errors);
+              _this.props.onError(_errors);
             } else {
-              console.error("Form validation failed", errors);
+              console.error("Form validation failed", _errors);
             }
           });
+
           return;
@@ -211,6 +222,17 @@ }
 
+      var errorSchema;
+      var errors;
+
+      if (_this.props.extraErrors) {
+        errorSchema = _this.props.extraErrors;
+        errors = (0, _validate.toErrorList)(errorSchema);
+      } else {
+        errorSchema = {};
+        errors = [];
+      }
+
       _this.setState({
         formData: newFormData,
-        errors: [],
-        errorSchema: {}
+        errors: errors,
+        errorSchema: errorSchema
       }, function () {
@@ -236,4 +258,4 @@ if (_this.props.onSubmit) {
   (0, _createClass2["default"])(Form, [{
-    key: "componentWillReceiveProps",
-    value: function componentWillReceiveProps(nextProps) {
+    key: "UNSAFE_componentWillReceiveProps",
+    value: function UNSAFE_componentWillReceiveProps(nextProps) {
       var nextState = this.getStateFromProps(nextProps, nextProps.formData);
@@ -269,2 +291,7 @@
 
+      if (props.extraErrors) {
+        errorSchema = (0, _utils.mergeObjects)(errorSchema, props.extraErrors);
+        errors = (0, _validate.toErrorList)(errorSchema);
+      }
+
       var idSchema = (0, _utils.toIdSchema)(retrievedSchema, uiSchema["ui:rootFieldId"], definitions, formData, props.idPrefix);
@@ -363,3 +390,2 @@ return {
           children = _this$props5.children,
-          safeRenderCompletion = _this$props5.safeRenderCompletion,
           id = _this$props5.id,
@@ -373,3 +399,4 @@ idPrefix = _this$props5.idPrefix,
           action = _this$props5.action,
-          autocomplete = _this$props5.autocomplete,
+          deprecatedAutocomplete = _this$props5.autocomplete,
+          currentAutoComplete = _this$props5.autoComplete,
           enctype = _this$props5.enctype,
@@ -389,2 +416,8 @@ acceptcharset = _this$props5.acceptcharset,
       var FormTag = tagName ? tagName : "form";
+
+      if (deprecatedAutocomplete) {
+        console.warn("Using autocomplete property of Form is deprecated, use autoComplete instead.");
+      }
+
+      var autoComplete = currentAutoComplete ? currentAutoComplete : deprecatedAutocomplete;
       return _react["default"].createElement(FormTag, {
@@ -397,3 +430,3 @@ className: className ? className : "rjsf",
         action: action,
-        autoComplete: autocomplete,
+        autoComplete: autoComplete,
         encType: enctype,
@@ -418,3 +451,2 @@ acceptCharset: acceptcharset,
         registry: registry,
-        safeRenderCompletion: safeRenderCompletion,
         disabled: disabled
@@ -436,3 +468,2 @@ }), children ? children : _react["default"].createElement("div", null, _react["default"].createElement("button", {
   disabled: false,
-  safeRenderCompletion: false,
   noHtml5Validate: false,
@@ -449,6 +480,6 @@ ErrorList: _ErrorList["default"],
     widgets: _propTypes["default"].objectOf(_propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].object])),
-    fields: _propTypes["default"].objectOf(_propTypes["default"].func),
-    ArrayFieldTemplate: _propTypes["default"].func,
-    ObjectFieldTemplate: _propTypes["default"].func,
-    FieldTemplate: _propTypes["default"].func,
+    fields: _propTypes["default"].objectOf(_propTypes["default"].elementType),
+    ArrayFieldTemplate: _propTypes["default"].elementType,
+    ObjectFieldTemplate: _propTypes["default"].elementType,
+    FieldTemplate: _propTypes["default"].elementType,
     ErrorList: _propTypes["default"].func,
@@ -467,2 +498,3 @@ onChange: _propTypes["default"].func,
     autocomplete: _propTypes["default"].string,
+    autoComplete: _propTypes["default"].string,
     enctype: _propTypes["default"].string,
@@ -475,8 +507,8 @@ acceptcharset: _propTypes["default"].string,
     transformErrors: _propTypes["default"].func,
-    safeRenderCompletion: _propTypes["default"].bool,
     formContext: _propTypes["default"].object,
     customFormats: _propTypes["default"].object,
     additionalMetaSchemas: _propTypes["default"].arrayOf(_propTypes["default"].object),
-    omitExtraData: _propTypes["default"].bool
+    omitExtraData: _propTypes["default"].bool,
+    extraErrors: _propTypes["default"].object
   };
 }

lib/components/widgets/AltDateWidget.js

@@ -149,4 +149,4 @@ "use strict";
   (0, _createClass2["default"])(AltDateWidget, [{
-    key: "componentWillReceiveProps",
-    value: function componentWillReceiveProps(nextProps) {
+    key: "UNSAFE_componentWillReceiveProps",
+    value: function UNSAFE_componentWillReceiveProps(nextProps) {
       this.setState((0, _utils.parseDateString)(nextProps.value, nextProps.time));
@@ -153,0 +153,0 @@ }

lib/types.js

@@ -16,7 +16,7 @@ "use strict";
 var registry = _propTypes["default"].shape({
-  ArrayFieldTemplate: _propTypes["default"].func,
-  FieldTemplate: _propTypes["default"].func,
-  ObjectFieldTemplate: _propTypes["default"].func,
+  ArrayFieldTemplate: _propTypes["default"].elementType,
+  FieldTemplate: _propTypes["default"].elementType,
+  ObjectFieldTemplate: _propTypes["default"].elementType,
   definitions: _propTypes["default"].object.isRequired,
-  fields: _propTypes["default"].objectOf(_propTypes["default"].func).isRequired,
+  fields: _propTypes["default"].objectOf(_propTypes["default"].elementType).isRequired,
   formContext: _propTypes["default"].object.isRequired,
@@ -23,0 +23,0 @@ widgets: _propTypes["default"].objectOf(_propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].object])).isRequired

lib/utils.js

@@ -18,2 +18,3 @@ "use strict";
 exports.getDefaultFormState = getDefaultFormState;
+exports.mergeDefaultsWithFormData = mergeDefaultsWithFormData;
 exports.getUiOptions = getUiOptions;
@@ -35,2 +36,3 @@ exports.isObject = isObject;
 exports.retrieveSchema = retrieveSchema;
+exports.mergeSchemas = mergeSchemas;
 exports.deepEquals = deepEquals;
@@ -43,3 +45,2 @@ exports.shouldRender = shouldRender;
 exports.pad = pad;
-exports.setState = setState;
 exports.dataURItoBlob = dataURItoBlob;
@@ -52,4 +53,2 @@ exports.rangeSpec = rangeSpec;
 
-var _setImmediate2 = _interopRequireDefault(require("@babel/runtime-corejs2/core-js/set-immediate"));
-
 var _set = _interopRequireDefault(require("@babel/runtime-corejs2/core-js/set"));
@@ -65,10 +64,10 @@
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs2/helpers/defineProperty"));
+
 var _assign = _interopRequireDefault(require("@babel/runtime-corejs2/core-js/object/assign"));
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs2/helpers/defineProperty"));
+var _keys = _interopRequireDefault(require("@babel/runtime-corejs2/core-js/object/keys"));
 
 var _isArray = _interopRequireDefault(require("@babel/runtime-corejs2/core-js/array/is-array"));
 
-var _keys = _interopRequireDefault(require("@babel/runtime-corejs2/core-js/object/keys"));
-
 var _typeof2 = _interopRequireDefault(require("@babel/runtime-corejs2/helpers/typeof"));
@@ -90,2 +89,4 @@
 
+var _lodash = require("lodash");
+
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return (0, _typeof2["default"])(key) === "symbol" ? key : String(key); }
@@ -157,3 +158,5 @@
 }
+/* Gets the type of a given schema. */
 
+
 function getSchemaType(schema) {
@@ -205,3 +208,3 @@ var type = schema.type;
 
-  if (typeof widget === "function" || ReactIs.isForwardRef(widget)) {
+  if (typeof widget === "function" || ReactIs.isForwardRef(_react["default"].createElement(widget)) || ReactIs.isMemo(widget)) {
     return mergeOptions(widget);
@@ -268,4 +271,4 @@ }
   } else if (isFixedItems(schema)) {
-    defaults = schema.items.map(function (itemSchema) {
-      return computeDefaults(itemSchema, undefined, definitions, formData, includeUndefinedValues);
+    defaults = schema.items.map(function (itemSchema, idx) {
+      return computeDefaults(itemSchema, (0, _isArray["default"])(parentDefaults) ? parentDefaults[idx] : undefined, definitions, formData, includeUndefinedValues);
     });
@@ -299,2 +302,16 @@ } else if ("oneOf" in schema) {
     case "array":
+      // Inject defaults into existing array defaults
+      if ((0, _isArray["default"])(defaults)) {
+        defaults = defaults.map(function (item, idx) {
+          return computeDefaults(schema.items[idx] || schema.additionalItems || {}, item, definitions);
+        });
+      } // Deeply inject defaults into already existing form data
+
+
+      if ((0, _isArray["default"])(rawFormData)) {
+        defaults = rawFormData.map(function (item, idx) {
+          return computeDefaults(schema.items, (defaults || {})[idx], definitions, item);
+        });
+      }
+
       if (schema.minItems) {
@@ -338,8 +355,7 @@ if (!isMultiSelect(schema, definitions)) {
 
-  if (isObject(formData)) {
-    // Override schema defaults with form data.
-    return mergeObjects(defaults, formData);
+  if (isObject(formData) || (0, _isArray["default"])(formData)) {
+    return mergeDefaultsWithFormData(defaults, formData);
   }
 
-  if (formData === 0) {
+  if (formData === 0 || formData === false) {
     return formData;
@@ -350,3 +366,38 @@ }
 }
+/**
+ * When merging defaults and form data, we want to merge in this specific way:
+ * - objects are deeply merged
+ * - arrays are merged in such a way that:
+ *   - when the array is set in form data, only array entries set in form data
+ *     are deeply merged; additional entries from the defaults are ignored
+ *   - when the array is not set in form data, the default is copied over
+ * - scalars are overwritten/set by form data
+ */
 
+
+function mergeDefaultsWithFormData(defaults, formData) {
+  if ((0, _isArray["default"])(formData)) {
+    if (!(0, _isArray["default"])(defaults)) {
+      defaults = [];
+    }
+
+    return formData.map(function (value, idx) {
+      if (defaults[idx]) {
+        return mergeDefaultsWithFormData(defaults[idx], value);
+      }
+
+      return value;
+    });
+  } else if (isObject(formData)) {
+    var acc = (0, _assign["default"])({}, defaults); // Prevent mutation of source object.
+
+    return (0, _keys["default"])(formData).reduce(function (acc, key) {
+      acc[key] = mergeDefaultsWithFormData(defaults ? defaults[key] : {}, formData[key]);
+      return acc;
+    }, acc);
+  } else {
+    return formData;
+  }
+}
+
 function getUiOptions(uiSchema) {
@@ -836,6 +887,28 @@ // get all passed options from ui:widget, ui:options, and ui:<optionName>
   return mergeSchemas(schema, retrieveSchema(dependentSchema, definitions, formData));
-}
+} // Recursively merge deeply nested schemas.
+// The difference between mergeSchemas and mergeObjects
+// is that mergeSchemas only concats arrays for
+// values under the "required" keyword, and when it does,
+// it doesn't include duplicate values.
 
-function mergeSchemas(schema1, schema2) {
-  return mergeObjects(schema1, schema2, true);
+
+function mergeSchemas(obj1, obj2) {
+  var acc = (0, _assign["default"])({}, obj1); // Prevent mutation of source object.
+
+  return (0, _keys["default"])(obj2).reduce(function (acc, key) {
+    var left = obj1 ? obj1[key] : {},
+        right = obj2[key];
+
+    if (obj1 && obj1.hasOwnProperty(key) && isObject(right)) {
+      acc[key] = mergeSchemas(left, right);
+    } else if (obj1 && obj2 && (getSchemaType(obj1) === "object" || getSchemaType(obj2) === "object") && key === "required" && (0, _isArray["default"])(left) && (0, _isArray["default"])(right)) {
+      // Don't include duplicate values when merging
+      // "required" fields.
+      acc[key] = (0, _lodash.union)(left, right);
+    } else {
+      acc[key] = right;
+    }
+
+    return acc;
+  }, acc);
 }
@@ -1050,13 +1123,2 @@
 
-function setState(instance, state, callback) {
-  var safeRenderCompletion = instance.props.safeRenderCompletion;
-
-  if (safeRenderCompletion) {
-    instance.setState(state, callback);
-  } else {
-    instance.setState(state);
-    (0, _setImmediate2["default"])(callback);
-  }
-}
-
 function dataURItoBlob(dataURI) {
@@ -1063,0 +1125,0 @@ // Split metadata from data

package.json

 {
   "name": "react-jsonschema-form",
-  "version": "1.8.0",
+  "version": "2.0.0-alpha.1",
   "description": "A simple React component capable of building HTML forms out of a JSON schema.",
@@ -43,3 +43,3 @@ "scripts": {
   "peerDependencies": {
-    "react": ">=15"
+    "react": ">=16"
   },
@@ -51,5 +51,4 @@ "dependencies": {
     "lodash": "^4.17.15",
-    "prop-types": "^15.5.8",
-    "react-is": "^16.8.4",
-    "react-lifecycles-compat": "^3.0.4",
+    "prop-types": "^15.7.2",
+    "react-is": "^16.9.0",
     "shortid": "^2.2.14"
@@ -96,5 +95,5 @@ },
     "prettier": "^1.15.1",
-    "react": "^15.5.0",
+    "react": "^16.9.0",
     "react-codemirror2": "^4.1.0",
-    "react-dom": "^15.3.2",
+    "react-dom": "^16.9.0",
     "react-monaco-editor": "^0.26.2",
@@ -101,0 +100,0 @@ "react-portal": "^4.2.0",

README.md

@@ -18,3 +18,3 @@ react-jsonschema-form
 ## Live Playground
-A [live playground](https://mozilla-services.github.io/react-jsonschema-form/) is hosted on gh-pages.
+A [live playground](https://rjsf-team.github.io/react-jsonschema-form/) is hosted on gh-pages.
 
@@ -21,0 +21,0 @@ ## Contributing

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

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

3867237

increased by24.27%

Dependency count

8

decreased by-11.11%

Lines of code

7492

increased by4.83%

Worsened metrics

Number of low quality alerts

2

increased by100%

Number of medium supply chain risk alerts

11

increased by22.22%

Dependency changes

• - Removedreact-lifecycles-compat@^3.0.4

• - Removedreact-lifecycles-compat@3.0.4(transitive)

• Updatedprop-types@^15.7.2

• Updatedreact-is@^16.9.0