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

CHANGELOG.md

@@ -1,3 +1,7 @@
+# v4.0.1
+
+- [*] В FieldModel добавлены: возможность пропустить значение через валидаторы, хранение текущей ошибки, отслеживание состояния поля (touched, hasError, isEmpty), функция сброса
+
 # 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/FieldModel/FieldModel.ts

@@ -1,39 +1,105 @@
 import { action, computed, makeObservable, observable } from 'mobx';
 
-import { IField } from './types';
+import { FormFieldInitDataType, ValidatorType } from './types';
+
+type PrivateFields =
+  | '_value'
+  | '_error'
+  | '_setError'
+  | '_resetError'
+  | '_touched'
+  | '_resetTouched';
+
+export default class FormFieldModel<T = string> {
+  private readonly _validators: ValidatorType<T>[];
 
-class FieldModel<T = string> implements IField<T> {
   private _value: T;
-  private readonly _initialValue: T;
+  private _touched = false;
+  protected readonly _initialValue: T;
 
-  constructor(value: T, config?: { initialValue: T }) {
-    this._value = value;
-    this._initialValue =
-      config?.initialValue === undefined ? value : config.initialValue;
+  private _error: string | null = null;
 
-    makeObservable<FieldModel<T>, '_value'>(this, {
-      _value: observable.ref,
+  constructor(initData: FormFieldInitDataType<T>) {
+    this._value = initData.value;
+    this._initialValue = initData.value;
+    this._validators = initData.validators;
+
+    makeObservable<FormFieldModel<T>, PrivateFields>(this, {
+      _value: observable,
+      _error: observable,
+      _touched: observable,
 
       value: computed,
+      error: computed,
+      hasError: computed,
+      isEmpty: computed,
+      touched: computed,
 
-      changeValue: action.bound,
+      setValue: action.bound,
       reset: action.bound,
+      _setError: action.bound,
+      _resetError: action.bound,
+      _resetTouched: action.bound,
     });
   }
 
   get value(): T {
     return this._value;
   }
 
-  changeValue<I extends T>(value: I): I {
+  get error(): string | null {
+    return this._error;
+  }
+
+  get hasError(): boolean {
+    return this._error !== null;
+  }
+
+  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._resetError();
+    this._touched = true;
+  }
 
-    return value;
+  private _setError(value: string): void {
+    this._error = value;
   }
 
-  reset(): void {
-    this._value = this._initialValue;
+  private _resetTouched = (): void => {
+    this._touched = false;
+  };
+
+  private _resetError(): void {
+    this._error = null;
   }
-}
 
-export default FieldModel;
+  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/FieldModel/types.ts

@@ -1,6 +1,6 @@
-export interface IField<T = string> {
-  get value(): T;
+export type ValidatorType<T> = (value: T) => string | null;
 
-  changeValue(value: T): void;
-  reset(): void;
-}
+export type FormFieldInitDataType<T> = {
+  value: T;
+  validators: ValidatorType<T>[];
+};