Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
formstate - npm Package Compare versions
Comparing version 1.4.0 to 2.0.0
@@ -0,1 +1,6 @@ | ||
| # 2.0.0 | ||
| * BREAKING: Minimum Requirement for MobX is now version 6. This is enforced by `peerDependencies`. | ||
| * We no longer use decorators internally as it is not recommended by MobX. [ref](https://mobx.js.org/enabling-decorators.html) | ||
| * The compiled JS we ship is now compiled with TypeScript `useDefineForClassFields`. [More info on this option](https://devblogs.microsoft.com/typescript/announcing-typescript-3-7/#the-usedefineforclassfields-flag-and-the-declare-property-modifier) | ||
| # 1.4.0 | ||
@@ -2,0 +7,0 @@ * Update for how `isArrayLike` needs to be done for latest version of mobx. [ref](https://github.com/formstate/formstate/pull/79) |
@@ -85,3 +85,3 @@ import { ComposibleValidatable, Validator } from './types'; | ||
| reset: (value?: TValue) => void; | ||
| readonly hasError: boolean; | ||
| get hasError(): boolean; | ||
| validating: boolean; | ||
@@ -88,0 +88,0 @@ /** |
| "use strict"; | ||
| var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { | ||
| var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; | ||
| if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); | ||
| else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; | ||
| return c > 3 && r && Object.defineProperty(target, key, r), r; | ||
| }; | ||
| Object.defineProperty(exports, "__esModule", { value: true }); | ||
| exports.FieldState = void 0; | ||
| var mobx_1 = require("mobx"); | ||
@@ -20,5 +15,38 @@ var types_1 = require("./types"); | ||
| var _this = this; | ||
| this._initValue = _initValue; | ||
| Object.defineProperty(this, "_initValue", { | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true, | ||
| value: _initValue | ||
| }); | ||
| /** | ||
| * The value you should bind to the input in your field. | ||
| */ | ||
| Object.defineProperty(this, "value", { | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true, | ||
| value: void 0 | ||
| }); | ||
| /** If there is any error on the field on last validation attempt */ | ||
| Object.defineProperty(this, "error", { | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true, | ||
| value: void 0 | ||
| }); | ||
| /** If the field has been touched */ | ||
| this.dirty = false; | ||
| Object.defineProperty(this, "dirty", { | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true, | ||
| value: false | ||
| }); | ||
| /** The value set from code or a `value` that's been validated */ | ||
| Object.defineProperty(this, "$", { | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true, | ||
| value: void 0 | ||
| }); | ||
| /** | ||
@@ -29,35 +57,91 @@ * Set to true if a validation run has been completed since init | ||
| **/ | ||
| this.hasBeenValidated = false; | ||
| Object.defineProperty(this, "hasBeenValidated", { | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true, | ||
| value: false | ||
| }); | ||
| /** | ||
| * Allows you to preserve the `_autoValidationEnabled` value across `reinit`s | ||
| */ | ||
| this._autoValidationDefault = true; | ||
| this.setAutoValidationDefault = function (autoValidationDefault) { | ||
| _this._autoValidationDefault = autoValidationDefault; | ||
| _this._autoValidationEnabled = autoValidationDefault; | ||
| return _this; | ||
| }; | ||
| this.getAutoValidationDefault = function () { return _this._autoValidationDefault; }; | ||
| this._autoValidationEnabled = this._autoValidationDefault; | ||
| this.enableAutoValidation = function () { | ||
| _this._autoValidationEnabled = true; | ||
| return _this; | ||
| }; | ||
| this.enableAutoValidationAndValidate = function () { | ||
| _this._autoValidationEnabled = true; | ||
| return _this.validate(); | ||
| }; | ||
| this.disableAutoValidation = function () { | ||
| _this._autoValidationEnabled = false; | ||
| return _this; | ||
| }; | ||
| this._validators = []; | ||
| this.validators = function () { | ||
| var validators = []; | ||
| for (var _i = 0; _i < arguments.length; _i++) { | ||
| validators[_i] = arguments[_i]; | ||
| Object.defineProperty(this, "_autoValidationDefault", { | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true, | ||
| value: true | ||
| }); | ||
| Object.defineProperty(this, "setAutoValidationDefault", { | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true, | ||
| value: function (autoValidationDefault) { | ||
| _this._autoValidationDefault = autoValidationDefault; | ||
| _this._autoValidationEnabled = autoValidationDefault; | ||
| return _this; | ||
| } | ||
| _this._validators = validators; | ||
| return _this; | ||
| }; | ||
| }); | ||
| Object.defineProperty(this, "getAutoValidationDefault", { | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true, | ||
| value: function () { return _this._autoValidationDefault; } | ||
| }); | ||
| Object.defineProperty(this, "_autoValidationEnabled", { | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true, | ||
| value: this._autoValidationDefault | ||
| }); | ||
| Object.defineProperty(this, "enableAutoValidation", { | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true, | ||
| value: function () { | ||
| _this._autoValidationEnabled = true; | ||
| return _this; | ||
| } | ||
| }); | ||
| Object.defineProperty(this, "enableAutoValidationAndValidate", { | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true, | ||
| value: function () { | ||
| _this._autoValidationEnabled = true; | ||
| return _this.validate(); | ||
| } | ||
| }); | ||
| Object.defineProperty(this, "disableAutoValidation", { | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true, | ||
| value: function () { | ||
| _this._autoValidationEnabled = false; | ||
| return _this; | ||
| } | ||
| }); | ||
| Object.defineProperty(this, "_validators", { | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true, | ||
| value: [] | ||
| }); | ||
| Object.defineProperty(this, "validators", { | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true, | ||
| value: function () { | ||
| var validators = []; | ||
| for (var _i = 0; _i < arguments.length; _i++) { | ||
| validators[_i] = arguments[_i]; | ||
| } | ||
| _this._validators = validators; | ||
| return _this; | ||
| } | ||
| }); | ||
| Object.defineProperty(this, "_onUpdate", { | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true, | ||
| value: void 0 | ||
| }); | ||
| /** | ||
@@ -68,39 +152,88 @@ * onUpdate is called whenever we change something in our local state that is significant | ||
| */ | ||
| this.onUpdate = function (handler) { | ||
| _this._onUpdate = handler; | ||
| return _this; | ||
| }; | ||
| this.executeOnUpdate = function () { | ||
| _this._onUpdate && _this._onUpdate(_this); | ||
| }; | ||
| this.onDidChange = function (handler) { | ||
| _this._onDidChange = handler; | ||
| return _this; | ||
| }; | ||
| this.executeOnDidChange = function (config) { | ||
| _this._onDidChange && _this._onDidChange(config); | ||
| }; | ||
| this.setAutoValidationDebouncedMs = function (milliseconds) { | ||
| _this.queueValidation = mobx_1.action(utils_1.debounce(_this.queuedValidationWakeup, milliseconds)); | ||
| return _this; | ||
| }; | ||
| Object.defineProperty(this, "onUpdate", { | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true, | ||
| value: function (handler) { | ||
| _this._onUpdate = handler; | ||
| return _this; | ||
| } | ||
| }); | ||
| Object.defineProperty(this, "executeOnUpdate", { | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true, | ||
| value: function () { | ||
| _this._onUpdate && _this._onUpdate(_this); | ||
| } | ||
| }); | ||
| /** | ||
| * Allows you to take actions in your code based on `value` changes caused by user interactions | ||
| */ | ||
| Object.defineProperty(this, "_onDidChange", { | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true, | ||
| value: void 0 | ||
| }); | ||
| Object.defineProperty(this, "onDidChange", { | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true, | ||
| value: function (handler) { | ||
| _this._onDidChange = handler; | ||
| return _this; | ||
| } | ||
| }); | ||
| Object.defineProperty(this, "executeOnDidChange", { | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true, | ||
| value: function (config) { | ||
| _this._onDidChange && _this._onDidChange(config); | ||
| } | ||
| }); | ||
| Object.defineProperty(this, "setAutoValidationDebouncedMs", { | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true, | ||
| value: function (milliseconds) { | ||
| _this.queueValidation = mobx_1.action(utils_1.debounce(_this.queuedValidationWakeup, milliseconds)); | ||
| return _this; | ||
| } | ||
| }); | ||
| /** Trackers for validation */ | ||
| this.lastValidationRequest = 0; | ||
| this.preventNextQueuedValidation = false; | ||
| Object.defineProperty(this, "lastValidationRequest", { | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true, | ||
| value: 0 | ||
| }); | ||
| Object.defineProperty(this, "preventNextQueuedValidation", { | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true, | ||
| value: false | ||
| }); | ||
| /** On change on the component side */ | ||
| this.onChange = function (value) { | ||
| // no long prevent any debounced validation request | ||
| _this.preventNextQueuedValidation = false; | ||
| // Store local old value for onDidChange | ||
| var oldValue = _this.value; | ||
| // Immediately set for local ui binding | ||
| _this.value = value; | ||
| // Call on did change if any | ||
| _this.executeOnDidChange({ newValue: value, oldValue: oldValue }); | ||
| _this.dirty = true; | ||
| _this.executeOnUpdate(); | ||
| if (_this._autoValidationEnabled) { | ||
| _this.queueValidation(); | ||
| Object.defineProperty(this, "onChange", { | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true, | ||
| value: function (value) { | ||
| // no long prevent any debounced validation request | ||
| _this.preventNextQueuedValidation = false; | ||
| // Store local old value for onDidChange | ||
| var oldValue = _this.value; | ||
| // Immediately set for local ui binding | ||
| _this.value = value; | ||
| // Call on did change if any | ||
| _this.executeOnDidChange({ newValue: value, oldValue: oldValue }); | ||
| _this.dirty = true; | ||
| _this.executeOnUpdate(); | ||
| if (_this._autoValidationEnabled) { | ||
| _this.queueValidation(); | ||
| } | ||
| } | ||
| }; | ||
| }); | ||
| /** | ||
@@ -110,33 +243,77 @@ * If the page wants to reinitialize the field, | ||
| */ | ||
| this.reset = function (value) { | ||
| if (value === void 0) { value = _this._initValue; } | ||
| // If a previous validation comes back ignore it | ||
| _this.preventNextQueuedValidation = true; | ||
| // This value vetos all previous values | ||
| _this._autoValidationEnabled = _this._autoValidationDefault; | ||
| _this.value = value; | ||
| _this.error = undefined; | ||
| _this.dirty = false; | ||
| _this.hasBeenValidated = false; | ||
| _this.$ = value; | ||
| _this._on$Reinit(); | ||
| _this.executeOnUpdate(); | ||
| }; | ||
| this.validating = false; | ||
| Object.defineProperty(this, "reset", { | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true, | ||
| value: function (value) { | ||
| if (value === void 0) { value = _this._initValue; } | ||
| // If a previous validation comes back ignore it | ||
| _this.preventNextQueuedValidation = true; | ||
| // This value vetos all previous values | ||
| _this._autoValidationEnabled = _this._autoValidationDefault; | ||
| _this.value = value; | ||
| _this.error = undefined; | ||
| _this.dirty = false; | ||
| _this.hasBeenValidated = false; | ||
| _this.$ = value; | ||
| _this._on$Reinit(); | ||
| _this.executeOnUpdate(); | ||
| } | ||
| }); | ||
| Object.defineProperty(this, "validating", { | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true, | ||
| value: false | ||
| }); | ||
| /** | ||
| * Runs validation on the current value immediately | ||
| */ | ||
| this.validate = function () { | ||
| _this.lastValidationRequest++; | ||
| var lastValidationRequest = _this.lastValidationRequest; | ||
| _this.validating = true; | ||
| var value = _this.value; | ||
| return types_1.applyValidators(_this.value, _this._validators || []) | ||
| .then(mobx_1.action(function (fieldError) { | ||
| /** | ||
| * If validation comes back out of order then the result of this validation is not siginificant | ||
| * We simply copy the value from the last validation attempt | ||
| */ | ||
| if (_this.lastValidationRequest !== lastValidationRequest) { | ||
| if (_this.hasError) { | ||
| Object.defineProperty(this, "validate", { | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true, | ||
| value: function () { | ||
| _this.lastValidationRequest++; | ||
| var lastValidationRequest = _this.lastValidationRequest; | ||
| _this.validating = true; | ||
| var value = _this.value; | ||
| return types_1.applyValidators(_this.value, _this._validators || []) | ||
| .then(mobx_1.action(function (fieldError) { | ||
| /** | ||
| * If validation comes back out of order then the result of this validation is not siginificant | ||
| * We simply copy the value from the last validation attempt | ||
| */ | ||
| if (_this.lastValidationRequest !== lastValidationRequest) { | ||
| if (_this.hasError) { | ||
| return { hasError: true }; | ||
| } | ||
| else { | ||
| return { | ||
| hasError: false, | ||
| value: _this.$, | ||
| }; | ||
| } | ||
| } | ||
| _this.validating = false; | ||
| _this.hasBeenValidated = true; | ||
| /** For any change in field error, update our error */ | ||
| if (fieldError != _this.error) { | ||
| _this.error = fieldError; | ||
| } | ||
| /** Check for error */ | ||
| var hasError = _this.hasError; | ||
| /** If no error */ | ||
| if (!hasError) { | ||
| /** Copy over the value to validated value */ | ||
| if (_this.$ !== value) { | ||
| _this.$ = value; | ||
| } | ||
| /** Trigger any form level validations if required */ | ||
| _this._on$ValidationPass(); | ||
| } | ||
| /** before returning update */ | ||
| _this.executeOnUpdate(); | ||
| /** return a result based on error status */ | ||
| if (hasError) { | ||
| return { hasError: true }; | ||
@@ -147,44 +324,20 @@ } | ||
| hasError: false, | ||
| value: _this.$, | ||
| value: value | ||
| }; | ||
| } | ||
| })); | ||
| } | ||
| }); | ||
| Object.defineProperty(this, "queuedValidationWakeup", { | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true, | ||
| value: function () { | ||
| if (_this.preventNextQueuedValidation) { | ||
| _this.preventNextQueuedValidation = false; | ||
| return; | ||
| } | ||
| _this.validating = false; | ||
| _this.hasBeenValidated = true; | ||
| /** For any change in field error, update our error */ | ||
| if (fieldError != _this.error) { | ||
| _this.error = fieldError; | ||
| } | ||
| /** Check for error */ | ||
| var hasError = _this.hasError; | ||
| /** If no error */ | ||
| if (!hasError) { | ||
| /** Copy over the value to validated value */ | ||
| if (_this.$ !== value) { | ||
| _this.$ = value; | ||
| } | ||
| /** Trigger any form level validations if required */ | ||
| _this._on$ValidationPass(); | ||
| } | ||
| /** before returning update */ | ||
| _this.executeOnUpdate(); | ||
| /** return a result based on error status */ | ||
| if (hasError) { | ||
| return { hasError: true }; | ||
| } | ||
| else { | ||
| return { | ||
| hasError: false, | ||
| value: value | ||
| }; | ||
| } | ||
| })); | ||
| }; | ||
| this.queuedValidationWakeup = function () { | ||
| if (_this.preventNextQueuedValidation) { | ||
| _this.preventNextQueuedValidation = false; | ||
| return; | ||
| _this.validate(); | ||
| } | ||
| _this.validate(); | ||
| }; | ||
| }); | ||
| /** | ||
@@ -196,12 +349,61 @@ * Runs validation with debouncing to keep the UI super smoothly responsive | ||
| */ | ||
| this.queueValidation = utils_1.debounce(this.queuedValidationWakeup, 200); | ||
| Object.defineProperty(this, "queueValidation", { | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true, | ||
| value: utils_1.debounce(this.queuedValidationWakeup, 200) | ||
| }); | ||
| /** | ||
| * Composible fields (fields that work in conjuction with FormState) | ||
| */ | ||
| this._on$ValidationPass = function () { }; | ||
| this._on$Reinit = function () { }; | ||
| this._setCompositionParent = function (config) { | ||
| _this._on$ValidationPass = function () { return mobx_1.runInAction(config.on$ValidationPass); }; | ||
| _this._on$Reinit = function () { return mobx_1.runInAction(config.on$Reinit); }; | ||
| }; | ||
| Object.defineProperty(this, "_on$ValidationPass", { | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true, | ||
| value: function () { } | ||
| }); | ||
| Object.defineProperty(this, "_on$Reinit", { | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true, | ||
| value: function () { } | ||
| }); | ||
| Object.defineProperty(this, "_setCompositionParent", { | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true, | ||
| value: function (config) { | ||
| _this._on$ValidationPass = function () { return mobx_1.runInAction(config.on$ValidationPass); }; | ||
| _this._on$Reinit = function () { return mobx_1.runInAction(config.on$Reinit); }; | ||
| } | ||
| }); | ||
| mobx_1.makeObservable(this, { | ||
| value: mobx_1.observable, | ||
| error: mobx_1.observable, | ||
| setError: mobx_1.action, | ||
| dirty: mobx_1.observable, | ||
| $: mobx_1.observable, | ||
| hasBeenValidated: mobx_1.observable, | ||
| _autoValidationDefault: mobx_1.observable, | ||
| setAutoValidationDefault: mobx_1.action, | ||
| getAutoValidationDefault: mobx_1.action, | ||
| _autoValidationEnabled: mobx_1.observable, | ||
| enableAutoValidation: mobx_1.action, | ||
| enableAutoValidationAndValidate: mobx_1.action, | ||
| disableAutoValidation: mobx_1.action, | ||
| validators: mobx_1.action, | ||
| onUpdate: mobx_1.action, | ||
| executeOnUpdate: mobx_1.action, | ||
| onDidChange: mobx_1.action, | ||
| executeOnDidChange: mobx_1.action, | ||
| setAutoValidationDebouncedMs: mobx_1.action, | ||
| lastValidationRequest: mobx_1.observable, | ||
| preventNextQueuedValidation: mobx_1.observable, | ||
| onChange: mobx_1.action, | ||
| reset: mobx_1.action, | ||
| validating: mobx_1.observable, | ||
| validate: mobx_1.action, | ||
| queuedValidationWakeup: mobx_1.action, | ||
| _setCompositionParent: mobx_1.action | ||
| }); | ||
| mobx_1.runInAction(function () { | ||
@@ -224,5 +426,10 @@ _this.value = _initValue; | ||
| **/ | ||
| FieldState.prototype.setError = function (error) { | ||
| this.error = error; | ||
| }; | ||
| Object.defineProperty(FieldState.prototype, "setError", { | ||
| enumerable: false, | ||
| configurable: true, | ||
| writable: true, | ||
| value: function (error) { | ||
| this.error = error; | ||
| } | ||
| }); | ||
| Object.defineProperty(FieldState.prototype, "hasError", { | ||
@@ -232,88 +439,7 @@ get: function () { | ||
| }, | ||
| enumerable: true, | ||
| enumerable: false, | ||
| configurable: true | ||
| }); | ||
| __decorate([ | ||
| mobx_1.observable | ||
| ], FieldState.prototype, "value", void 0); | ||
| __decorate([ | ||
| mobx_1.observable | ||
| ], FieldState.prototype, "error", void 0); | ||
| __decorate([ | ||
| mobx_1.action | ||
| ], FieldState.prototype, "setError", null); | ||
| __decorate([ | ||
| mobx_1.observable | ||
| ], FieldState.prototype, "dirty", void 0); | ||
| __decorate([ | ||
| mobx_1.observable | ||
| ], FieldState.prototype, "$", void 0); | ||
| __decorate([ | ||
| mobx_1.observable | ||
| ], FieldState.prototype, "hasBeenValidated", void 0); | ||
| __decorate([ | ||
| mobx_1.observable | ||
| ], FieldState.prototype, "_autoValidationDefault", void 0); | ||
| __decorate([ | ||
| mobx_1.action | ||
| ], FieldState.prototype, "setAutoValidationDefault", void 0); | ||
| __decorate([ | ||
| mobx_1.action | ||
| ], FieldState.prototype, "getAutoValidationDefault", void 0); | ||
| __decorate([ | ||
| mobx_1.observable | ||
| ], FieldState.prototype, "_autoValidationEnabled", void 0); | ||
| __decorate([ | ||
| mobx_1.action | ||
| ], FieldState.prototype, "enableAutoValidation", void 0); | ||
| __decorate([ | ||
| mobx_1.action | ||
| ], FieldState.prototype, "enableAutoValidationAndValidate", void 0); | ||
| __decorate([ | ||
| mobx_1.action | ||
| ], FieldState.prototype, "disableAutoValidation", void 0); | ||
| __decorate([ | ||
| mobx_1.action | ||
| ], FieldState.prototype, "validators", void 0); | ||
| __decorate([ | ||
| mobx_1.action | ||
| ], FieldState.prototype, "onUpdate", void 0); | ||
| __decorate([ | ||
| mobx_1.action | ||
| ], FieldState.prototype, "executeOnUpdate", void 0); | ||
| __decorate([ | ||
| mobx_1.action | ||
| ], FieldState.prototype, "onDidChange", void 0); | ||
| __decorate([ | ||
| mobx_1.action | ||
| ], FieldState.prototype, "executeOnDidChange", void 0); | ||
| __decorate([ | ||
| mobx_1.action | ||
| ], FieldState.prototype, "setAutoValidationDebouncedMs", void 0); | ||
| __decorate([ | ||
| mobx_1.observable | ||
| ], FieldState.prototype, "lastValidationRequest", void 0); | ||
| __decorate([ | ||
| mobx_1.observable | ||
| ], FieldState.prototype, "preventNextQueuedValidation", void 0); | ||
| __decorate([ | ||
| mobx_1.action | ||
| ], FieldState.prototype, "onChange", void 0); | ||
| __decorate([ | ||
| mobx_1.action | ||
| ], FieldState.prototype, "reset", void 0); | ||
| __decorate([ | ||
| mobx_1.observable | ||
| ], FieldState.prototype, "validating", void 0); | ||
| __decorate([ | ||
| mobx_1.action | ||
| ], FieldState.prototype, "validate", void 0); | ||
| __decorate([ | ||
| mobx_1.action | ||
| ], FieldState.prototype, "queuedValidationWakeup", void 0); | ||
| __decorate([ | ||
| mobx_1.action | ||
| ], FieldState.prototype, "_setCompositionParent", void 0); | ||
| return FieldState; | ||
| }()); | ||
| exports.FieldState = FieldState; |
@@ -46,11 +46,11 @@ import { ComposibleValidatable, Validator } from './types'; | ||
| */ | ||
| readonly hasError: boolean; | ||
| get hasError(): boolean; | ||
| /** | ||
| * Does any field have an error | ||
| */ | ||
| readonly hasFieldError: boolean; | ||
| get hasFieldError(): boolean; | ||
| /** | ||
| * Does form level validation have an error | ||
| */ | ||
| readonly hasFormError: boolean; | ||
| get hasFormError(): boolean; | ||
| /** | ||
@@ -63,15 +63,15 @@ * Call it when you are `reinit`ing child fields | ||
| */ | ||
| readonly fieldError: string | null | undefined; | ||
| get fieldError(): string | null | undefined; | ||
| /** | ||
| * Error from form if any | ||
| */ | ||
| readonly formError: string | null | undefined; | ||
| get formError(): string | null | undefined; | ||
| /** | ||
| * The first error from any sub (if any) or form error | ||
| */ | ||
| readonly error: string | null | undefined; | ||
| get error(): string | null | undefined; | ||
| /** | ||
| * You should only show the form error if there are no field errors | ||
| */ | ||
| readonly showFormError: boolean; | ||
| get showFormError(): boolean; | ||
| /** | ||
@@ -78,0 +78,0 @@ * Resets all the fields in the form |
| "use strict"; | ||
| var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { | ||
| var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; | ||
| if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); | ||
| else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; | ||
| return c > 3 && r && Object.defineProperty(target, key, r), r; | ||
| }; | ||
| var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { | ||
@@ -45,2 +39,3 @@ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } | ||
| Object.defineProperty(exports, "__esModule", { value: true }); | ||
| exports.FormState = void 0; | ||
| var mobx_1 = require("mobx"); | ||
@@ -62,56 +57,158 @@ var utils_1 = require("../internal/utils"); | ||
| var _this = this; | ||
| this.$ = $; | ||
| this.mode = 'object'; | ||
| Object.defineProperty(this, "$", { | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true, | ||
| value: $ | ||
| }); | ||
| Object.defineProperty(this, "mode", { | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true, | ||
| value: 'object' | ||
| }); | ||
| /** Get validatable objects from $ */ | ||
| this.getValues = function () { | ||
| if (_this.mode === 'array') | ||
| return _this.$; | ||
| if (_this.mode === 'map') | ||
| return Array.from(_this.$.values()); | ||
| var keys = Object.keys(_this.$); | ||
| return keys.map(function (key) { return _this.$[key]; }); | ||
| }; | ||
| this.validating = false; | ||
| this._validators = []; | ||
| this.validators = function () { | ||
| var validators = []; | ||
| for (var _i = 0; _i < arguments.length; _i++) { | ||
| validators[_i] = arguments[_i]; | ||
| Object.defineProperty(this, "getValues", { | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true, | ||
| value: function () { | ||
| if (_this.mode === 'array') | ||
| return _this.$; | ||
| if (_this.mode === 'map') | ||
| return Array.from(_this.$.values()); | ||
| var keys = Object.keys(_this.$); | ||
| return keys.map(function (key) { return _this.$[key]; }); | ||
| } | ||
| _this._validators = validators; | ||
| return _this; | ||
| }; | ||
| this._error = ''; | ||
| }); | ||
| Object.defineProperty(this, "validating", { | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true, | ||
| value: false | ||
| }); | ||
| Object.defineProperty(this, "_validators", { | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true, | ||
| value: [] | ||
| }); | ||
| Object.defineProperty(this, "validators", { | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true, | ||
| value: function () { | ||
| var validators = []; | ||
| for (var _i = 0; _i < arguments.length; _i++) { | ||
| validators[_i] = arguments[_i]; | ||
| } | ||
| _this._validators = validators; | ||
| return _this; | ||
| } | ||
| }); | ||
| Object.defineProperty(this, "_error", { | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true, | ||
| value: '' | ||
| }); | ||
| /** | ||
| * Resets all the fields in the form | ||
| */ | ||
| this.reset = function () { | ||
| _this.getValues().map(function (v) { return v.reset(); }); | ||
| }; | ||
| Object.defineProperty(this, "reset", { | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true, | ||
| value: function () { | ||
| _this.getValues().map(function (v) { return v.reset(); }); | ||
| } | ||
| }); | ||
| /** | ||
| * Auto validation | ||
| */ | ||
| this.autoValidationEnabled = false; | ||
| this.enableAutoValidation = function () { | ||
| _this.autoValidationEnabled = true; | ||
| _this.getValues().forEach(function (x) { return x.enableAutoValidation(); }); | ||
| }; | ||
| this.enableAutoValidationAndValidate = function () { | ||
| _this.enableAutoValidation(); | ||
| return _this.validate(); | ||
| }; | ||
| this.disableAutoValidation = function () { | ||
| _this.autoValidationEnabled = false; | ||
| _this.getValues().forEach(function (x) { return x.disableAutoValidation(); }); | ||
| }; | ||
| Object.defineProperty(this, "autoValidationEnabled", { | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true, | ||
| value: false | ||
| }); | ||
| Object.defineProperty(this, "enableAutoValidation", { | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true, | ||
| value: function () { | ||
| _this.autoValidationEnabled = true; | ||
| _this.getValues().forEach(function (x) { return x.enableAutoValidation(); }); | ||
| } | ||
| }); | ||
| Object.defineProperty(this, "enableAutoValidationAndValidate", { | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true, | ||
| value: function () { | ||
| _this.enableAutoValidation(); | ||
| return _this.validate(); | ||
| } | ||
| }); | ||
| Object.defineProperty(this, "disableAutoValidation", { | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true, | ||
| value: function () { | ||
| _this.autoValidationEnabled = false; | ||
| _this.getValues().forEach(function (x) { return x.disableAutoValidation(); }); | ||
| } | ||
| }); | ||
| /** | ||
| * Composible field validation tracking | ||
| */ | ||
| this.validatedSubFields = []; | ||
| this._on$ValidationPass = function () { }; | ||
| this._on$Reinit = function () { }; | ||
| this._setCompositionParent = function (config) { | ||
| _this._on$ValidationPass = function () { return mobx_1.runInAction(config.on$ValidationPass); }; | ||
| _this._on$Reinit = function () { return mobx_1.runInAction(config.on$Reinit); }; | ||
| }; | ||
| Object.defineProperty(this, "validatedSubFields", { | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true, | ||
| value: [] | ||
| }); | ||
| Object.defineProperty(this, "_on$ValidationPass", { | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true, | ||
| value: function () { } | ||
| }); | ||
| Object.defineProperty(this, "_on$Reinit", { | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true, | ||
| value: function () { } | ||
| }); | ||
| Object.defineProperty(this, "_setCompositionParent", { | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true, | ||
| value: function (config) { | ||
| _this._on$ValidationPass = function () { return mobx_1.runInAction(config.on$ValidationPass); }; | ||
| _this._on$Reinit = function () { return mobx_1.runInAction(config.on$Reinit); }; | ||
| } | ||
| }); | ||
| mobx_1.makeObservable(this, { | ||
| validating: mobx_1.observable, | ||
| validators: mobx_1.action, | ||
| validate: mobx_1.action, | ||
| _error: mobx_1.observable, | ||
| hasError: mobx_1.computed, | ||
| hasFieldError: mobx_1.computed, | ||
| hasFormError: mobx_1.computed, | ||
| clearFormError: mobx_1.action, | ||
| fieldError: mobx_1.computed, | ||
| formError: mobx_1.computed, | ||
| error: mobx_1.computed, | ||
| showFormError: mobx_1.computed, | ||
| reset: mobx_1.action, | ||
| autoValidationEnabled: mobx_1.observable, | ||
| enableAutoValidation: mobx_1.action, | ||
| enableAutoValidationAndValidate: mobx_1.action, | ||
| disableAutoValidation: mobx_1.action, | ||
| validatedSubFields: mobx_1.observable, | ||
| compose: mobx_1.action, | ||
| _setCompositionParent: mobx_1.action | ||
| }); | ||
| this.mode = isArrayLike($) ? 'array' : utils_1.isMapLike($) ? 'map' : 'object'; | ||
@@ -128,43 +225,48 @@ /** If they didn't send in something observable make the local $ observable */ | ||
| */ | ||
| FormState.prototype.validate = function () { | ||
| return __awaiter(this, void 0, void 0, function () { | ||
| var values, fieldsResult, done, error, res; | ||
| var _this = this; | ||
| return __generator(this, function (_a) { | ||
| switch (_a.label) { | ||
| case 0: | ||
| this.validating = true; | ||
| values = this.getValues(); | ||
| return [4 /*yield*/, Promise.all(values.map(function (value) { return value.validate(); }))]; | ||
| case 1: | ||
| fieldsResult = _a.sent(); | ||
| done = mobx_1.runInAction(function () { | ||
| if (fieldsResult.some(function (f) { return f.hasError; })) { | ||
| Object.defineProperty(FormState.prototype, "validate", { | ||
| enumerable: false, | ||
| configurable: true, | ||
| writable: true, | ||
| value: function () { | ||
| return __awaiter(this, void 0, void 0, function () { | ||
| var values, fieldsResult, done, error, res; | ||
| var _this = this; | ||
| return __generator(this, function (_a) { | ||
| switch (_a.label) { | ||
| case 0: | ||
| this.validating = true; | ||
| values = this.getValues(); | ||
| return [4 /*yield*/, Promise.all(values.map(function (value) { return value.validate(); }))]; | ||
| case 1: | ||
| fieldsResult = _a.sent(); | ||
| done = mobx_1.runInAction(function () { | ||
| if (fieldsResult.some(function (f) { return f.hasError; })) { | ||
| _this.validating = false; | ||
| return true; | ||
| } | ||
| return false; | ||
| }); | ||
| if (done) | ||
| return [2 /*return*/, { hasError: true }]; | ||
| return [4 /*yield*/, types_1.applyValidators(this.$, this._validators || [])]; | ||
| case 2: | ||
| error = _a.sent(); | ||
| res = mobx_1.runInAction(function () { | ||
| if (error != _this._error) { | ||
| _this._error = error; | ||
| } | ||
| _this.validating = false; | ||
| return true; | ||
| } | ||
| return false; | ||
| }); | ||
| if (done) | ||
| return [2 /*return*/, { hasError: true }]; | ||
| return [4 /*yield*/, types_1.applyValidators(this.$, this._validators || [])]; | ||
| case 2: | ||
| error = _a.sent(); | ||
| res = mobx_1.runInAction(function () { | ||
| if (error != _this._error) { | ||
| _this._error = error; | ||
| } | ||
| _this.validating = false; | ||
| var hasError = !!error; | ||
| if (hasError) { | ||
| return { hasError: true }; | ||
| } | ||
| _this._on$ValidationPass(); | ||
| return { hasError: false, value: _this.$ }; | ||
| }); | ||
| return [2 /*return*/, res]; | ||
| } | ||
| var hasError = !!error; | ||
| if (hasError) { | ||
| return { hasError: true }; | ||
| } | ||
| _this._on$ValidationPass(); | ||
| return { hasError: false, value: _this.$ }; | ||
| }); | ||
| return [2 /*return*/, res]; | ||
| } | ||
| }); | ||
| }); | ||
| }); | ||
| }; | ||
| } | ||
| }); | ||
| Object.defineProperty(FormState.prototype, "hasError", { | ||
@@ -177,3 +279,3 @@ /** | ||
| }, | ||
| enumerable: true, | ||
| enumerable: false, | ||
| configurable: true | ||
@@ -188,3 +290,3 @@ }); | ||
| }, | ||
| enumerable: true, | ||
| enumerable: false, | ||
| configurable: true | ||
@@ -199,3 +301,3 @@ }); | ||
| }, | ||
| enumerable: true, | ||
| enumerable: false, | ||
| configurable: true | ||
@@ -206,5 +308,10 @@ }); | ||
| */ | ||
| FormState.prototype.clearFormError = function () { | ||
| this._error = ''; | ||
| }; | ||
| Object.defineProperty(FormState.prototype, "clearFormError", { | ||
| enumerable: false, | ||
| configurable: true, | ||
| writable: true, | ||
| value: function () { | ||
| this._error = ''; | ||
| } | ||
| }); | ||
| Object.defineProperty(FormState.prototype, "fieldError", { | ||
@@ -218,3 +325,3 @@ /** | ||
| }, | ||
| enumerable: true, | ||
| enumerable: false, | ||
| configurable: true | ||
@@ -229,3 +336,3 @@ }); | ||
| }, | ||
| enumerable: true, | ||
| enumerable: false, | ||
| configurable: true | ||
@@ -240,3 +347,3 @@ }); | ||
| }, | ||
| enumerable: true, | ||
| enumerable: false, | ||
| configurable: true | ||
@@ -251,3 +358,3 @@ }); | ||
| }, | ||
| enumerable: true, | ||
| enumerable: false, | ||
| configurable: true | ||
@@ -258,96 +365,41 @@ }); | ||
| */ | ||
| FormState.prototype.compose = function () { | ||
| var _this = this; | ||
| var values = this.getValues(); | ||
| values.forEach(function (value) { return value._setCompositionParent({ | ||
| on$Reinit: mobx_1.action(function () { | ||
| _this.validatedSubFields = _this.validatedSubFields.filter(function (v) { return v !== value; }); | ||
| }), | ||
| on$ValidationPass: mobx_1.action(function () { | ||
| /** Always clear the form error as its no longer relevant */ | ||
| if (_this.hasFormError) { | ||
| _this.clearFormError(); | ||
| } | ||
| /** Add the field to the validated sub fields */ | ||
| if (_this.validatedSubFields.indexOf(value) === -1) { | ||
| _this.validatedSubFields.push(value); | ||
| } | ||
| /** | ||
| * Compose triggers an automatic self validation of the form based on this criteria | ||
| */ | ||
| if ( | ||
| /** If no field has error */ | ||
| !_this.hasFieldError | ||
| /** And there isn't an active validation taking place */ | ||
| && !_this.validating | ||
| /** And all subfields are validated */ | ||
| && !_this.getValues().some(function (value) { return _this.validatedSubFields.indexOf(value) === -1; })) { | ||
| _this.validate(); | ||
| } | ||
| }) | ||
| }); }); | ||
| return this; | ||
| }; | ||
| __decorate([ | ||
| mobx_1.observable | ||
| ], FormState.prototype, "validating", void 0); | ||
| __decorate([ | ||
| mobx_1.action | ||
| ], FormState.prototype, "validators", void 0); | ||
| __decorate([ | ||
| mobx_1.action | ||
| ], FormState.prototype, "validate", null); | ||
| __decorate([ | ||
| mobx_1.observable | ||
| ], FormState.prototype, "_error", void 0); | ||
| __decorate([ | ||
| mobx_1.computed | ||
| ], FormState.prototype, "hasError", null); | ||
| __decorate([ | ||
| mobx_1.computed | ||
| ], FormState.prototype, "hasFieldError", null); | ||
| __decorate([ | ||
| mobx_1.computed | ||
| ], FormState.prototype, "hasFormError", null); | ||
| __decorate([ | ||
| mobx_1.action | ||
| ], FormState.prototype, "clearFormError", null); | ||
| __decorate([ | ||
| mobx_1.computed | ||
| ], FormState.prototype, "fieldError", null); | ||
| __decorate([ | ||
| mobx_1.computed | ||
| ], FormState.prototype, "formError", null); | ||
| __decorate([ | ||
| mobx_1.computed | ||
| ], FormState.prototype, "error", null); | ||
| __decorate([ | ||
| mobx_1.computed | ||
| ], FormState.prototype, "showFormError", null); | ||
| __decorate([ | ||
| mobx_1.action | ||
| ], FormState.prototype, "reset", void 0); | ||
| __decorate([ | ||
| mobx_1.observable | ||
| ], FormState.prototype, "autoValidationEnabled", void 0); | ||
| __decorate([ | ||
| mobx_1.action | ||
| ], FormState.prototype, "enableAutoValidation", void 0); | ||
| __decorate([ | ||
| mobx_1.action | ||
| ], FormState.prototype, "enableAutoValidationAndValidate", void 0); | ||
| __decorate([ | ||
| mobx_1.action | ||
| ], FormState.prototype, "disableAutoValidation", void 0); | ||
| __decorate([ | ||
| mobx_1.observable | ||
| ], FormState.prototype, "validatedSubFields", void 0); | ||
| __decorate([ | ||
| mobx_1.action | ||
| ], FormState.prototype, "compose", null); | ||
| __decorate([ | ||
| mobx_1.action | ||
| ], FormState.prototype, "_setCompositionParent", void 0); | ||
| Object.defineProperty(FormState.prototype, "compose", { | ||
| enumerable: false, | ||
| configurable: true, | ||
| writable: true, | ||
| value: function () { | ||
| var _this = this; | ||
| var values = this.getValues(); | ||
| values.forEach(function (value) { return value._setCompositionParent({ | ||
| on$Reinit: mobx_1.action(function () { | ||
| _this.validatedSubFields = _this.validatedSubFields.filter(function (v) { return v !== value; }); | ||
| }), | ||
| on$ValidationPass: mobx_1.action(function () { | ||
| /** Always clear the form error as its no longer relevant */ | ||
| if (_this.hasFormError) { | ||
| _this.clearFormError(); | ||
| } | ||
| /** Add the field to the validated sub fields */ | ||
| if (_this.validatedSubFields.indexOf(value) === -1) { | ||
| _this.validatedSubFields.push(value); | ||
| } | ||
| /** | ||
| * Compose triggers an automatic self validation of the form based on this criteria | ||
| */ | ||
| if ( | ||
| /** If no field has error */ | ||
| !_this.hasFieldError | ||
| /** And there isn't an active validation taking place */ | ||
| && !_this.validating | ||
| /** And all subfields are validated */ | ||
| && !_this.getValues().some(function (value) { return _this.validatedSubFields.indexOf(value) === -1; })) { | ||
| _this.validate(); | ||
| } | ||
| }) | ||
| }); }); | ||
| return this; | ||
| } | ||
| }); | ||
| return FormState; | ||
| }()); | ||
| exports.FormState = FormState; |
@@ -10,3 +10,3 @@ import { Validatable, Validator } from './types'; | ||
| protected getFields: () => TValue; | ||
| readonly $: TValue; | ||
| get $(): TValue; | ||
| constructor( | ||
@@ -30,11 +30,11 @@ /** It is a function as fields can change over time */ | ||
| */ | ||
| readonly hasError: boolean; | ||
| get hasError(): boolean; | ||
| /** | ||
| * Does any field have an error | ||
| */ | ||
| readonly hasFieldError: boolean; | ||
| get hasFieldError(): boolean; | ||
| /** | ||
| * Does form level validation have an error | ||
| */ | ||
| readonly hasFormError: boolean; | ||
| get hasFormError(): boolean; | ||
| /** | ||
@@ -47,15 +47,15 @@ * Call it when you are `reinit`ing child fields | ||
| */ | ||
| readonly fieldError: string | null | undefined; | ||
| get fieldError(): string | null | undefined; | ||
| /** | ||
| * Error from form if any | ||
| */ | ||
| readonly formError: string | null | undefined; | ||
| get formError(): string | null | undefined; | ||
| /** | ||
| * The first error from any sub (if any) or form error | ||
| */ | ||
| readonly error: string | null | undefined; | ||
| get error(): string | null | undefined; | ||
| /** | ||
| * You should only show the form error if there are no field errors | ||
| */ | ||
| readonly showFormError: boolean; | ||
| get showFormError(): boolean; | ||
| } |
| "use strict"; | ||
| var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { | ||
| var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; | ||
| if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); | ||
| else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; | ||
| return c > 3 && r && Object.defineProperty(target, key, r), r; | ||
| }; | ||
| var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { | ||
@@ -45,2 +39,3 @@ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } | ||
| Object.defineProperty(exports, "__esModule", { value: true }); | ||
| exports.FormStateLazy = void 0; | ||
| var mobx_1 = require("mobx"); | ||
@@ -56,20 +51,72 @@ var types_1 = require("./types"); | ||
| var _this = this; | ||
| this.getFields = getFields; | ||
| this.validating = false; | ||
| this._validators = []; | ||
| this.validators = function () { | ||
| var validators = []; | ||
| for (var _i = 0; _i < arguments.length; _i++) { | ||
| validators[_i] = arguments[_i]; | ||
| Object.defineProperty(this, "getFields", { | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true, | ||
| value: getFields | ||
| }); | ||
| Object.defineProperty(this, "validating", { | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true, | ||
| value: false | ||
| }); | ||
| Object.defineProperty(this, "_validators", { | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true, | ||
| value: [] | ||
| }); | ||
| Object.defineProperty(this, "validators", { | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true, | ||
| value: function () { | ||
| var validators = []; | ||
| for (var _i = 0; _i < arguments.length; _i++) { | ||
| validators[_i] = arguments[_i]; | ||
| } | ||
| _this._validators = validators; | ||
| return _this; | ||
| } | ||
| _this._validators = validators; | ||
| return _this; | ||
| }; | ||
| this.enableAutoValidation = function () { | ||
| _this.getFields().forEach(function (x) { return x.enableAutoValidation(); }); | ||
| }; | ||
| this.disableAutoValidation = function () { | ||
| _this.getFields().forEach(function (x) { return x.disableAutoValidation(); }); | ||
| }; | ||
| this._error = ''; | ||
| }); | ||
| Object.defineProperty(this, "enableAutoValidation", { | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true, | ||
| value: function () { | ||
| _this.getFields().forEach(function (x) { return x.enableAutoValidation(); }); | ||
| } | ||
| }); | ||
| Object.defineProperty(this, "disableAutoValidation", { | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true, | ||
| value: function () { | ||
| _this.getFields().forEach(function (x) { return x.disableAutoValidation(); }); | ||
| } | ||
| }); | ||
| Object.defineProperty(this, "_error", { | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true, | ||
| value: '' | ||
| }); | ||
| mobx_1.makeObservable(this, { | ||
| $: mobx_1.computed, | ||
| validating: mobx_1.observable, | ||
| validators: mobx_1.action, | ||
| validate: mobx_1.action, | ||
| enableAutoValidation: mobx_1.action, | ||
| disableAutoValidation: mobx_1.action, | ||
| _error: mobx_1.observable, | ||
| hasError: mobx_1.computed, | ||
| hasFieldError: mobx_1.computed, | ||
| hasFormError: mobx_1.computed, | ||
| clearFormError: mobx_1.action, | ||
| fieldError: mobx_1.computed, | ||
| formError: mobx_1.computed, | ||
| error: mobx_1.computed, | ||
| showFormError: mobx_1.computed | ||
| }); | ||
| } | ||
@@ -80,45 +127,50 @@ Object.defineProperty(FormStateLazy.prototype, "$", { | ||
| }, | ||
| enumerable: true, | ||
| enumerable: false, | ||
| configurable: true | ||
| }); | ||
| FormStateLazy.prototype.validate = function () { | ||
| return __awaiter(this, void 0, void 0, function () { | ||
| var values, fieldsResult, done, error, res; | ||
| var _this = this; | ||
| return __generator(this, function (_a) { | ||
| switch (_a.label) { | ||
| case 0: | ||
| this.validating = true; | ||
| values = this.getFields(); | ||
| return [4 /*yield*/, Promise.all(values.map(function (value) { return value.validate(); }))]; | ||
| case 1: | ||
| fieldsResult = _a.sent(); | ||
| done = mobx_1.runInAction(function () { | ||
| if (fieldsResult.some(function (f) { return f.hasError; })) { | ||
| Object.defineProperty(FormStateLazy.prototype, "validate", { | ||
| enumerable: false, | ||
| configurable: true, | ||
| writable: true, | ||
| value: function () { | ||
| return __awaiter(this, void 0, void 0, function () { | ||
| var values, fieldsResult, done, error, res; | ||
| var _this = this; | ||
| return __generator(this, function (_a) { | ||
| switch (_a.label) { | ||
| case 0: | ||
| this.validating = true; | ||
| values = this.getFields(); | ||
| return [4 /*yield*/, Promise.all(values.map(function (value) { return value.validate(); }))]; | ||
| case 1: | ||
| fieldsResult = _a.sent(); | ||
| done = mobx_1.runInAction(function () { | ||
| if (fieldsResult.some(function (f) { return f.hasError; })) { | ||
| _this.validating = false; | ||
| return true; | ||
| } | ||
| return false; | ||
| }); | ||
| if (done) | ||
| return [2 /*return*/, { hasError: true }]; | ||
| return [4 /*yield*/, types_1.applyValidators(this.$, this._validators || [])]; | ||
| case 2: | ||
| error = _a.sent(); | ||
| res = mobx_1.runInAction(function () { | ||
| if (error != _this._error) { | ||
| _this._error = error; | ||
| } | ||
| _this.validating = false; | ||
| return true; | ||
| } | ||
| return false; | ||
| }); | ||
| if (done) | ||
| return [2 /*return*/, { hasError: true }]; | ||
| return [4 /*yield*/, types_1.applyValidators(this.$, this._validators || [])]; | ||
| case 2: | ||
| error = _a.sent(); | ||
| res = mobx_1.runInAction(function () { | ||
| if (error != _this._error) { | ||
| _this._error = error; | ||
| } | ||
| _this.validating = false; | ||
| var hasError = !!error; | ||
| if (hasError) { | ||
| return { hasError: true }; | ||
| } | ||
| return { hasError: false, value: _this.$ }; | ||
| }); | ||
| return [2 /*return*/, res]; | ||
| } | ||
| var hasError = !!error; | ||
| if (hasError) { | ||
| return { hasError: true }; | ||
| } | ||
| return { hasError: false, value: _this.$ }; | ||
| }); | ||
| return [2 /*return*/, res]; | ||
| } | ||
| }); | ||
| }); | ||
| }); | ||
| }; | ||
| } | ||
| }); | ||
| Object.defineProperty(FormStateLazy.prototype, "hasError", { | ||
@@ -131,3 +183,3 @@ /** | ||
| }, | ||
| enumerable: true, | ||
| enumerable: false, | ||
| configurable: true | ||
@@ -142,3 +194,3 @@ }); | ||
| }, | ||
| enumerable: true, | ||
| enumerable: false, | ||
| configurable: true | ||
@@ -153,3 +205,3 @@ }); | ||
| }, | ||
| enumerable: true, | ||
| enumerable: false, | ||
| configurable: true | ||
@@ -160,5 +212,10 @@ }); | ||
| */ | ||
| FormStateLazy.prototype.clearFormError = function () { | ||
| this._error = ''; | ||
| }; | ||
| Object.defineProperty(FormStateLazy.prototype, "clearFormError", { | ||
| enumerable: false, | ||
| configurable: true, | ||
| writable: true, | ||
| value: function () { | ||
| this._error = ''; | ||
| } | ||
| }); | ||
| Object.defineProperty(FormStateLazy.prototype, "fieldError", { | ||
@@ -172,3 +229,3 @@ /** | ||
| }, | ||
| enumerable: true, | ||
| enumerable: false, | ||
| configurable: true | ||
@@ -183,3 +240,3 @@ }); | ||
| }, | ||
| enumerable: true, | ||
| enumerable: false, | ||
| configurable: true | ||
@@ -194,3 +251,3 @@ }); | ||
| }, | ||
| enumerable: true, | ||
| enumerable: false, | ||
| configurable: true | ||
@@ -205,52 +262,7 @@ }); | ||
| }, | ||
| enumerable: true, | ||
| enumerable: false, | ||
| configurable: true | ||
| }); | ||
| __decorate([ | ||
| mobx_1.computed | ||
| ], FormStateLazy.prototype, "$", null); | ||
| __decorate([ | ||
| mobx_1.observable | ||
| ], FormStateLazy.prototype, "validating", void 0); | ||
| __decorate([ | ||
| mobx_1.action | ||
| ], FormStateLazy.prototype, "validators", void 0); | ||
| __decorate([ | ||
| mobx_1.action | ||
| ], FormStateLazy.prototype, "validate", null); | ||
| __decorate([ | ||
| mobx_1.action | ||
| ], FormStateLazy.prototype, "enableAutoValidation", void 0); | ||
| __decorate([ | ||
| mobx_1.action | ||
| ], FormStateLazy.prototype, "disableAutoValidation", void 0); | ||
| __decorate([ | ||
| mobx_1.observable | ||
| ], FormStateLazy.prototype, "_error", void 0); | ||
| __decorate([ | ||
| mobx_1.computed | ||
| ], FormStateLazy.prototype, "hasError", null); | ||
| __decorate([ | ||
| mobx_1.computed | ||
| ], FormStateLazy.prototype, "hasFieldError", null); | ||
| __decorate([ | ||
| mobx_1.computed | ||
| ], FormStateLazy.prototype, "hasFormError", null); | ||
| __decorate([ | ||
| mobx_1.action | ||
| ], FormStateLazy.prototype, "clearFormError", null); | ||
| __decorate([ | ||
| mobx_1.computed | ||
| ], FormStateLazy.prototype, "fieldError", null); | ||
| __decorate([ | ||
| mobx_1.computed | ||
| ], FormStateLazy.prototype, "formError", null); | ||
| __decorate([ | ||
| mobx_1.computed | ||
| ], FormStateLazy.prototype, "error", null); | ||
| __decorate([ | ||
| mobx_1.computed | ||
| ], FormStateLazy.prototype, "showFormError", null); | ||
| return FormStateLazy; | ||
| }()); | ||
| exports.FormStateLazy = FormStateLazy; |
| "use strict"; | ||
| Object.defineProperty(exports, "__esModule", { value: true }); | ||
| exports.applyValidators = void 0; | ||
| var utils_1 = require("../internal/utils"); | ||
@@ -4,0 +5,0 @@ /** |
| "use strict"; | ||
| function __export(m) { | ||
| for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; | ||
| } | ||
| var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) { | ||
| if (k2 === undefined) k2 = k; | ||
| Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } }); | ||
| }) : (function(o, m, k, k2) { | ||
| if (k2 === undefined) k2 = k; | ||
| o[k2] = m[k]; | ||
| })); | ||
| var __exportStar = (this && this.__exportStar) || function(m, exports) { | ||
| for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p); | ||
| }; | ||
| Object.defineProperty(exports, "__esModule", { value: true }); | ||
| __export(require("./core/types")); | ||
| __export(require("./core/fieldState")); | ||
| __export(require("./core/formState")); | ||
| __export(require("./core/formStateLazy")); | ||
| __exportStar(require("./core/types"), exports); | ||
| __exportStar(require("./core/fieldState"), exports); | ||
| __exportStar(require("./core/formState"), exports); | ||
| __exportStar(require("./core/formStateLazy"), exports); |
| "use strict"; | ||
| Object.defineProperty(exports, "__esModule", { value: true }); | ||
| exports.isPromiseLike = exports.isMapLike = exports.debounce = void 0; | ||
| var mobx_1 = require("mobx"); | ||
@@ -4,0 +5,0 @@ /** |
| { | ||
| "name": "formstate", | ||
| "version": "1.4.0", | ||
| "version": "2.0.0", | ||
| "description": "Painless and simple MobX form management", | ||
@@ -34,3 +34,3 @@ "main": "./lib/index.js", | ||
| "peerDependencies": { | ||
| "mobx": ">=3.0.0" | ||
| "mobx": ">=6.0.0" | ||
| }, | ||
@@ -51,4 +51,4 @@ "dependencies": {}, | ||
| "gh-pages": "2.1.1", | ||
| "mobx": "5.13.0", | ||
| "mobx-react": "6.1.3", | ||
| "mobx": "6.0.1", | ||
| "mobx-react": "7.0.0", | ||
| "mocha": "6.2.0", | ||
@@ -60,5 +60,5 @@ "moment": "2.24.0", | ||
| "ts-node": "8.3.0", | ||
| "typescript": "3.6.2", | ||
| "typescript": "4.0.3", | ||
| "typestyle": "2.0.4" | ||
| } | ||
| } |
@@ -1,2 +0,2 @@ | ||
| import { observable, action, computed, runInAction } from 'mobx'; | ||
| import { observable, action, runInAction, makeObservable } from 'mobx'; | ||
| import { ComposibleValidatable, Validator, applyValidators } from './types'; | ||
@@ -14,6 +14,6 @@ import { debounce } from '../internal/utils'; | ||
| */ | ||
| @observable value: TValue; | ||
| value: TValue; | ||
| /** If there is any error on the field on last validation attempt */ | ||
| @observable error?: string; | ||
| error?: string; | ||
@@ -27,3 +27,3 @@ /** | ||
| **/ | ||
| @action setError(error: string) { | ||
| setError(error: string) { | ||
| this.error = error; | ||
@@ -33,6 +33,6 @@ } | ||
| /** If the field has been touched */ | ||
| @observable dirty?: boolean = false; | ||
| dirty?: boolean = false; | ||
| /** The value set from code or a `value` that's been validated */ | ||
| @observable $: TValue; | ||
| $: TValue; | ||
@@ -44,3 +44,3 @@ /** | ||
| **/ | ||
| @observable hasBeenValidated: boolean = false; | ||
| hasBeenValidated: boolean = false; | ||
@@ -50,4 +50,4 @@ /** | ||
| */ | ||
| @observable protected _autoValidationDefault = true; | ||
| @action public setAutoValidationDefault = (autoValidationDefault: boolean) => { | ||
| protected _autoValidationDefault = true; | ||
| public setAutoValidationDefault = (autoValidationDefault: boolean) => { | ||
| this._autoValidationDefault = autoValidationDefault; | ||
@@ -57,14 +57,14 @@ this._autoValidationEnabled = autoValidationDefault; | ||
| } | ||
| @action public getAutoValidationDefault = () => this._autoValidationDefault; | ||
| public getAutoValidationDefault = () => this._autoValidationDefault; | ||
| @observable protected _autoValidationEnabled = this._autoValidationDefault; | ||
| @action public enableAutoValidation = () => { | ||
| protected _autoValidationEnabled = this._autoValidationDefault; | ||
| public enableAutoValidation = () => { | ||
| this._autoValidationEnabled = true; | ||
| return this; | ||
| } | ||
| @action public enableAutoValidationAndValidate = () => { | ||
| public enableAutoValidationAndValidate = () => { | ||
| this._autoValidationEnabled = true; | ||
| return this.validate(); | ||
| } | ||
| @action public disableAutoValidation = () => { | ||
| public disableAutoValidation = () => { | ||
| this._autoValidationEnabled = false; | ||
@@ -75,2 +75,32 @@ return this; | ||
| constructor(private _initValue: TValue) { | ||
| makeObservable<FieldState<TValue>, "_autoValidationDefault" | "_autoValidationEnabled" | "executeOnUpdate" | "executeOnDidChange" | "lastValidationRequest" | "preventNextQueuedValidation">(this, { | ||
| value: observable, | ||
| error: observable, | ||
| setError: action, | ||
| dirty: observable, | ||
| $: observable, | ||
| hasBeenValidated: observable, | ||
| _autoValidationDefault: observable, | ||
| setAutoValidationDefault: action, | ||
| getAutoValidationDefault: action, | ||
| _autoValidationEnabled: observable, | ||
| enableAutoValidation: action, | ||
| enableAutoValidationAndValidate: action, | ||
| disableAutoValidation: action, | ||
| validators: action, | ||
| onUpdate: action, | ||
| executeOnUpdate: action, | ||
| onDidChange: action, | ||
| executeOnDidChange: action, | ||
| setAutoValidationDebouncedMs: action, | ||
| lastValidationRequest: observable, | ||
| preventNextQueuedValidation: observable, | ||
| onChange: action, | ||
| reset: action, | ||
| validating: observable, | ||
| validate: action, | ||
| queuedValidationWakeup: action, | ||
| _setCompositionParent: action | ||
| }); | ||
| runInAction(() => { | ||
@@ -88,3 +118,3 @@ this.value = _initValue; | ||
| protected _validators: Validator<TValue>[] = []; | ||
| @action validators = (...validators: Validator<TValue>[]) => { | ||
| validators = (...validators: Validator<TValue>[]) => { | ||
| this._validators = validators; | ||
@@ -99,7 +129,7 @@ return this; | ||
| */ | ||
| @action public onUpdate = (handler: (state: FieldState<TValue>) => any) => { | ||
| public onUpdate = (handler: (state: FieldState<TValue>) => any) => { | ||
| this._onUpdate = handler; | ||
| return this; | ||
| } | ||
| @action protected executeOnUpdate = () => { | ||
| protected executeOnUpdate = () => { | ||
| this._onUpdate && this._onUpdate(this); | ||
@@ -112,11 +142,11 @@ } | ||
| protected _onDidChange: (config: { newValue: TValue, oldValue: TValue }) => any; | ||
| @action public onDidChange = (handler: (config: { newValue: TValue, oldValue: TValue }) => any) => { | ||
| public onDidChange = (handler: (config: { newValue: TValue, oldValue: TValue }) => any) => { | ||
| this._onDidChange = handler; | ||
| return this; | ||
| } | ||
| @action protected executeOnDidChange = (config: { newValue: TValue, oldValue: TValue }) => { | ||
| protected executeOnDidChange = (config: { newValue: TValue, oldValue: TValue }) => { | ||
| this._onDidChange && this._onDidChange(config); | ||
| } | ||
| @action public setAutoValidationDebouncedMs = (milliseconds: number) => { | ||
| public setAutoValidationDebouncedMs = (milliseconds: number) => { | ||
| this.queueValidation = action(debounce(this.queuedValidationWakeup, milliseconds)); | ||
@@ -127,7 +157,6 @@ return this; | ||
| /** Trackers for validation */ | ||
| @observable protected lastValidationRequest: number = 0; | ||
| @observable protected preventNextQueuedValidation = false; | ||
| protected lastValidationRequest: number = 0; | ||
| protected preventNextQueuedValidation = false; | ||
| /** On change on the component side */ | ||
| @action | ||
| onChange = (value: TValue) => { | ||
@@ -156,3 +185,3 @@ // no long prevent any debounced validation request | ||
| */ | ||
| @action reset = (value: TValue = this._initValue) => { | ||
| reset = (value: TValue = this._initValue) => { | ||
| // If a previous validation comes back ignore it | ||
@@ -176,3 +205,3 @@ this.preventNextQueuedValidation = true; | ||
| @observable validating: boolean = false; | ||
| validating: boolean = false; | ||
@@ -182,3 +211,3 @@ /** | ||
| */ | ||
| @action validate = (): Promise<{ hasError: true } | { hasError: false, value: TValue }> => { | ||
| validate = (): Promise<{ hasError: true } | { hasError: false, value: TValue }> => { | ||
| this.lastValidationRequest++; | ||
@@ -244,3 +273,3 @@ const lastValidationRequest = this.lastValidationRequest; | ||
| @action queuedValidationWakeup = () => { | ||
| queuedValidationWakeup = () => { | ||
| if (this.preventNextQueuedValidation) { | ||
@@ -265,3 +294,3 @@ this.preventNextQueuedValidation = false; | ||
| _on$Reinit = () => { } | ||
| @action _setCompositionParent = (config: { | ||
| _setCompositionParent = (config: { | ||
| on$ValidationPass: () => void; | ||
@@ -268,0 +297,0 @@ on$Reinit: () => void; |
@@ -1,2 +0,2 @@ | ||
| import { action, computed, isObservable, isObservableArray, IObservableArray, observable, runInAction } from 'mobx'; | ||
| import { action, computed, isObservable, isObservableArray, IObservableArray, observable, runInAction, makeObservable } from 'mobx'; | ||
| import { isMapLike } from "../internal/utils"; | ||
@@ -29,2 +29,25 @@ import { applyValidators, ComposibleValidatable, Validator } from './types'; | ||
| ) { | ||
| makeObservable<FormState<TValue>, "_error" | "autoValidationEnabled">(this, { | ||
| validating: observable, | ||
| validators: action, | ||
| validate: action, | ||
| _error: observable, | ||
| hasError: computed, | ||
| hasFieldError: computed, | ||
| hasFormError: computed, | ||
| clearFormError: action, | ||
| fieldError: computed, | ||
| formError: computed, | ||
| error: computed, | ||
| showFormError: computed, | ||
| reset: action, | ||
| autoValidationEnabled: observable, | ||
| enableAutoValidation: action, | ||
| enableAutoValidationAndValidate: action, | ||
| disableAutoValidation: action, | ||
| validatedSubFields: observable, | ||
| compose: action, | ||
| _setCompositionParent: action | ||
| }); | ||
| this.mode = isArrayLike($) ? 'array' : isMapLike($) ? 'map' : 'object'; | ||
@@ -48,6 +71,6 @@ | ||
| @observable validating = false; | ||
| validating = false; | ||
| protected _validators: Validator<TValue>[] = []; | ||
| @action validators = (...validators: Validator<TValue>[]) => { | ||
| validators = (...validators: Validator<TValue>[]) => { | ||
| this._validators = validators; | ||
@@ -62,3 +85,3 @@ return this; | ||
| */ | ||
| @action async validate(): Promise<{ hasError: true } | { hasError: false, value: TValue }> { | ||
| async validate(): Promise<{ hasError: true } | { hasError: false, value: TValue }> { | ||
| this.validating = true; | ||
@@ -96,3 +119,3 @@ const values = this.getValues(); | ||
| @observable protected _error: string | null | undefined = ''; | ||
| protected _error: string | null | undefined = ''; | ||
@@ -102,3 +125,3 @@ /** | ||
| */ | ||
| @computed get hasError() { | ||
| get hasError() { | ||
| return this.hasFieldError || this.hasFormError; | ||
@@ -110,3 +133,3 @@ } | ||
| */ | ||
| @computed get hasFieldError() { | ||
| get hasFieldError() { | ||
| return this.getValues().some(f => f.hasError); | ||
@@ -118,3 +141,3 @@ } | ||
| */ | ||
| @computed get hasFormError() { | ||
| get hasFormError() { | ||
| return !!this._error; | ||
@@ -126,3 +149,3 @@ } | ||
| */ | ||
| @action clearFormError() { | ||
| clearFormError() { | ||
| this._error = ''; | ||
@@ -134,3 +157,3 @@ } | ||
| */ | ||
| @computed get fieldError() { | ||
| get fieldError() { | ||
| const subItemWithError = this.getValues().find(f => !!f.hasError); | ||
@@ -143,3 +166,3 @@ return subItemWithError ? subItemWithError.error : null; | ||
| */ | ||
| @computed get formError() { | ||
| get formError() { | ||
| return this._error; | ||
@@ -151,3 +174,3 @@ } | ||
| */ | ||
| @computed get error() { | ||
| get error() { | ||
| return this.fieldError || this.formError; | ||
@@ -159,3 +182,3 @@ } | ||
| */ | ||
| @computed get showFormError() { | ||
| get showFormError() { | ||
| return !this.hasFieldError && this.hasFormError; | ||
@@ -167,3 +190,3 @@ } | ||
| */ | ||
| @action reset = () => { | ||
| reset = () => { | ||
| this.getValues().map(v => v.reset()); | ||
@@ -175,12 +198,12 @@ } | ||
| */ | ||
| @observable protected autoValidationEnabled = false; | ||
| @action public enableAutoValidation = () => { | ||
| protected autoValidationEnabled = false; | ||
| public enableAutoValidation = () => { | ||
| this.autoValidationEnabled = true; | ||
| this.getValues().forEach(x => x.enableAutoValidation()); | ||
| } | ||
| @action public enableAutoValidationAndValidate = () => { | ||
| public enableAutoValidationAndValidate = () => { | ||
| this.enableAutoValidation(); | ||
| return this.validate(); | ||
| } | ||
| @action public disableAutoValidation = () => { | ||
| public disableAutoValidation = () => { | ||
| this.autoValidationEnabled = false; | ||
@@ -193,3 +216,3 @@ this.getValues().forEach(x => x.disableAutoValidation()); | ||
| */ | ||
| @observable validatedSubFields: ComposibleValidatable<any>[] = []; | ||
| validatedSubFields: ComposibleValidatable<any>[] = []; | ||
@@ -199,3 +222,3 @@ /** | ||
| */ | ||
| @action compose() { | ||
| compose() { | ||
| const values = this.getValues(); | ||
@@ -239,3 +262,3 @@ values.forEach(value => value._setCompositionParent( | ||
| _on$Reinit = () => { } | ||
| @action _setCompositionParent = (config: { | ||
| _setCompositionParent = (config: { | ||
| on$ValidationPass: () => void; | ||
@@ -242,0 +265,0 @@ on$Reinit: () => void; |
@@ -1,2 +0,2 @@ | ||
| import { observable, action, computed, runInAction } from 'mobx'; | ||
| import { observable, action, computed, runInAction, makeObservable } from 'mobx'; | ||
| import { Validatable, Validator, applyValidators } from './types'; | ||
@@ -11,3 +11,3 @@ | ||
| export class FormStateLazy<TValue extends ValidatableArray> implements Validatable<TValue> { | ||
| @computed get $() { | ||
| get $() { | ||
| return this.getFields(); | ||
@@ -18,8 +18,26 @@ } | ||
| protected getFields: () => TValue | ||
| ) { } | ||
| ) { | ||
| makeObservable<FormStateLazy<TValue>, "_error">(this, { | ||
| $: computed, | ||
| validating: observable, | ||
| validators: action, | ||
| validate: action, | ||
| enableAutoValidation: action, | ||
| disableAutoValidation: action, | ||
| _error: observable, | ||
| hasError: computed, | ||
| hasFieldError: computed, | ||
| hasFormError: computed, | ||
| clearFormError: action, | ||
| fieldError: computed, | ||
| formError: computed, | ||
| error: computed, | ||
| showFormError: computed | ||
| }); | ||
| } | ||
| @observable validating = false; | ||
| validating = false; | ||
| protected _validators: Validator<TValue>[] = []; | ||
| @action validators = (...validators: Validator<TValue>[]) => { | ||
| validators = (...validators: Validator<TValue>[]) => { | ||
| this._validators = validators; | ||
@@ -29,3 +47,3 @@ return this; | ||
| @action async validate(): Promise<{ hasError: true } | { hasError: false, value: TValue }> { | ||
| async validate(): Promise<{ hasError: true } | { hasError: false, value: TValue }> { | ||
| this.validating = true; | ||
@@ -61,6 +79,6 @@ const values = this.getFields(); | ||
| @action enableAutoValidation = () => { | ||
| enableAutoValidation = () => { | ||
| this.getFields().forEach(x => x.enableAutoValidation()); | ||
| } | ||
| @action disableAutoValidation = () => { | ||
| disableAutoValidation = () => { | ||
| this.getFields().forEach(x => x.disableAutoValidation()); | ||
@@ -70,3 +88,3 @@ } | ||
| @observable protected _error: string | null | undefined = ''; | ||
| protected _error: string | null | undefined = ''; | ||
@@ -76,3 +94,3 @@ /** | ||
| */ | ||
| @computed get hasError() { | ||
| get hasError() { | ||
| return this.hasFieldError || this.hasFormError; | ||
@@ -84,3 +102,3 @@ } | ||
| */ | ||
| @computed get hasFieldError() { | ||
| get hasFieldError() { | ||
| return this.getFields().some(f => f.hasError); | ||
@@ -92,3 +110,3 @@ } | ||
| */ | ||
| @computed get hasFormError() { | ||
| get hasFormError() { | ||
| return !!this._error; | ||
@@ -100,3 +118,3 @@ } | ||
| */ | ||
| @action clearFormError() { | ||
| clearFormError() { | ||
| this._error = ''; | ||
@@ -108,3 +126,3 @@ } | ||
| */ | ||
| @computed get fieldError() { | ||
| get fieldError() { | ||
| const subItemWithError = this.getFields().find(f => !!f.hasError); | ||
@@ -117,3 +135,3 @@ return subItemWithError ? subItemWithError.error : null; | ||
| */ | ||
| @computed get formError() { | ||
| get formError() { | ||
| return this._error; | ||
@@ -125,3 +143,3 @@ } | ||
| */ | ||
| @computed get error() { | ||
| get error() { | ||
| return this.fieldError || this.formError; | ||
@@ -133,5 +151,5 @@ } | ||
| */ | ||
| @computed get showFormError() { | ||
| get showFormError() { | ||
| return !this.hasFieldError && this.hasFormError; | ||
| } | ||
| } |
@@ -9,3 +9,3 @@ { | ||
| "outDir": "./lib", | ||
| "experimentalDecorators": true, | ||
| "useDefineForClassFields": true, | ||
| "noImplicitAny": true, | ||
@@ -12,0 +12,0 @@ "suppressImplicitAnyIndexErrors": true, |
New alerts
License Policy Violation
LicenseThis 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
LicenseThis 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
- increased by10.93%
87630
- Lines of code
- increased by13.26%
2280
No dependency changes