feat: generalize form submit button and error display

Author: guansss

src/components/editor/FormError.tsx

@@ -0,0 +1,27 @@
+import { Callout } from '@blueprintjs/core'
+
+import { FieldError, FieldErrors, FieldValues } from 'react-hook-form'
+
+interface FormErrorProps<T extends FieldValues> {
+  errors: FieldErrors<T>
+}
+
+export const FormError = <T extends FieldValues>({
+  errors,
+}: FormErrorProps<T>) => {
+  const errorsArray = Object.values(errors) as FieldError[]
+
+  if (errorsArray.length === 0) {
+    return null
+  }
+
+  return (
+    <Callout intent="danger" className="mt-2" title="发生错误…">
+      <ol className="list-decimal list-inside">
+        {errorsArray.map((error, i) => (
+          <li key={i}>{error?.message || '未知错误'}</li>
+        ))}
+      </ol>
+    </Callout>
+  )
+}

src/components/editor/FormSubmitButton.tsx

@@ -0,0 +1,50 @@
+import { Button, IconName } from '@blueprintjs/core'
+
+import { useEffect, useRef, useState } from 'react'
+import { Control, FieldValues, useFormState } from 'react-hook-form'
+
+interface FormSubmitButtonProps<T extends FieldValues> {
+  className?: string
+  control: Control<T>
+  icon?: IconName
+  children?: React.ReactNode
+}
+
+export const FormSubmitButton = <T extends FieldValues>({
+  className,
+  control,
+  icon,
+  children,
+}: FormSubmitButtonProps<T>) => {
+  const { isSubmitSuccessful } = useFormState({ control })
+
+  const [deferredSuccessful, setDeferredSuccessful] = useState(false)
+  const resetTimer = useRef(-1)
+
+  useEffect(() => {
+    if (isSubmitSuccessful) {
+      setDeferredSuccessful(true)
+
+      resetTimer.current = window.setTimeout(() => {
+        setDeferredSuccessful(false)
+      }, 1000)
+    } else {
+      setDeferredSuccessful(false)
+    }
+
+    return () => {
+      clearTimeout(resetTimer.current)
+    }
+  }, [isSubmitSuccessful])
+
+  return (
+    <Button
+      className={className}
+      intent={deferredSuccessful ? 'success' : 'primary'}
+      type="submit"
+      icon={deferredSuccessful ? 'tick' : icon}
+    >
+      {children}
+    </Button>
+  )
+}

src/components/editor/action/EditorActionAdd.tsx

@@ -14,6 +14,8 @@ import {
 import { CardTitle } from 'components/CardTitle'
 import { FormField, FormField2 } from 'components/FormField'
 import { EditorResetButton } from 'components/editor/EditorResetButton'
+import { FormError } from 'components/editor/FormError'
+import { FormSubmitButton } from 'components/editor/FormSubmitButton'
 import { EditorActionDocColor } from 'components/editor/action/EditorActionDocColor'
 import {
   EditorActionExecPredicateCooling,
@@ -182,8 +184,6 @@ export const EditorActionAdd = ({
     }
   })
 
-  const globalError = (errors as FieldErrors<{ global: void }>).global?.message
-
   return (
     <form onSubmit={onSubmit}>
       <Card className="mb-2 pb-8 pt-4 overflow-auto">
@@ -395,9 +395,9 @@ export const EditorActionAdd = ({
         </EditorActionModule>
 
         <div className="mt-4 flex">
-          <Button intent="primary" type="submit" icon={isNew ? 'add' : 'edit'}>
+          <FormSubmitButton control={control} icon={isNew ? 'add' : 'edit'}>
             {isNew ? '添加' : '保存'}
-          </Button>
+          </FormSubmitButton>
 
           {!isNew && (
             <Button icon="cross" className="ml-2" onClick={onCancel}>
@@ -406,11 +406,7 @@ export const EditorActionAdd = ({
           )}
         </div>
 
-        {globalError && (
-          <Callout intent="danger" className="mt-2">
-            {globalError}
-          </Callout>
-        )}
+        <FormError errors={errors} />
       </Card>
     </form>
   )

src/components/editor/operator/EditorPerformerGroup.tsx

@@ -1,16 +1,13 @@
 import { Button, Callout, InputGroup } from '@blueprintjs/core'
 
 import { useEffect } from 'react'
-import {
-  FieldErrors,
-  SubmitHandler,
-  UseFormSetError,
-  useForm,
-} from 'react-hook-form'
+import { SubmitHandler, UseFormSetError, useForm } from 'react-hook-form'
 
 import { CardTitle } from 'components/CardTitle'
 import { FormField } from 'components/FormField'
 import { EditorResetButton } from 'components/editor/EditorResetButton'
+import { FormError } from 'components/editor/FormError'
+import { FormSubmitButton } from 'components/editor/FormSubmitButton'
 import type { CopilotDocV1 } from 'models/copilot.schema'
 
 import { FactItem } from '../../FactItem'
@@ -57,8 +54,6 @@ export const EditorPerformerGroup = ({
     }
   }
 
-  const globalError = (errors as FieldErrors<{ global: void }>).global?.message
-
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
       <div className="flex items-center mb-4">
@@ -96,9 +91,9 @@ export const EditorPerformerGroup = ({
       />
 
       <div className="flex">
-        <Button intent="primary" type="submit" icon={isNew ? 'add' : 'edit'}>
+        <FormSubmitButton control={control} icon={isNew ? 'add' : 'edit'}>
           {isNew ? '添加' : '保存'}
-        </Button>
+        </FormSubmitButton>
 
         {!isNew && (
           <Button icon="cross" className="ml-2" onClick={onCancel}>
@@ -107,11 +102,7 @@ export const EditorPerformerGroup = ({
         )}
       </div>
 
-      {globalError && (
-        <Callout intent="danger" className="mt-2">
-          {globalError}
-        </Callout>
-      )}
+      <FormError errors={errors} />
     </form>
   )
 }

src/components/editor/operator/EditorPerformerOperator.tsx

@@ -1,15 +1,12 @@
-import { Button, Callout } from '@blueprintjs/core'
+import { Button } from '@blueprintjs/core'
 
 import { useEffect } from 'react'
-import {
-  FieldErrors,
-  SubmitHandler,
-  UseFormSetError,
-  useForm,
-} from 'react-hook-form'
+import { SubmitHandler, UseFormSetError, useForm } from 'react-hook-form'
 
 import { CardTitle } from 'components/CardTitle'
 import { EditorResetButton } from 'components/editor/EditorResetButton'
+import { FormError } from 'components/editor/FormError'
+import { FormSubmitButton } from 'components/editor/FormSubmitButton'
 import { CopilotDocV1 } from 'models/copilot.schema'
 
 import { FormField2 } from '../../FormField'
@@ -94,8 +91,6 @@ export const EditorPerformerOperator = ({
     }
   }
 
-  const globalError = (errors as FieldErrors<{ global: void }>).global?.message
-
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
       <div className="flex items-center mb-4">
@@ -162,9 +157,9 @@ export const EditorPerformerOperator = ({
       </div>
 
       <div className="flex">
-        <Button intent="primary" type="submit" icon={isNew ? 'add' : 'edit'}>
+        <FormSubmitButton control={control} icon={isNew ? 'add' : 'edit'}>
           {isNew ? '添加' : '保存'}
-        </Button>
+        </FormSubmitButton>
 
         {!isNew && (
           <Button icon="cross" className="ml-2" onClick={onCancel}>
@@ -173,11 +168,7 @@ export const EditorPerformerOperator = ({
         )}
       </div>
 
-      {globalError && (
-        <Callout intent="danger" className="mt-2">
-          {globalError}
-        </Callout>
-      )}
+      <FormError errors={errors} />
     </form>
   )
 }