@zajno/common 1.2.7 → 1.3.1

package/src/transitionObserver.ts

@@ -81,7 +81,7 @@ export class TransitionObserver<T> implements IDisposable {
         return this;
     }
 
-    getPromise() {
+    getPromise(timeout: number = null) {
         if (!this._promise) {
             if (!this.isObserving) {
                 return Promise.reject(new Error('Cannot get promise for disposed TransitionObserver'));
@@ -89,7 +89,19 @@ export class TransitionObserver<T> implements IDisposable {
 
             this._promise = new Promise<T>((resolve, reject) => {
                 this._promiseReject = reject;
-                this._cb = (v => this._finishPromise(resolve, v));
+
+                let timeoutHandle: any = null;
+                if (timeout) {
+                    timeoutHandle = setTimeout(() => {
+                        this._finishPromise(this._promiseReject, new Error(`TransitionObserver Aborted – timed out after ${timeout}ms`));
+                    }, timeout);
+                }
+
+                this._cb = (v => {
+                    clearTimeout(timeoutHandle);
+                    this._finishPromise(resolve, v);
+                });
+                this.forceCheck();
             });
             this.logger.log('started a new promise...');
         }

package/src/types.ts

@@ -3,3 +3,19 @@ export { DeepPartial } from './deepPartial';
 export type DeepReadonly<T> = {
     readonly [P in keyof T]: DeepReadonly<T[P]>;
 };
+
+export type Getter<T> = (() => T) | T | null;
+
+export namespace Getter {
+    export function getValue<T>(getter: Getter<T>): T {
+        if (getter == null) {
+            return null;
+        }
+        if (typeof getter === 'function') {
+            return (getter as () => T)();
+        }
+        return getter;
+    }
+}
+
+export type Predicate<T> = (value: T) => boolean;

package/src/viewModels/FlagModel.ts

@@ -0,0 +1,43 @@
+import { action, makeObservable, observable } from 'mobx';
+import { ILabel } from './wrappers';
+import { IValueModel } from './ValuesCollector';
+
+export interface IFlagModel extends IValueModel<boolean> {
+    toggle(): void;
+    reset(): void;
+}
+
+export type IFlagModelReadonly = {
+    readonly value: boolean;
+};
+
+export type ILabeledFlagModel = IFlagModel & ILabel<string>;
+
+export class FlagModel implements IFlagModel, IFlagModelReadonly {
+
+    @observable
+    private _value: boolean = false;
+
+    constructor(initial = false) {
+        makeObservable(this);
+        this._value = initial;
+    }
+
+    get value() {
+        return this._value;
+    }
+
+    set value(value: boolean) {
+        this._value = value;
+    }
+
+    @action
+    toggle = () => {
+        this._value = !this._value;
+    };
+
+    @action
+    reset = () => {
+        this._value = false;
+    };
+}

package/src/viewModels/MultiSelectModel.ts

@@ -0,0 +1,154 @@
+import { createLazy } from '../lazy.light';
+import { action, computed, makeObservable, observable, reaction } from 'mobx';
+import { FlagModel, ILabeledFlagModel } from './FlagModel';
+import { ValidatableModel } from './Validatable';
+import { IValueModel } from './ValuesCollector';
+import { withLabel } from './wrappers';
+
+export class MultiSelect<T = any> extends ValidatableModel<ReadonlyArray<T>> implements IValueModel<readonly string[]> {
+
+    @observable
+    private readonly _indexes = new Set<number>();
+
+    public readonly opened = new FlagModel();
+    private readonly _initial: number[] = null;
+
+    private readonly _flags = createLazy(() => this.createFlags());
+    private _indexesLocked = false;
+
+    constructor(
+        private readonly _items: readonly T[],
+        private readonly _accessor: (item: T) => string,
+        ...selected: number[]
+    ) {
+        super();
+        makeObservable(this);
+        this._initial = selected;
+        this.setInitialIndexes();
+    }
+
+    @computed
+    get selectedIndexes(): ReadonlyArray<number> { return Array.from(this._indexes); }
+
+    get items(): ReadonlyArray<T> { return this._items; }
+
+    get flags() { return this._flags.value; }
+
+    @computed
+    get values(): ReadonlyArray<string> {
+        return this._items.map(i => this._accessor(i));
+    }
+
+    @computed
+    get selectedItems(): ReadonlyArray<T> {
+        return this.selectedIndexes.map(i => this._items[i]);
+    }
+
+    @computed
+    get selectedValues(): ReadonlyArray<string> {
+        const values = this.values;
+        return this.selectedIndexes.map(i => values[i]);
+    }
+
+    get value() { return this.selectedValues; }
+    set value(v: readonly string[]) { this.selectValues(v); }
+
+    isIndexSelected(index: number) { return this._indexes.has(index); }
+    isValueSelected(value: string) { return this.values.includes(value); }
+
+    get isEmpty() { return this._indexes.size === 0; }
+
+    protected get valueToValidate() { return this.selectedItems; }
+
+    setItemSelected = (item: T, selected: boolean) => {
+        const i = this.items.indexOf(item);
+        if (i >= 0) {
+            this.setIndexSelected(i, selected);
+        }
+    };
+
+    selectItem = (item: T) => this.setItemSelected(item, true);
+    deSelectItem = (item: T) => this.setItemSelected(item, false);
+
+    @action
+    selectItems = (items: readonly T[]) => {
+        items.forEach(this.selectItem);
+    };
+
+    setValueSelected = (value: string, selected: boolean) => {
+        const i = this.values.indexOf(value);
+        if (i >= 0) {
+            this.setIndexSelected(i, selected);
+        }
+    };
+
+    selectValue = (value: string) => this.setValueSelected(value, true);
+    deSelectValue = (value: string) => this.setValueSelected(value, false);
+
+    @action
+    selectValues = (values: readonly string[]) => {
+        values.forEach(this.selectValue);
+    };
+
+    @action
+    setIndexSelected = (index: number, selected: boolean) => {
+        if (this._indexesLocked) {
+            return;
+        }
+
+        if (selected) {
+            this._indexes.add(index);
+        } else {
+            this._indexes.delete(index);
+        }
+
+        if (!this._flags.hasValue) {
+            return;
+        }
+
+        try {
+            this._indexesLocked = true;
+            this._flags.value[index].value = selected;
+        } finally {
+            this._indexesLocked = false;
+        }
+    };
+
+    reset = () => {
+        super.reset();
+        this.setInitialIndexes();
+    };
+
+    private setInitialIndexes() {
+        this._indexes.clear();
+        this._initial.forEach(i => this._indexes.add(i));
+
+        if (this._flags.hasValue) {
+            this._flags.value.forEach((flag, index) => flag.value = this._indexes.has(index));
+        }
+    }
+
+    private createFlags() {
+        const flags: ReadonlyArray<ILabeledFlagModel> = this._items
+            .map((item, index) => {
+                const flag = withLabel(
+                    new FlagModel(this._indexes.has(index)),
+                    () => this._accessor(item),
+                );
+
+                // react on every flag is changed directly
+                reaction(() => flag.value, isSelected => {
+                    this.setIndexSelected(index, isSelected);
+                });
+                return flag;
+            });
+        return flags;
+    }
+}
+
+export class MultiSelectString<T extends string = string> extends MultiSelect<T> {
+
+    constructor(items: ReadonlyArray<T>, ...selected: number[]) {
+        super(items, v => v, ...selected);
+    }
+}

package/src/viewModels/NumberModel.ts

@@ -0,0 +1,36 @@
+import { action, makeObservable, observable } from 'mobx';
+import { IValueModel } from './ValuesCollector';
+
+export interface INumberModel {
+    value: number;
+}
+
+export class NumberModel implements INumberModel, IValueModel<number> {
+
+    @observable
+    private _value: number = 0;
+
+    private _initial: number = 0;
+
+    constructor(initial: number = 0) {
+        makeObservable(this);
+        this._initial = initial;
+        this._value = this._initial;
+    }
+
+    get value() { return this._value; }
+    set value(v: number) { this._value = v; }
+
+    @action
+    reset = () => {
+        this._value = this._initial;
+    };
+
+    @action
+    increment = (d = 1) => this.value += d;
+
+    @action
+    decrement = (d = 1) => this.value -= d;
+}
+
+export default NumberModel;

package/src/viewModels/PromptModal.ts

@@ -0,0 +1,65 @@
+import { observable, makeObservable, action } from 'mobx';
+import { FlagModel } from './FlagModel';
+
+export type BaseModalAction = {
+    title?: string;
+    message?: string;
+};
+
+export class ModalActionModel<T extends BaseModalAction = BaseModalAction> {
+    public readonly isActive = new FlagModel();
+
+    @observable.ref
+    private _currentAction: T = null;
+
+    constructor() {
+        makeObservable(this);
+    }
+
+    get currentAction() { return this._currentAction; }
+
+    @action
+    public openModal = (action: T) => {
+        this._currentAction = action;
+        this.isActive.value = true;
+    };
+
+    @action
+    public closeModal = () => {
+        this.isActive.value = false;
+        this._currentAction = null;
+    };
+
+    protected runAction = async (cb: () => Promise<void> | void, close = true, awaitAction = false) => {
+        if (cb) {
+            const promise = cb();
+            if (awaitAction) {
+                await promise;
+            }
+        }
+
+        if (close) {
+            this.closeModal();
+        }
+    };
+}
+
+export type PromptModalAction = BaseModalAction & {
+    confirmText?: string;
+    rejectText?: string;
+    onConfirm?: () => Promise<void> | void;
+    onReject?: () => Promise<void> | void;
+    awaitActions?: boolean;
+    modalImage?: any;
+    confirmColor?: string;
+    rejectColor?: string;
+};
+
+export class PromptModalViewModel extends ModalActionModel<PromptModalAction> {
+    get confirmColor() { return this.currentAction.confirmColor; }
+
+    get rejectColor() { return this.currentAction.rejectColor; }
+
+    onConfirm = () => this.runAction(this.currentAction.onConfirm, true, this.currentAction.awaitActions);
+    onReject = () => this.runAction(this.currentAction.onConfirm, true, this.currentAction.awaitActions);
+}

package/src/viewModels/SelectModel.ts

@@ -0,0 +1,125 @@
+import { createLazy } from '../lazy.light';
+import { observable, computed, makeObservable, reaction } from 'mobx';
+import { FlagModel, ILabeledFlagModel } from './FlagModel';
+import { ValidatableModel } from './Validatable';
+import { IValueModel } from './ValuesCollector';
+import { withLabel } from './wrappers';
+
+export class Select<T = any> extends ValidatableModel<T> implements IValueModel<string> {
+    @observable
+    private _index: number = undefined;
+
+    public readonly opened = new FlagModel();
+    private _indexLocked = false;
+    private _initialIndex: number = null;
+
+    private readonly _flags = createLazy(() => this.createFlags());
+
+    constructor(
+        private readonly _items: readonly T[],
+        private readonly _accessor: (item: T) => string,
+        initialIndex: number = 0,
+    ) {
+        super();
+        makeObservable(this);
+
+        this._initialIndex = initialIndex;
+        this._index = initialIndex;
+    }
+
+    protected get valueToValidate() { return this.selectedItem; }
+
+    @computed
+    get values(): readonly string[] {
+        return this._items.map(i => this._accessor(i));
+    }
+
+    get flags() {
+        return this._flags.value;
+    }
+
+    get items() {
+        return this._items;
+    }
+
+    get value() { return this.selectedValue; }
+    get selectedValue() {
+        const vs = this.values;
+        return vs.length ? vs[this._index] : null;
+    }
+
+    set value(v: string) { this.selectedValue = v; }
+    set selectedValue(value: string) {
+        const index = this.values.indexOf(value);
+        if (index >= 0) {
+            this.index = index;
+        }
+    }
+
+    get selectedItem(): T {
+        return this._items.length ? this._items[this._index] : null;
+    }
+
+    set selectedItem(item: T) {
+        const index = this._items.indexOf(item);
+        if (index >= 0) {
+            this.index = index;
+        }
+    }
+
+    get index() {
+        return this._index;
+    }
+
+    set index(val: number) {
+        if (this._indexLocked) {
+            return;
+        }
+
+        this._index = val;
+
+        // update all flags to be properly selected
+        try {
+            this._indexLocked = true;
+
+            if (this._flags.hasValue) {
+                this._flags.value.forEach((f, i) => f.value = (i === this._index));
+            }
+        } finally {
+            this._indexLocked = false;
+        }
+    }
+
+    reset = () => {
+        super.reset();
+        this.index = this._initialIndex;
+    };
+
+    private createFlags() {
+        const flags: ReadonlyArray<ILabeledFlagModel> = this._items
+            .map((item, index) => {
+                const flag: ILabeledFlagModel = withLabel(
+                    new FlagModel(index === this.index),
+                    () => this._accessor(item),
+                );
+
+                // react on every flag is changed directly
+                reaction(() => flag.value, isSelected => {
+                    if (isSelected) {
+                        this.index = index;
+                    }
+                });
+
+                return flag;
+            });
+
+        return flags;
+    }
+}
+
+
+export class SelectString<T extends string = string> extends Select<T> {
+    constructor(items: readonly T[], initialIndex: number = 0) {
+        super(items, v => v, initialIndex);
+    }
+}

package/src/viewModels/{TextInputViewModel.ts → TextModel.ts}

@@ -1,40 +1,37 @@
-import { observable, autorun, computed, action, makeObservable } from 'mobx';
+import { observable, computed, makeObservable, reaction } from 'mobx';
+import { Getter } from '../types';
 import logger from '../logger';
-import { ValidatableViewModel, ValidationConfig } from './Validatable';
-
-export type StringGetter = (() => string) | string;
+import { ValidatableModel, ValidationConfig } from './Validatable';
+import { IValueModel } from './ValuesCollector';
 
 export type TextInputConfig = {
-    name?: StringGetter;
-    title?: StringGetter;
-    value?: StringGetter;
+    name?: Getter<string>;
+    title?: Getter<string>;
+    value?: Getter<string>;
     async?: boolean;
 
-    validation?: ValidationConfig;
+    validation?: ValidationConfig<string>;
     noSubscribe?: boolean;
 };
 
-function FromGetter(getter: StringGetter, setter: (val: string) => void, autorunDelay: number = null, noAutorun: boolean = null) {
-    if (typeof getter === 'function') {
-        if (noAutorun) {
-            setter(getter());
-        } else {
-            autorun(() => {
-                setter(getter());
-            }, { delay: autorunDelay });
-            return true;
-        }
-    } else if (typeof getter === 'string') {
-        setter(getter);
+function FromGetter(getter: Getter<string>, setter: (val: string) => void, autorunDelay: number = null, noAutorun: boolean = null) {
+    if (noAutorun || typeof getter !== 'function') {
+        setter(Getter.getValue(getter));
+        return null;
     }
-    return false;
+
+    return reaction(
+        () => Getter.getValue(getter),
+        setter,
+        { delay: autorunDelay, fireImmediately: true },
+    );
 }
 
 export class Text {
     @observable
     private _value: string = null;
 
-    constructor(config: { value: StringGetter, async?: boolean, noSubscribe?: boolean }) {
+    constructor(config: { value: Getter<string>, async?: boolean, noSubscribe?: boolean }) {
         makeObservable(this);
         FromGetter(config.value, val => this._value = val, config.async ? 100 : null, config.noSubscribe);
     }
@@ -42,7 +39,7 @@ export class Text {
     get value() { return this._value; }
 }
 
-export class TextInputVM extends ValidatableViewModel {
+export class TextInputVM extends ValidatableModel implements IValueModel<string> {
     @observable
     private _value = '';
 
@@ -55,7 +52,7 @@ export class TextInputVM extends ValidatableViewModel {
     @observable
     private _title: string = null;
 
-    private readonly _valueObserving: boolean = null;
+    private readonly _valueObserving: () => void = null;
 
     constructor(config?: TextInputConfig) {
         super(config && config.validation);
@@ -100,13 +97,12 @@ export class TextInputVM extends ValidatableViewModel {
         super.reset();
     }
 
-    protected get valueToValidate() { return this.value; }
+    protected get valueToValidate() { return (this.value ?? '').trim(); }
 
     private onBlur() {
         this.validate();
     }
 
-    @action
     reset() {
         this._value = '';
         this._focused = false;

package/src/viewModels/Validatable.ts

@@ -1,15 +1,19 @@
-import { observable, makeObservable } from 'mobx';
+import { observable, makeObservable, action } from 'mobx';
 import { ValidatorFunction, ValidatorFunctionAsync, ValidationErrors, ValidationError } from '../validation';
 import { someAsync } from '../async/arrays';
 
-export type ValueValidator = ValidatorFunction | ValidatorFunctionAsync;
+export type ValueValidator<T> = ValidatorFunction<T> | ValidatorFunctionAsync<T>;
 export type ValidationErrorsStrings = { [code: number]: string };
 
-export type ValidationConfig = { validator: ValueValidator, errors: ValidationErrorsStrings };
+export type ValidationConfig<T> = {
+    validator: ValueValidator<Readonly<T>>,
+    errors: ValidationErrorsStrings,
+};
 
-export abstract class ValidatableViewModel {
+const EmptyValidator = () => ValidationErrors.None;
+export abstract class ValidatableModel<T = string> {
 
-    private _validator: ValueValidator = null;
+    private _validator: ValueValidator<Readonly<T>> = null;
     private _strings: ValidationErrorsStrings = null;
 
     @observable
@@ -17,25 +21,30 @@ export abstract class ValidatableViewModel {
 
     private _validationError: ValidationError = null;
 
-    constructor(config?: ValidationConfig) {
+    constructor(config?: ValidationConfig<T>) {
         makeObservable(this);
-        this._validator = (config && config.validator) || (() => ValidationErrors.None);
-        this._strings = config && config.errors;
+        this.setValidationConfig(config);
     }
 
-    protected abstract get valueToValidate(): string;
+    protected abstract get valueToValidate(): Readonly<T>;
 
     get isValid() { return !this._error; }
 
     get error() { return this._error; }
 
+    public setValidationConfig(config?: ValidationConfig<T>) {
+        this._validator = config?.validator || EmptyValidator;
+        this._strings = config?.errors;
+        return this;
+    }
+
     async validate() {
         if (!this._validator) {
             return true;
         }
 
         try {
-            const valid = await this._validator((this.valueToValidate ?? '').trim());
+            const valid = await this._validator(this.valueToValidate);
             this._validationError = valid === ValidationErrors.None
                 ? null
                 : new ValidationError('Unknown error', valid);
@@ -52,12 +61,18 @@ export abstract class ValidatableViewModel {
         return this._validationError == null;
     }
 
+    async getIsInvalid() {
+        const valid = await this.validate();
+        return !valid;
+    }
+
+    @action
     reset() {
         this._validationError = null;
         this._error = null;
     }
 
-    static async IsSomeInvalid(validatables: ValidatableViewModel[], stopOnFail = true) {
+    static async IsSomeInvalid(validatables: ReadonlyArray<Readonly<ValidatableModel>>, stopOnFail = true) {
         if (stopOnFail) {
             return someAsync(validatables, async v => !(await v.validate()));
         }