calidation - npm Package Compare versions

Comparing version 1.10.0 to 1.11.0

dist/Form.js

@@ -7,7 +7,7 @@ 'use strict';
 
-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; }; }();
+var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
 
 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 _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
+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; }; }();
 
@@ -28,2 +28,4 @@ var _react = require('react');
 
+var _utilities = require('./utilities');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -33,2 +35,4 @@
 
+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; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -40,19 +44,6 @@
 
-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 removeFrom = function removeFrom(original) {
-    return function (fieldsToRemove) {
-        return Object.entries(original).filter(function (_ref) {
-            var _ref2 = _slicedToArray(_ref, 1),
-                fieldName = _ref2[0];
-
-            return !fieldsToRemove.includes(fieldName);
-        }).reduce(function (all, _ref3) {
-            var _ref4 = _slicedToArray(_ref3, 2),
-                fieldName = _ref4[0],
-                fieldValue = _ref4[1];
-
-            return _extends({}, all, _defineProperty({}, fieldName, fieldValue));
-        }, {});
-    };
+var propTypes = {
+    onChange: _propTypes.func,
+    onSubmit: _propTypes.func,
+    onReset: _propTypes.func
 };
@@ -64,3 +55,3 @@
     function Form() {
-        var _ref5;
+        var _ref;
 
@@ -75,3 +66,3 @@ var _temp, _this, _ret;
 
-        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref5 = Form.__proto__ || Object.getPrototypeOf(Form)).call.apply(_ref5, [this].concat(args))), _this), _this.state = {
+        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Form.__proto__ || Object.getPrototypeOf(Form)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
             config: {},
@@ -81,11 +72,10 @@ errors: {},
             submitted: false
-        }, _this.onChange = function (e) {
+        }, _this.initialValues = {}, _this.onChange = function (e) {
+            _this.props.onChange(e);
+
             if (!_this.state.config[e.target.name]) {
                 return;
             }
-            var value = e.target.type === 'checkbox' ? e.target.checked : e.target.value;
 
-            var fields = _extends({}, _this.state.fields, _defineProperty({}, e.target.name, value));
-            var errors = _this.validate(fields, _this.state.config);
-            _this.setState({ errors: errors, fields: fields });
+            _this.setField(_defineProperty({}, e.target.name, e.target.type === 'checkbox' ? e.target.checked : e.target.value));
         }, _this.onReset = function (e) {
@@ -96,12 +86,15 @@ if (e) {
 
-            _this.setState(function (prevState) {
-                return {
-                    submitted: false,
-                    errors: Object.keys(prevState.errors).reduce(function (acc, field) {
-                        return _extends({}, acc, _defineProperty({}, field, null));
-                    }, null),
-                    fields: Object.keys(prevState.fields).reduce(function (acc, field) {
-                        return _extends({}, acc, _defineProperty({}, field, ''));
-                    }, null)
-                };
+            var _this$state = _this.state,
+                errors = _this$state.errors,
+                fields = _this$state.fields;
+
+
+            _this.setState({
+                errors: Object.keys(errors).reduce(function (allErrors, field) {
+                    return _extends({}, allErrors, _defineProperty({}, field, null));
+                }, null),
+                fields: Object.keys(fields).reduce(function (allFields, field) {
+                    return _extends({}, allFields, _defineProperty({}, field, (0, _utilities.getFirstDefinedValue)(_this.initialValues[field], '')));
+                }, null),
+                submitted: false
             });
@@ -114,8 +107,14 @@
             }
+
+            var _this$state2 = _this.state,
+                errors = _this$state2.errors,
+                fields = _this$state2.fields;
+
+
             _this.setState({ submitted: true });
-            var _this$state = _this.state,
-                errors = _this$state.errors,
-                fields = _this$state.fields;
 
             _this.props.onSubmit({
+                dirty: Object.keys(fields).reduce(function (obj, key) {
+                    return _extends({}, obj, _defineProperty({}, key, fields[key] !== _this.initialValues[key]));
+                }, {}),
                 errors: errors,
@@ -131,12 +130,18 @@ fields: fields,
             var fields = _extends({}, _this.state.fields, diff);
-            var errors = _this.validate(fields, _this.state.config);
-            _this.setState({ errors: errors, fields: fields });
+
+            _this.setState({
+                errors: _this.validate(fields, _this.state.config),
+                fields: fields,
+                submitted: false
+            });
         }, _this.setError = function (diff) {
-            var errors = _extends({}, _this.state.errors, diff);
-            _this.setState({ errors: errors });
+            _this.setState({
+                errors: _extends({}, _this.state.errors, diff),
+                submitted: false
+            });
         }, _this.validate = function (fields, config) {
-            return Object.entries(config).reduce(function (allErrors, _ref6) {
-                var _ref7 = _slicedToArray(_ref6, 2),
-                    name = _ref7[0],
-                    fieldConfig = _ref7[1];
+            return Object.entries(config).reduce(function (allErrors, _ref2) {
+                var _ref3 = _slicedToArray(_ref2, 2),
+                    name = _ref3[0],
+                    fieldConfig = _ref3[1];
 
@@ -146,10 +151,13 @@ return _extends({}, allErrors, _defineProperty({}, name, _this.validateField(fieldConfig, name, fields, allErrors)));
         }, _this.validateField = function (fieldValidators, name, allFields, allErrors) {
-            return Object.entries(fieldValidators).reduce(function (error, _ref8) {
-                var _ref9 = _slicedToArray(_ref8, 2),
-                    validatorName = _ref9[0],
-                    validatorConfig = _ref9[1];
+            return Object.entries(fieldValidators).reduce(function (error, _ref4) {
+                var _ref5 = _slicedToArray(_ref4, 2),
+                    validatorName = _ref5[0],
+                    validatorConfig = _ref5[1];
 
-                if (error) return error;
+                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'));
@@ -159,3 +167,4 @@
                     fields: allFields,
-                    errors: _extends({}, _this.state.errors, allErrors)
+                    errors: _extends({}, _this.state.errors, allErrors),
+                    isDirty: allFields[name] !== _this.initialValues[name]
                 };
@@ -171,6 +180,4 @@
 
-                if (typeof validatorConfig.validateIf === 'function' && !validatorConfig.validateIf(context)) {
+                if (typeof validatorConfig.validateIf === 'function' && !validatorConfig.validateIf(context) || typeof validatorConfig.validateIf === 'boolean' && !validatorConfig.validateIf) {
                     return null;
-                } else if (typeof validatorConfig.validateIf === 'boolean' && !validatorConfig.validateIf) {
-                    return null;
                 }
@@ -181,11 +188,12 @@
         }, _this.registerSubComponent = function (subComponentConfig, initialValues) {
-            var config = _extends({}, _this.state.config, subComponentConfig);
-            var fields = _extends({}, _this.state.fields, initialValues);
-            var errors = _this.validate(fields, config);
+            _this.initialValues = _extends({}, _this.initialValues, initialValues);
 
             _this.setState(function (prevState) {
+                var config = _extends({}, prevState.config, subComponentConfig);
+                var fields = _extends({}, prevState.fields, initialValues);
+
                 return {
-                    config: _extends({}, prevState.config, config),
-                    fields: _extends({}, prevState.fields, fields),
-                    errors: _extends({}, prevState.errors, errors)
+                    config: config,
+                    fields: fields,
+                    errors: _this.validate(fields, config)
                 };
@@ -195,10 +203,14 @@ });
             var keys = Object.keys(fieldsToRemove);
-            var fields = removeFrom(_this.state.fields)(keys);
-            var config = removeFrom(_this.state.config)(keys);
-            var errors = removeFrom(_this.state.errors)(keys);
 
-            _this.setState({
-                config: config,
-                errors: _this.validate(fields, config),
-                fields: fields
+            _this.initialValues = (0, _utilities.removeFrom)(_this.initialValues)(keys);
+
+            _this.setState(function (prevState) {
+                var config = (0, _utilities.removeFrom)(prevState.config)(keys);
+                var fields = (0, _utilities.removeFrom)(prevState.fields)(keys);
+
+                return {
+                    config: config,
+                    errors: _this.validate(fields, config),
+                    fields: fields
+                };
             });
@@ -216,10 +228,16 @@ }, _temp), _possibleConstructorReturn(_this, _ret);
 
+            var _state = this.state,
+                errors = _state.errors,
+                fields = _state.fields,
+                submitted = _state.submitted;
+
             var formContext = {
-                errors: this.state.errors,
-                fields: this.state.fields,
+                errors: errors,
+                fields: fields,
                 register: this.registerSubComponent,
                 resetAll: this.onReset,
+                setError: this.setError,
                 setField: this.setField,
                 submit: this.onSubmit,
-                submitted: this.state.submitted,
+                submitted: submitted,
                 unregister: this.unregisterSubComponent
@@ -229,7 +247,7 @@ };
                 'form',
-                _extends({
+                _extends({}, rest, {
                     onChange: this.onChange,
                     onSubmit: this.onSubmit,
                     onReset: this.onReset
-                }, rest),
+                }),
                 _react2.default.createElement(
@@ -248,14 +266,16 @@ _FormContext.FormProvider,
 Form.defaultProps = {
-    onSubmit: function onSubmit(f) {
-        return f;
-    },
-    onReset: function onReset(f) {
-        return f;
-    }
+    onChange: function onChange(e) {},
+    onSubmit: function onSubmit(c) {},
+    onReset: function onReset() {}
 };
-Form.propTypes = {
-    onSubmit: _propTypes.func,
-    onReset: _propTypes.func,
+Form.propTypes = _extends({}, propTypes, {
+    // ValidatorsContext
     validators: (0, _propTypes.shape)({}).isRequired
-};
-exports.default = (0, _ValidatorsContext.withValidators)(Form);
+});
+
+
+var FormWithValidatorsContext = (0, _ValidatorsContext.withValidators)(Form);
+
+FormWithValidatorsContext.propTypes = propTypes;
+
+exports.default = FormWithValidatorsContext;

dist/FormContext.js

@@ -34,4 +34,6 @@ 'use strict';
     var targetName = TargetComponent.displayName || TargetComponent.name;
+
     WithFormContext.displayName = 'withFormContext(' + targetName + ')';
+
     return WithFormContext;
 };

dist/FormValidation.js

@@ -13,4 +13,2 @@ 'use strict';
 
-var _propTypes = require('prop-types');
-
 var _Form = require('./Form');
@@ -32,8 +30,7 @@
         initialValues = props.initialValues,
-        onSubmit = props.onSubmit,
-        rest = _objectWithoutProperties(props, ['children', 'config', 'initialValues', 'onSubmit']);
+        rest = _objectWithoutProperties(props, ['children', 'config', 'initialValues']);
 
     return _react2.default.createElement(
         _Form2.default,
-        _extends({ onSubmit: onSubmit }, rest),
+        rest,
         _react2.default.createElement(
@@ -47,9 +44,4 @@ _Validation2.default,
 
-FormValidation.propTypes = {
-    children: _propTypes.func.isRequired,
-    config: (0, _propTypes.shape)({}).isRequired,
-    initialValues: (0, _propTypes.shape)({}),
-    onSubmit: _propTypes.func
-};
+FormValidation.propTypes = _extends({}, _Form2.default.propTypes, _Validation2.default.propTypes);
 
 exports.default = FormValidation;

dist/Validation.js

@@ -19,2 +19,4 @@ 'use strict';
 
+var _utilities = require('./utilities');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -30,2 +32,8 @@
 
+var propTypes = {
+    children: _propTypes.func.isRequired,
+    config: (0, _propTypes.shape)({}).isRequired,
+    initialValues: (0, _propTypes.shape)({})
+};
+
 var Validation = function (_Component) {
@@ -48,13 +56,5 @@ _inherits(Validation, _Component);
 
-            var getFirstDefinedValue = function getFirstDefinedValue() {
-                for (var _len2 = arguments.length, values = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-                    values[_key2] = arguments[_key2];
-                }
 
-                return values.find(function (value) {
-                    return value !== undefined;
-                });
-            };
             return Object.keys(config).reduce(function (allFields, field) {
-                return _extends({}, allFields, _defineProperty({}, field, getFirstDefinedValue(source[field], '')));
+                return _extends({}, allFields, _defineProperty({}, field, (0, _utilities.getFirstDefinedValue)(source[field], '')));
             }, {});
@@ -72,2 +72,3 @@ }, _temp), _possibleConstructorReturn(_this, _ret);
 
+
             register(config, this.getFields(initialValues));
@@ -84,10 +85,10 @@ }
             var _props2 = this.props,
+                children = _props2.children,
                 errors = _props2.errors,
                 fields = _props2.fields,
                 resetAll = _props2.resetAll,
+                setError = _props2.setError,
+                setField = _props2.setField,
                 submit = _props2.submit,
-                submitted = _props2.submitted,
-                children = _props2.children,
-                config = _props2.config,
-                setField = _props2.setField;
+                submitted = _props2.submitted;
 
@@ -99,5 +100,6 @@
                 resetAll: resetAll,
+                setError: setError,
+                setField: setField,
                 submit: submit,
-                submitted: submitted,
-                setField: setField
+                submitted: submitted
             };
@@ -117,12 +119,20 @@
 };
-Validation.propTypes = {
-    config: (0, _propTypes.shape)({}).isRequired,
+Validation.propTypes = _extends({}, propTypes, {
+    // FormContext
     errors: (0, _propTypes.shape)({}),
     fields: (0, _propTypes.shape)({}),
-    register: _propTypes.func,
-    resetAll: _propTypes.func,
+    register: _propTypes.func.isRequired,
+    resetAll: _propTypes.func.isRequired,
+    setError: _propTypes.func.isRequired,
+    setField: _propTypes.func.isRequired,
+    submit: _propTypes.func.isRequired,
     submitted: _propTypes.bool,
-    submit: _propTypes.func,
-    unregister: _propTypes.func
-};
-exports.default = (0, _FormContext.withFormContext)(Validation);
+    unregister: _propTypes.func.isRequired
+});
+
+
+var ValidationWithFormContext = (0, _FormContext.withFormContext)(Validation);
+
+ValidationWithFormContext.propTypes = propTypes;
+
+exports.default = ValidationWithFormContext;

dist/ValidatorsContext.js

@@ -104,4 +104,6 @@ 'use strict';
     var targetName = TargetComponent.displayName || TargetComponent.name;
+
     WithValidators.displayName = 'withValidators(' + targetName + ')';
+
     return WithValidators;
 };

package.json

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

README.md

@@ -63,3 +63,3 @@ # calidation
     <FormValidation onSubmit={props.onSubmit} config={config}>
-        {({ fields, errors, submitted }) => (
+        {({ errors, fields, submitted }) => (
             <>
@@ -89,3 +89,3 @@ <label>
 ```js
-onSubmit = ({ errors, fields, isValid }) => {
+onSubmit = ({ fields, isValid }) => {
     if (isValid) {
@@ -123,3 +123,3 @@ server.saveAllTheData(fields);
         <Validation config={props.config}>
-            {({ fields, errors }) => (
+            {({ fields }) => (
                 <>
@@ -133,3 +133,3 @@ Who is your daddy?
         <Validation config={props.anotherConfig}>
-            {({ fields, errors }) => (
+            {({ fields }) => (
                 <>
@@ -176,3 +176,3 @@ What does he do?
 
-You can skip validation of a certain validation if you specify a `validateIf`
+You can skip validation of a certain validator if you specify a `validateIf`
 function. It will receive the other validated fields as an argument.
@@ -184,3 +184,3 @@
         message: 'You need to answer this question',
-        validateIf: ({ errors, fields }) => fields.someOtherField === 'foo',
+        validateIf: ({ fields }) => fields.someOtherField === 'foo',
     },
@@ -190,2 +190,14 @@ },
 
+If you only want to display errors when the field has been edited, you can use the `isDirty` flag.
+
+```js
+someField: {
+    isMinLength: {
+        length: 5,
+        message: 'Must be minimum of 5 characters',
+        validateIf: ({ isDirty }) => isDirty,
+    },
+},
+```
+
 If you want to do cross validation, or just need access to the other field inputs and / or errors, each validator also
@@ -371,5 +383,5 @@ accepts a function that receives all fields and the current error state.
 const extraValidators = {
-    isEven: (config, { fields, errors }) => value =>
+    isEven: (config, { errors, fields, isDirty }) => value =>
         Number(value) % 2 !== 0 ? config.message : null,
-    isOdd: (config, { fields, errors }) => value =>
+    isOdd: (config, { errors, fields, isDirty }) => value =>
         Number(value) % 2 !== 1 ? config.message : null,
@@ -406,6 +418,7 @@ };
     fields: object, // object with the form field values, to make controlled components
+    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
-    resetAll: func, // call this to programmatically trigger a full state reset
 }
@@ -442,5 +455,8 @@ ```
 {
+    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
 }
@@ -467,5 +483,8 @@ ```
 {
+    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
 }
@@ -490,2 +509,18 @@ ```
 
+##### `children: func.isRequired`
+
+The `children` function is called with an object with the following props:
+
+```js
+{
+    errors: object, // object with the same keys as `fields`, but with error messages
+    fields: object, // object with the form field values, to make controlled components
+    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
+}
+```
+
 ##### `config: object.isRequired`
@@ -518,4 +553,5 @@
 const validators = {
-    isBadTaste = config => value => value === 'Justin Bieber',
+    isBadTaste = (config, context) => value => value === 'Justin Bieber',
 };
+
 <ValidatorsProvider validators={validators}>
@@ -526,2 +562,12 @@ {...}
 
+The `context` is an object with the following props:
+
+```js
+{
+    errors: object, // object with the same keys as `fields`, but with error messages
+    fields: object, // object with the form field values, to make controlled components
+    isDirty: bool, // flag showing whether the current field has been modified
+}
+```
+
 ## Want to contribute?
@@ -528,0 +574,0 @@

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

45933

increased by9.53%

Number of package files

9

increased by12.5%

Lines of code

488

increased by5.86%

Number of lines in readme file

563

increased by8.9%

No dependency changes