calidation - npm Package Compare versions

Comparing version 1.14.0 to 1.15.0

dist/Form.js

@@ -30,14 +30,2 @@ (function (global, factory) {
 
-    function _objectWithoutProperties(obj, keys) {
-        var target = {};
-
-        for (var i in obj) {
-            if (keys.indexOf(i) >= 0) continue;
-            if (!Object.prototype.hasOwnProperty.call(obj, i)) continue;
-            target[i] = obj[i];
-        }
-
-        return target;
-    }
-
     var _slicedToArray = function () {
@@ -81,2 +69,17 @@ function sliceIterator(arr, i) {
 
+    function _defineProperty(obj, key, value) {
+        if (key in obj) {
+            Object.defineProperty(obj, key, {
+                value: value,
+                enumerable: true,
+                configurable: true,
+                writable: true
+            });
+        } else {
+            obj[key] = value;
+        }
+
+        return obj;
+    }
+
     var _extends = Object.assign || function (target) {
@@ -96,15 +99,12 @@ for (var i = 1; i < arguments.length; i++) {
 
-    function _defineProperty(obj, key, value) {
-        if (key in obj) {
-            Object.defineProperty(obj, key, {
-                value: value,
-                enumerable: true,
-                configurable: true,
-                writable: true
-            });
-        } else {
-            obj[key] = value;
+    function _objectWithoutProperties(obj, keys) {
+        var target = {};
+
+        for (var i in obj) {
+            if (keys.indexOf(i) >= 0) continue;
+            if (!Object.prototype.hasOwnProperty.call(obj, i)) continue;
+            target[i] = obj[i];
         }
 
-        return obj;
+        return target;
     }
@@ -162,4 +162,5 @@
         onChange: _propTypes.func,
+        onReset: _propTypes.func,
         onSubmit: _propTypes.func,
-        onReset: _propTypes.func
+        onUpdate: _propTypes.func
     };
@@ -181,178 +182,3 @@
 
-            return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Form.__proto__ || Object.getPrototypeOf(Form)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
-                config: {},
-                dirty: {},
-                errors: {},
-                fields: {},
-                submitted: false
-            }, _this.initialValues = {}, _this.transforms = {}, _this.onChange = function (e) {
-                _this.props.onChange(e);
-
-                var _e$target = e.target,
-                    checked = _e$target.checked,
-                    name = _e$target.name,
-                    type = _e$target.type,
-                    value = _e$target.value;
-
-
-                if (!_this.state.config[name]) {
-                    return;
-                }
-
-                var val = type === 'checkbox' ? checked : value;
-
-                if (typeof _this.transforms[name] === 'function') {
-                    val = _this.transforms[name](val);
-                }
-
-                _this.setField(_defineProperty({}, name, val));
-            }, _this.onReset = function (e) {
-                if (e) {
-                    e.preventDefault();
-                }
-
-                var _this$state = _this.state,
-                    dirty = _this$state.dirty,
-                    errors = _this$state.errors,
-                    fields = _this$state.fields;
-
-
-                _this.setState({
-                    dirty: Object.keys(dirty).reduce(function (allDirty, field) {
-                        return _extends({}, allDirty, _defineProperty({}, field, false));
-                    }, {}),
-                    errors: Object.keys(errors).reduce(function (allErrors, field) {
-                        return _extends({}, allErrors, _defineProperty({}, field, null));
-                    }, {}),
-                    fields: Object.keys(fields).reduce(function (allFields, field) {
-                        return _extends({}, allFields, _defineProperty({}, field, _this.initialValues[field]));
-                    }, {}),
-                    submitted: false
-                });
-
-                _this.props.onReset();
-            }, _this.onSubmit = function (e) {
-                if (e) {
-                    e.preventDefault();
-                }
-
-                var _this$state2 = _this.state,
-                    dirty = _this$state2.dirty,
-                    errors = _this$state2.errors,
-                    fields = _this$state2.fields;
-
-
-                _this.setState({ submitted: true });
-
-                _this.props.onSubmit({
-                    dirty: dirty,
-                    errors: errors,
-                    fields: fields,
-                    isValid: Object.values(errors).every(function (error) {
-                        return error === null;
-                    }),
-                    resetAll: _this.onReset,
-                    setError: _this.setError
-                });
-            }, _this.setField = function (diff) {
-                var _this$state3 = _this.state,
-                    config = _this$state3.config,
-                    dirty = _this$state3.dirty,
-                    fields = _this$state3.fields;
-
-                var allFields = _extends({}, fields, diff);
-                var areDirty = _extends({}, dirty, Object.keys(diff).reduce(function (allDirty, field) {
-                    return _extends({}, allDirty, _defineProperty({}, field, dirty[field] || diff[field] !== _this.initialValues[field]));
-                }, {}));
-
-                _this.setState({
-                    dirty: areDirty,
-                    errors: _this.validate(config, allFields, areDirty),
-                    fields: allFields,
-                    submitted: false
-                });
-            }, _this.setError = function (diff) {
-                _this.setState({
-                    errors: _extends({}, _this.state.errors, diff),
-                    submitted: false
-                });
-            }, _this.validate = function (allConfig, allFields, areDirty) {
-                return Object.entries(allConfig).reduce(function (allErrors, _ref2) {
-                    var _ref3 = _slicedToArray(_ref2, 2),
-                        fieldName = _ref3[0],
-                        fieldValidators = _ref3[1];
-
-                    return _extends({}, allErrors, _defineProperty({}, fieldName, _this.validateField(fieldName, fieldValidators, allFields, allErrors, areDirty)));
-                }, {});
-            }, _this.validateField = function (fieldName, fieldValidators, allFields, allErrors, areDirty) {
-                return Object.entries(fieldValidators).reduce(function (error, _ref4) {
-                    var _ref5 = _slicedToArray(_ref4, 2),
-                        validatorName = _ref5[0],
-                        validatorConfig = _ref5[1];
-
-                    if (error) {
-                        return error;
-                    }
-
-                    var validator = _this.props.validators[validatorName];
-
-                    (0, _invariant2.default)(validator, "You specified a validator that doesn't exist. You " + ('specified ' + validatorName + '. Available validators: \n\n') + Object.keys(_this.props.validators).join(',\n'));
-
-                    var context = {
-                        fields: allFields,
-                        errors: _extends({}, _this.state.errors, allErrors),
-                        isDirty: areDirty[fieldName]
-                    };
-
-                    if (typeof validatorConfig === 'function') {
-                        validatorConfig = validatorConfig(context);
-                    }
-
-                    if (typeof validatorConfig === 'string') {
-                        validatorConfig = { message: validatorConfig };
-                    }
-
-                    if (typeof validatorConfig.validateIf === 'function' && !validatorConfig.validateIf(context) || typeof validatorConfig.validateIf === 'boolean' && !validatorConfig.validateIf) {
-                        return null;
-                    }
-
-                    return validator(validatorConfig, context)(allFields[fieldName]);
-                }, null);
-            }, _this.registerSubComponent = function (subComponentConfig, transforms, initialValues) {
-                _this.initialValues = _extends({}, _this.initialValues, initialValues);
-                _this.transforms = _extends({}, _this.transforms, transforms);
-
-                _this.setState(function (prevState) {
-                    var config = _extends({}, prevState.config, subComponentConfig);
-                    var dirty = _extends({}, prevState.dirty, Object.keys(subComponentConfig).reduce(function (allDirty, field) {
-                        return _extends({}, allDirty, _defineProperty({}, field, false));
-                    }, {}));
-                    var fields = _extends({}, prevState.fields, initialValues);
-
-                    return {
-                        config: config,
-                        dirty: dirty,
-                        errors: _this.validate(config, fields, dirty),
-                        fields: fields
-                    };
-                });
-            }, _this.unregisterSubComponent = function (subComponentConfig) {
-                var keys = Object.keys(subComponentConfig);
-
-                _this.initialValues = (0, _utilities.removeFrom)(_this.initialValues)(keys);
-                _this.transforms = (0, _utilities.removeFrom)(_this.transforms)(keys);
-
-                _this.setState(function (prevState) {
-                    var config = (0, _utilities.removeFrom)(prevState.config)(keys);
-                    var dirty = (0, _utilities.removeFrom)(prevState.dirty)(keys);
-                    var fields = (0, _utilities.removeFrom)(prevState.fields)(keys);
-
-                    return {
-                        config: config,
-                        dirty: dirty,
-                        errors: _this.validate(config, fields, dirty),
-                        fields: fields
-                    };
-                });
-            }, _temp), _possibleConstructorReturn(_this, _ret);
+            return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Form.__proto__ || Object.getPrototypeOf(Form)).call.apply(_ref, [this].concat(args))), _this), _initialiseProps.call(_this), _temp), _possibleConstructorReturn(_this, _ret);
         }
@@ -366,22 +192,9 @@
                     onSubmit = _props.onSubmit,
-                    rest = _objectWithoutProperties(_props, ['children', 'onSubmit']);
+                    onUpdate = _props.onUpdate,
+                    rest = _objectWithoutProperties(_props, ['children', 'onSubmit', 'onUpdate']);
 
-                var _state = this.state,
-                    dirty = _state.dirty,
-                    errors = _state.errors,
-                    fields = _state.fields,
-                    submitted = _state.submitted;
-
-                var formContext = {
-                    dirty: dirty,
-                    errors: errors,
-                    fields: fields,
+                var formContext = _extends({}, this.getContext(), {
                     register: this.registerSubComponent,
-                    resetAll: this.onReset,
-                    setError: this.setError,
-                    setField: this.setField,
-                    submit: this.onSubmit,
-                    submitted: submitted,
                     unregister: this.unregisterSubComponent
-                };
+                });
 
@@ -409,4 +222,5 @@ return _react2.default.createElement(
         onChange: function onChange(e) {},
+        onReset: function onReset() {},
         onSubmit: function onSubmit(c) {},
-        onReset: function onReset() {}
+        onUpdate: function onUpdate(c) {}
     };
@@ -418,3 +232,219 @@ Form.propTypes = _extends({}, propTypes, {
 
+    var _initialiseProps = function _initialiseProps() {
+        var _this2 = this;
 
+        this.state = {
+            config: {},
+            dirty: {},
+            errors: {},
+            fields: {},
+            submitted: false
+        };
+        this.initialValues = {};
+        this.transforms = {};
+
+        this.getContext = function () {
+            var _state = _this2.state,
+                dirty = _state.dirty,
+                errors = _state.errors,
+                fields = _state.fields,
+                submitted = _state.submitted;
+
+
+            return {
+                dirty: dirty,
+                errors: errors,
+                fields: fields,
+                isValid: Object.values(errors).every(function (error) {
+                    return error === null;
+                }),
+                resetAll: _this2.onReset,
+                setError: _this2.setError,
+                setField: _this2.setField,
+                submit: _this2.onSubmit,
+                submitted: submitted
+            };
+        };
+
+        this.onChange = function (e) {
+            _this2.props.onChange(e);
+
+            var _e$target = e.target,
+                checked = _e$target.checked,
+                name = _e$target.name,
+                type = _e$target.type,
+                value = _e$target.value;
+
+
+            if (e.defaultPrevented || !_this2.state.config[name]) {
+                return;
+            }
+
+            var val = type === 'checkbox' ? checked : value;
+
+            if (typeof _this2.transforms[name] === 'function') {
+                val = _this2.transforms[name](val);
+            }
+
+            _this2.setField(_defineProperty({}, name, val));
+        };
+
+        this.onReset = function (e) {
+            if (e) {
+                e.preventDefault();
+            }
+
+            var _state2 = _this2.state,
+                dirty = _state2.dirty,
+                errors = _state2.errors,
+                fields = _state2.fields;
+
+
+            _this2.setStateInternal({
+                dirty: Object.keys(dirty).reduce(function (allDirty, field) {
+                    return _extends({}, allDirty, _defineProperty({}, field, false));
+                }, {}),
+                errors: Object.keys(errors).reduce(function (allErrors, field) {
+                    return _extends({}, allErrors, _defineProperty({}, field, null));
+                }, {}),
+                fields: Object.keys(fields).reduce(function (allFields, field) {
+                    return _extends({}, allFields, _defineProperty({}, field, _this2.initialValues[field]));
+                }, {}),
+                submitted: false
+            }, _this2.props.onReset);
+        };
+
+        this.onSubmit = function (e) {
+            if (e) {
+                e.preventDefault();
+            }
+
+            _this2.setStateInternal({ submitted: true }, function () {
+                _this2.props.onSubmit(_this2.getContext());
+            });
+        };
+
+        this.setError = function (diff) {
+            _this2.setStateInternal({
+                errors: _extends({}, _this2.state.errors, diff),
+                submitted: false
+            });
+        };
+
+        this.setField = function (diff) {
+            var _state3 = _this2.state,
+                config = _state3.config,
+                dirty = _state3.dirty,
+                fields = _state3.fields;
+
+            var allFields = _extends({}, fields, diff);
+            var areDirty = _extends({}, dirty, Object.keys(diff).reduce(function (allDirty, field) {
+                return _extends({}, allDirty, _defineProperty({}, field, dirty[field] || diff[field] !== _this2.initialValues[field]));
+            }, {}));
+
+            _this2.setStateInternal({
+                dirty: areDirty,
+                errors: _this2.validate(config, allFields, areDirty),
+                fields: allFields,
+                submitted: false
+            });
+        };
+
+        this.setStateInternal = function (updater) {
+            var callback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {};
+
+            _this2.setState(updater, function () {
+                callback.apply(undefined, arguments);
+
+                _this2.props.onUpdate(_this2.getContext());
+            });
+        };
+
+        this.validate = function (allConfig, allFields, areDirty) {
+            return Object.entries(allConfig).reduce(function (allErrors, _ref2) {
+                var _ref3 = _slicedToArray(_ref2, 2),
+                    fieldName = _ref3[0],
+                    fieldValidators = _ref3[1];
+
+                return _extends({}, allErrors, _defineProperty({}, fieldName, _this2.validateField(fieldName, fieldValidators, allFields, allErrors, areDirty)));
+            }, {});
+        };
+
+        this.validateField = function (fieldName, fieldValidators, allFields, allErrors, areDirty) {
+            return Object.entries(fieldValidators).reduce(function (error, _ref4) {
+                var _ref5 = _slicedToArray(_ref4, 2),
+                    validatorName = _ref5[0],
+                    validatorConfig = _ref5[1];
+
+                if (error) {
+                    return error;
+                }
+
+                var validator = _this2.props.validators[validatorName];
+
+                (0, _invariant2.default)(validator, "You specified a validator that doesn't exist. You " + ('specified ' + validatorName + '. Available validators: \n\n') + Object.keys(_this2.props.validators).join(',\n'));
+
+                var context = {
+                    fields: allFields,
+                    errors: _extends({}, _this2.state.errors, allErrors),
+                    isDirty: areDirty[fieldName]
+                };
+
+                if (typeof validatorConfig === 'function') {
+                    validatorConfig = validatorConfig(context);
+                }
+
+                if (typeof validatorConfig === 'string') {
+                    validatorConfig = { message: validatorConfig };
+                }
+
+                if (typeof validatorConfig.validateIf === 'function' && !validatorConfig.validateIf(context) || typeof validatorConfig.validateIf === 'boolean' && !validatorConfig.validateIf) {
+                    return null;
+                }
+
+                return validator(validatorConfig, context)(allFields[fieldName]);
+            }, null);
+        };
+
+        this.registerSubComponent = function (subComponentConfig, transforms, initialValues) {
+            _this2.initialValues = _extends({}, _this2.initialValues, initialValues);
+            _this2.transforms = _extends({}, _this2.transforms, transforms);
+
+            _this2.setStateInternal(function (prevState) {
+                var config = _extends({}, prevState.config, subComponentConfig);
+                var dirty = _extends({}, prevState.dirty, Object.keys(subComponentConfig).reduce(function (allDirty, field) {
+                    return _extends({}, allDirty, _defineProperty({}, field, false));
+                }, {}));
+                var fields = _extends({}, prevState.fields, initialValues);
+
+                return {
+                    config: config,
+                    dirty: dirty,
+                    errors: _this2.validate(config, fields, dirty),
+                    fields: fields
+                };
+            });
+        };
+
+        this.unregisterSubComponent = function (subComponentConfig) {
+            var keys = Object.keys(subComponentConfig);
+
+            _this2.initialValues = (0, _utilities.removeFrom)(_this2.initialValues)(keys);
+            _this2.transforms = (0, _utilities.removeFrom)(_this2.transforms)(keys);
+
+            _this2.setStateInternal(function (prevState) {
+                var config = (0, _utilities.removeFrom)(prevState.config)(keys);
+                var dirty = (0, _utilities.removeFrom)(prevState.dirty)(keys);
+                var fields = (0, _utilities.removeFrom)(prevState.fields)(keys);
+
+                return {
+                    config: config,
+                    dirty: dirty,
+                    errors: _this2.validate(config, fields, dirty),
+                    fields: fields
+                };
+            });
+        };
+    };
+
     var FormWithValidatorsContext = (0, _ValidatorsContext.withValidators)(Form);
@@ -421,0 +451,0 @@

package.json

 {
   "name": "calidation",
-  "version": "1.14.0",
+  "version": "1.15.0",
   "description": "A red hot validation library for React",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

@@ -412,2 +412,17 @@ # calidation
 
+##### `onChange: func`
+
+This callback is fired whenever a form change event is triggered. This could happen on any input
+in the form, not necessarily associated with a validated input. This callback is also called before
+any state changes have been made.
+
+The `onChange` function is called with the original change event as its only prop.
+
+##### `onReset: func`
+
+This callback is fired whenever the form is reset. That can happen whenever somebody clicks a button with type "reset",
+or calls the `resetAll` function passed in the `children` function.
+
+The `onReset` function is called with no parameters.
+
 ##### `onSubmit: func`
@@ -429,12 +444,30 @@
     setError: func, // callback accepting a diff object, updating errors like setState
+    setField: func, // callback accepting a diff object, updating fields like setState
+    submit: func, // call this to programmatically trigger a submitted state
+    submitted: bool, // flag showing whether the form has been submitted once or not
 }
 ```
 
-##### `onReset: func`
+##### `onUpdate: func`
 
-This callback is fired whenever the form is reset. That can happen whenever somebody clicks a button with type "reset",
-or calls the `resetAll` function passed in the `children` function.
+This callback is fired whenever the form state changes. This can happen when `Validation` components
+are `register`ed or `unregister`ed, when a field is updated by the user or when the `setField` method is called,
+when the `setError` method is called, or when the form is reset or the `resetAll` method is called.
 
-The `onReset` function is called with no parameters.
+The `onUpdate` function is called with an object with the follow props:
 
+```js
+{
+    dirty: object, // Object with all fields isDirty state, keyed per field
+    errors: object, // Object with all error messages, keyed per field
+    fields: object, // Object with all field inputs, keyed per field
+    isValid: bool, // Boolean indicating whether your form is valid or not
+    resetAll: func, // call this to programmatically trigger a full state reset
+    setError: func, // callback accepting a diff object, updating errors like setState
+    setField: func, // callback accepting a diff object, updating fields like setState
+    submit: func, // call this to programmatically trigger a submitted state
+    submitted: bool, // flag showing whether the form has been submitted once or not
+}
+```
+
 ### `Validation`
@@ -441,0 +474,0 @@

No alert changes

Improved metrics

Total package byte prevSize

57076

increased by3%

Lines of code

932

increased by2.08%

Number of lines in readme file

567

increased by6.18%

No dependency changes