@zajno/common 1.2.5 → 1.3.0-beta

package/lib/viewModels/wrappers.d.ts

@@ -0,0 +1,15 @@
+import { Getter } from '../types';
+import { IValueModel } from './ValuesCollector';
+export interface ILabel<T> {
+    readonly label: T;
+}
+export declare function withLabel<T, TModel extends IValueModel<T>, TLabel = string>(model: TModel, label: Getter<TLabel>): TModel & ILabel<TLabel>;
+export declare function inject<T, TModel extends IValueModel<T>>(model: TModel, source: IValueModel<T>): TModel;
+export declare function wrap<T, TModel extends IValueModel<T>, TRes>(model: TModel, getter: (m: TModel) => TRes, setter: (v: TRes, model: TModel) => void): IValueModel<TRes>;
+declare type LabeledModel<T, TModel extends IValueModel<T>, TLabel = string> = TModel & ILabel<TLabel>;
+interface LabeledModelCtor<T, TModel extends IValueModel<T>, TLabel = string> {
+    new (label?: Getter<TLabel>, initial?: T): LabeledModel<T, TModel, TLabel>;
+}
+export declare function mixinLabel<T, TModel extends IValueModel<T>, TLabel = string>(Superclass: new (initial?: T) => TModel): LabeledModelCtor<T, TModel, TLabel>;
+export {};
+//# sourceMappingURL=wrappers.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"wrappers.d.ts","sourceRoot":"","sources":["../../src/viewModels/wrappers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD,MAAM,WAAW,MAAM,CAAC,CAAC;IACrB,QAAQ,CAAC,KAAK,EAAE,CAAC,CAAC;CACrB;AAED,wBAAgB,SAAS,CAAC,CAAC,EAAE,MAAM,SAAS,WAAW,CAAC,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC,2BAShH;AAED,wBAAgB,MAAM,CAAC,CAAC,EAAE,MAAM,SAAS,WAAW,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC,UAS7F;AAED,wBAAgB,IAAI,CAAC,CAAC,EAAE,MAAM,SAAS,WAAW,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,GAAG,WAAW,CAAC,IAAI,CAAC,CAKpK;AAED,aAAK,YAAY,CAAC,CAAC,EAAE,MAAM,SAAS,WAAW,CAAC,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,IAAI,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC;AAE/F,UAAU,gBAAgB,CAAC,CAAC,EAAE,MAAM,SAAS,WAAW,CAAC,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM;IACxE,KAAK,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,CAAC,EAAE,OAAO,CAAC,EAAE,CAAC,GAAG,YAAY,CAAC,CAAC,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;CAC9E;AAED,wBAAgB,UAAU,CAAC,CAAC,EAAE,MAAM,SAAS,WAAW,CAAC,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,UAAU,EAAE,KAAK,OAAO,CAAC,EAAE,CAAC,KAAK,MAAM,GAAG,gBAAgB,CAAC,CAAC,EAAE,MAAM,EAAE,MAAM,CAAC,CAU1J"}

package/lib/viewModels/wrappers.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mixinLabel = exports.wrap = exports.inject = exports.withLabel = void 0;
+const types_1 = require("../types");
+function withLabel(model, label) {
+    const _label = label;
+    Object.defineProperty(model, 'label', {
+        configurable: true,
+        enumerable: false,
+        get() { return types_1.Getter.getValue(_label); },
+    });
+    return model;
+}
+exports.withLabel = withLabel;
+function inject(model, source) {
+    Object.defineProperty(model, 'value', {
+        configurable: true,
+        enumerable: false,
+        get() { return source.value; },
+        set(v) { source.value = v; },
+    });
+    return model;
+}
+exports.inject = inject;
+function wrap(model, getter, setter) {
+    return {
+        get value() { return getter(model); },
+        set value(v) { setter(v, model); },
+    };
+}
+exports.wrap = wrap;
+function mixinLabel(Superclass) {
+    // @ts-ignore
+    class Sub extends Superclass {
+        constructor(label, initial) {
+            super(initial);
+            withLabel(this, label);
+        }
+    }
+    return Sub;
+}
+exports.mixinLabel = mixinLabel;
+//# sourceMappingURL=wrappers.js.map

package/lib/viewModels/wrappers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wrappers.js","sourceRoot":"","sources":["../../src/viewModels/wrappers.ts"],"names":[],"mappings":";;;AAAA,oCAAkC;AAOlC,SAAgB,SAAS,CAAoD,KAAa,EAAE,KAAqB;IAC7G,MAAM,MAAM,GAAG,KAAK,CAAC;IACrB,MAAM,CAAC,cAAc,CAAC,KAAK,EAAE,OAAO,EAAE;QAClC,YAAY,EAAE,IAAI;QAClB,UAAU,EAAE,KAAK;QACjB,GAAG,KAAK,OAAO,cAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;KAC5C,CAAC,CAAC;IAEH,OAAO,KAAgC,CAAC;AAC5C,CAAC;AATD,8BASC;AAED,SAAgB,MAAM,CAAmC,KAAa,EAAE,MAAsB;IAC1F,MAAM,CAAC,cAAc,CAAC,KAAK,EAAE,OAAO,EAAE;QAClC,YAAY,EAAE,IAAI;QAClB,UAAU,EAAE,KAAK;QACjB,GAAG,KAAK,OAAO,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;QAC9B,GAAG,CAAC,CAAI,IAAI,MAAM,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC;KAClC,CAAC,CAAC;IAEH,OAAO,KAAK,CAAC;AACjB,CAAC;AATD,wBASC;AAED,SAAgB,IAAI,CAAyC,KAAa,EAAE,MAA2B,EAAE,MAAwC;IAC7I,OAAO;QACH,IAAI,KAAK,KAAK,OAAO,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;QACrC,IAAI,KAAK,CAAC,CAAO,IAAI,MAAM,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;KAC3C,CAAC;AACN,CAAC;AALD,oBAKC;AAQD,SAAgB,UAAU,CAAoD,UAAuC;IACjH,aAAa;IACb,MAAM,GAAI,SAAQ,UAAU;QACxB,YAAY,KAAqB,EAAE,OAAW;YAC1C,KAAK,CAAC,OAAO,CAAC,CAAC;YACf,SAAS,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;QAC3B,CAAC;KACJ;IAED,OAAO,GAAU,CAAC;AACtB,CAAC;AAVD,gCAUC"}

package/package.json

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

package/src/__tests__/transitionObserver.test.ts

@@ -177,4 +177,43 @@ describe('TransitionObserver', () => {
         expect(cbE).not.toHaveBeenCalled();
         expect(cb).not.toHaveBeenCalled();
     });
+
+    it('promises 2 times', async () => {
+
+        const store = createStore<boolean>(true);
+        const cb = jest.fn();
+
+        const to = new TransitionObserver(() => store.value)
+            .to(false)
+            .cb(cb);
+
+        for (let i = 1; i <= 2; ++i) {
+            store.setValue(true);
+
+            const p = to.getPromise();
+
+            store.setValue(false);
+
+            await expect(p).resolves.toBe(false);
+            expect(cb).not.toHaveBeenCalled();
+            cb.mockReset();
+        }
+    });
+
+    it('promising – aborting', async () => {
+
+        const store = createStore<boolean>(true);
+        const cb = jest.fn();
+
+        const to = new TransitionObserver(() => store.value)
+            .to(false)
+            .cb(cb);
+
+        const p = to.getPromise();
+
+        to.dispose();
+
+        await expect(p).rejects.toThrow(/Aborted/);
+        expect(cb).not.toHaveBeenCalled();
+    });
 });

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,6 +17,9 @@ export class TransitionObserver<T> implements IDisposable {
     private _cb: (v: T) => any;
     private _fireOnce = false;
 
+    private _promise: Promise<T> = null;
+    private _promiseReject: (err?: any) => any = null;
+
     private logger: ILogger = createLogger('', true);
 
     constructor(getter?: () => T) {
@@ -28,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;
@@ -47,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;
     }
@@ -72,6 +81,33 @@ export class TransitionObserver<T> implements IDisposable {
         return this;
     }
 
+    getPromise(timeout: number = null) {
+        if (!this._promise) {
+            if (!this.isObserving) {
+                return Promise.reject(new Error('Cannot get promise for disposed TransitionObserver'));
+            }
+
+            this._promise = new Promise<T>((resolve, reject) => {
+                this._promiseReject = reject;
+
+                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;
+    }
+
     reverse() {
         return new TransitionObserver<T>(this._getter)
             .from(this._to)
@@ -87,6 +123,10 @@ export class TransitionObserver<T> implements IDisposable {
         this.logger.log(' disposing... ');
         if (this._disposer) {
             this._disposer();
+            this._disposer = null;
+        }
+        if (this.isPromising) {
+            this._finishPromise(this._promiseReject, new Error('TransitionObserver Aborted'));
         }
     };
 
@@ -124,4 +164,13 @@ export class TransitionObserver<T> implements IDisposable {
 
         return trigger;
     };
+
+    private _finishPromise<T>(cb: (a?: T) => any, arg?: T) {
+        this._promise = null;
+        this._promiseReject = null;
+        this._cb = null;
+        if (cb) {
+            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/PromptModalViewModel.ts

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