@zajno/common 1.2.6 → 1.3.0

package/src/__tests__/transitionObserver.test.ts

@@ -178,7 +178,7 @@ describe('TransitionObserver', () => {
         expect(cb).not.toHaveBeenCalled();
     });
 
-    it('promising', async () => {
+    it('promises 2 times', async () => {
 
         const store = createStore<boolean>(true);
         const cb = jest.fn();
@@ -187,12 +187,17 @@ describe('TransitionObserver', () => {
             .to(false)
             .cb(cb);
 
-        const p = to.getPromise();
+        for (let i = 1; i <= 2; ++i) {
+            store.setValue(true);
 
-        store.setValue(false);
+            const p = to.getPromise();
 
-        await expect(p).resolves.toBeUndefined();
-        expect(cb).not.toHaveBeenCalled();
+            store.setValue(false);
+
+            await expect(p).resolves.toBe(false);
+            expect(cb).not.toHaveBeenCalled();
+            cb.mockReset();
+        }
     });
 
     it('promising – aborting', async () => {

package/src/timeHelper.ts

@@ -1,5 +1,6 @@
 import { observable, makeObservable } from 'mobx';
 
+/** @deprecated */
 export function formatMS(ms: number): string {
     if (!ms && ms !== 0) {
         return '';
@@ -12,6 +13,7 @@ export function formatMS(ms: number): string {
     return `${hours ? hours + ':' : ''}${min < 10 ? '0' + min : min}:${sec < 10 ? '0' + sec : sec}`;
 }
 
+/** @deprecated */
 export function formatTime(n: number): string {
     if (n < 10) {
         return '0' + n;
@@ -20,6 +22,7 @@ export function formatTime(n: number): string {
     return n.toString();
 }
 
+/** @deprecated */
 export function secToFormattedMin(totalSec: number): string {
     const sec = Math.round(totalSec) % 60;
     const min = Math.floor((totalSec + 1) / 60);

package/src/transitionObserver.ts

@@ -17,8 +17,8 @@ export class TransitionObserver<T> implements IDisposable {
     private _cb: (v: T) => any;
     private _fireOnce = false;
 
-    private _promise: Promise<void> = null;
-    private _promiseReject: (err: Error) => any = null;
+    private _promise: Promise<T> = null;
+    private _promiseReject: (err?: any) => any = null;
 
     private logger: ILogger = createLogger('', true);
 
@@ -31,6 +31,9 @@ export class TransitionObserver<T> implements IDisposable {
     public get event(): IEvent<T> { return this._event; }
     public get currentValue() { return this._prev; }
 
+    public get isObserving() { return this._disposer != null; }
+    private get isPromising() { return this._promiseReject != null; }
+
     observe(getter: () => T) {
         this.dispose();
         this._getter = getter;
@@ -50,6 +53,9 @@ export class TransitionObserver<T> implements IDisposable {
     }
 
     cb(cb: (v: T) => any) {
+        if (this.isPromising) {
+            throw new Error('Cannot set callback when promise is running');
+        }
         this._cb = cb;
         return this;
     }
@@ -75,12 +81,29 @@ export class TransitionObserver<T> implements IDisposable {
         return this;
     }
 
-    getPromise() {
+    getPromise(timeout: number = null) {
         if (!this._promise) {
-            this._promise = new Promise<void>((resolve, reject) => {
+            if (!this.isObserving) {
+                return Promise.reject(new Error('Cannot get promise for disposed TransitionObserver'));
+            }
+
+            this._promise = new Promise<T>((resolve, reject) => {
                 this._promiseReject = reject;
-                this.cb(() => this._finishPromise(resolve));
+
+                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...');
         }
         return this._promise;
     }
@@ -100,8 +123,9 @@ export class TransitionObserver<T> implements IDisposable {
         this.logger.log(' disposing... ');
         if (this._disposer) {
             this._disposer();
+            this._disposer = null;
         }
-        if (this._promiseReject) {
+        if (this.isPromising) {
             this._finishPromise(this._promiseReject, new Error('TransitionObserver Aborted'));
         }
     };
@@ -141,12 +165,12 @@ export class TransitionObserver<T> implements IDisposable {
         return trigger;
     };
 
-    private _finishPromise(cb: (e?: any) => any, err?: Error) {
+    private _finishPromise<T>(cb: (a?: T) => any, arg?: T) {
         this._promise = null;
         this._promiseReject = null;
         this._cb = null;
         if (cb) {
-            cb(err);
+            cb(arg);
         }
     }
 }

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,150 @@
+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 _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));
+    }
+
+    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;