react-jsonschema-form - npm Package Compare versions

Comparing version 1.0.7 to 1.1.0

lib/components/fields/ArrayField.js

@@ -162,3 +162,3 @@ "use strict";
     "fieldset",
-    { className: props.className },
+    { className: props.className, id: props.idSchema.$id },
     _react2.default.createElement(ArrayFieldTitle, {
@@ -196,3 +196,3 @@ key: "array-field-title-" + props.idSchema.$id,
     "fieldset",
-    { className: props.className },
+    { className: props.className, id: props.idSchema.$id },
     _react2.default.createElement(ArrayFieldTitle, {
@@ -199,0 +199,0 @@ key: "array-field-title-" + props.idSchema.$id,

lib/components/fields/ObjectField.js

@@ -96,3 +96,3 @@ "use strict";
     "fieldset",
-    null,
+    { id: props.idSchema.$id },
     (props.uiSchema["ui:title"] || props.title) && _react2.default.createElement(TitleField, {
@@ -137,6 +137,29 @@ id: props.idSchema.$id + "__title",
     }, _this.onPropertyChange = function (name) {
+      var addedByAdditionalProperties = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+
       return function (value, errorSchema) {
+        if (!value && addedByAdditionalProperties) {
+          // Don't set value = undefined for fields added by
+          // additionalProperties. Doing so removes them from the
+          // formData, which causes them to completely disappear
+          // (including the input field for the property name). Unlike
+          // fields which are "mandated" by the schema, these fields can
+          // be set to undefined by clicking a "delete field" button, so
+          // set empty values to the empty string.
+          value = "";
+        }
         var newFormData = (0, _extends6.default)({}, _this.props.formData, (0, _defineProperty3.default)({}, name, value));
         _this.props.onChange(newFormData, errorSchema && _this.props.errorSchema && (0, _extends6.default)({}, _this.props.errorSchema, (0, _defineProperty3.default)({}, name, errorSchema)));
       };
+    }, _this.onDropPropertyClick = function (key) {
+      return function (event) {
+        event.preventDefault();
+        var _this$props = _this.props,
+            onChange = _this$props.onChange,
+            formData = _this$props.formData;
+
+        var copiedFormData = (0, _extends6.default)({}, formData);
+        delete copiedFormData[key];
+        onChange(copiedFormData);
+      };
     }, _this.getAvailableKey = function (preferredKey, formData) {
@@ -231,3 +254,2 @@ var index = 0;
       var orderedProperties = void 0;
-
       try {
@@ -269,2 +291,3 @@ var properties = (0, _keys2.default)(schema.properties);
         properties: orderedProperties.map(function (name) {
+          var addedByAdditionalProperties = schema.properties[name].hasOwnProperty(_utils.ADDITIONAL_PROPERTY_FLAG);
           return {
@@ -282,3 +305,3 @@ content: _react2.default.createElement(SchemaField, {
               onKeyChange: _this2.onKeyChange(name),
-              onChange: _this2.onPropertyChange(name),
+              onChange: _this2.onPropertyChange(name, addedByAdditionalProperties),
               onBlur: onBlur,
@@ -288,3 +311,4 @@ onFocus: onFocus,
               disabled: disabled,
-              readonly: readonly
+              readonly: readonly,
+              onDropPropertyClick: _this2.onDropPropertyClick
             }),
@@ -297,2 +321,4 @@ name: name,
         }),
+        readonly: readonly,
+        disabled: disabled,
         required: required,
@@ -299,0 +325,0 @@ idSchema: idSchema,

lib/components/fields/SchemaField.js

@@ -41,2 +41,6 @@ "use strict";
 
+var _IconButton = require("../IconButton");
+
+var _IconButton2 = _interopRequireDefault(_IconButton);
+
 var _react = require("react");
@@ -167,3 +171,2 @@
 }
-
 function DefaultTemplate(props) {
@@ -180,3 +183,4 @@ var id = props.id,
       displayLabel = props.displayLabel,
-      onKeyChange = props.onKeyChange;
+      onKeyChange = props.onKeyChange,
+      onDropPropertyClick = props.onDropPropertyClick;
 
@@ -186,2 +190,3 @@ if (hidden) {
   }
+
   var additional = props.schema.hasOwnProperty(_utils.ADDITIONAL_PROPERTY_FLAG);
@@ -193,21 +198,46 @@ var keyLabel = label + " Key";
     { className: classNames },
-    additional && _react2.default.createElement(
+    _react2.default.createElement(
       "div",
-      { className: "form-group" },
-      _react2.default.createElement(Label, { label: keyLabel, required: required, id: id + "-key" }),
-      _react2.default.createElement(LabelInput, {
-        label: label,
-        required: required,
-        id: id + "-key",
-        onChange: onKeyChange
-      })
-    ),
-    displayLabel && _react2.default.createElement(Label, { label: label, required: required, id: id }),
-    displayLabel && description ? description : null,
-    children,
-    errors,
-    help
+      { className: additional ? "row" : "" },
+      additional && _react2.default.createElement(
+        "div",
+        { className: "col-xs-5 form-additional" },
+        _react2.default.createElement(
+          "div",
+          { className: "form-group" },
+          _react2.default.createElement(Label, { label: keyLabel, required: required, id: id + "-key" }),
+          _react2.default.createElement(LabelInput, {
+            label: label,
+            required: required,
+            id: id + "-key",
+            onChange: onKeyChange
+          })
+        )
+      ),
+      _react2.default.createElement(
+        "div",
+        {
+          className: additional ? "form-additional form-group col-xs-5" : "" },
+        displayLabel && _react2.default.createElement(Label, { label: label, required: required, id: id }),
+        displayLabel && description ? description : null,
+        children,
+        errors,
+        help
+      ),
+      _react2.default.createElement(
+        "div",
+        { className: "col-xs-2" },
+        additional && _react2.default.createElement(_IconButton2.default, {
+          type: "danger",
+          icon: "remove",
+          className: "array-item-remove btn-block",
+          tabIndex: "-1",
+          style: { border: "0" },
+          disabled: props.disabled || props.readonly,
+          onClick: onDropPropertyClick(props.label)
+        })
+      )
+    )
   );
 }
-
 if (process.env.NODE_ENV !== "production") {
@@ -248,2 +278,3 @@ DefaultTemplate.propTypes = {
       onKeyChange = props.onKeyChange,
+      onDropPropertyClick = props.onDropPropertyClick,
       required = props.required,
@@ -332,2 +363,3 @@ _props$registry = props.registry,
     onKeyChange: onKeyChange,
+    onDropPropertyClick: onDropPropertyClick,
     required: required,
@@ -334,0 +366,0 @@ disabled: disabled,

lib/components/fields/StringField.js

@@ -59,3 +59,2 @@ "use strict";
   var Widget = (0, _utils.getWidget)(schema, widget, widgets);
-
   return _react2.default.createElement(Widget, {
@@ -62,0 +61,0 @@ options: (0, _extends3.default)({}, options, { enumOptions: enumOptions }),

lib/validate.js

@@ -217,2 +217,4 @@ "use strict";
   var errors = transformAjvErrors(ajv.errors);
+  // Clear errors to prevent persistent errors, see #1104
+  ajv.errors = null;
 
@@ -219,0 +221,0 @@ if (typeof transformErrors === "function") {

package.json

 {
   "name": "react-jsonschema-form",
-  "version": "1.0.7",
+  "version": "1.1.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

Improved metrics

Total package byte prevSize

1279360

increased by0.54%

Lines of code

5259

increased by1.19%

No dependency changes