@bitcointrade/react-validity - npm Package Compare versions

Comparing version 1.0.1 to 2.0.1

index.d.ts

@@ -8,11 +8,13 @@ /// <reference types="react" />
 export declare type Validation = [string, (value: string) => boolean];
+export declare type ValidationValue = [boolean, string];
 export interface ValidationEvent {
+    value: ValidationValue;
     preventDefault(message: string): void;
 }
-export declare type ValidationValue = [boolean, string];
 export declare type ValidationsProp = Validation[] | undefined;
-export declare type ValidationsGetter = () => ValidationsProp;
 export declare type ElementValue = (Pick<React.InputHTMLAttributes<HTMLInputElement>, "value">["value"] | Pick<React.SelectHTMLAttributes<HTMLSelectElement>, "value">["value"] | Pick<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "value">["value"]);
+export declare type ValidateFn = () => boolean;
+export declare type PristineItFn = () => void;
 export interface ValidityPublicProps {
-    validations?: ValidationsProp | ValidationsGetter;
+    validations?: ValidationsProp;
     value?: ElementValue;
@@ -23,4 +25,6 @@ }
         eventEmitter: EventEmitter;
-        message: string;
-        valid: boolean;
+        message?: string;
+        pristineIt: PristineItFn;
+        valid?: boolean;
+        validate: ValidateFn;
     };
@@ -30,2 +34,5 @@ }
 export declare type WrappedComponentType<P> = React.ComponentType<WrappedComponentProps<P>>;
-export default function validityWithConsumer<P>(WrappedComponent: WrappedComponentType<P>): React.ComponentClass<P>;
+export interface ValidityConfig {
+    subscribe?: boolean | Array<"validate" | "pristine">;
+}
+export default function validityWithConsumer(config?: ValidityConfig): <P extends {}>(WrappedComponent: React.ComponentType<WrappedComponentProps<P>>) => React.ComponentClass<WrappedComponentProps<P>>;

index.js

@@ -12,31 +12,49 @@ "use strict";
 exports.EventEmitter = EventEmitter_1.default;
-function validity(WrappedComponent) {
+function withValidity(WrappedComponent, _a) {
+    var _b = (_a === void 0 ? {} : _a).subscribe, subscribe = _b === void 0 ? true : _b;
     var Validity = /** @class */ (function (_super) {
         tslib_1.__extends(Validity, _super);
         function Validity() {
-            var _this = _super !== null && _super.apply(this, arguments) || this;
+            var args = [];
+            for (var _i = 0; _i < arguments.length; _i++) {
+                args[_i] = arguments[_i];
+            }
+            var _this = _super.apply(this, tslib_1.__spread(args)) || this;
             _this.element = null;
-            _this.state = {
-                validity: {
-                    eventEmitter: new EventEmitter_1.default(),
-                    message: "",
-                    valid: true,
-                },
+            _this.triggerComponentValidity = function (actionName, message) {
+                if (message === void 0) { message = ""; }
+                var preventDefaultFn = function (value) {
+                    message = value;
+                };
+                var validationValue = [!message, message];
+                var event = {
+                    preventDefault: preventDefaultFn,
+                    value: validationValue,
+                };
+                _this.state.validity.eventEmitter.emit(actionName, event);
+                _this.element.setCustomValidity(message);
+                var valid = !message;
+                _this.setState({
+                    validity: tslib_1.__assign({}, _this.state.validity, { message: message,
+                        valid: valid }),
+                });
+                return valid;
             };
-            _this.getValidations = function () {
-                return _this.props.validations;
+            _this.pristineIt = function () {
+                _this.triggerComponentValidity("pristine");
             };
-            _this.pristineHandler = function () {
-                _this.setValidity("");
-            };
-            _this.validateHandler = function () {
+            _this.validate = function () {
                 var validations = _this.props.validations;
-                if (!validations) {
-                    return;
-                }
                 var validationMessage = "";
                 try {
-                    for (var validations_1 = tslib_1.__values(validations), validations_1_1 = validations_1.next(); !validations_1_1.done; validations_1_1 = validations_1.next()) {
-                        var _a = tslib_1.__read(validations_1_1.value, 2), message = _a[0], validateFn = _a[1];
-                        if (validateFn.call(_this.element, _this.element.value)) {
+                    for (var _a = tslib_1.__values(validations || []), _b = _a.next(); !_b.done; _b = _a.next()) {
+                        var _c = tslib_1.__read(_b.value, 2), message = _c[0], validateFn = _c[1];
+                        var element = _this.element;
+                        var value = element.value;
+                        if (element.tagName.toLowerCase() === "input" &&
+                            element.type === "file" &&
+                            element.dataset.hasOwnProperty("validityValue")) {
+                            value = element.dataset.validityValue;
+                        }
+                        if (validateFn.call(element, value)) {
                             continue;
@@ -51,9 +69,24 @@ }
                     try {
-                        if (validations_1_1 && !validations_1_1.done && (_b = validations_1.return)) _b.call(validations_1);
+                        if (_b && !_b.done && (_d = _a.return)) _d.call(_a);
                     }
                     finally { if (e_1) throw e_1.error; }
                 }
-                _this.setValidity(validationMessage);
-                var e_1, _b;
+                return _this.triggerComponentValidity("validate", validationMessage);
+                var e_1, _d;
             };
+            _this.pristineHandler = function () {
+                _this.pristineIt();
+            };
+            _this.validateHandler = function () {
+                _this.validate();
+            };
+            _this.state = {
+                validity: {
+                    eventEmitter: new EventEmitter_1.default(),
+                    message: "",
+                    pristineIt: _this.pristineIt,
+                    valid: true,
+                    validate: _this.validate,
+                },
+            };
             return _this;
@@ -70,22 +103,21 @@ }
             var formEmitter = this.props.validityContext.eventEmitter;
-            formEmitter.on("pristine", this.pristineHandler);
-            formEmitter.on("validate", this.validateHandler);
+            if (subscribe || (Array.isArray(subscribe) && subscribe.includes("pristine"))) {
+                formEmitter.on("pristine", this.pristineHandler);
+            }
+            if (subscribe || (Array.isArray(subscribe) && subscribe.includes("validate"))) {
+                formEmitter.on("validate", this.validateHandler);
+            }
         };
         Validity.prototype.componentWillUnmount = function () {
             var formEmitter = this.props.validityContext.eventEmitter;
-            formEmitter.off("pristine", this.pristineHandler);
-            formEmitter.off("validate", this.validateHandler);
+            if (subscribe || (Array.isArray(subscribe) && subscribe.includes("pristine"))) {
+                formEmitter.off("pristine", this.pristineIt);
+            }
+            if (subscribe || (Array.isArray(subscribe) && subscribe.includes("validate"))) {
+                formEmitter.off("validate", this.validate);
+            }
         };
-        Validity.prototype.setValidity = function (message) {
-            var event = { preventDefault: function (value) { return message = value; } };
-            var validationValue = [!message, message];
-            this.state.validity.eventEmitter.emit("validation", event, validationValue);
-            this.element.setCustomValidity(message);
-            this.setState({
-                validity: tslib_1.__assign({}, this.state.validity, { message: message, valid: !message }),
-            });
-        };
         Validity.prototype.render = function () {
             var _a = this.props, _ = _a.validityContext, props = tslib_1.__rest(_a, ["validityContext"]);
-            var validityProps = tslib_1.__assign({}, this.state, { validations: this.getValidations });
+            var validityProps = tslib_1.__assign({}, this.state, { validations: this.props.validations });
             return react_1.default.createElement(WrappedComponent, tslib_1.__assign({}, props, validityProps));
@@ -99,6 +131,8 @@ };
 }
-function validityWithConsumer(WrappedComponent) {
-    return context_1.consumerHOC({ inject: "validityContext" })(validity(WrappedComponent));
+function validityWithConsumer(config) {
+    return function (WrappedComponent) {
+        return context_1.consumerHOC({ inject: "validityContext" })(withValidity(WrappedComponent, config));
+    };
 }
 exports.default = validityWithConsumer;
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@bitcointrade/react-validity",
-  "version": "1.0.1",
+  "version": "2.0.1",
   "repository": "[e-mail]:cryptocurrencytrader/react-validity.git",
@@ -10,3 +10,3 @@ "author": "Rafael Tavares <[e-mail]>",
     "run-publish": "tslint -c tslint.json 'src/**/*.ts' && rimraf .publishing && tsc --outDir .publishing && copy package.json .publishing && copy README.md .publishing && npm publish .publishing",
-    "test": "tslint -c tslint.json 'src/**/*.ts' && tsc"
+    "test": "tslint -c tslint.json 'src/**/*.ts' && tsc --noEmit"
   },
@@ -13,0 +13,0 @@ "dependencies": {

No alert changes

Improved metrics

Total package byte prevSize

19205

increased by48.98%

Number of package files

14

increased by27.27%

Lines of code

250

increased by60.26%

No dependency changes