refactor(ui): useAntdForm

ui/src/components/access/AccessEditFormHuaweiCloudConfig.tsx

@@ -1,28 +1,27 @@
-import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useDeepCompareEffect } from "ahooks";
 import { Form, Input, type FormInstance } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
+import { useAntdForm } from "@/hooks";
 import { type HuaweiCloudAccessConfig } from "@/domain/access";
 
-type AccessEditFormHuaweiCloudConfigModelType = Partial<HuaweiCloudAccessConfig>;
+type AccessEditFormHuaweiCloudConfigModelValues = Partial<HuaweiCloudAccessConfig>;
 
 export type AccessEditFormHuaweiCloudConfigProps = {
   form: FormInstance;
   formName: string;
   disabled?: boolean;
-  model?: AccessEditFormHuaweiCloudConfigModelType;
-  onModelChange?: (model: AccessEditFormHuaweiCloudConfigModelType) => void;
+  model?: AccessEditFormHuaweiCloudConfigModelValues;
+  onModelChange?: (model: AccessEditFormHuaweiCloudConfigModelValues) => void;
 };
 
-const initModel = () => {
+const initFormModel = (): AccessEditFormHuaweiCloudConfigModelValues => {
   return {
     accessKeyId: "",
     secretAccessKey: "",
     region: "cn-north-1",
-  } as AccessEditFormHuaweiCloudConfigModelType;
+  };
 };
 
 const AccessEditFormHuaweiCloudConfig = ({ form, formName, disabled, model, onModelChange }: AccessEditFormHuaweiCloudConfigProps) => {
@@ -48,18 +47,17 @@ const AccessEditFormHuaweiCloudConfig = ({ form, formName, disabled, model, onMo
       .nullish(),
   });
   const formRule = createSchemaFieldRule(formSchema);
+  const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
+    form: form,
+    initialValues: model ?? initFormModel(),
+  });
 
-  const [initialValues, setInitialValues] = useState<Partial<z.infer<typeof formSchema>>>(model ?? initModel());
-  useDeepCompareEffect(() => {
-    setInitialValues(model ?? initModel());
-  }, [model]);
-
-  const handleFormChange = (_: unknown, fields: AccessEditFormHuaweiCloudConfigModelType) => {
-    onModelChange?.(fields);
+  const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
+    onModelChange?.(values as AccessEditFormHuaweiCloudConfigModelValues);
   };
 
   return (
-    <Form form={form} disabled={disabled} initialValues={initialValues} layout="vertical" name={formName} onValuesChange={handleFormChange}>
+    <Form {...formProps} form={formInst} disabled={disabled} layout="vertical" name={formName} onValuesChange={handleFormChange}>
       <Form.Item
         name="accessKeyId"
         label={t("access.form.huaweicloud_access_key_id.label")}