dify

dify/web/app/components/base/form/hooks/index.ts

@@ -0,0 +1,3 @@
+export * from './use-check-validated'
+export * from './use-get-form-values'
+export * from './use-get-validators'

dify/web/app/components/base/form/hooks/use-check-validated.ts

@@ -0,0 +1,48 @@
+import { useCallback } from 'react'
+import type { AnyFormApi } from '@tanstack/react-form'
+import { useToastContext } from '@/app/components/base/toast'
+import type { FormSchema } from '@/app/components/base/form/types'
+
+export const useCheckValidated = (form: AnyFormApi, FormSchemas: FormSchema[]) => {
+  const { notify } = useToastContext()
+
+  const checkValidated = useCallback(() => {
+    const allError = form?.getAllErrors()
+    const values = form.state.values
+
+    if (allError) {
+      const fields = allError.fields
+      const errorArray = Object.keys(fields).reduce((acc: string[], key: string) => {
+        const currentSchema = FormSchemas.find(schema => schema.name === key)
+        const { show_on = [] } = currentSchema || {}
+        const showOnValues = show_on.reduce((acc, condition) => {
+          acc[condition.variable] = values[condition.variable]
+          return acc
+        }, {} as Record<string, any>)
+        const show = show_on?.every((condition) => {
+          const conditionValue = showOnValues[condition.variable]
+          return conditionValue === condition.value
+        })
+        const errors: any[] = show ? fields[key].errors : []
+
+        return [...acc, ...errors]
+      }, [] as string[])
+
+      if (errorArray.length) {
+        notify({
+          type: 'error',
+          message: errorArray[0],
+        })
+        return false
+      }
+
+      return true
+    }
+
+    return true
+  }, [form, notify, FormSchemas])
+
+  return {
+    checkValidated,
+  }
+}

dify/web/app/components/base/form/hooks/use-get-form-values.ts

@@ -0,0 +1,44 @@
+import { useCallback } from 'react'
+import type { AnyFormApi } from '@tanstack/react-form'
+import { useCheckValidated } from './use-check-validated'
+import type {
+  FormSchema,
+  GetValuesOptions,
+} from '../types'
+import { getTransformedValuesWhenSecretInputPristine } from '../utils'
+
+export const useGetFormValues = (form: AnyFormApi, formSchemas: FormSchema[]) => {
+  const { checkValidated } = useCheckValidated(form, formSchemas)
+
+  const getFormValues = useCallback((
+    {
+      needCheckValidatedValues = true,
+      needTransformWhenSecretFieldIsPristine,
+    }: GetValuesOptions,
+  ) => {
+    const values = form?.store.state.values || {}
+    if (!needCheckValidatedValues) {
+      return {
+        values,
+        isCheckValidated: true,
+      }
+    }
+
+    if (checkValidated()) {
+      return {
+        values: needTransformWhenSecretFieldIsPristine ? getTransformedValuesWhenSecretInputPristine(formSchemas, form) : values,
+        isCheckValidated: true,
+      }
+    }
+    else {
+      return {
+        values: {},
+        isCheckValidated: false,
+      }
+    }
+  }, [form, checkValidated, formSchemas])
+
+  return {
+    getFormValues,
+  }
+}

dify/web/app/components/base/form/hooks/use-get-validators.ts

@@ -0,0 +1,54 @@
+import {
+  isValidElement,
+  useCallback,
+} from 'react'
+import type { ReactNode } from 'react'
+import { useTranslation } from 'react-i18next'
+import type { FormSchema } from '../types'
+import { useRenderI18nObject } from '@/hooks/use-i18n'
+
+export const useGetValidators = () => {
+  const { t } = useTranslation()
+  const renderI18nObject = useRenderI18nObject()
+  const getLabel = useCallback((label: string | Record<string, string> | ReactNode) => {
+    if (isValidElement(label))
+      return ''
+
+    if (typeof label === 'string')
+      return label
+
+    if (typeof label === 'object' && label !== null)
+      return renderI18nObject(label as Record<string, string>)
+  }, [])
+  const getValidators = useCallback((formSchema: FormSchema) => {
+    const {
+      name,
+      validators,
+      required,
+      label,
+    } = formSchema
+    let mergedValidators = validators
+    const memorizedLabel = getLabel(label)
+    if (required && !validators) {
+      mergedValidators = {
+        onMount: ({ value }: any) => {
+          if (!value)
+            return t('common.errorMsg.fieldRequired', { field: memorizedLabel || name })
+        },
+        onChange: ({ value }: any) => {
+          if (!value)
+            return t('common.errorMsg.fieldRequired', { field: memorizedLabel || name })
+        },
+        onBlur: ({ value }: any) => {
+          if (!value)
+            return t('common.errorMsg.fieldRequired', { field: memorizedLabel })
+        },
+      }
+    }
+    return mergedValidators
+  }, [t, getLabel])
+
+  return {
+    getValidators,
+  }
+}