@zajno/common 1.3.15 → 1.4.2

package/src/viewModels/SelectModel.ts

@@ -1,5 +1,5 @@
 import { createLazy } from '../lazy.light';
-import { observable, computed, makeObservable, reaction } from 'mobx';
+import { observable, computed, makeObservable, reaction, action } from 'mobx';
 import { FlagModel, ILabeledFlagModel } from './FlagModel';
 import { ValidatableModel } from './Validatable';
 import { IValueModel } from './types';
@@ -75,12 +75,21 @@ export class Select<T = any> extends ValidatableModel<T> implements IValueModel<
     }
 
     set index(val: number) {
+       this.setIndex(val);
+    }
+
+    @action
+    public setIndex = (val: number) => {
         if (this._indexLocked) {
             return;
         }
 
         this._index = val;
 
+        if (this._validateOnChange) {
+            this.validate();
+        }
+
         // update all flags to be properly selected
         try {
             this._indexLocked = true;
@@ -91,7 +100,7 @@ export class Select<T = any> extends ValidatableModel<T> implements IValueModel<
         } finally {
             this._indexLocked = false;
         }
-    }
+    };
 
     reset = () => {
         super.reset();

package/src/viewModels/TextModel.ts

@@ -1,4 +1,4 @@
-import { observable, computed, makeObservable, reaction } from 'mobx';
+import { observable, makeObservable, reaction, action } from 'mobx';
 import { Getter } from '../types';
 import { IValueModel } from './types';
 import logger from '../logger';
@@ -46,10 +46,7 @@ export class TextInputVM extends ValidatableModel<string> implements IValueModel
     @observable
     private _focused = false;
 
-    @observable
     private _name: string = null;
-
-    @observable
     private _title: string = null;
 
     private readonly _valueObserving: () => void = null;
@@ -71,14 +68,22 @@ export class TextInputVM extends ValidatableModel<string> implements IValueModel
     get title() { return this._title; }
 
     set value(val) {
+        this.setValue(val);
+    }
+
+    @action
+    public readonly setValue = (value: string) => {
         if (!this._valueObserving) {
-            this._value = val;
+            this._value = value;
+
+            if (this._validateOnChange) {
+                this.validate();
+            }
         } else {
             logger.warn('[TextInputViewModel] Setting value is not allowed when value is observing');
         }
-    }
+    };
 
-    @computed
     get isEmpty() {
         return !this._value;
     }
@@ -87,15 +92,20 @@ export class TextInputVM extends ValidatableModel<string> implements IValueModel
         return this._focused;
     }
 
-    set focused(val) {
-        this._focused = val;
-        if (!val) {
+    set focused(val: boolean) {
+        this.setFocused(val);
+    }
+
+    @action
+    public readonly setFocused = (value = true) => {
+        this._focused = value;
+        if (!value) {
             this.onBlur();
             return;
         }
 
         super.reset();
-    }
+    };
 
     protected get valueToValidate() { return (this.value ?? '').trim(); }
 

package/src/viewModels/Validatable.ts

@@ -1,9 +1,9 @@
-import { observable, makeObservable, action } from 'mobx';
+import { observable, makeObservable, action, runInAction } from 'mobx';
 import { ValidatorFunction, ValidatorFunctionAsync, ValidationErrors, ValidationError } from '../validation';
 import { someAsync } from '../async/arrays';
 
 export type ValueValidator<T, TErrors = ValidationErrors> = ValidatorFunction<T, TErrors> | ValidatorFunctionAsync<T, TErrors>;
-export type ValidationErrorsStrings<TErrors extends string | number = number> = Record<TErrors, string>;
+export type ValidationErrorsStrings<TErrors extends string | number = number> = Partial<Omit<Record<TErrors, string>, 0 | null>>;
 
 export type ValidationConfig<T, TErrors extends string | number = ValidationErrors> = {
     validator: ValueValidator<Readonly<T>, TErrors>,
@@ -21,6 +21,7 @@ export abstract class ValidatableModel<T = string> {
     private _error: string = null;
 
     private _validationError: ValidationError = null;
+    protected _validateOnChange = false;
 
     constructor() {
         makeObservable(this);
@@ -38,6 +39,11 @@ export abstract class ValidatableModel<T = string> {
         return this;
     }
 
+    public validateOnChange(enable = true) {
+        this._validateOnChange = enable;
+        return this;
+    }
+
     public async testValidate(value: T) {
         if (this._validator) {
             const res = await this._validator(value);
@@ -60,12 +66,14 @@ export abstract class ValidatableModel<T = string> {
             this._validationError = err as ValidationError;
         }
 
-        if (!this._validationError) {
-            this._error = null;
-        } else {
-            const code = this._validationError.code;
-            this._error = this._strings && this._strings[code];
-        }
+        runInAction(() => {
+            if (!this._validationError) {
+                this._error = null;
+            } else {
+                const code = this._validationError.code;
+                this._error = this._strings && this._strings[code];
+            }
+        });
         return this._validationError == null;
     }
 

package/src/viewModels/index.ts

@@ -1,5 +1,6 @@
 export * from './types';
 export * from './Validatable';
+export * from './CommonModel';
 export * from './TextModel';
 export * from './FlagModel';
 export * from './NumberModel';