From a0ffd22831e5fa0ec026738e1aec390f4830d089 Mon Sep 17 00:00:00 2001 From: BobbyLilD Date: Thu, 20 Jun 2024 12:31:36 +0300 Subject: [PATCH 1/6] feat: updated FieldModel --- src/models/FieldModel/FieldModel.ts | 68 +++++++++++++++++++++-------- src/models/FieldModel/types.ts | 10 ++--- 2 files changed, 56 insertions(+), 22 deletions(-) diff --git a/src/models/FieldModel/FieldModel.ts b/src/models/FieldModel/FieldModel.ts index 9e34f2d..bfc5403 100644 --- a/src/models/FieldModel/FieldModel.ts +++ b/src/models/FieldModel/FieldModel.ts @@ -1,23 +1,32 @@ import { action, computed, makeObservable, observable } from 'mobx'; -import { IField } from './types'; +import { FormFieldInitDataType, ValidatorType } from './types'; + +type PrivateFields = '_value' | '_error' | '_setError' | '_resetError'; + +export default class FormFieldModel { + private readonly _validators: ValidatorType[]; -class FieldModel implements IField { private _value: T; - private 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, '_value'>(this, { - _value: observable.ref, + constructor(initData: FormFieldInitDataType) { + this._value = initData.value; + this._validators = initData.validators; + + makeObservable, PrivateFields>(this, { + _value: observable, + _error: observable, value: computed, + error: computed, + hasError: computed, + isEmpty: computed, - changeValue: action.bound, - reset: action.bound, + setValue: action.bound, + _setError: action.bound, + _resetError: action.bound, }); } @@ -25,15 +34,40 @@ class FieldModel implements IField { return this._value; } - changeValue(value: I): I { + get error(): string | null { + return this._error; + } + + get hasError(): boolean { + return this._error !== null; + } + + get isEmpty(): boolean { + return !this._value; + } + + setValue(value: T): void { this._value = value; + this._resetError(); + } - return value; + private _setError(value: string): void { + this._error = value; } - reset(): void { - this._value = this._initialValue; + 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); + }); + } +} diff --git a/src/models/FieldModel/types.ts b/src/models/FieldModel/types.ts index 5bb3f6f..15b1574 100644 --- a/src/models/FieldModel/types.ts +++ b/src/models/FieldModel/types.ts @@ -1,6 +1,6 @@ -export interface IField { - get value(): T; +export type ValidatorType = (value: T) => string | null; - changeValue(value: T): void; - reset(): void; -} +export type FormFieldInitDataType = { + value: T; + validators: ValidatorType[]; +}; From b450ca3ab42bcfcb1df83e6b0a9dde702c69e699 Mon Sep 17 00:00:00 2001 From: BobbyLilD Date: Mon, 24 Jun 2024 10:21:16 +0300 Subject: [PATCH 2/6] fix: review --- CHANGELOG.md | 4 ++++ package.json | 2 +- src/models/FieldModel/FieldModel.ts | 34 ++++++++++++++++++++++++++++- 3 files changed, 38 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index a8f5b02..6c8cb41 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,7 @@ +# v4.0.1 + +- [*] Произведен ряд изменений в FieldModel + # v4.0.0 - [*] AppParamsStore: в конструктор добавлен аргумент `apiUrl` diff --git a/package.json b/package.json index 5331ac1..5941e49 100644 --- a/package.json +++ b/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", diff --git a/src/models/FieldModel/FieldModel.ts b/src/models/FieldModel/FieldModel.ts index bfc5403..a12a713 100644 --- a/src/models/FieldModel/FieldModel.ts +++ b/src/models/FieldModel/FieldModel.ts @@ -2,31 +2,44 @@ import { action, computed, makeObservable, observable } from 'mobx'; import { FormFieldInitDataType, ValidatorType } from './types'; -type PrivateFields = '_value' | '_error' | '_setError' | '_resetError'; +type PrivateFields = + | '_value' + | '_error' + | '_setError' + | '_resetError' + | '_touched' + | '_resetTouched'; export default class FormFieldModel { private readonly _validators: ValidatorType[]; private _value: T; + private _touched = false; + protected _initialValue: T; private _error: string | null = null; constructor(initData: FormFieldInitDataType) { this._value = initData.value; + this._initialValue = initData.value; this._validators = initData.validators; makeObservable, PrivateFields>(this, { _value: observable, _error: observable, + _touched: observable, value: computed, error: computed, hasError: computed, isEmpty: computed, + touched: computed, setValue: action.bound, + reset: action.bound, _setError: action.bound, _resetError: action.bound, + _resetTouched: action.bound, }); } @@ -42,19 +55,32 @@ export default class FormFieldModel { 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; } private _setError(value: string): void { this._error = value; } + _resetTouched = (): void => { + this._touched = false; + }; + private _resetError(): void { this._error = null; } @@ -70,4 +96,10 @@ export default class FormFieldModel { return Boolean(error); }); } + + reset = (): void => { + this.setValue(this._initialValue); + this._resetTouched(); + this._resetError(); + }; } From 3aa4f5f489feb1e2dc8234ec8b4367dcf77db3ab Mon Sep 17 00:00:00 2001 From: BobbyLilD Date: Mon, 24 Jun 2024 10:57:26 +0300 Subject: [PATCH 3/6] fix: review --- CHANGELOG.md | 2 +- src/models/FieldModel/FieldModel.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6c8cb41..629aaa0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,6 @@ # v4.0.1 -- [*] Произведен ряд изменений в FieldModel +- [*] В FieldModel добавлены: возможность пропустить значение через валидаторы, хранение текущей ошибки, отслеживание состояния поля (touched, hasError, isEmpty), функция сброса # v4.0.0 diff --git a/src/models/FieldModel/FieldModel.ts b/src/models/FieldModel/FieldModel.ts index a12a713..39da4ed 100644 --- a/src/models/FieldModel/FieldModel.ts +++ b/src/models/FieldModel/FieldModel.ts @@ -15,7 +15,7 @@ export default class FormFieldModel { private _value: T; private _touched = false; - protected _initialValue: T; + protected readonly _initialValue: T; private _error: string | null = null; @@ -77,7 +77,7 @@ export default class FormFieldModel { this._error = value; } - _resetTouched = (): void => { + private _resetTouched = (): void => { this._touched = false; }; From 24aa91bc74b9b889ea45ac2ce9eab94c4ce1f48d Mon Sep 17 00:00:00 2001 From: BobbyLilD Date: Mon, 24 Jun 2024 12:31:53 +0300 Subject: [PATCH 4/6] fix: review --- src/models/FieldModel/FieldModel.ts | 50 +++++-------------------- src/models/ValueModel/ValueModel.ts | 57 +++++++++++++++++++++++++++++ src/models/ValueModel/index.ts | 1 + src/models/index.ts | 2 + 4 files changed, 70 insertions(+), 40 deletions(-) create mode 100644 src/models/ValueModel/ValueModel.ts create mode 100644 src/models/ValueModel/index.ts diff --git a/src/models/FieldModel/FieldModel.ts b/src/models/FieldModel/FieldModel.ts index 39da4ed..4473793 100644 --- a/src/models/FieldModel/FieldModel.ts +++ b/src/models/FieldModel/FieldModel.ts @@ -1,52 +1,34 @@ import { action, computed, makeObservable, observable } from 'mobx'; +import { ValueModel } from '../ValueModel'; + import { FormFieldInitDataType, ValidatorType } from './types'; -type PrivateFields = - | '_value' - | '_error' - | '_setError' - | '_resetError' - | '_touched' - | '_resetTouched'; +type ProtectedFields = '_error' | '_setError' | '_resetError'; -export default class FormFieldModel { +export default class FormFieldModel extends ValueModel { private readonly _validators: ValidatorType[]; - private _value: T; - private _touched = false; - protected readonly _initialValue: T; - - private _error: string | null = null; + protected _error: string | null = null; constructor(initData: FormFieldInitDataType) { - this._value = initData.value; - this._initialValue = initData.value; + super(initData.value); + this._validators = initData.validators; - makeObservable, PrivateFields>(this, { - _value: observable, + makeObservable, ProtectedFields>(this, { _error: observable, - _touched: observable, - value: computed, error: computed, hasError: computed, - isEmpty: computed, - touched: computed, setValue: action.bound, reset: action.bound, _setError: action.bound, _resetError: action.bound, - _resetTouched: action.bound, }); } - get value(): T { - return this._value; - } - get error(): string | null { return this._error; } @@ -55,14 +37,6 @@ export default class FormFieldModel { 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; @@ -73,15 +47,11 @@ export default class FormFieldModel { this._touched = true; } - private _setError(value: string): void { + protected _setError(value: string): void { this._error = value; } - private _resetTouched = (): void => { - this._touched = false; - }; - - private _resetError(): void { + protected _resetError(): void { this._error = null; } diff --git a/src/models/ValueModel/ValueModel.ts b/src/models/ValueModel/ValueModel.ts new file mode 100644 index 0000000..0300918 --- /dev/null +++ b/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 { + protected _value: T; + protected _touched = false; + protected readonly _initialValue: T; + + constructor(value: T) { + this._value = value; + this._initialValue = value; + + makeObservable, 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(); + }; +} diff --git a/src/models/ValueModel/index.ts b/src/models/ValueModel/index.ts new file mode 100644 index 0000000..faf55f0 --- /dev/null +++ b/src/models/ValueModel/index.ts @@ -0,0 +1 @@ +export { default as ValueModel } from './ValueModel'; diff --git a/src/models/index.ts b/src/models/index.ts index 71d1201..2ecf47b 100644 --- a/src/models/index.ts +++ b/src/models/index.ts @@ -11,3 +11,5 @@ export * from './BlurAndFocusHandlerModel'; export * from './PollingModel'; export * from './FieldModel'; + +export * from './ValueModel'; From fe197ee563fa6210ad847d286a0aaa002b184fd1 Mon Sep 17 00:00:00 2001 From: BobbyLilD Date: Mon, 24 Jun 2024 12:39:59 +0300 Subject: [PATCH 5/6] fix: review --- CHANGELOG.md | 3 ++- src/models/FieldModel/index.ts | 3 --- src/models/{FieldModel => FormFieldModel}/FieldModel.ts | 2 +- src/models/FormFieldModel/index.ts | 3 +++ src/models/{FieldModel => FormFieldModel}/types.ts | 0 src/models/index.ts | 2 +- 6 files changed, 7 insertions(+), 6 deletions(-) delete mode 100644 src/models/FieldModel/index.ts rename src/models/{FieldModel => FormFieldModel}/FieldModel.ts (96%) create mode 100644 src/models/FormFieldModel/index.ts rename src/models/{FieldModel => FormFieldModel}/types.ts (100%) diff --git a/CHANGELOG.md b/CHANGELOG.md index 629aaa0..45a6b36 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,7 @@ # v4.0.1 -- [*] В FieldModel добавлены: возможность пропустить значение через валидаторы, хранение текущей ошибки, отслеживание состояния поля (touched, hasError, isEmpty), функция сброса +- [+] Добавлена ValueModel +- [*] FieldModel переименована в FormFieldModel и наследует ValueModel с возможностью добавления валидаторов # v4.0.0 diff --git a/src/models/FieldModel/index.ts b/src/models/FieldModel/index.ts deleted file mode 100644 index 67796d1..0000000 --- a/src/models/FieldModel/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export { default as FieldModel } from './FieldModel'; - -export * from './types'; diff --git a/src/models/FieldModel/FieldModel.ts b/src/models/FormFieldModel/FieldModel.ts similarity index 96% rename from src/models/FieldModel/FieldModel.ts rename to src/models/FormFieldModel/FieldModel.ts index 4473793..81a59ba 100644 --- a/src/models/FieldModel/FieldModel.ts +++ b/src/models/FormFieldModel/FieldModel.ts @@ -7,7 +7,7 @@ import { FormFieldInitDataType, ValidatorType } from './types'; type ProtectedFields = '_error' | '_setError' | '_resetError'; export default class FormFieldModel extends ValueModel { - private readonly _validators: ValidatorType[]; + protected readonly _validators: ValidatorType[]; protected _error: string | null = null; diff --git a/src/models/FormFieldModel/index.ts b/src/models/FormFieldModel/index.ts new file mode 100644 index 0000000..78d69bc --- /dev/null +++ b/src/models/FormFieldModel/index.ts @@ -0,0 +1,3 @@ +export { default as FormFieldModel } from './FieldModel'; + +export * from './types'; diff --git a/src/models/FieldModel/types.ts b/src/models/FormFieldModel/types.ts similarity index 100% rename from src/models/FieldModel/types.ts rename to src/models/FormFieldModel/types.ts diff --git a/src/models/index.ts b/src/models/index.ts index 2ecf47b..1ed6cc5 100644 --- a/src/models/index.ts +++ b/src/models/index.ts @@ -10,6 +10,6 @@ export * from './BlurAndFocusHandlerModel'; export * from './PollingModel'; -export * from './FieldModel'; +export * from './FormFieldModel'; export * from './ValueModel'; From ed98e2cff9732cde317474e6a2d7e708a83f6595 Mon Sep 17 00:00:00 2001 From: BobbyLilD Date: Tue, 25 Jun 2024 19:12:33 +0300 Subject: [PATCH 6/6] fix: review --- .../{FieldModel.ts => FormFieldModel.ts} | 15 ++++++--------- src/models/FormFieldModel/index.ts | 2 +- src/models/ValueModel/ValueModel.ts | 4 ++-- 3 files changed, 9 insertions(+), 12 deletions(-) rename src/models/FormFieldModel/{FieldModel.ts => FormFieldModel.ts} (85%) diff --git a/src/models/FormFieldModel/FieldModel.ts b/src/models/FormFieldModel/FormFieldModel.ts similarity index 85% rename from src/models/FormFieldModel/FieldModel.ts rename to src/models/FormFieldModel/FormFieldModel.ts index 81a59ba..043ce4f 100644 --- a/src/models/FormFieldModel/FieldModel.ts +++ b/src/models/FormFieldModel/FormFieldModel.ts @@ -22,8 +22,6 @@ export default class FormFieldModel extends ValueModel { error: computed, hasError: computed, - setValue: action.bound, - reset: action.bound, _setError: action.bound, _resetError: action.bound, }); @@ -38,13 +36,13 @@ export default class FormFieldModel extends ValueModel { } setValue(value: T): void { - if (value === this._value) { + super.setValue(value); + + if (value === this.value) { return; } - this._value = value; this._resetError(); - this._touched = true; } protected _setError(value: string): void { @@ -67,9 +65,8 @@ export default class FormFieldModel extends ValueModel { }); } - reset = (): void => { - this.setValue(this._initialValue); - this._resetTouched(); + reset(): void { + super.reset(); this._resetError(); - }; + } } diff --git a/src/models/FormFieldModel/index.ts b/src/models/FormFieldModel/index.ts index 78d69bc..eddbb50 100644 --- a/src/models/FormFieldModel/index.ts +++ b/src/models/FormFieldModel/index.ts @@ -1,3 +1,3 @@ -export { default as FormFieldModel } from './FieldModel'; +export { default as FormFieldModel } from './FormFieldModel'; export * from './types'; diff --git a/src/models/ValueModel/ValueModel.ts b/src/models/ValueModel/ValueModel.ts index 0300918..294ca9c 100644 --- a/src/models/ValueModel/ValueModel.ts +++ b/src/models/ValueModel/ValueModel.ts @@ -50,8 +50,8 @@ export default class ValueModel { this._touched = false; }; - reset = (): void => { + reset(): void { this.setValue(this._initialValue); this._resetTouched(); - }; + } }