react-validation-provider - npm Package Compare versions

Comparing version 0.0.4 to 0.1.0

lib/components/ValidationComponent.js

@@ -25,4 +25,2 @@ "use strict";
 
-var suppress = function suppress() {};
-
 var isFunction = function isFunction(x) {
@@ -53,3 +51,3 @@ return typeof x === "function";
             value: function componentWillReceiveProps(nextProps) {
-                if (this.props.value !== nextProps.value) {
+                if (this.props.value !== nextProps.value && (!this.context.validation || this.context.validation.auto)) {
                     this.validate(nextProps.value);
@@ -65,3 +63,5 @@ }
 
-                this.validate(this.props.value);
+                if (!this.context.validation || this.context.validation.auto) {
+                    this.validate(this.props.value);
+                }
             }
@@ -76,19 +76,28 @@ }, {
         }, {
+            key: "checkValid",
+            value: function checkValid() {
+
+                this.validate(this.props.value);
+            }
+        }, {
             key: "validate",
             value: function validate(value) {
+
                 var valid = true;
                 var errorMessage = null;
 
-                for (var i = 0; this.props.rules && i < this.props.rules.length; i++) {
-                    var rule = this.props.rules[i];
+                if (this.props.rules) {
+                    for (var i = 0; i < this.props.rules.length; i++) {
+                        var rule = this.props.rules[i];
 
-                    if (isFunction(rule)) {
-                        rule = rule();
-                    }
+                        if (isFunction(rule)) {
+                            rule = rule();
+                        }
 
-                    valid = !!rule.validate(value);
+                        valid = !!rule.validate(value);
 
-                    if (!valid) {
-                        errorMessage = rule.hint(value);
-                        break;
+                        if (!valid) {
+                            errorMessage = rule.hint(value);
+                            break;
+                        }
                     }
@@ -108,14 +117,2 @@ }
             value: function render() {
-
-                var error = null;
-
-                if (!this.state.valid) {
-                    error = _react2.default.createElement(
-                        "span",
-                        { className: "form-element-error" },
-                        "* ",
-                        this.state.errorMessage
-                    );
-                };
-
                 var _props = this.props;
@@ -126,9 +123,5 @@ var rules = _props.rules;
 
-                suppress(rules); //prevent linter warning
-                return _react2.default.createElement(
-                    "span",
-                    null,
-                    _react2.default.createElement(Component, componentProps),
-                    error
-                );
+                var validation = { rules: rules, valid: this.state.valid, errorMessage: this.state.errorMessage };
+
+                return _react2.default.createElement(Component, { props: componentProps, validation: validation });
             }
@@ -135,0 +128,0 @@ }]);

lib/components/ValidationContext.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -13,3 +13,3 @@ Object.defineProperty(exports, "__esModule", {
 
-var _react = require('react');
+var _react = require("react");
 
@@ -26,3 +26,12 @@ var _react2 = _interopRequireDefault(_react);
 
+var defaultProps = {
+    manual: false
+};
+
 function validationContext(Component) {
+    var options = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1];
+
+
+    options = Object.assign({}, defaultProps, options);
+
     var ValidationContext = function (_React$Component) {
@@ -42,3 +51,3 @@ _inherits(ValidationContext, _React$Component);
         _createClass(ValidationContext, [{
-            key: 'componentWillMount',
+            key: "componentWillMount",
             value: function componentWillMount() {
@@ -48,3 +57,3 @@ this.update();
         }, {
-            key: 'register',
+            key: "register",
             value: function register(componenent) {
@@ -55,3 +64,3 @@ this.components.push(componenent);
         }, {
-            key: 'unregister',
+            key: "unregister",
             value: function unregister(component) {
@@ -65,3 +74,3 @@ var index = this.components.indexOf(component);
         }, {
-            key: 'update',
+            key: "update",
             value: function update() {
@@ -74,3 +83,3 @@ var isValid = this.components.every(function (c) {
         }, {
-            key: 'getChildContext',
+            key: "getChildContext",
             value: function getChildContext() {
@@ -88,3 +97,4 @@ var _this2 = this;
                         return _this2.update();
-                    }
+                    },
+                    auto: !options.manual
                 };
@@ -97,5 +107,25 @@
         }, {
-            key: 'render',
+            key: "render",
             value: function render() {
-                return _react2.default.createElement(Component, _extends({}, this.props, { isValid: this.state.isValid }));
+                var _this3 = this;
+
+                var validation = {
+                    valid: this.state.isValid,
+                    validate: function validate(onSuccess) {
+                        _this3.components.forEach(function (c) {
+                            return c.checkValid();
+                        });
+                        _this3.update();
+
+                        if (_this3.state.isValid && onSuccess) {
+                            onSuccess();
+                        }
+
+                        if (!_this3.state.isValid) {
+                            //scroll to component here
+                            console.log("scroll to element");
+                        }
+                    }
+                };
+                return _react2.default.createElement(Component, _extends({}, this.props, { validation: validation }));
             }
@@ -102,0 +132,0 @@ }]);

lib/index.js

@@ -6,15 +6,20 @@ 'use strict';
 });
-exports.validationContext = exports.validationComponent = undefined;
+exports.trigger = exports.scope = exports.validate = undefined;
 
-var _ValidationComponent = require('./components/ValidationComponent');
+var _validate = require('./validate');
 
-var _ValidationComponent2 = _interopRequireDefault(_ValidationComponent);
+var _validate2 = _interopRequireDefault(_validate);
 
-var _ValidationContext = require('./components/ValidationContext');
+var _scope = require('./scope');
 
-var _ValidationContext2 = _interopRequireDefault(_ValidationContext);
+var _scope2 = _interopRequireDefault(_scope);
 
+var _trigger = require('./trigger');
+
+var _trigger2 = _interopRequireDefault(_trigger);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-exports.validationComponent = _ValidationComponent2.default;
-exports.validationContext = _ValidationContext2.default;
+exports.validate = _validate2.default;
+exports.scope = _scope2.default;
+exports.trigger = _trigger2.default;

package.json

 {
   "name": "react-validation-provider",
-  "version": "0.0.4",
+  "version": "0.1.0",
   "description": "React validation component",
@@ -21,3 +21,4 @@ "keywords": [
   "peerDependencies": {
-    "react": "*"
+    "react": "*",
+    "react-dom": "*"
   },
@@ -29,4 +30,8 @@ "devDependencies": {
     "babel-preset-es2015": "^6.14.0",
-    "babel-preset-react": "^6.11.1"
+    "babel-preset-react": "^6.11.1",
+    "babel-preset-stage-0": "^6.5.0"
+  },
+  "dependencies": {
+    "scroll-to-element": "^2.0.0"
   }
 }

README.md

@@ -18,5 +18,5 @@ # React Validation Provider
 ```
-import { validationComponent } from 'react-validation-provider';
+import { validation } from 'react-validation-provider';
 
-@validationComponent
+@validation()
 export default class TextInput extends React.Component {
@@ -33,3 +33,3 @@ render() {
 //alternative without using decorator
-import { validationComponent } from 'react-validation-provider';
+import { validation } from 'react-validation-provider';
 
@@ -44,3 +44,3 @@ class TextInput extends React.Component {
 
-export default validationComponent(TextInput);
+export default validation()(TextInput);
 ````
@@ -83,5 +83,5 @@
 ```
-import { validationContext } from 'react-validation-provider';
+import { scope } from 'react-validation-provider';
 
-@validationContext
+@scope()
 export default class MyForm extends React.Component {
@@ -88,0 +88,0 @@ render() {

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Mixed license

License

(Experimental) Package contains multiple licenses.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

48604

increased by237.18%

Number of package files

37

increased by428.57%

Lines of code

918

increased by345.63%

Worsened metrics

Dependency count

3

increased by200%

Dev dependency count

6

increased by20%

Number of low license alerts

1

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedscroll-to-element@^2.0.0

• + Addedperformance-now@2.1.0(transitive)

• + Addedraf@3.4.1(transitive)

• + Addedreact-dom@19.0.0(transitive)

• + Addedscheduler@0.25.0(transitive)

• + Addedscroll-to-element@2.0.3(transitive)