Get rid of the ValidatorGenerators concept

csillag · csillag · commit 788f42d71005 · 2025-06-21T04:34:06.000+02:00
(Accept validators as validator output instead)
diff --git a/src/components/ui-plus-behavior/input/useDateField.ts b/src/components/ui-plus-behavior/input/useDateField.ts
@@ -44,7 +44,7 @@ export type DateFieldControls = Omit<InputFieldControls<Date>, 'placeholder'> &
 }
 
 export function useDateField(props: DateFieldProps): DateFieldControls {
-  const { initialValue = new Date(), validatorsGenerator, validators, type = 'datetime-local' } = props
+  const { initialValue = new Date(), validators, type = 'datetime-local' } = props
 
   const [minDate, tooEarlyMessage] = expandCoupledData(props.minDate, [
     undefined,
@@ -61,20 +61,21 @@ export function useDateField(props: DateFieldProps): DateFieldControls {
     {
       ...props,
       initialValue,
-      validators: undefined,
-      validatorsGenerator: value => [
-        // Check minimum date
-        minDate
-          ? () => (value.getTime() < minDate.getTime() ? getDateMessage(tooEarlyMessage, minDate) : undefined)
-          : undefined,
+      validators: [
+        // Check minimum date if configured
+        value =>
+          !!minDate && value.getTime() < minDate.getTime()
+            ? getDateMessage(tooEarlyMessage, minDate)
+            : undefined,
 
-        // Check maximum date
-        maxDate
-          ? () => (value.getTime() > maxDate.getTime() ? getDateMessage(tooLateMessage, maxDate) : undefined)
-          : undefined,
+        // Check maximum date if configured
+        value =>
+          !!maxDate && value.getTime() > maxDate.getTime()
+            ? getDateMessage(tooLateMessage, maxDate)
+            : undefined,
 
         // Any custom validators
-        ...getAsArray(validatorsGenerator ? validatorsGenerator(value) : validators),
+        ...getAsArray(validators),
       ],
     },
     {
diff --git a/src/components/ui-plus-behavior/input/useInputField.ts b/src/components/ui-plus-behavior/input/useInputField.ts
@@ -16,6 +16,7 @@ import {
   checkMessagesForProblems,
   camelToTitleCase,
   MessageMaybeAtLocation,
+  SimpleValidatorOutput,
 } from './util'
 import { MarkdownCode } from '../../ui/markdown'
 
@@ -64,8 +65,6 @@ export type InputFieldProps<DataType> = {
    */
   required?: CoupledData
 
-  validatorsGenerator?: (values: DataType) => ValidatorBundle<DataType>
-
   /**
    * Validators to apply to values
    */
@@ -296,7 +295,6 @@ export function useInputFieldInternal<DataType>(
     initialValue,
     cleanUp,
     validators = noValidators,
-    validatorsGenerator,
     containerClassName,
     expandHorizontally = true,
     validateOnChange = false,
@@ -457,14 +455,11 @@ export function useInputFieldInternal<DataType>(
         },
       }
 
-      // Identify the user-configured validators to use
-      const realValidators = getAsArray(
-        validatorsGenerator ? validatorsGenerator(cleanValue) : validators
-      ).filter((v): v is ValidatorFunction<DataType> => !!v)
+      const validatorsToUse = [...getAsArray(validators)]
 
-      // Go through all the validators
-      for (const validator of realValidators) {
-        // Do we have anything to worry about from this validator?
+      for (let i = 0; i < validatorsToUse.length; i++) {
+        const validator = validatorsToUse[i]
+        if (!validator) continue
         try {
           const validatorReport =
             hasError ||
@@ -473,7 +468,17 @@ export function useInputFieldInternal<DataType>(
               ? [] // If we already have an error, don't even bother with any more validators
               : await validator(cleanValue, { ...validatorControls, isStillFresh }, params.reason) // Execute the current validators
 
-          getAsArray(validatorReport) // Maybe we have a single report, maybe an array. Receive it as an array.
+          // Maybe we have a single report, maybe an array. Receive it as an array.
+          const reports = getAsArray(validatorReport)
+
+          // Handle the recursive reports
+          reports
+            .filter((report): report is ValidatorFunction<DataType> => typeof report === 'function')
+            .forEach(validator => validatorsToUse.push(validator))
+
+          // Handle the simple reports
+          reports
+            .filter((report): report is SimpleValidatorOutput => typeof report !== 'function')
             .map(report => wrapValidatorOutput(report, 'root', 'error')) // Wrap single strings to proper reports
             .forEach(message => {
               // Go through all the reports
@@ -516,7 +521,6 @@ export function useInputFieldInternal<DataType>(
       requiredMessage,
       validateEmptyOnChange,
       validators,
-      validatorsGenerator,
       visible,
     ]
   )
diff --git a/src/components/ui-plus-behavior/input/useOneOfField.ts b/src/components/ui-plus-behavior/input/useOneOfField.ts
@@ -128,7 +128,6 @@ export function useNullableOneOfField<DataType extends HasToString>(
     placeholder,
     canSelectPlaceholder = true,
     validators,
-    validatorsGenerator,
     onValueChange,
     choices: realChoices,
     ...rest
@@ -162,9 +161,6 @@ export function useNullableOneOfField<DataType extends HasToString>(
       },
       required: expandCoupledData(props.required, [false, 'Please select an option!']),
       validators: validators as ValidatorBundle<InternalDataType<DataType>>,
-      validatorsGenerator: validatorsGenerator as (
-        values: InternalDataType<DataType>
-      ) => ValidatorBundle<InternalDataType<DataType>>,
     },
     {
       isEmpty: v => v === PLEASE_SELECT || isEmpty(v as DataType),
diff --git a/src/components/ui-plus-behavior/input/useTextField.ts b/src/components/ui-plus-behavior/input/useTextField.ts
@@ -63,7 +63,7 @@ export function useTextField(
   const props = (
     typeof rawProps === 'string' ? { name: rawProps, description, required } : rawProps
   ) as TextFieldProps
-  const { initialValue = '', validatorsGenerator, validators, autoFocus = false, onEnter, hideInput } = props
+  const { initialValue = '', validators, autoFocus = false, onEnter, hideInput } = props
 
   const [minLength, tooShortMessage] = expandCoupledData(props.minLength, [
     1,
@@ -80,27 +80,21 @@ export function useTextField(
     {
       ...props,
       initialValue,
-      validators: undefined,
       cleanUp: props.cleanUp ?? ((s: string) => s.trim()),
-      validatorsGenerator: value => [
-        // Check minimum length
-        minLength
-          ? () =>
-              value !== '' && value.length < minLength!
-                ? `tooShort: ${getNumberMessage(tooShortMessage, minLength)} (Currently: ${value.length})`
-                : undefined
-          : undefined,
+      validators: [
+        // Check minimum length, if configured
+        value =>
+          !!minLength && value !== '' && value.length < minLength!
+            ? `tooShort: ${getNumberMessage(tooShortMessage, minLength)} (Currently: ${value.length})`
+            : undefined,
 
-        // Check maximum length
-        maxLength
-          ? () =>
-              value !== '' && value.length > maxLength!
-                ? `tooLong: ${getNumberMessage(tooLongMessage, maxLength)} (Currently: ${value.length})`
-                : undefined
-          : undefined,
+        // Check maximum length, if configured
+        value =>
+          !!maxLength && value !== '' && value.length > maxLength!
+            ? `tooLong: ${getNumberMessage(tooLongMessage, maxLength)} (Currently: ${value.length})`
+            : undefined,
 
-        // Any custom validators
-        ...getAsArray(validatorsGenerator ? validatorsGenerator(value) : validators),
+        ...getAsArray(validators),
       ],
     },
     {
diff --git a/src/components/ui-plus-behavior/input/util/validationMessages.ts b/src/components/ui-plus-behavior/input/util/validationMessages.ts
@@ -21,13 +21,18 @@ export type MessageAtLocation = FieldMessage & { location: string }
 /**
  * Validators can return their findings on various detail levels
  */
-export type ValidatorOutput = MessageMaybeAtLocation | MarkdownCode | undefined
+export type SimpleValidatorOutput = MessageMaybeAtLocation | MarkdownCode | undefined
+
+/**
+ * Validators can return their findings on various detail levels
+ */
+export type RecursiveValidatorOutput<DataType> = ValidatorFunction<DataType>
 
 /**
  * Flush out validator messages with all details
  */
 export const wrapValidatorOutput = (
-  output: ValidatorOutput,
+  output: SimpleValidatorOutput,
   defaultLocation: string,
   defaultLevel: FieldMessageType
 ): MessageAtLocation | undefined => {
@@ -95,22 +100,56 @@ export const getDateMessage = (template: DateMessageTemplate, date: Date): strin
  * It should return undefined if everything is fine,
  * or return the found issues.
  */
-export type SyncValidatorFunction<DataType> = (
+export type SyncSimpleValidatorFunction<DataType> = (
+  value: DataType,
+  controls: ValidatorControls,
+  reason: string
+) => SingleOrArray<SimpleValidatorOutput>
+
+/**
+ * An asynchronous validator function
+ *
+ * It should return undefined if everything is fine,
+ * or return the found issues.
+ */
+export type AsyncSimpleValidatorFunction<DataType> = (
+  value: DataType,
+  controls: ValidatorControls,
+  reason: string
+) => Promise<SingleOrArray<SimpleValidatorOutput>>
+
+export type SimpleValidatorFunction<DataType> =
+  | SyncSimpleValidatorFunction<DataType>
+  | AsyncSimpleValidatorFunction<DataType>
+
+/**
+ * A synchronous validator function
+ *
+ * It should return undefined if everything is fine,
+ * or return the found issues.
+ */
+export type SyncRecursiveValidatorFunction<DataType> = (
   value: DataType,
   controls: ValidatorControls,
   reason: string
-) => SingleOrArray<ValidatorOutput>
+) => SingleOrArray<RecursiveValidatorOutput<DataType>>
 
 /**
  * An asynchronous validator function
  *
  * It should return undefined if everything is fine,
  * or return the found issues.
  */
-export type AsyncValidatorFunction<DataType> = (
+export type AsyncRecursiveValidatorFunction<DataType> = (
   value: DataType,
   controls: ValidatorControls,
   reason: string
-) => Promise<SingleOrArray<ValidatorOutput>>
+) => Promise<SingleOrArray<RecursiveValidatorOutput<DataType>>>
+
+export type RecursiveValidatorFunction<DataType> =
+  | SyncRecursiveValidatorFunction<DataType>
+  | AsyncRecursiveValidatorFunction<DataType>
 
-export type ValidatorFunction<DataType> = SyncValidatorFunction<DataType> | AsyncValidatorFunction<DataType>
+export type ValidatorFunction<DataType> =
+  | SimpleValidatorFunction<DataType>
+  | RecursiveValidatorFunction<DataType>
diff --git a/src/components/ui-plus-behavior/input/validation.ts b/src/components/ui-plus-behavior/input/validation.ts
@@ -1,5 +1,5 @@
 import { InputFieldControls, ValidationReason } from './useInputField'
-import { AsyncValidatorFunction, getAsArray, SingleOrArray, sleep } from './util'
+import { AsyncSimpleValidatorFunction, getAsArray, SingleOrArray, sleep } from './util'
 import { LabelProps } from './useLabel'
 
 export type FieldLike<DataType> = Readonly<
@@ -61,7 +61,7 @@ export const doFieldsHaveAnError = (fields: FieldArrayConfiguration): boolean =>
     .filter(field => field.visible)
     .some(field => field.hasProblems)
 
-const mockValidator: AsyncValidatorFunction<unknown> = async (_value, controls) => {
+const mockValidator: AsyncSimpleValidatorFunction<unknown> = async (_value, controls) => {
   const { isStillFresh } = controls
   if (isStillFresh && !isStillFresh()) return undefined
   await sleep(500)
