react-jsonschema-form - npm Package Compare versions

Comparing version 0.42.0 to 0.43.0

lib/components/fields/ArrayField.js

@@ -19,2 +19,4 @@ "use strict";
 
+function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -165,13 +167,19 @@
 
-  function ArrayField(props) {
+  function ArrayField() {
+    var _ref3;
+
+    var _temp, _this, _ret;
+
     _classCallCheck(this, ArrayField);
 
-    var _this = _possibleConstructorReturn(this, (ArrayField.__proto__ || Object.getPrototypeOf(ArrayField)).call(this, props));
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
 
-    _this.onAddClick = function (event) {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref3 = ArrayField.__proto__ || Object.getPrototypeOf(ArrayField)).call.apply(_ref3, [this].concat(args))), _this), _this.onAddClick = function (event) {
       event.preventDefault();
-      var items = _this.state.items;
       var _this$props = _this.props,
           schema = _this$props.schema,
-          registry = _this$props.registry;
+          registry = _this$props.registry,
+          formData = _this$props.formData;
       var definitions = registry.definitions;
@@ -183,8 +191,4 @@
       }
-      _this.asyncSetState({
-        items: items.concat([(0, _utils.getDefaultFormState)(itemSchema, undefined, definitions)])
-      });
-    };
-
-    _this.onDropIndexClick = function (index) {
+      _this.props.onChange([].concat(_toConsumableArray(formData), [(0, _utils.getDefaultFormState)(itemSchema, undefined, definitions)]), { validate: false });
+    }, _this.onDropIndexClick = function (index) {
       return function (event) {
@@ -194,11 +198,12 @@ if (event) {
         }
-        _this.asyncSetState({
-          items: _this.state.items.filter(function (_, i) {
-            return i !== index;
-          })
-        }, { validate: true }); // refs #195
+        var _this$props2 = _this.props,
+            formData = _this$props2.formData,
+            onChange = _this$props2.onChange;
+        // refs #195: revalidate to ensure properly reindexing errors
+
+        onChange(formData.filter(function (_, i) {
+          return i !== index;
+        }), { validate: true });
       };
-    };
-
-    _this.onReorderClick = function (index, newIndex) {
+    }, _this.onReorderClick = function (index, newIndex) {
       return function (event) {
@@ -209,52 +214,35 @@ if (event) {
         }
-        var items = _this.state.items;
+        var _this$props3 = _this.props,
+            formData = _this$props3.formData,
+            onChange = _this$props3.onChange;
 
-        _this.asyncSetState({
-          items: items.map(function (item, i) {
-            if (i === newIndex) {
-              return items[index];
-            } else if (i === index) {
-              return items[newIndex];
-            } else {
-              return item;
-            }
-          })
-        }, { validate: true });
+        onChange(formData.map(function (item, i) {
+          if (i === newIndex) {
+            return formData[index];
+          } else if (i === index) {
+            return formData[newIndex];
+          } else {
+            return item;
+          }
+        }), { validate: true });
       };
-    };
+    }, _this.onChangeForIndex = function (index) {
+      return function (value) {
+        var _this$props4 = _this.props,
+            formData = _this$props4.formData,
+            onChange = _this$props4.onChange;
 
-    _this.onChangeForIndex = function (index) {
-      return function (value) {
-        _this.asyncSetState({
-          items: _this.state.items.map(function (item, i) {
-            return index === i ? value : item;
-          })
-        });
+        onChange(formData.map(function (item, i) {
+          // We need to treat undefined items as nulls to have validation.
+          // See https://github.com/tdegrunt/jsonschema/issues/206
+          var jsonValue = typeof value === "undefined" ? null : value;
+          return index === i ? jsonValue : item;
+        }), { validate: false });
       };
-    };
-
-    _this.onSelectChange = function (value) {
-      _this.asyncSetState({ items: value });
-    };
-
-    _this.state = _this.getStateFromProps(props);
-    return _this;
+    }, _this.onSelectChange = function (value) {
+      _this.props.onChange(value, { validate: false });
+    }, _temp), _possibleConstructorReturn(_this, _ret);
   }
 
   _createClass(ArrayField, [{
-    key: "componentWillReceiveProps",
-    value: function componentWillReceiveProps(nextProps) {
-      this.setState(this.getStateFromProps(nextProps));
-    }
-  }, {
-    key: "getStateFromProps",
-    value: function getStateFromProps(props) {
-      var formData = Array.isArray(props.formData) ? props.formData : null;
-      var definitions = this.props.registry.definitions;
-
-      return {
-        items: (0, _utils.getDefaultFormState)(props.schema, formData, definitions) || []
-      };
-    }
-  }, {
     key: "shouldComponentUpdate",
@@ -266,17 +254,12 @@ value: function shouldComponentUpdate(nextProps, nextState) {
     key: "isItemRequired",
-    value: function isItemRequired(itemsSchema) {
-      return itemsSchema.type === "string" && itemsSchema.minLength > 0;
+    value: function isItemRequired(itemSchema) {
+      if (Array.isArray(itemSchema.type)) {
+        // While we don't yet support composite/nullable jsonschema types, it's
+        // future-proof to check for requirement against these.
+        return !itemSchema.type.includes("null");
+      }
+      // All non-null array item types are inherently required by design
+      return itemSchema.type !== "null";
     }
   }, {
-    key: "asyncSetState",
-    value: function asyncSetState(state) {
-      var _this2 = this;
-
-      var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : { validate: false };
-
-      (0, _utils.setState)(this, state, function () {
-        _this2.props.onChange(_this2.state.items, options);
-      });
-    }
-  }, {
     key: "render",
@@ -302,3 +285,3 @@ value: function render() {
     value: function renderNormalArray() {
-      var _this3 = this;
+      var _this2 = this;
 
@@ -308,2 +291,3 @@ var _props2 = this.props,
           uiSchema = _props2.uiSchema,
+          formData = _props2.formData,
           errorSchema = _props2.errorSchema,
@@ -317,7 +301,6 @@ idSchema = _props2.idSchema,
           registry = _props2.registry,
+          formContext = _props2.formContext,
           onBlur = _props2.onBlur;
 
       var title = schema.title === undefined ? name : schema.title;
-      var _state$items = this.state.items,
-          items = _state$items === undefined ? [] : _state$items;
       var ArrayFieldTemplate = registry.ArrayFieldTemplate,
@@ -337,14 +320,14 @@ definitions = registry.definitions,
         canAdd: addable,
-        items: items.map(function (item, index) {
+        items: formData.map(function (item, index) {
           var itemErrorSchema = errorSchema ? errorSchema[index] : undefined;
           var itemIdPrefix = idSchema.$id + "_" + index;
           var itemIdSchema = (0, _utils.toIdSchema)(itemsSchema, itemIdPrefix, definitions);
-          return _this3.renderArrayFieldItem({
+          return _this2.renderArrayFieldItem({
             index: index,
             canMoveUp: index > 0,
-            canMoveDown: index < items.length - 1,
+            canMoveDown: index < formData.length - 1,
             itemSchema: itemsSchema,
             itemIdSchema: itemIdSchema,
             itemErrorSchema: itemErrorSchema,
-            itemData: items[index],
+            itemData: formData[index],
             itemUiSchema: uiSchema.items,
@@ -364,3 +347,4 @@ autofocus: autofocus && index === 0,
         title: title,
-        TitleField: TitleField
+        TitleField: TitleField,
+        formContext: formContext
       };
@@ -383,6 +367,8 @@
           onBlur = _props3.onBlur;
-      var items = this.state.items;
+
+      var items = this.props.formData;
       var _props$registry = this.props.registry,
           widgets = _props$registry.widgets,
-          definitions = _props$registry.definitions;
+          definitions = _props$registry.definitions,
+          formContext = _props$registry.formContext;
 
@@ -408,2 +394,3 @@ var itemsSchema = (0, _utils.retrieveSchema)(schema.items, definitions);
         readonly: readonly,
+        formContext: formContext,
         autofocus: autofocus });
@@ -425,4 +412,6 @@ }
       var title = schema.title || name;
-      var items = this.state.items;
-      var widgets = this.props.registry.widgets;
+      var items = this.props.formData;
+      var _props$registry2 = this.props.registry,
+          widgets = _props$registry2.widgets,
+          formContext = _props$registry2.formContext;
 
@@ -446,2 +435,3 @@ var _getUiOptions2 = (0, _utils.getUiOptions)(uiSchema),
         readonly: readonly,
+        formContext: formContext,
         autofocus: autofocus });
@@ -452,3 +442,3 @@ }
     value: function renderFixedArray() {
-      var _this4 = this;
+      var _this3 = this;
 
@@ -469,3 +459,3 @@ var _props5 = this.props,
       var title = schema.title || name;
-      var items = this.state.items;
+      var items = this.props.formData;
       var ArrayFieldTemplate = registry.ArrayFieldTemplate,
@@ -507,3 +497,3 @@ definitions = registry.definitions,
 
-          return _this4.renderArrayFieldItem({
+          return _this3.renderArrayFieldItem({
             index: index,
@@ -536,17 +526,17 @@ canRemove: additional,
     key: "renderArrayFieldItem",
-    value: function renderArrayFieldItem(_ref3) {
-      var index = _ref3.index,
-          _ref3$canRemove = _ref3.canRemove,
-          canRemove = _ref3$canRemove === undefined ? true : _ref3$canRemove,
-          _ref3$canMoveUp = _ref3.canMoveUp,
-          canMoveUp = _ref3$canMoveUp === undefined ? true : _ref3$canMoveUp,
-          _ref3$canMoveDown = _ref3.canMoveDown,
-          canMoveDown = _ref3$canMoveDown === undefined ? true : _ref3$canMoveDown,
-          itemSchema = _ref3.itemSchema,
-          itemData = _ref3.itemData,
-          itemUiSchema = _ref3.itemUiSchema,
-          itemIdSchema = _ref3.itemIdSchema,
-          itemErrorSchema = _ref3.itemErrorSchema,
-          autofocus = _ref3.autofocus,
-          onBlur = _ref3.onBlur;
+    value: function renderArrayFieldItem(_ref4) {
+      var index = _ref4.index,
+          _ref4$canRemove = _ref4.canRemove,
+          canRemove = _ref4$canRemove === undefined ? true : _ref4$canRemove,
+          _ref4$canMoveUp = _ref4.canMoveUp,
+          canMoveUp = _ref4$canMoveUp === undefined ? true : _ref4$canMoveUp,
+          _ref4$canMoveDown = _ref4.canMoveDown,
+          canMoveDown = _ref4$canMoveDown === undefined ? true : _ref4$canMoveDown,
+          itemSchema = _ref4.itemSchema,
+          itemData = _ref4.itemData,
+          itemUiSchema = _ref4.itemUiSchema,
+          itemIdSchema = _ref4.itemIdSchema,
+          itemErrorSchema = _ref4.itemErrorSchema,
+          autofocus = _ref4.autofocus,
+          onBlur = _ref4.onBlur;
       var SchemaField = this.props.registry.fields.SchemaField;
@@ -614,2 +604,3 @@ var _props6 = this.props,
   uiSchema: {},
+  formData: [],
   idSchema: {},
@@ -624,5 +615,5 @@ registry: (0, _utils.getDefaultRegistry)(),
 
-function AddButton(_ref4) {
-  var onClick = _ref4.onClick,
-      disabled = _ref4.disabled;
+function AddButton(_ref5) {
+  var onClick = _ref5.onClick,
+      disabled = _ref5.disabled;
 
@@ -629,0 +620,0 @@ return _react2.default.createElement(

lib/components/fields/BooleanField.js

@@ -51,3 +51,3 @@ "use strict";
     label: title === undefined ? name : title,
-    value: (0, _utils.defaultFieldValue)(formData, schema),
+    value: formData,
     required: required,
@@ -54,0 +54,0 @@ disabled: disabled,

lib/components/fields/ObjectField.js

@@ -7,2 +7,4 @@ "use strict";
 
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
@@ -26,59 +28,25 @@
 
-function objectKeysHaveChanged(formData, state) {
-  // for performance, first check for lengths
-  var newKeys = Object.keys(formData);
-  var oldKeys = Object.keys(state);
-  if (newKeys.length < oldKeys.length) {
-    return true;
-  }
-  // deep check on sorted keys
-  if (!(0, _utils.deepEquals)(newKeys.sort(), oldKeys.sort())) {
-    return true;
-  }
-  return false;
-}
-
 var ObjectField = function (_Component) {
   _inherits(ObjectField, _Component);
 
-  function ObjectField(props) {
+  function ObjectField() {
+    var _ref;
+
+    var _temp, _this, _ret;
+
     _classCallCheck(this, ObjectField);
 
-    var _this = _possibleConstructorReturn(this, (ObjectField.__proto__ || Object.getPrototypeOf(ObjectField)).call(this, props));
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
 
-    _this.onPropertyChange = function (name) {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = ObjectField.__proto__ || Object.getPrototypeOf(ObjectField)).call.apply(_ref, [this].concat(args))), _this), _this.onPropertyChange = function (name) {
       return function (value, options) {
-        _this.asyncSetState(_defineProperty({}, name, value), options);
+        var newFormData = _extends({}, _this.props.formData, _defineProperty({}, name, value));
+        _this.props.onChange(newFormData, options);
       };
-    };
-
-    _this.state = _this.getStateFromProps(props);
-    return _this;
+    }, _temp), _possibleConstructorReturn(_this, _ret);
   }
 
   _createClass(ObjectField, [{
-    key: "componentWillReceiveProps",
-    value: function componentWillReceiveProps(nextProps) {
-      var state = this.getStateFromProps(nextProps);
-      var formData = nextProps.formData;
-
-      if (formData && objectKeysHaveChanged(formData, this.state)) {
-        // We *need* to replace state entirely here has we have received formData
-        // holding different keys (so with some removed).
-        this.state = state;
-        this.forceUpdate();
-      } else {
-        this.setState(state);
-      }
-    }
-  }, {
-    key: "getStateFromProps",
-    value: function getStateFromProps(props) {
-      var schema = props.schema,
-          formData = props.formData,
-          registry = props.registry;
-
-      return (0, _utils.getDefaultFormState)(schema, formData, registry.definitions) || {};
-    }
-  }, {
     key: "shouldComponentUpdate",
@@ -95,19 +63,9 @@ value: function shouldComponentUpdate(nextProps, nextState) {
   }, {
-    key: "asyncSetState",
-    value: function asyncSetState(state) {
-      var _this2 = this;
-
-      var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : { validate: false };
-
-      (0, _utils.setState)(this, state, function () {
-        _this2.props.onChange(_this2.state, options);
-      });
-    }
-  }, {
     key: "render",
     value: function render() {
-      var _this3 = this;
+      var _this2 = this;
 
       var _props = this.props,
           uiSchema = _props.uiSchema,
+          formData = _props.formData,
           errorSchema = _props.errorSchema,
@@ -173,3 +131,3 @@ idSchema = _props.idSchema,
             name: name,
-            required: _this3.isRequired(name),
+            required: _this2.isRequired(name),
             schema: schema.properties[name],
@@ -179,6 +137,6 @@ uiSchema: uiSchema[name],
             idSchema: idSchema[name],
-            formData: _this3.state[name],
-            onChange: _this3.onPropertyChange(name),
+            formData: formData[name],
+            onChange: _this2.onPropertyChange(name),
             onBlur: onBlur,
-            registry: _this3.props.registry,
+            registry: _this2.props.registry,
             disabled: disabled,
@@ -196,2 +154,3 @@ readonly: readonly });
   uiSchema: {},
+  formData: {},
   errorSchema: {},
@@ -198,0 +157,0 @@ idSchema: {},

lib/components/fields/SchemaField.js

@@ -206,3 +206,5 @@ "use strict";
   var field = _react2.default.createElement(FieldComponent, _extends({}, props, {
-    schema: schema,
+    schema: schema
+    // See #439: Don't pass consumed class names to child components
+    , uiSchema: _extends({}, uiSchema, { classNames: undefined }),
     disabled: disabled,
@@ -209,0 +211,0 @@ readonly: readonly,

lib/components/fields/StringField.js

@@ -54,3 +54,3 @@ "use strict";
     label: title === undefined ? name : title,
-    value: (0, _utils.defaultFieldValue)(formData, schema),
+    value: formData,
     onChange: onChange,
@@ -57,0 +57,0 @@ onBlur: onBlur,

lib/components/widgets/BaseInput.js

@@ -39,3 +39,3 @@ "use strict";
     autoFocus: autofocus,
-    value: typeof value === "undefined" ? "" : value,
+    value: value == null ? "" : value,
     onChange: _onChange,
@@ -42,0 +42,0 @@ onBlur: onBlur && function (event) {

lib/components/widgets/RadioWidget.js

@@ -41,2 +41,3 @@ "use strict";
           name: name,
+          required: required,
           value: option.value,
@@ -43,0 +44,0 @@ disabled: disabled,

lib/utils.js

@@ -12,3 +12,2 @@ "use strict";
 exports.getDefaultRegistry = getDefaultRegistry;
-exports.defaultFieldValue = defaultFieldValue;
 exports.getWidget = getWidget;
@@ -113,6 +112,2 @@ exports.getDefaultFormState = getDefaultFormState;
 
-function defaultFieldValue(formData, schema) {
-  return typeof formData === "undefined" ? schema.default : formData;
-}
-
 function getWidget(schema, widget) {
@@ -119,0 +114,0 @@ var registeredWidgets = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};

package.json

 {
   "name": "react-jsonschema-form",
-  "version": "0.42.0",
+  "version": "0.43.0",
   "description": "A simple React component capable of building HTML forms out of a JSON schema.",
@@ -5,0 +5,0 @@ "scripts": {

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

No README

Quality

Package does not have a README. This may indicate a failed publish or a low quality package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

940159

increased by4.6%

Number of package files

39

increased by2.63%

Number of medium quality alerts

0

decreased by-100%

Number of lines in readme file

1331

increased byInfinity%

Worsened metrics

Lines of code

3713

decreased by-1.28%

No dependency changes