react-validation-provider - npm Package Compare versions

Comparing version 0.1.2 to 0.1.3

example/src/components/Submit.js

 import React from 'react';
-import { trigger } from '../../../src';
+import { trigger, isValid } from '../../../src';
 
 @trigger()
+@isValid()
 export default class Submit extends React.Component {
     render() {
         return  ( 
-            <button onClick={() => this.props.validation.validate(() => this.props.onSubmit())}>Submit</button> 
+            <button disabled={!this.props.isValid} onClick={() => this.props.validate(() => this.props.onSubmit())}>Submit</button> 
         );
     }
 }

example/src/MyForm.js

@@ -25,4 +25,2 @@ import React from 'react';
     
-        const validStatus = this.props.validation.valid ? "Yes": "No";
-
         return (
@@ -59,10 +57,4 @@ <div className="form">
 
-                {/*<button disabled={!this.props.validation.valid} onClick={() => this.submit()}>Submit</button>*/}
                 <Submit onSubmit={() => this.submit()} />
 
-                <br />
-                <br />
-                <div>
-                    Is valid: {validStatus}
-                </div>
         </div>
@@ -69,0 +61,0 @@ )

lib/index.js

@@ -6,3 +6,3 @@ 'use strict';
 });
-exports.setDefaultScopeOptions = exports.setDefaultValidateOptions = exports.trigger = exports.scope = exports.validate = undefined;
+exports.setDefaultScopeOptions = exports.setDefaultValidateOptions = exports.isValid = exports.trigger = exports.scope = exports.validate = undefined;
 
@@ -21,2 +21,6 @@ var _validate = require('./validate');
 
+var _isValid = require('./isValid');
+
+var _isValid2 = _interopRequireDefault(_isValid);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -27,3 +31,4 @@
 exports.trigger = _trigger2.default;
+exports.isValid = _isValid2.default;
 exports.setDefaultValidateOptions = _validate.setDefaultValidateOptions;
 exports.setDefaultScopeOptions = _scope.setDefaultScopeOptions;

lib/layout.js

@@ -50,2 +50,6 @@ "use strict";
 
+Layout.propTypes = {
+    valid: _react.PropTypes.bool,
+    errorMessage: _react.PropTypes.string
+};
 exports.default = Layout;

lib/scope.js

@@ -8,4 +8,2 @@ 'use strict';
 
-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 _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; }; }();
@@ -56,5 +54,4 @@
 
-            _this.state = { isValid: _this.isValid };
             _this.components = [];
-            _this.triggers = [];
+            _this.subscribers = [];
             return _this;
@@ -69,4 +66,4 @@ }
         }, {
-            key: 'register',
-            value: function register(componenent) {
+            key: 'registerComponent',
+            value: function registerComponent(componenent) {
                 this.components.push(componenent);
@@ -76,4 +73,4 @@ this.update();
         }, {
-            key: 'unregister',
-            value: function unregister(component) {
+            key: 'unregisterComponent',
+            value: function unregisterComponent(component) {
                 var index = this.components.indexOf(component);
@@ -86,2 +83,16 @@ if (index > -1) {
         }, {
+            key: 'registerSubscriber',
+            value: function registerSubscriber(subscriber) {
+                this.subscribers.push(subscriber);
+                subscriber.setIsValid(this.isValid);
+            }
+        }, {
+            key: 'unregisterComponent',
+            value: function unregisterComponent(subscriber) {
+                var index = this.subscribers.indexOf(subscriber);
+                if (index > -1) {
+                    this.subscribers.splice(index, 1);
+                }
+            }
+        }, {
             key: 'update',
@@ -93,3 +104,5 @@ value: function update() {
                 this.isValid = isValid;
-                this.setState({ isValid: isValid });
+                this.subscribers.forEach(function (s) {
+                    return s.setIsValid(isValid);
+                });
             }
@@ -102,8 +115,14 @@ }, {
                 var validationContext = {
-                    register: function register(component) {
-                        return _this2.register(component);
+                    registerComponent: function registerComponent(component) {
+                        return _this2.registerComponent(component);
                     },
-                    unregister: function unregister(component) {
-                        return _this2.unregister(component);
+                    unregisterComponent: function unregisterComponent(component) {
+                        return _this2.unregisterComponent(component);
                     },
+                    registerSubscriber: function registerSubscriber(subscriber) {
+                        return _this2.registerSubscriber(subscriber);
+                    },
+                    unregisterSubscriber: function unregisterSubscriber(subscriber) {
+                        return _this2.unregisterSubscriber(subscriber);
+                    },
                     update: function update() {
@@ -141,3 +160,5 @@ return _this2.update();
                 if (!this.isValid && this.options.scroll) {
-                    var component = this.components[0];
+                    var component = this.components.filter(function (c) {
+                        return !!c.valid;
+                    })[0];
                     var element = _reactDom2.default.findDOMNode(component);
@@ -155,11 +176,4 @@
             value: function render() {
-                var _this3 = this;
 
-                var validation = {
-                    valid: this.state.isValid,
-                    validate: function validate(onSuccess, onFailed) {
-                        _this3.validate(onSuccess, onFailed);
-                    }
-                };
-                return _react2.default.createElement(WrappedComponent, _extends({}, this.props, { validation: validation }));
+                return _react2.default.createElement(WrappedComponent, this.props);
             }
@@ -166,0 +180,0 @@ }]);

lib/trigger.js

@@ -1,2 +0,2 @@
-"use strict";
+'use strict';
 
@@ -12,3 +12,3 @@ Object.defineProperty(exports, "__esModule", {
 
-var _react = require("react");
+var _react = require('react');
 
@@ -25,10 +25,2 @@ var _react2 = _interopRequireDefault(_react);
 
-var isFunction = function isFunction(x) {
-    return typeof x === "function";
-};
-
-var defaultOptions = {
-    custom: false
-};
-
 var trigger = exports.trigger = function trigger(WrappedComponent) {
@@ -47,3 +39,3 @@ var _class, _temp;
         _createClass(TriggerComponent, [{
-            key: "validate",
+            key: 'validate',
             value: function validate(onSuccess, onFailed) {
@@ -57,12 +49,9 @@ if (this.context.validation) {
         }, {
-            key: "render",
+            key: 'render',
             value: function render() {
                 var _this2 = this;
 
-                var validation = {
-                    validate: function validate(onSuccess, onFailed) {
-                        _this2.validate(onSuccess, onFailed);
-                    }
-                };
-                return _react2.default.createElement(WrappedComponent, _extends({}, this.props, { validation: validation }));
+                return _react2.default.createElement(WrappedComponent, _extends({}, this.props, { validate: function validate(onSuccess, onFailed) {
+                        return _this2.validate(onSuccess, onFailed);
+                    } }));
             }
@@ -69,0 +58,0 @@ }]);

lib/validate.js

@@ -66,3 +66,3 @@ 'use strict';
             value: function componentWillReceiveProps(nextProps) {
-                if (this.props.value !== nextProps.value && (!this.context.validation || this.context.validation.isEnabled())) {
+                if (this.props[this.options.propertyName] !== nextProps[this.options.propertyName] && (!this.context.validation || this.context.validation.isEnabled())) {
                     this.validate(nextProps[this.options.propertyName]);
@@ -75,3 +75,3 @@ }
                 if (this.context.validation) {
-                    this.context.validation.register(this);
+                    this.context.validation.registerComponent(this);
                 }
@@ -87,3 +87,3 @@
                 if (this.context.validation) {
-                    this.context.validation.unregister(this);
+                    this.context.validation.unregisterComponent(this);
                 }
@@ -175,3 +175,2 @@ }
     }(_react2.default.Component), _class.propTypes = {
-        value: _react2.default.PropTypes.any.isRequired,
         rules: _react2.default.PropTypes.array
@@ -178,0 +177,0 @@ }, _class.contextTypes = {

package.json

 {
   "name": "react-validation-provider",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "React validation component",
@@ -5,0 +5,0 @@ "keywords": [

No alert changes

Improved metrics

Total package byte prevSize

44583

increased by9.88%

Number of package files

36

increased by2.86%

Lines of code

814

increased by8.68%

No dependency changes