@zajno/common 1.2.5 → 1.3.0-beta

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, action, 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,7 +97,7 @@ export class TextInputVM extends ValidatableViewModel {
         super.reset();
     }
 
-    protected get valueToValidate() { return this.value; }
+    protected get valueToValidate() { return (this.value ?? '').trim(); }
 
     private onBlur() {
         this.validate();

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()));
         }

package/src/viewModels/ValuesCollector.ts

@@ -0,0 +1,84 @@
+
+export interface IValueModel<TValue> {
+    value: TValue;
+}
+
+export interface IValueCollector<TSource, TValue> {
+    getValue(source: TSource): TValue;
+    setValue(source: TSource, value: TValue): void;
+}
+
+type SimpleCollector<T> = {
+    get: () => T,
+    set: (t: T) => void,
+};
+
+type SimpleCollectorsMap<T> = {
+    [P in keyof T]?: SimpleCollector<T[P]>;
+};
+
+export type ModelCollectorsMap<T> = {
+    [P in keyof T]?: IValueModel<T[P]>;
+};
+
+export type CollectorsMap<T> = {
+    [P in keyof T]?: SimpleCollector<T[P]>;
+};
+
+export class ModelCollector<T extends Object> {
+
+    private readonly _collectors: SimpleCollectorsMap<T> = { };
+
+    public addModels(models: ModelCollectorsMap<T>) {
+        Object.entries(models).forEach(pair => this.addModel(pair[0] as keyof T, pair[1]));
+        return this;
+    }
+
+    public addModel<TKey extends keyof T, TSource extends IValueModel<T[TKey]>>(key: TKey, source: TSource) {
+        this._collectors[key] = {
+            get: () => source.value,
+            set: v => { source.value = v; },
+        };
+
+        return this;
+    }
+
+    public addCollector<TKey extends keyof T, TModel, TCollector extends IValueCollector<TModel, T[TKey]>>(key: TKey, model: TModel, collector: TCollector) {
+        this._collectors[key] = {
+            get: () => collector.getValue(model),
+            set: v => collector.setValue(model, v),
+        };
+
+        return this;
+    }
+
+    public remove(key: keyof T) {
+        delete this._collectors[key];
+
+        return this;
+    }
+
+    public collect(): T {
+        const res = { } as T;
+
+        Object.entries(this._collectors).forEach(pair => {
+            const key = pair[0] as keyof T;
+            const collector = pair[1] as SimpleCollector<T[keyof T]>;
+            res[key] = collector.get();
+        });
+
+        return res;
+    }
+
+    public populate(data: T) {
+        Object.entries(data).forEach(pair => {
+            const key = pair[0] as keyof T;
+            const value = pair[1] as T[keyof T];
+
+            const collector = this._collectors[key];
+            if (collector) {
+                collector.set(value);
+            }
+        });
+    }
+}

package/src/viewModels/__tests__/multiSelect.test.ts

@@ -0,0 +1,23 @@
+import { MultiSelect } from '../MultiSelectModel';
+
+describe('MultiSelectModel', () => {
+    it('consistent', () => {
+        expect(() => new MultiSelect(null, null).values).toThrow();
+        expect(() => new MultiSelect([1], null).values).toThrow();
+
+        const items = [1, 2, 3];
+        const accessor = (i: number) => `_${i}_`;
+        const values = items.map(accessor);
+        const initialSelected = [1];
+
+        const vm = new MultiSelect(items, accessor, ...initialSelected);
+
+        expect(vm.items).toStrictEqual(items);
+        expect(vm.values).toStrictEqual(values);
+        expect(vm.selectedIndexes).toStrictEqual(initialSelected);
+
+        initialSelected.forEach(index => {
+            expect(vm.isIndexSelected(index)).toBe(initialSelected.includes(index));
+        });
+    });
+});

package/src/viewModels/__tests__/select.test.ts

@@ -0,0 +1,71 @@
+import { configure } from 'mobx';
+import { Select, SelectString } from '../SelectModel';
+
+configure({ enforceActions: 'never' });
+
+describe('SelectViewModel', () => {
+    it('consistent', async () => {
+        expect(() => new Select(null, null).values).toThrow();
+        expect(() => new Select([1], null).values).toThrow();
+
+        const emptyVm = new Select([], null);
+        expect(emptyVm.selectedValue).toBeNull();
+
+        const items = [0, 1, 2];
+        const values = ['0!', '1!', '2!'];
+        const initialIndex = -1;
+        const vm = new Select(items, i => `${i}!`, initialIndex);
+
+        expect(vm.index).toEqual(initialIndex);
+        expect(vm.values).toStrictEqual(values);
+        expect(vm.items).toStrictEqual(items);
+
+        expect(vm.selectedItem).toBeUndefined();
+        expect(vm.selectedValue).toBeUndefined();
+
+        vm.selectedItem = 7;
+        expect(vm.index).toBe(initialIndex);
+
+        vm.selectedValue = '123';
+        expect(vm.index).toBe(initialIndex);
+
+        vm.opened.value = true;
+        expect(vm.opened.value).toBe(true);
+
+        vm.index = 1;
+        expect(vm.index).toBe(1);
+
+        expect(vm.flags).toHaveLength(items.length);
+        values.forEach((_currentValue, itemIndex) => {
+            vm.selectedValue = _currentValue;
+            expect(vm.selectedItem).toBe(items[itemIndex]);
+            vm.selectedItem = items[itemIndex];
+            expect(vm.selectedValue).toBe(_currentValue);
+            vm.flags.forEach((f, i) => {
+                expect(f.value).toBe(i === itemIndex);
+                expect(f.label).toBe(values[i]);
+            });
+        });
+
+        vm.flags.forEach((f, i) => {
+            f.value = true;
+            vm.flags.forEach((ff, ii) => {
+                expect(ff.value).toBe(i === ii);
+            });
+            expect(vm.index).toBe(i);
+        });
+
+        vm.selectedItem = items[1];
+        expect(vm.selectedValue).toBe(values[1]);
+
+        vm.reset();
+        expect(vm.index).toBe(initialIndex);
+
+        expect(vm.error).toBeNull();
+
+        await expect(vm.validate()).resolves.toBeTruthy();
+
+        const vmS = new SelectString(values);
+        expect(vmS.values).toStrictEqual(values);
+    });
+});

package/src/viewModels/__tests__/wrappers.test.ts

@@ -0,0 +1,79 @@
+import { inject, withLabel, mixinLabel } from '../wrappers';
+import { NumberModel } from '../NumberModel';
+import { FlagModel } from '../FlagModel';
+
+describe('labeled', () => {
+    test('consistency', () => {
+
+        const initial = 0;
+        const num = new NumberModel(initial);
+
+        expect(num.value).toBe(initial);
+
+        const label = { str: '123' };
+        const labeledNum = withLabel(new NumberModel(), () => label);
+
+        expect(labeledNum.label.str).toEqual(label.str);
+
+        label.str = 'abc';
+        expect(labeledNum.label).toStrictEqual(label);
+    });
+});
+
+describe('inject', () => {
+    test('consistency/number', () => {
+        const num = new NumberModel();
+
+        num.value = 123;
+        expect(num.value).toBe(123);
+
+        inject(num, { value: 321 });
+
+        expect(num.value).toBe(321);
+
+        num.value = 123;
+        expect(num.value).toBe(123);
+
+        let external: number = 0;
+        inject(num, {
+            get value() { return external; },
+            set value(v) { external = v; },
+        });
+
+        expect(num.value).toBe(0);
+        num.value = 111;
+        expect(num.value).toBe(111);
+        expect(external).toBe(111);
+    });
+
+    test('consistency/flag', () => {
+        const flag = new FlagModel();
+
+        flag.value = true;
+        expect(flag.value).toBe(true);
+
+        inject(flag, { value: false });
+
+        expect(flag.value).toBe(false);
+
+        flag.value = true;
+        expect(flag.value).toBe(true);
+    });
+});
+
+describe('labelize', () => {
+    test('consistency', () => {
+
+        const Mixin = mixinLabel(FlagModel);
+
+        expect(() => new Mixin()).not.toThrow();
+
+        let label = '123';
+        const vm = new Mixin(() => label, false);
+        expect(vm.value).toBe(false);
+        expect(vm.label).toBe(label);
+
+        label = '312';
+        expect(vm.label).toBe(label);
+    });
+});

package/src/viewModels/index.ts

@@ -1,6 +1,10 @@
-export * from './PromptModalViewModel';
-export * from './RadioButtonGroupViewModel';
-export * from './RadioButtonViewModel';
-export * from './SelectViewModel';
-export * from './TextInputViewModel';
 export * from './Validatable';
+export * from './TextModel';
+export * from './FlagModel';
+export * from './NumberModel';
+export * from './wrappers';
+
+export * from './SelectModel';
+export * from './MultiSelectModel';
+
+export * from './PromptModalViewModel';

package/src/viewModels/wrappers.ts

@@ -0,0 +1,53 @@
+import { Getter } from '../types';
+import { IValueModel } from './ValuesCollector';
+
+export interface ILabel<T> {
+    readonly label: T;
+}
+
+export function withLabel<T, TModel extends IValueModel<T>, TLabel = string>(model: TModel, label: Getter<TLabel>) {
+    const _label = label;
+    Object.defineProperty(model, 'label', {
+        configurable: true,
+        enumerable: false,
+        get() { return Getter.getValue(_label); },
+    });
+
+    return model as TModel & ILabel<TLabel>;
+}
+
+export function inject<T, TModel extends IValueModel<T>>(model: TModel, source: IValueModel<T>) {
+    Object.defineProperty(model, 'value', {
+        configurable: true,
+        enumerable: false,
+        get() { return source.value; },
+        set(v: T) { source.value = v; },
+    });
+
+    return model;
+}
+
+export function wrap<T, TModel extends IValueModel<T>, TRes>(model: TModel, getter: (m: TModel) => TRes, setter: (v: TRes, model: TModel) => void): IValueModel<TRes> {
+    return {
+        get value() { return getter(model); },
+        set value(v: TRes) { setter(v, model); },
+    };
+}
+
+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 function mixinLabel<T, TModel extends IValueModel<T>, TLabel = string>(Superclass: new (initial?: T) => TModel): LabeledModelCtor<T, TModel, TLabel> {
+    // @ts-ignore
+    class Sub extends Superclass {
+        constructor(label: Getter<TLabel>, initial?: T) {
+            super(initial);
+            withLabel(this, label);
+        }
+    }
+
+    return Sub as any;
+}