special-16444: обновление FieldModel

CHANGELOG.md

@@ -1,3 +1,8 @@
+# v4.0.1
+
+- [+] Добавлена ValueModel
+- [*] FieldModel переименована в FormFieldModel и наследует ValueModel с возможностью добавления валидаторов
+
 # v4.0.0
 
 - [*] AppParamsStore: в конструктор добавлен аргумент `apiUrl`

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ktsstudio/mediaproject-stores",
-  "version": "4.0.0",
+  "version": "4.0.1",
   "author": "KTS Studio",
   "license": "MIT",
   "description": "Package with basic MobX stores for mediaprojects",

src/models/FormFieldModel/FieldModel.ts

@@ -0,0 +1,75 @@
+import { action, computed, makeObservable, observable } from 'mobx';
+
+import { ValueModel } from '../ValueModel';
+
+import { FormFieldInitDataType, ValidatorType } from './types';
+
+type ProtectedFields = '_error' | '_setError' | '_resetError';
+
+export default class FormFieldModel<T = string> extends ValueModel<T> {
+  protected readonly _validators: ValidatorType<T>[];
+
+  protected _error: string | null = null;
+
+  constructor(initData: FormFieldInitDataType<T>) {
+    super(initData.value);
+
+    this._validators = initData.validators;
+
+    makeObservable<FormFieldModel<T>, ProtectedFields>(this, {
+      _error: observable,
+
+      error: computed,
+      hasError: computed,
+
+      setValue: action.bound,
+      reset: action.bound,
+      _setError: action.bound,
+      _resetError: action.bound,
+    });
+  }
+
+  get error(): string | null {
+    return this._error;
+  }
+
+  get hasError(): boolean {
+    return this._error !== null;
+  }
+
+  setValue(value: T): void {
+    if (value === this._value) {
+      return;
+    }
+
+    this._value = value;
+    this._resetError();
+    this._touched = true;
+  }
+
+  protected _setError(value: string): void {
+    this._error = value;
+  }
+
+  protected _resetError(): void {
+    this._error = null;
+  }
+
+  validate(): void {
+    this._validators.some((validator) => {
+      const error = validator(this.value);
+
+      if (error) {
+        this._setError(error);
+      }
+
+      return Boolean(error);
+    });
+  }
+
+  reset = (): void => {
+    this.setValue(this._initialValue);
+    this._resetTouched();
+    this._resetError();
+  };
+}

src/models/FormFieldModel/index.ts

@@ -0,0 +1,3 @@
+export { default as FormFieldModel } from './FieldModel';
+
+export * from './types';

src/models/FormFieldModel/types.ts

@@ -0,0 +1,6 @@
+export type ValidatorType<T> = (value: T) => string | null;
+
+export type FormFieldInitDataType<T> = {
+  value: T;
+  validators: ValidatorType<T>[];
+};

src/models/ValueModel/ValueModel.ts

@@ -0,0 +1,57 @@
+import { action, computed, makeObservable, observable } from 'mobx';
+
+type ProtectedFields = '_value' | '_touched' | '_resetTouched';
+
+export default class ValueModel<T = string> {
+  protected _value: T;
+  protected _touched = false;
+  protected readonly _initialValue: T;
+
+  constructor(value: T) {
+    this._value = value;
+    this._initialValue = value;
+
+    makeObservable<ValueModel<T>, ProtectedFields>(this, {
+      _value: observable,
+      _touched: observable,
+
+      value: computed,
+      isEmpty: computed,
+      touched: computed,
+
+      setValue: action.bound,
+      reset: action.bound,
+      _resetTouched: action.bound,
+    });
+  }
+
+  get value(): T {
+    return this._value;
+  }
+
+  get touched(): boolean {
+    return this._touched;
+  }
+
+  get isEmpty(): boolean {
+    return !this._value;
+  }
+
+  setValue(value: T): void {
+    if (value === this._value) {
+      return;
+    }
+
+    this._value = value;
+    this._touched = true;
+  }
+
+  protected _resetTouched = (): void => {
+    this._touched = false;
+  };
+
+  reset = (): void => {
+    this.setValue(this._initialValue);
+    this._resetTouched();
+  };
+}

src/models/ValueModel/index.ts

@@ -0,0 +1 @@
+export { default as ValueModel } from './ValueModel';

src/models/index.ts

@@ -10,4 +10,6 @@ export * from './BlurAndFocusHandlerModel';
 
 export * from './PollingModel';
 
-export * from './FieldModel';
+export * from './FormFieldModel';
+
+export * from './ValueModel';