react-jsonschema-form - npm Package Compare versions

Comparing version 0.41.2 to 0.42.0

lib/components/fields/ArrayField.js

@@ -68,2 +68,95 @@ "use strict";
 
+// Used in the two templates
+function DefaultArrayItem(props) {
+  var btnStyle = { flex: 1, paddingLeft: 6, paddingRight: 6, fontWeight: "bold" };
+  return _react2.default.createElement(
+    "div",
+    { key: props.index, className: props.className },
+    _react2.default.createElement(
+      "div",
+      { className: props.hasToolbar ? "col-xs-9" : "col-xs-12" },
+      props.children
+    ),
+    props.hasToolbar ? _react2.default.createElement(
+      "div",
+      { className: "col-xs-3 array-item-toolbox" },
+      _react2.default.createElement(
+        "div",
+        { className: "btn-group", style: { display: "flex", justifyContent: "space-around" } },
+        props.hasMoveUp || props.hasMoveDown ? _react2.default.createElement(IconBtn, { icon: "arrow-up", className: "array-item-move-up",
+          tabIndex: "-1",
+          style: btnStyle,
+          disabled: props.disabled || props.readonly || !props.hasMoveUp,
+          onClick: props.onReorderClick(props.index, props.index - 1) }) : null,
+        props.hasMoveUp || props.hasMoveDown ? _react2.default.createElement(IconBtn, { icon: "arrow-down", className: "array-item-move-down",
+          tabIndex: "-1",
+          style: btnStyle,
+          disabled: props.disabled || props.readonly || !props.hasMoveDown,
+          onClick: props.onReorderClick(props.index, props.index + 1) }) : null,
+        props.hasRemove ? _react2.default.createElement(IconBtn, { type: "danger", icon: "remove", className: "array-item-remove",
+          tabIndex: "-1",
+          style: btnStyle,
+          disabled: props.disabled || props.readonly,
+          onClick: props.onDropIndexClick(props.index) }) : null
+      )
+    ) : null
+  );
+}
+
+function DefaultFixedArrayFieldTemplate(props) {
+  return _react2.default.createElement(
+    "fieldset",
+    { className: props.className },
+    _react2.default.createElement(ArrayFieldTitle, {
+      key: "array-field-title-" + props.idSchema.$id,
+      TitleField: props.TitleField,
+      idSchema: props.idSchema,
+      title: props.title,
+      required: props.required }),
+    props.schema.description ? _react2.default.createElement(
+      "div",
+      { className: "field-description", key: "field-description-" + props.idSchema.$id },
+      props.schema.description
+    ) : null,
+    _react2.default.createElement(
+      "div",
+      { className: "row array-item-list",
+        key: "array-item-list-" + props.idSchema.$id },
+      props.items && props.items.map(DefaultArrayItem)
+    ),
+    props.canAdd ? _react2.default.createElement(AddButton, {
+      onClick: props.onAddClick,
+      disabled: props.disabled || props.readonly }) : null
+  );
+}
+
+function DefaultNormalArrayFieldTemplate(props) {
+  return _react2.default.createElement(
+    "fieldset",
+    { className: props.className },
+    _react2.default.createElement(ArrayFieldTitle, {
+      key: "array-field-title-" + props.idSchema.$id,
+      TitleField: props.TitleField,
+      idSchema: props.idSchema,
+      title: props.title,
+      required: props.required }),
+    props.schema.description ? _react2.default.createElement(ArrayFieldDescription, {
+      key: "array-field-description-" + props.idSchema.$id,
+      DescriptionField: props.DescriptionField,
+      idSchema: props.idSchema,
+      description: props.schema.description }) : null,
+    _react2.default.createElement(
+      "div",
+      { className: "row array-item-list",
+        key: "array-item-list-" + props.idSchema.$id },
+      props.items && props.items.map(function (p) {
+        return DefaultArrayItem(p);
+      })
+    ),
+    props.canAdd ? _react2.default.createElement(AddButton, {
+      onClick: props.onAddClick,
+      disabled: props.disabled || props.readonly }) : null
+  );
+}
+
 var ArrayField = function (_Component) {
@@ -96,3 +189,5 @@ _inherits(ArrayField, _Component);
       return function (event) {
-        event.preventDefault();
+        if (event) {
+          event.preventDefault();
+        }
         _this.asyncSetState({
@@ -108,4 +203,6 @@ items: _this.state.items.filter(function (_, i) {
       return function (event) {
-        event.preventDefault();
-        event.target.blur();
+        if (event) {
+          event.preventDefault();
+          event.target.blur();
+        }
         var items = _this.state.items;
@@ -213,9 +310,12 @@
           readonly = _props2.readonly,
-          autofocus = _props2.autofocus;
+          autofocus = _props2.autofocus,
+          registry = _props2.registry,
+          onBlur = _props2.onBlur;
 
       var title = schema.title === undefined ? name : schema.title;
-      var items = this.state.items;
-      var _props$registry = this.props.registry,
-          definitions = _props$registry.definitions,
-          fields = _props$registry.fields;
+      var _state$items = this.state.items,
+          items = _state$items === undefined ? [] : _state$items;
+      var ArrayFieldTemplate = registry.ArrayFieldTemplate,
+          definitions = registry.definitions,
+          fields = registry.fields;
       var TitleField = fields.TitleField,
@@ -230,39 +330,36 @@ DescriptionField = fields.DescriptionField;
 
-      return _react2.default.createElement(
-        "fieldset",
-        {
-          className: "field field-array field-array-of-" + itemsSchema.type },
-        _react2.default.createElement(ArrayFieldTitle, {
-          TitleField: TitleField,
-          idSchema: idSchema,
-          title: title,
-          required: required }),
-        schema.description ? _react2.default.createElement(ArrayFieldDescription, {
-          DescriptionField: DescriptionField,
-          idSchema: idSchema,
-          description: schema.description }) : null,
-        _react2.default.createElement(
-          "div",
-          { className: "row array-item-list" },
-          items.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({
-              index: index,
-              canMoveUp: index > 0,
-              canMoveDown: index < items.length - 1,
-              itemSchema: itemsSchema,
-              itemIdSchema: itemIdSchema,
-              itemErrorSchema: itemErrorSchema,
-              itemData: items[index],
-              itemUiSchema: uiSchema.items,
-              autofocus: autofocus && index === 0
-            });
-          })
-        ),
-        addable ? _react2.default.createElement(AddButton, {
-          onClick: this.onAddClick,
-          disabled: disabled || readonly }) : null
-      );
+      var arrayProps = {
+        canAdd: addable,
+        items: items.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({
+            index: index,
+            canMoveUp: index > 0,
+            canMoveDown: index < items.length - 1,
+            itemSchema: itemsSchema,
+            itemIdSchema: itemIdSchema,
+            itemErrorSchema: itemErrorSchema,
+            itemData: items[index],
+            itemUiSchema: uiSchema.items,
+            autofocus: autofocus && index === 0,
+            onBlur: onBlur
+          });
+        }),
+        className: "field field-array field-array-of-" + itemsSchema.type,
+        DescriptionField: DescriptionField,
+        disabled: disabled,
+        idSchema: idSchema,
+        onAddClick: this.onAddClick,
+        readonly: readonly,
+        required: required,
+        schema: schema,
+        title: title,
+        TitleField: TitleField
+      };
+
+      // Check if a custom render function was passed in
+      var renderFunction = ArrayFieldTemplate || DefaultNormalArrayFieldTemplate;
+      return renderFunction(arrayProps);
     }
@@ -278,7 +375,8 @@ }, {
           readonly = _props3.readonly,
-          autofocus = _props3.autofocus;
+          autofocus = _props3.autofocus,
+          onBlur = _props3.onBlur;
       var items = this.state.items;
-      var _props$registry2 = this.props.registry,
-          widgets = _props$registry2.widgets,
-          definitions = _props$registry2.definitions;
+      var _props$registry = this.props.registry,
+          widgets = _props$registry.widgets,
+          definitions = _props$registry.definitions;
 
@@ -298,2 +396,3 @@ var itemsSchema = (0, _utils.retrieveSchema)(schema.items, definitions);
         onChange: this.onSelectChange,
+        onBlur: onBlur,
         options: options,
@@ -316,3 +415,4 @@ schema: schema,
           readonly = _props4.readonly,
-          autofocus = _props4.autofocus;
+          autofocus = _props4.autofocus,
+          onBlur = _props4.onBlur;
 
@@ -334,2 +434,3 @@ var title = schema.title || name;
         onChange: this.onSelectChange,
+        onBlur: onBlur,
         schema: schema,
@@ -356,9 +457,11 @@ title: title,
           readonly = _props5.readonly,
-          autofocus = _props5.autofocus;
+          autofocus = _props5.autofocus,
+          registry = _props5.registry,
+          onBlur = _props5.onBlur;
 
       var title = schema.title || name;
       var items = this.state.items;
-      var _props$registry3 = this.props.registry,
-          definitions = _props$registry3.definitions,
-          fields = _props$registry3.fields;
+      var ArrayFieldTemplate = registry.ArrayFieldTemplate,
+          definitions = registry.definitions,
+          fields = registry.fields;
       var TitleField = fields.TitleField;
@@ -383,44 +486,41 @@
 
-      return _react2.default.createElement(
-        "fieldset",
-        { className: "field field-array field-array-fixed-items" },
-        _react2.default.createElement(ArrayFieldTitle, {
-          TitleField: TitleField,
-          idSchema: idSchema,
-          title: title,
-          required: required }),
-        schema.description ? _react2.default.createElement(
-          "div",
-          { className: "field-description" },
-          schema.description
-        ) : null,
-        _react2.default.createElement(
-          "div",
-          { className: "row array-item-list" },
-          items.map(function (item, index) {
-            var additional = index >= itemSchemas.length;
-            var itemSchema = additional ? additionalSchema : itemSchemas[index];
-            var itemIdPrefix = idSchema.$id + "_" + index;
-            var itemIdSchema = (0, _utils.toIdSchema)(itemSchema, itemIdPrefix, definitions);
-            var itemUiSchema = additional ? uiSchema.additionalItems || {} : Array.isArray(uiSchema.items) ? uiSchema.items[index] : uiSchema.items || {};
-            var itemErrorSchema = errorSchema ? errorSchema[index] : undefined;
+      // These are the props passed into the render function
+      var arrayProps = {
+        canAdd: canAdd,
+        className: "field field-array field-array-fixed-items",
+        disabled: disabled,
+        idSchema: idSchema,
+        items: items.map(function (item, index) {
+          var additional = index >= itemSchemas.length;
+          var itemSchema = additional ? additionalSchema : itemSchemas[index];
+          var itemIdPrefix = idSchema.$id + "_" + index;
+          var itemIdSchema = (0, _utils.toIdSchema)(itemSchema, itemIdPrefix, definitions);
+          var itemUiSchema = additional ? uiSchema.additionalItems || {} : Array.isArray(uiSchema.items) ? uiSchema.items[index] : uiSchema.items || {};
+          var itemErrorSchema = errorSchema ? errorSchema[index] : undefined;
 
-            return _this4.renderArrayFieldItem({
-              index: index,
-              canRemove: additional,
-              canMoveUp: index >= itemSchemas.length + 1,
-              canMoveDown: additional && index < items.length - 1,
-              itemSchema: itemSchema,
-              itemData: item,
-              itemUiSchema: itemUiSchema,
-              itemIdSchema: itemIdSchema,
-              itemErrorSchema: itemErrorSchema,
-              autofocus: autofocus && index === 0
-            });
-          })
-        ),
-        canAdd ? _react2.default.createElement(AddButton, {
-          onClick: this.onAddClick,
-          disabled: disabled || readonly }) : null
-      );
+          return _this4.renderArrayFieldItem({
+            index: index,
+            canRemove: additional,
+            canMoveUp: index >= itemSchemas.length + 1,
+            canMoveDown: additional && index < items.length - 1,
+            itemSchema: itemSchema,
+            itemData: item,
+            itemUiSchema: itemUiSchema,
+            itemIdSchema: itemIdSchema,
+            itemErrorSchema: itemErrorSchema,
+            autofocus: autofocus && index === 0,
+            onBlur: onBlur
+          });
+        }),
+        onAddClick: this.onAddClick,
+        readonly: readonly,
+        required: required,
+        schema: schema,
+        title: title,
+        TitleField: TitleField
+      };
+
+      // Check if a custom template template was passed in
+      var renderFunction = ArrayFieldTemplate || DefaultFixedArrayFieldTemplate;
+      return renderFunction(arrayProps);
     }
@@ -442,3 +542,4 @@ }, {
           itemErrorSchema = _ref3.itemErrorSchema,
-          autofocus = _ref3.autofocus;
+          autofocus = _ref3.autofocus,
+          onBlur = _ref3.onBlur;
       var SchemaField = this.props.registry.fields.SchemaField;
@@ -465,47 +566,28 @@ var _props6 = this.props,
       });
-      var btnStyle = { flex: 1, paddingLeft: 6, paddingRight: 6, fontWeight: "bold" };
 
-      return _react2.default.createElement(
-        "div",
-        { key: index, className: "array-item" },
-        _react2.default.createElement(
-          "div",
-          { className: has.toolbar ? "col-xs-9" : "col-xs-12" },
-          _react2.default.createElement(SchemaField, {
-            schema: itemSchema,
-            uiSchema: itemUiSchema,
-            formData: itemData,
-            errorSchema: itemErrorSchema,
-            idSchema: itemIdSchema,
-            required: this.isItemRequired(itemSchema),
-            onChange: this.onChangeForIndex(index),
-            registry: this.props.registry,
-            disabled: this.props.disabled,
-            readonly: this.props.readonly,
-            autofocus: autofocus })
-        ),
-        has.toolbar ? _react2.default.createElement(
-          "div",
-          { className: "col-xs-3 array-item-toolbox" },
-          _react2.default.createElement(
-            "div",
-            { className: "btn-group", style: { display: "flex", justifyContent: "space-around" } },
-            has.moveUp || has.moveDown ? _react2.default.createElement(IconBtn, { icon: "arrow-up", className: "array-item-move-up",
-              tabIndex: "-1",
-              style: btnStyle,
-              disabled: disabled || readonly || !has.moveUp,
-              onClick: this.onReorderClick(index, index - 1) }) : null,
-            has.moveUp || has.moveDown ? _react2.default.createElement(IconBtn, { icon: "arrow-down", className: "array-item-move-down",
-              tabIndex: "-1",
-              style: btnStyle,
-              disabled: disabled || readonly || !has.moveDown,
-              onClick: this.onReorderClick(index, index + 1) }) : null,
-            has.remove ? _react2.default.createElement(IconBtn, { type: "danger", icon: "remove", className: "array-item-remove",
-              tabIndex: "-1",
-              style: btnStyle,
-              disabled: disabled || readonly,
-              onClick: this.onDropIndexClick(index) }) : null
-          )
-        ) : null
-      );
+      return {
+        children: _react2.default.createElement(SchemaField, {
+          schema: itemSchema,
+          uiSchema: itemUiSchema,
+          formData: itemData,
+          errorSchema: itemErrorSchema,
+          idSchema: itemIdSchema,
+          required: this.isItemRequired(itemSchema),
+          onChange: this.onChangeForIndex(index),
+          onBlur: onBlur,
+          registry: this.props.registry,
+          disabled: this.props.disabled,
+          readonly: this.props.readonly,
+          autofocus: autofocus }),
+        className: "array-item",
+        disabled: disabled,
+        hasToolbar: has.toolbar,
+        hasMoveUp: has.moveUp,
+        hasMoveDown: has.moveDown,
+        hasRemove: has.remove,
+        index: index,
+        onDropIndexClick: this.onDropIndexClick,
+        onReorderClick: this.onReorderClick,
+        readonly: readonly
+      };
     }
@@ -565,2 +647,3 @@ }, {
     onChange: _react.PropTypes.func.isRequired,
+    onBlur: _react.PropTypes.func,
     formData: _react.PropTypes.array,
@@ -567,0 +650,0 @@ required: _react.PropTypes.bool,

lib/components/fields/ObjectField.js

@@ -115,3 +115,4 @@ "use strict";
           disabled = _props.disabled,
-          readonly = _props.readonly;
+          readonly = _props.readonly,
+          onBlur = _props.onBlur;
       var _props$registry = this.props.registry,
@@ -177,2 +178,3 @@ definitions = _props$registry.definitions,
             onChange: _this3.onPropertyChange(name),
+            onBlur: onBlur,
             registry: _this3.props.registry,
@@ -179,0 +181,0 @@ disabled: disabled,

lib/components/fields/SchemaField.js

@@ -273,2 +273,3 @@ "use strict";
       definitions: _react.PropTypes.object.isRequired,
+      ArrayFieldTemplate: _react.PropTypes.func,
       FieldTemplate: _react.PropTypes.func,
@@ -275,0 +276,0 @@ formContext: _react.PropTypes.object.isRequired

lib/components/fields/StringField.js

@@ -30,3 +30,4 @@ "use strict";
       registry = props.registry,
-      onChange = props.onChange;
+      onChange = props.onChange,
+      onBlur = props.onBlur;
   var title = schema.title,
@@ -56,2 +57,3 @@ format = schema.format;
     onChange: onChange,
+    onBlur: onBlur,
     required: required,
@@ -72,2 +74,3 @@ disabled: disabled,
     onChange: _react.PropTypes.func.isRequired,
+    onBlur: _react.PropTypes.func.isRequired,
     formData: _react.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.number]),
@@ -74,0 +77,0 @@ registry: _react.PropTypes.shape({

lib/components/Form.js

@@ -62,2 +62,10 @@ "use strict";
 
+    _this.onBlur = function () {
+      if (_this.props.onBlur) {
+        var _this$props;
+
+        (_this$props = _this.props).onBlur.apply(_this$props, arguments);
+      }
+    };
+
     _this.onSubmit = function (event) {
@@ -145,5 +153,7 @@ event.preventDefault();
     value: function validate(formData, schema) {
-      var validate = this.props.validate;
+      var _props = this.props,
+          validate = _props.validate,
+          transformErrors = _props.transformErrors;
 
-      return (0, _validate2.default)(formData, schema || this.props.schema, validate);
+      return (0, _validate2.default)(formData, schema || this.props.schema, validate, transformErrors);
     }
@@ -176,2 +186,3 @@ }, {
         widgets: _extends({}, widgets, this.props.widgets),
+        ArrayFieldTemplate: this.props.ArrayFieldTemplate,
         FieldTemplate: this.props.FieldTemplate,
@@ -185,14 +196,15 @@ definitions: this.props.schema.definitions || {},
     value: function render() {
-      var _props = this.props,
-          children = _props.children,
-          safeRenderCompletion = _props.safeRenderCompletion,
-          id = _props.id,
-          className = _props.className,
-          name = _props.name,
-          method = _props.method,
-          target = _props.target,
-          action = _props.action,
-          autocomplete = _props.autocomplete,
-          enctype = _props.enctype,
-          acceptcharset = _props.acceptcharset;
+      var _props2 = this.props,
+          children = _props2.children,
+          safeRenderCompletion = _props2.safeRenderCompletion,
+          id = _props2.id,
+          className = _props2.className,
+          name = _props2.name,
+          method = _props2.method,
+          target = _props2.target,
+          action = _props2.action,
+          autocomplete = _props2.autocomplete,
+          enctype = _props2.enctype,
+          acceptcharset = _props2.acceptcharset,
+          noHtml5Validate = _props2.noHtml5Validate;
       var _state2 = this.state,
@@ -219,2 +231,3 @@ schema = _state2.schema,
           acceptCharset: acceptcharset,
+          noValidate: noHtml5Validate,
           onSubmit: this.onSubmit },
@@ -229,2 +242,3 @@ this.renderErrors(),
           onChange: this.onChange,
+          onBlur: this.onBlur,
           registry: registry,
@@ -252,3 +266,4 @@ safeRenderCompletion: safeRenderCompletion }),
   liveValidate: false,
-  safeRenderCompletion: false
+  safeRenderCompletion: false,
+  noHtml5Validate: false
 };
@@ -265,2 +280,3 @@ exports.default = Form;
     fields: _react.PropTypes.objectOf(_react.PropTypes.func),
+    ArrayFieldTemplate: _react.PropTypes.func,
     FieldTemplate: _react.PropTypes.func,
@@ -281,3 +297,6 @@ onChange: _react.PropTypes.func,
     noValidate: _react.PropTypes.bool,
+    noHtml5Validate: _react.PropTypes.bool,
     liveValidate: _react.PropTypes.bool,
+    validate: _react.PropTypes.func,
+    transformErrors: _react.PropTypes.func,
     safeRenderCompletion: _react.PropTypes.bool,
@@ -284,0 +303,0 @@ formContext: _react.PropTypes.object

lib/components/widgets/AltDateWidget.js

@@ -27,4 +27,4 @@ "use strict";
 
-function rangeOptions(type, start, stop) {
-  var options = [{ value: -1, label: type }];
+function rangeOptions(start, stop) {
+  var options = [];
   for (var i = start; i <= stop; i++) {
@@ -51,3 +51,4 @@ options.push({ value: i, label: (0, _utils.pad)(i, 2) });
       autofocus = props.autofocus,
-      registry = props.registry;
+      registry = props.registry,
+      onBlur = props.onBlur;
 
@@ -61,3 +62,4 @@ var id = rootId + "_" + type;
     className: "form-control",
-    options: { enumOptions: rangeOptions(type, range[0], range[1]) },
+    options: { enumOptions: rangeOptions(range[0], range[1]) },
+    placeholder: type,
     value: value,
@@ -69,3 +71,4 @@ disabled: disabled,
       return select(type, value);
-    } });
+    },
+    onBlur: onBlur });
 }
@@ -82,3 +85,3 @@
     _this.onChange = function (property, value) {
-      _this.setState(_defineProperty({}, property, value), function () {
+      _this.setState(_defineProperty({}, property, typeof value === "undefined" ? -1 : value), function () {
         // Only propagate to parent state if we have a complete date{time}
@@ -148,3 +151,4 @@ if (readyForChange(_this.state)) {
           autofocus = _props.autofocus,
-          registry = _props.registry;
+          registry = _props.registry,
+          onBlur = _props.onBlur;
 
@@ -165,2 +169,3 @@ return _react2.default.createElement(
               registry: registry,
+              onBlur: onBlur,
               autofocus: autofocus && i === 0 }))
@@ -232,2 +237,3 @@ );
     onChange: _react.PropTypes.func,
+    onBlur: _react.PropTypes.func,
     time: _react.PropTypes.bool
@@ -234,0 +240,0 @@ };

lib/components/widgets/BaseInput.js

@@ -23,3 +23,3 @@ "use strict";
       autofocus = props.autofocus,
-      _onChange = props.onChange,
+      onBlur = props.onBlur,
       options = props.options,
@@ -29,4 +29,9 @@ schema = props.schema,
       registry = props.registry,
-      inputProps = _objectWithoutProperties(props, ["value", "readonly", "autofocus", "onChange", "options", "schema", "formContext", "registry"]);
+      inputProps = _objectWithoutProperties(props, ["value", "readonly", "autofocus", "onBlur", "options", "schema", "formContext", "registry"]);
 
+  var _onChange = function _onChange(_ref) {
+    var value = _ref.target.value;
+
+    return props.onChange(value === "" ? undefined : value);
+  };
   return _react2.default.createElement("input", _extends({}, inputProps, {
@@ -37,4 +42,5 @@ className: "form-control",
     value: typeof value === "undefined" ? "" : value,
-    onChange: function onChange(event) {
-      return _onChange(event.target.value);
+    onChange: _onChange,
+    onBlur: onBlur && function (event) {
+      return onBlur(inputProps.id, event.target.value);
     } }));
@@ -60,3 +66,4 @@ }
     autofocus: _react.PropTypes.bool,
-    onChange: _react.PropTypes.func
+    onChange: _react.PropTypes.func,
+    onBlur: _react.PropTypes.func
   };
@@ -63,0 +70,0 @@ }

lib/components/widgets/CheckboxesWidget.js

@@ -64,3 +64,7 @@ "use strict";
           } }),
-        option.label
+        _react2.default.createElement(
+          "span",
+          null,
+          option.label
+        )
       );
@@ -67,0 +71,0 @@ return inline ? _react2.default.createElement(

lib/components/widgets/CheckboxWidget.js

@@ -39,3 +39,3 @@ "use strict";
       _react2.default.createElement(
-        "strong",
+        "span",
         null,
@@ -42,0 +42,0 @@ label

lib/components/widgets/RadioWidget.js

@@ -47,3 +47,7 @@ "use strict";
           } }),
-        option.label
+        _react2.default.createElement(
+          "span",
+          null,
+          option.label
+        )
       );
@@ -50,0 +54,0 @@

lib/components/widgets/SelectWidget.js

@@ -23,3 +23,5 @@ "use strict";
 
-  if (type === "array" && items && ["number", "integer"].includes(items.type)) {
+  if (value === "") {
+    return undefined;
+  } else if (type === "array" && items && ["number", "integer"].includes(items.type)) {
     return value.map(_utils.asNumber);
@@ -34,2 +36,14 @@ } else if (type === "boolean") {
 
+function getValue(event, multiple) {
+  if (multiple) {
+    return [].slice.call(event.target.options).filter(function (o) {
+      return o.selected;
+    }).map(function (o) {
+      return o.value;
+    });
+  } else {
+    return event.target.value;
+  }
+}
+
 function SelectWidget(_ref2) {
@@ -45,5 +59,8 @@ var schema = _ref2.schema,
       autofocus = _ref2.autofocus,
-      _onChange = _ref2.onChange;
+      _onChange = _ref2.onChange,
+      onBlur = _ref2.onBlur,
+      placeholder = _ref2.placeholder;
   var enumOptions = options.enumOptions;
 
+  var emptyValue = multiple ? [] : "";
   return _react2.default.createElement(
@@ -55,3 +72,3 @@ "select",
       className: "form-control",
-      value: value,
+      value: typeof value === "undefined" ? emptyValue : value,
       required: required,
@@ -61,15 +78,15 @@ disabled: disabled,
       autoFocus: autofocus,
+      onBlur: onBlur && function (event) {
+        var newValue = getValue(event, multiple);
+        onBlur(id, processValue(schema, newValue));
+      },
       onChange: function onChange(event) {
-        var newValue = void 0;
-        if (multiple) {
-          newValue = [].filter.call(event.target.options, function (o) {
-            return o.selected;
-          }).map(function (o) {
-            return o.value;
-          });
-        } else {
-          newValue = event.target.value;
-        }
+        var newValue = getValue(event, multiple);
         _onChange(processValue(schema, newValue));
       } },
+    !multiple && !schema.default && _react2.default.createElement(
+      "option",
+      { value: "" },
+      placeholder
+    ),
     enumOptions.map(function (_ref3, i) {
@@ -103,3 +120,4 @@ var value = _ref3.value,
     autofocus: _react.PropTypes.bool,
-    onChange: _react.PropTypes.func
+    onChange: _react.PropTypes.func,
+    onBlur: _react.PropTypes.func
   };
@@ -106,0 +124,0 @@ }

lib/components/widgets/TextareaWidget.js

@@ -22,4 +22,10 @@ "use strict";
       autofocus = _ref.autofocus,
-      _onChange = _ref.onChange;
+      onChange = _ref.onChange,
+      onBlur = _ref.onBlur;
 
+  var _onChange = function _onChange(_ref2) {
+    var value = _ref2.target.value;
+
+    return onChange(value === "" ? undefined : value);
+  };
   return _react2.default.createElement("textarea", {
@@ -34,5 +40,6 @@ id: id,
     autoFocus: autofocus,
-    onChange: function onChange(event) {
-      return _onChange(event.target.value);
-    } });
+    onBlur: onBlur && function (event) {
+      return onBlur(id, event.target.value);
+    },
+    onChange: _onChange });
 }
@@ -52,3 +59,4 @@
     autofocus: _react.PropTypes.bool,
-    onChange: _react.PropTypes.func
+    onChange: _react.PropTypes.func,
+    onBlur: _react.PropTypes.func
   };
@@ -55,0 +63,0 @@ }

lib/utils.js

@@ -175,5 +175,2 @@ "use strict";
     defaults = schema.default;
-  } else if ("enum" in schema && Array.isArray(schema.enum)) {
-    // For enum with no defined default, select the first entry.
-    defaults = schema.enum[0];
   } else if ("$ref" in schema) {
@@ -483,3 +480,3 @@ // Use referenced schema defaults for this node.
   }
-  if ("items" in schema) {
+  if ("items" in schema && !schema.items.$ref) {
     return toIdSchema(schema.items, id, definitions);
@@ -486,0 +483,0 @@ }

lib/validate.js

@@ -143,6 +143,9 @@ "use strict";
  */
-function validateFormData(formData, schema, customValidate) {
+function validateFormData(formData, schema, customValidate, transformErrors) {
   var _jsonValidate = (0, _jsonschema.validate)(formData, schema),
       errors = _jsonValidate.errors;
 
+  if (typeof transformErrors === "function") {
+    errors = transformErrors(errors);
+  }
   var errorSchema = toErrorSchema(errors);
@@ -149,0 +152,0 @@

package.json

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

898854

increased by2.11%

Lines of code

3761

increased by4.24%

No dependency changes