@zajno/common 1.3.14 → 1.4.1

package/lib/viewModels/index.d.ts

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

package/lib/viewModels/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/viewModels/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAE3B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AAEnC,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/viewModels/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAE3B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AAEnC,cAAc,eAAe,CAAC"}

package/lib/viewModels/index.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./types"), exports);
 tslib_1.__exportStar(require("./Validatable"), exports);
+tslib_1.__exportStar(require("./CommonModel"), exports);
 tslib_1.__exportStar(require("./TextModel"), exports);
 tslib_1.__exportStar(require("./FlagModel"), exports);
 tslib_1.__exportStar(require("./NumberModel"), exports);

package/lib/viewModels/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/viewModels/index.ts"],"names":[],"mappings":";;;AAAA,kDAAwB;AACxB,wDAA8B;AAC9B,sDAA4B;AAC5B,sDAA4B;AAC5B,wDAA8B;AAC9B,qDAA2B;AAE3B,wDAA8B;AAC9B,6DAAmC;AAEnC,wDAA8B"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/viewModels/index.ts"],"names":[],"mappings":";;;AAAA,kDAAwB;AACxB,wDAA8B;AAC9B,wDAA8B;AAC9B,sDAA4B;AAC5B,sDAA4B;AAC5B,wDAA8B;AAC9B,qDAA2B;AAE3B,wDAA8B;AAC9B,6DAAmC;AAEnC,wDAA8B"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zajno/common",
-  "version": "1.3.14",
+  "version": "1.4.1",
   "description": "Zajno's re-usable utilities for JS/TS projects",
   "repository": {
     "type": "git",

package/src/validation/types.ts

@@ -1,14 +1,14 @@
 import { ValidationErrors } from './ValidationErrors';
 
-export type ValidatorFunction<T = string> = (val: T) => ValidationErrors;
-export type ValidatorFunctionAsync<T = string> = (val: T) => Promise<ValidationErrors>;
+export type ValidatorFunction<T = string, TErrors = ValidationErrors> = (val: T) => TErrors;
+export type ValidatorFunctionAsync<T = string, TErrors = ValidationErrors> = (val: T) => Promise<TErrors>;
 
 export type WrapperFunction = (val: ValidatorFunction) => ValidatorFunction;
 
-export class ValidationError extends Error {
-    readonly code: ValidationErrors = null;
+export class ValidationError<TErrors = ValidationErrors> extends Error {
+    readonly code: TErrors = null;
 
-    constructor(message: string, code: ValidationErrors) {
+    constructor(message: string, code: TErrors) {
         super(message);
         this.code = code;
     }

package/src/viewModels/CommonModel.ts

@@ -0,0 +1,40 @@
+import { action, makeObservable, observable } from 'mobx';
+import { ValidatableModel } from './Validatable';
+
+export class CommonModel<T = any> extends ValidatableModel<T> {
+
+    @observable.ref
+    private _value: T = null;
+
+    private _defaultValue: T = null;
+
+    constructor(v: T = null) {
+        super();
+        makeObservable(this);
+        this._value = v;
+        this._defaultValue = v;
+    }
+
+    protected get valueToValidate(): Readonly<T> {
+        return this._value;
+    }
+
+    public get value() { return this._value; }
+    public set value(v: T) {
+        this.setValue(v);
+    }
+
+    @action
+    public readonly setValue = (value: T) => {
+        this._value = value;
+
+        if (this._validateOnChange) {
+            this.validate();
+        }
+    };
+
+    reset = () => {
+        super.reset();
+        this.value = this._defaultValue;
+    };
+}

package/src/viewModels/FlagModel.ts

@@ -27,9 +27,14 @@ export class FlagModel implements IFlagModel, IFlagModelReadonly {
     }
 
     set value(value: boolean) {
-        this._value = value;
+        this.setValue(value);
     }
 
+    @action
+    public readonly setValue = (value: boolean) => {
+        this._value = value;
+    };
+
     get isDefault() { return this._value === false; }
 
     @action

package/src/viewModels/MultiSelectModel.ts

@@ -109,6 +109,10 @@ export class MultiSelect<T = any> extends ValidatableModel<ReadonlyArray<T>> imp
             this._indexes.delete(index);
         }
 
+        if (this._validateOnChange) {
+            this.validate();
+        }
+
         if (!this._flags.hasValue) {
             return;
         }

package/src/viewModels/NumberModel.ts

@@ -20,7 +20,12 @@ export class NumberModel implements INumberModel, IValueModel<number> {
     }
 
     get value() { return this._value; }
-    set value(v: number) { this._value = v; }
+    set value(v: number) { this.setValue(v); }
+
+    @action
+    public readonly setValue = (v: number) => {
+        this._value = v;
+    };
 
     get isDefault() { return this._value === this._initial; }
 

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,8 +1,8 @@
-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';
-import { ValidatableModel, ValidationConfig } from './Validatable';
+import { ValidatableModel } from './Validatable';
 import { IResetableModel } from 'viewModels';
 
 export type TextInputConfig = {
@@ -11,7 +11,6 @@ export type TextInputConfig = {
     value?: Getter<string>;
     async?: boolean;
 
-    validation?: ValidationConfig<string>;
     noSubscribe?: boolean;
 };
 
@@ -40,23 +39,20 @@ export class Text {
     get value() { return this._value; }
 }
 
-export class TextInputVM extends ValidatableModel implements IValueModel<string>, IResetableModel {
+export class TextInputVM extends ValidatableModel<string> implements IValueModel<string>, IResetableModel {
     @observable
     private _value = '';
 
     @observable
     private _focused = false;
 
-    @observable
     private _name: string = null;
-
-    @observable
     private _title: string = null;
 
     private readonly _valueObserving: () => void = null;
 
     constructor(config?: TextInputConfig) {
-        super(config && config.validation);
+        super();
         makeObservable(this);
         config = config || {};
 
@@ -72,14 +68,22 @@ export class TextInputVM extends ValidatableModel implements IValueModel<string>
     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;
     }
@@ -88,15 +92,20 @@ export class TextInputVM extends ValidatableModel implements IValueModel<string>
         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,29 +1,30 @@
-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> = ValidatorFunction<T> | ValidatorFunctionAsync<T>;
-export type ValidationErrorsStrings = { [code: number]: string };
+export type ValueValidator<T, TErrors = ValidationErrors> = ValidatorFunction<T, TErrors> | ValidatorFunctionAsync<T, TErrors>;
+export type ValidationErrorsStrings<TErrors extends string | number = number> = Partial<Omit<Record<TErrors, string>, 0 | null>>;
 
-export type ValidationConfig<T> = {
-    validator: ValueValidator<Readonly<T>>,
-    errors: ValidationErrorsStrings,
+export type ValidationConfig<T, TErrors extends string | number = ValidationErrors> = {
+    validator: ValueValidator<Readonly<T>, TErrors>,
+    errors: ValidationErrorsStrings<TErrors>,
 };
 
-const EmptyValidator = () => ValidationErrors.None;
+const EmptyValidator = () => 0;
+
 export abstract class ValidatableModel<T = string> {
 
-    private _validator: ValueValidator<Readonly<T>> = null;
-    private _strings: ValidationErrorsStrings = null;
+    private _validator: ValueValidator<Readonly<T>, any> = null;
+    private _strings: ValidationErrorsStrings<any> = null;
 
     @observable
     private _error: string = null;
 
     private _validationError: ValidationError = null;
+    protected _validateOnChange = false;
 
-    constructor(config?: ValidationConfig<T>) {
+    constructor() {
         makeObservable(this);
-        this.setValidationConfig(config);
     }
 
     protected abstract get valueToValidate(): Readonly<T>;
@@ -32,12 +33,17 @@ export abstract class ValidatableModel<T = string> {
 
     get error() { return this._error; }
 
-    public setValidationConfig(config?: ValidationConfig<T>) {
+    public setValidationConfig<TErrors extends string | number = ValidationErrors>(config?: ValidationConfig<T, TErrors>) {
         this._validator = config?.validator || EmptyValidator;
         this._strings = config?.errors;
         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);
@@ -52,20 +58,22 @@ export abstract class ValidatableModel<T = string> {
         }
 
         try {
-            const valid = await this._validator(this.valueToValidate);
-            this._validationError = valid === ValidationErrors.None
+            const validationResult = await this._validator(this.valueToValidate);
+            this._validationError = !validationResult
                 ? null
-                : new ValidationError('Unknown error', valid);
+                : new ValidationError('Unknown error', validationResult);
         } catch (err) {
             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';