simple-forms-react - npm Package Compare versions

Comparing version 1.3.0 to 1.4.0

dist/simple-forms-react.cjs.js

@@ -174,3 +174,4 @@ 'use strict';
     _this.onBlur = function (e) {
-      e.persist();
+      // we don't know if this is an event object or not.
+      e.persist && e.persist();
       var _e$target = e.target,
@@ -184,4 +185,10 @@ id = _e$target.id,
 
+    _this.getValue = function (e, id, type) {
+      var valueAccessor = _this.valueAccessors[id];
+      if (valueAccessor) return valueAccessor(e);
+      return type === 'checkbox' ? e.target.checked : e.target.value;
+    };
+
     _this.onChange = function (e) {
-      e.persist();
+      e.persist && e.persist();
       var _e$target2 = e.target,
@@ -196,3 +203,5 @@ id = _e$target2.id,
       }
-      var value = type === 'checkbox' ? e.target.checked : e.target.value;
+
+      var value = _this.getValue(e, id, type);
+
       _this.setState(function (oldState) {
@@ -226,9 +235,15 @@ return update('touched')(update('values')(oldState, inputName, value), inputName, true);
           validators = _ref.validators,
-          rest = objectWithoutProperties(_ref, ['onChange', 'onBlur', 'validators']);
+          valueAccessor = _ref.valueAccessor,
+          rest = objectWithoutProperties(_ref, ['onChange', 'onBlur', 'validators', 'valueAccessor']);
 
-      if (validators) {
-        _this.validators = _this.validators || {};
-        _this.validators[rest.id] = validators;
-      }
+      // throw if no id
+      if (!rest.id) throw new Error('Elements should have an attribute id');
 
+      // set nice defaults
+      _this.validators = _this.validators || {};
+      _this.valueAccessors = _this.valueAccessors || {};
+
+      if (validators) _this.validators[rest.id] = validators;
+      if (valueAccessor) _this.valueAccessors[rest.id] = valueAccessor;
+
       return _extends({
@@ -235,0 +250,0 @@ onChange: compose(_this.onChange, onChange),

dist/simple-forms-react.esm.js

@@ -168,3 +168,4 @@ import React from 'react';
     _this.onBlur = function (e) {
-      e.persist();
+      // we don't know if this is an event object or not.
+      e.persist && e.persist();
       var _e$target = e.target,
@@ -178,4 +179,10 @@ id = _e$target.id,
 
+    _this.getValue = function (e, id, type) {
+      var valueAccessor = _this.valueAccessors[id];
+      if (valueAccessor) return valueAccessor(e);
+      return type === 'checkbox' ? e.target.checked : e.target.value;
+    };
+
     _this.onChange = function (e) {
-      e.persist();
+      e.persist && e.persist();
       var _e$target2 = e.target,
@@ -190,3 +197,5 @@ id = _e$target2.id,
       }
-      var value = type === 'checkbox' ? e.target.checked : e.target.value;
+
+      var value = _this.getValue(e, id, type);
+
       _this.setState(function (oldState) {
@@ -220,9 +229,15 @@ return update('touched')(update('values')(oldState, inputName, value), inputName, true);
           validators = _ref.validators,
-          rest = objectWithoutProperties(_ref, ['onChange', 'onBlur', 'validators']);
+          valueAccessor = _ref.valueAccessor,
+          rest = objectWithoutProperties(_ref, ['onChange', 'onBlur', 'validators', 'valueAccessor']);
 
-      if (validators) {
-        _this.validators = _this.validators || {};
-        _this.validators[rest.id] = validators;
-      }
+      // throw if no id
+      if (!rest.id) throw new Error('Elements should have an attribute id');
 
+      // set nice defaults
+      _this.validators = _this.validators || {};
+      _this.valueAccessors = _this.valueAccessors || {};
+
+      if (validators) _this.validators[rest.id] = validators;
+      if (valueAccessor) _this.valueAccessors[rest.id] = valueAccessor;
+
       return _extends({
@@ -229,0 +244,0 @@ onChange: compose(_this.onChange, onChange),

dist/simple-forms-react.js

@@ -174,3 +174,4 @@ (function (global, factory) {
     _this.onBlur = function (e) {
-      e.persist();
+      // we don't know if this is an event object or not.
+      e.persist && e.persist();
       var _e$target = e.target,
@@ -184,4 +185,10 @@ id = _e$target.id,
 
+    _this.getValue = function (e, id, type) {
+      var valueAccessor = _this.valueAccessors[id];
+      if (valueAccessor) return valueAccessor(e);
+      return type === 'checkbox' ? e.target.checked : e.target.value;
+    };
+
     _this.onChange = function (e) {
-      e.persist();
+      e.persist && e.persist();
       var _e$target2 = e.target,
@@ -196,3 +203,5 @@ id = _e$target2.id,
       }
-      var value = type === 'checkbox' ? e.target.checked : e.target.value;
+
+      var value = _this.getValue(e, id, type);
+
       _this.setState(function (oldState) {
@@ -226,9 +235,15 @@ return update('touched')(update('values')(oldState, inputName, value), inputName, true);
           validators = _ref.validators,
-          rest = objectWithoutProperties(_ref, ['onChange', 'onBlur', 'validators']);
+          valueAccessor = _ref.valueAccessor,
+          rest = objectWithoutProperties(_ref, ['onChange', 'onBlur', 'validators', 'valueAccessor']);
 
-      if (validators) {
-        _this.validators = _this.validators || {};
-        _this.validators[rest.id] = validators;
-      }
+      // throw if no id
+      if (!rest.id) throw new Error('Elements should have an attribute id');
 
+      // set nice defaults
+      _this.validators = _this.validators || {};
+      _this.valueAccessors = _this.valueAccessors || {};
+
+      if (validators) _this.validators[rest.id] = validators;
+      if (valueAccessor) _this.valueAccessors[rest.id] = valueAccessor;
+
       return _extends({
@@ -235,0 +250,0 @@ onChange: compose(_this.onChange, onChange),

index.js

@@ -41,3 +41,4 @@ import React from 'react';
   onBlur = e => {
-    e.persist();
+    // we don't know if this is an event object or not.
+    e.persist && e.persist();
     const { id, name } = e.target;
@@ -48,4 +49,10 @@ const inputName = name || id;
 
+  getValue = (e, id, type) => {
+    const valueAccessor = this.valueAccessors[id];
+    if (valueAccessor) return valueAccessor(e);
+    return type === 'checkbox' ? e.target.checked : e.target.value;
+  };
+
   onChange = e => {
-    e.persist();
+    e.persist && e.persist();
     const { id, name, type } = e.target;
@@ -59,3 +66,5 @@ const inputName = name || id;
     }
-    const value = type === 'checkbox' ? e.target.checked : e.target.value;
+
+    const value = this.getValue(e, id, type);
+
     this.setState(oldState =>
@@ -86,8 +95,19 @@ update('touched')(
 
-  fieldProps = ({ onChange, onBlur, validators, ...rest } = {}) => {
-    if (validators) {
-      this.validators = this.validators || {};
-      this.validators[rest.id] = validators;
-    }
+  fieldProps = ({
+    onChange,
+    onBlur,
+    validators,
+    valueAccessor,
+    ...rest
+  } = {}) => {
+    // throw if no id
+    if (!rest.id) throw new Error('Elements should have an attribute id');
 
+    // set nice defaults
+    this.validators = this.validators || {};
+    this.valueAccessors = this.valueAccessors || {};
+
+    if (validators) this.validators[rest.id] = validators;
+    if (valueAccessor) this.valueAccessors[rest.id] = valueAccessor;
+
     return {
@@ -94,0 +114,0 @@ onChange: compose(this.onChange, onChange),

package.json

 {
   "name": "simple-forms-react",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "An awesome Form for React!",
@@ -5,0 +5,0 @@ "main": "dist/simple-forms-react.js",

No alert changes

Improved metrics

Total package byte prevSize

86988

6.57%

Lines of code

1275

3.66%

No dependency changes