[RMBWEB-2780] Support for structured validation results

dumi/docs/concepts/state/index.md

@@ -29,8 +29,8 @@ export interface IState<V> {
   error: ValidationError
   /** The state's own error info, regardless of child states. */
   ownError: ValidationError
-  /** The state's own error info, includes ValidationErrorObject error type, regardless of child states. */
-  rawError: ValidationRawError
+  /** The state's validation result, is the same as the return value of the validator, regardless of child states. */
+  rawError: ValidationResult
   /** Append validator(s). */
   withValidator(...validators: Array<Validator<V>>): this
   /** Fire a validation behavior imperatively. */
@@ -101,7 +101,7 @@ States will not be auto-validated until it becomes **activated**. And they will
 
 ### Raw Error
 
-The state's own raw error info, regardless of child states. The difference compared to `ownError` is that it contains the type of `ValidationErrorObject`. You can check details about them in issue [#82](https://github.com/qiniu/formstate-x/issues/82).
+The state's validation result, is the same as the return value of the `validator`, regardless of child states. The difference compared to `ownError` is that it contains the type of `ValidationErrorObject`. You can check details about them in issue [#82](https://github.com/qiniu/formstate-x/issues/82).
 
 ### Disable State
 

src/adapter/v2.ts

@@ -3,7 +3,7 @@ import * as v2 from 'formstate-x-v2'
 import { BaseState } from '../state'
 import * as v3 from '..'
 import Disposable from '../disposable'
-import { isPromiseLike, normalizeError, normalizeRawError } from '../utils'
+import { isPromiseLike, normalizeError } from '../utils'
 
 interface IV3StateFromV2<T extends v2.ComposibleValidatable<unknown, V>, V> extends v3.IState<V> {
   /** The original ([email protected]) state */
@@ -68,7 +68,7 @@ class Upgrader<T extends v2.ComposibleValidatable<unknown, V>, V> extends BaseSt
 
 function portV2Validators<V>(...validators: Array<v3.Validator<V>>): Array<v2.Validator<V>> {
   const normalizeRet = (v: any) => (
-    normalizeError(normalizeRawError(v))
+    normalizeError(v)
   )
   return validators.map(validator => {
     return (value: V) => {

src/debouncedState.ts

@@ -2,12 +2,12 @@ import { action, computed, makeObservable, observable, override, reaction } from
 import { FieldState } from './fieldState'
 import { ValidatableState } from './state'
 import { IState, ValidateStatus, ValueOf } from './types'
-import { debounce, normalizeError } from './utils'
+import { debounce, isPassed, normalizeError } from './utils'
 
 const defaultDelay = 200 // ms
 
 /** Infomation synced from original state */
-type OriginalInfo<V> = Pick<IState<V>, 'activated' | 'touched' | 'error' | 'ownError'>
+type OriginalInfo<V> = Pick<IState<V>, 'activated' | 'touched' | 'error' | 'ownError' | 'hasError'>
 
 /**
  * The state for debounce purpose.
@@ -42,7 +42,8 @@ export class DebouncedState<S extends IState<V>, V = ValueOf<S>> extends Validat
       activated: this.$.activated,
       touched: this.$.touched,
       error: this.$.error,
-      ownError: this.$.ownError
+      ownError: this.$.ownError,
+      hasError: this.$.hasError
     }
   }
 
@@ -52,7 +53,7 @@ export class DebouncedState<S extends IState<V>, V = ValueOf<S>> extends Validat
 
   @override override get ownError() {
     if (this.disabled) return undefined
-    if (this._error) return normalizeError(this._error)
+    if (this.rawError) return normalizeError(this.rawError)
     return this.original.ownError
   }
 
@@ -62,6 +63,11 @@ export class DebouncedState<S extends IState<V>, V = ValueOf<S>> extends Validat
     return this.original.error
   }
 
+  @override override get hasError() {
+    if (this.disabled) return false
+    return !isPassed(this.rawError) || this.original.hasError
+  }
+
   @override override get validateStatus() {
     if (this.disabled) return ValidateStatus.WontValidate
     if (

src/fieldState.spec.ts

@@ -85,7 +85,7 @@ describe('FieldState', () => {
     expect(state.hasError).toBe(false)
     expect(state.error).toBe(undefined)
     expect(state.ownError).toBe(undefined)
-    expect(state.rawError).toBe(undefined)
+    expect(state.rawError).toBe('')
 
     state.setError('123')
     expect(state.hasError).toBe(true)

src/formState.spec.ts

@@ -159,7 +159,7 @@ describe('FormState (mode: object)', () => {
     expect(state.hasError).toBe(false)
     expect(state.error).toBe(undefined)
     expect(state.ownError).toBe(undefined)
-    expect(state.rawError).toBe(undefined)
+    expect(state.rawError).toBe('')
 
     state.setError('123')
     expect(state.hasError).toBe(true)
@@ -1062,7 +1062,7 @@ describe('FormState (mode: array)', () => {
     expect(state.hasError).toBe(false)
     expect(state.error).toBe(undefined)
     expect(state.ownError).toBe(undefined)
-    expect(state.rawError).toBe(undefined)
+    expect(state.rawError).toBe('')
 
     state.setError('123')
     expect(state.hasError).toBe(true)

src/formState.ts

@@ -1,6 +1,7 @@
 import { observable, computed, isObservable, action, reaction, makeObservable, override } from 'mobx'
 import { IState, ValidateStatus, ValidateResult, ValueOfStatesObject } from './types'
 import { ValidatableState } from './state'
+import { isPassed } from './utils'
 
 abstract class AbstractFormState<T, V> extends ValidatableState<V> implements IState<V> {
 
@@ -47,6 +48,21 @@ abstract class AbstractFormState<T, V> extends ValidatableState<V> implements IS
     }
   }
 
+  @override override get hasError() {
+    if (this.disabled) {
+      return false
+    }
+    if (!isPassed(this.rawError)) {
+      return true
+    }
+    for (const state of this.childStates) {
+      if (state.hasError) {
+        return true
+      }
+    }
+    return false
+  }
+
   /** If reference of child states has been touched. */
   @observable protected ownTouched = false
 

src/state.ts

@@ -1,17 +1,17 @@
 import { action, autorun, computed, makeObservable, observable, when } from 'mobx'
-import { ValidationRawError, ValidationError, IState, Validation, ValidateResult, ValidateStatus, Validator } from './types'
+import { ValidationResult, ValidationError, IState, Validation, ValidateResult, ValidateStatus, Validator } from './types'
 import Disposable from './disposable'
-import { applyValidators, isPromiseLike, normalizeRawError, normalizeError, convertEmptyStringWithWarning } from './utils'
+import { applyValidators, isPromiseLike, isPassed, normalizeError } from './utils'
 
 /** Extraction for some basic features of State */
 export abstract class BaseState extends Disposable implements Pick<
-  IState, 'ownError' | 'hasOwnError' | 'error' | 'hasError' | 'validateStatus' | 'validating' | 'validated'
-> {
+  IState, 'rawError' | 'ownError' | 'hasOwnError' | 'hasError' | 'validateStatus' | 'validating' | 'validated'
+  > {
 
-  abstract error: ValidationError
+  abstract rawError: ValidationResult
 
   @computed get hasError() {
-    return this.error !== undefined
+    return !isPassed(this.rawError)
   }
 
   abstract ownError: ValidationError
@@ -54,9 +54,9 @@ export abstract class ValidatableState<V> extends BaseState implements IState<V>
   @observable activated = false
 
   /**
-   * The original error info of validation.
+   * The original return value of validation.
    */
-  @observable protected _error: ValidationRawError
+  @observable private _error: ValidationResult
 
   @computed get rawError() {
     return this.disabled ? undefined : this._error
@@ -71,10 +71,10 @@ export abstract class ValidatableState<V> extends BaseState implements IState<V>
   }
 
   /**
-   * Set error info.
+   * Set validation result.
    */
-  @action setError(error: ValidationRawError) {
-    this._error = convertEmptyStringWithWarning(error)
+  @action setError(error: ValidationResult) {
+    this._error = error
   }
 
   /** List of validator functions. */
@@ -108,14 +108,14 @@ export abstract class ValidatableState<V> extends BaseState implements IState<V>
     action('end-validation', () => {
       this.validation = undefined
       this._validateStatus = ValidateStatus.Validated
-      this.setError(normalizeRawError(result))
+      this.setError(result)
     })()
   }
 
   @computed protected get validateResult(): ValidateResult<V> {
     return (
-      this.error !== undefined
-      ? { hasError: true, error: this.error } as const
+      this.hasError
+      ? { hasError: true, error: this.error! } as const
       : { hasError: false, value: this.value } as const
     )
   }

src/transformedState.ts

@@ -1,4 +1,4 @@
-import { computed } from 'mobx'
+import { computed, override } from 'mobx'
 import { BaseState } from './state'
 import { IState, Validator, ValueOf } from './types'
 
@@ -31,6 +31,10 @@ export class TransformedState<S extends IState<$V>, V, $V = ValueOf<S>> extends
     return this.$.rawError
   }
 
+  @override override get hasError() {
+    return this.$.hasError
+  }
+
   @computed get error() {
     return this.$.error
   }

src/types.ts

@@ -6,6 +6,9 @@ export type ValidationResult =
   | false
   | ValidationErrorObject
 
+/** Object type validation result. */
+export type ValidationErrorObject = { message: string }
+
 /** Return value of validator. */
 export type ValidatorReturned = 
   ValidationResult
@@ -19,9 +22,7 @@ export type Validation<TValue> = {
   returned: ValidatorReturned // result of applying validators
 }
 
-export type ValidationErrorObject = { message: string }
 export type ValidationError = string | undefined
-export type ValidationRawError = ValidationErrorObject | ValidationError
 
 export type ValidateResultWithError = { hasError: true, error: NonNullable<ValidationError> }
 export type ValidateResultWithValue<T> = { hasError: false, value: T }
@@ -39,8 +40,8 @@ export interface IState<V = unknown> {
   hasError: boolean
   /** The state's own error info, regardless of child states. */
   ownError: ValidationError
-  /** Ihe state's own error info, includes ValidationErrorObject error type, regardless of child states. */
-  rawError: ValidationRawError
+  /** The state's validation result, is the same as the return value of the validator, regardless of child states. */
+  rawError: ValidationResult
   /** If the state contains its own error info. */
   hasOwnError: boolean
   /** If activated (with auto-validation). */

src/utils.spec.ts

@@ -1,24 +1,24 @@
 import { observable } from 'mobx'
-import { asyncResultsAnd, isValidationPassed, isArrayLike, isErrorObject, normalizeRawError, normalizeError, inValidErrorObjectMsg } from './utils'
+import { asyncResultsAnd, isPassed, isArrayLike, isErrorObject, normalizeError, inValidErrorObjectMsg } from './utils'
 import { delayValue as delay } from './testUtils'
 import { ValidationErrorObject } from './types'
 
 describe('asyncResultsAnd', () => {
   it('should work well with empty results', async () => {
     const result = await asyncResultsAnd([])
-    expect(isValidationPassed(result)).toBe(true)
+    expect(isPassed(result)).toBe(true)
   })
 
   it('should work well with all-passed results', async () => {
     const result = await asyncResultsAnd([delay(null)])
-    expect(isValidationPassed(result)).toBe(true)
+    expect(isPassed(result)).toBe(true)
 
     await asyncResultsAnd([
       delay(null, 30),
       delay(undefined, 10),
       delay(false, 20)
     ])
-    expect(isValidationPassed(result)).toBe(true)
+    expect(isPassed(result)).toBe(true)
   })
 
   it('should work well with unpassed results', async () => {
@@ -109,25 +109,8 @@ describe('isErrorObject', () => {
     expect(() => isErrorObject({ message: '' })).toThrow(inValidErrorObjectMsg)
   })
 })
-
-describe('normalizeValidationResult', () => {
-  it('normalizeRawError should work well', () => {
-    expect(normalizeRawError(false)).toBe(undefined)
-    expect(normalizeRawError(null)).toBe(undefined)
-    expect(normalizeRawError(undefined)).toBe(undefined)
-    expect(normalizeRawError('')).toBe(undefined)
-    expect(normalizeRawError('foo')).toBe('foo')
-    expect(normalizeRawError({ message: 'mewo' })).toEqual({ message: 'mewo' })
-
-    class Foo implements ValidationErrorObject { message = 'mewo' }
-    const foo = new Foo()
-    expect(normalizeRawError(foo)).toBe(foo)
-
-    class Bar extends Foo {}
-    const bar = new Bar()
-    expect(normalizeRawError(bar)).toBe(bar)
-  })
 
+describe('normalizeValidationResult', () => {
   it('normalizeError should work well', () => {
     expect(normalizeError(undefined)).toBe(undefined)
     expect(normalizeError('')).toBe(undefined)