🦄 refactor: Optimize the Form component (#13)

* 🦄 refactor:  Optimize the Form component

Signed-off-by: Wanpan <wanpan96@163.com>

* 🦄 refactor:  Optimize the Form component

Signed-off-by: Wanpan <wanpan96@163.com>

* 🦄 refactor:  It is possible that name equals null

* 🦄 refactor:  Optimize the Form component

Signed-off-by: Wanpan <wanpan96@163.com>

* ✨ feat: add useSwrData

Signed-off-by: Wanpan <wanpan96@163.com>

* feat: swr replace ahooks

* feat: react-router-dom future flag

* feat: mock sleep

---------

Signed-off-by: Wanpan <wanpan96@163.com>

Author: wanpan11

README-EN.md

@@ -21,7 +21,7 @@ React typescript backend management system project template, built-in dynamic ne
 #### main dependency
 
 - axios
-- ahooks
+- swr
 - tailwindcss
 - ant-design
 - mobx

README.md

@@ -23,7 +23,7 @@ react-typescript 后台管理系统项目模版、内置动态嵌套路由、数
 #### 主要依赖库
 
 - axios
-- ahooks
+- swr
 - tailwindcss
 - ant-design
 - mobx

package.json

@@ -47,7 +47,6 @@
   "dependencies": {
     "@ant-design/icons": "^5.3.4",
     "@unocss/reset": "^0.53.6",
-    "ahooks": "^3.7.10",
     "antd": "^5.15.3",
     "axios": "^1.6.8",
     "classnames": "^2.5.1",
@@ -56,7 +55,8 @@
     "nanoid": "^4.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.22.3"
+    "react-router-dom": "^6.22.3",
+    "swr": "^2.3.3"
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": [

src/api/setting.ts

@@ -8,6 +8,6 @@ export const companyService = {
     });
   },
   list: (data: CompanyApi.ListReq) => {
-    return request.send<CompanyApi.ListRes>("/company/list", "get", data);
+    return request.send<CompanyApi.ListRes>("/company/list", "post", data);
   },
 };

src/components/FormFilter/index.tsx

@@ -2,55 +2,48 @@ import { memo, useRef } from "react";
 import { Button, FormInstance } from "antd";
 import classNames from "classnames";
 
-import FormList from "../FormList";
+import FormList, { FormListProps } from "../FormList";
 
-export interface FormFilterProps {
+export interface FormFilterProps extends Pick<FormListProps, "form" | "onOk" | "onForm" | "onValuesChange" | "initialValues" | "stageValues"> {
+  className?: string;
+  filterInfo: FormItem[];
   reset?: boolean;
-  compact?: boolean;
   loading?: boolean;
-  className?: string;
+  compact?: boolean;
   searchBtn?: boolean;
-
-  filterInfo: FormItem[];
-  initialValues?: Record<string, any>;
-  onSubmit?: (value: Record<string, any>) => void;
-  onForm?: (form: FormInstance) => void;
-  onValuesChange?: (changedValues: any, values: Record<string, any>) => void;
 }
 
-const FormFilter = ({ searchBtn = true, filterInfo, initialValues, reset, loading, compact = false, className, onSubmit, onForm, onValuesChange }: FormFilterProps) => {
+const FormFilter = (props: FormFilterProps) => {
+  const { className, filterInfo, reset, loading, compact = false, searchBtn = true, onForm, ...resetProps } = props;
+
   const formInstance = useRef<FormInstance<any> | null>(null);
 
   const getForm = (form: FormInstance<any>) => {
     formInstance.current = form;
-    onForm && onForm(form);
+    onForm?.(form);
   };
 
-  const getBtn = () => {
-    return (
-      <div className={compact ? "ml-10" : "absolute bottom-0 right-0"}>
-        {reset ? <Button htmlType="reset">重置</Button> : null}
+  const getBtn = () => (
+    <div className={compact ? "ml-10" : "absolute bottom-0 right-0"}>
+      {reset ? <Button htmlType="reset">重置</Button> : null}
 
-        <Button htmlType="submit" type="primary" loading={loading} className="ml-6">
-          查询
-        </Button>
-      </div>
-    );
-  };
+      <Button className="ml-6" htmlType="submit" type="primary" loading={loading}>
+        查询
+      </Button>
+    </div>
+  );
 
   return (
-    <div className={classNames("box-border rounded-md bg-white p-6 dark:border dark:border-dark_border dark:bg-dark_bg", className)}>
+    <div className={classNames("box-border rounded-md bg-white p-6", className)}>
       <FormList
-        layout="inline"
         colon={false}
+        layout="inline"
         submitBtn={false}
         className="relative"
         itemInfo={filterInfo}
-        initialValues={initialValues}
         searchBtn={searchBtn ? getBtn() : null}
-        onOk={onSubmit}
         onForm={getForm}
-        onValuesChange={onValuesChange}
+        {...resetProps}
       />
     </div>
   );

src/components/FormList/index.tsx

@@ -1,113 +1,130 @@
-import { memo, ReactElement, useEffect } from "react";
-import { Button, Form, FormInstance } from "antd";
+import { memo, ReactElement, useEffect, useMemo } from "react";
+import { Button, Form, FormInstance, FormProps } from "antd";
 
 import { getFormElement } from "../tools";
 
-export interface FormFilterProps {
-  style?: any;
-  colon?: boolean;
-  layout?: "horizontal" | "vertical" | "inline";
+export interface FormListProps extends Pick<FormProps, "form" | "colon" | "className" | "style" | "layout" | "labelAlign" | "onValuesChange"> {
+  labelCol?: number;
+  wrapperCol?: number;
+
+  // 搜索
   searchBtn?: null | ReactElement;
+  // 提交
+  submitBtn?: boolean;
   submitNode?: ReactElement;
 
-  submitBtn?: boolean;
   itemInfo: FormItem[];
-  className?: string;
-  labelCol?: number;
-  wrapperCol?: number;
-  initialValues?: Record<string, any>;
-  onOk?: (value: Record<string, any>) => void;
+  /**
+   * @description 只在初始化时生效
+   */
+  initialValues?: FormProps["initialValues"];
+  /**
+   * @description 该值变化后会触发表单值更新
+   */
+  stageValues?: FormListProps["initialValues"];
+  onOk?: FormProps["onFinish"];
   onForm?: (form: FormInstance) => void;
-  onValuesChange?: (changedValues: any, values: Record<string, any>) => void;
 }
 
 /**
  *
  * @description extend antd Form
  */
-const FormList = ({
-  style,
-  colon,
-  layout,
-  searchBtn,
-  submitBtn = true,
-  submitNode,
-  itemInfo,
-  className,
-  labelCol,
-  wrapperCol,
-  initialValues,
-
-  onOk,
-  onForm,
-  onValuesChange,
-}: FormFilterProps) => {
-  const [form] = Form.useForm();
-
-  const onFinish = (value: Record<string, any>) => {
-    onOk && onOk(value);
-  };
+const FormList = (props: FormListProps) => {
+  const {
+    form,
+    itemInfo,
+    labelCol,
+    wrapperCol,
+    stageValues,
+    initialValues,
+
+    searchBtn,
+    submitBtn = true,
+    submitNode,
+
+    onOk,
+    onForm,
+    ...restProps
+  } = props;
 
+  const [insideForm] = Form.useForm();
+  const realForm = form ? form : insideForm;
+
+  // 只在初始化时生效
   useEffect(() => {
-    onForm && onForm(form);
+    onForm?.(realForm);
 
     if (initialValues) {
-      form.setFieldsValue(initialValues);
+      realForm.setFieldsValue(initialValues);
     } else {
       itemInfo.forEach(e => {
         if (e.initialValue !== undefined && e.initialValue !== null) {
-          form.setFieldValue(e.name, e.initialValue);
+          realForm.setFieldValue(e.name, e.initialValue);
         }
       });
     }
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  // 该值变化后会触发表单值更新
+  useEffect(() => {
+    if (stageValues && realForm) {
+      realForm.setFieldsValue(stageValues);
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [JSON.stringify(stageValues)]);
+
+  /* ======================= render ========================= */
+  const submitBtnNode = useMemo(() => {
+    if (submitBtn) {
+      if (submitNode) {
+        return submitNode;
+      } else {
+        return (
+          <Button htmlType="submit" type="primary" block>
+            保存
+          </Button>
+        );
+      }
+    } else {
+      return null;
+    }
+  }, [submitBtn, submitNode]);
+
   return (
-    <div className={className}>
-      <Form
-        form={form}
-        style={style}
-        labelCol={labelCol ? { span: labelCol } : undefined}
-        wrapperCol={wrapperCol ? { span: wrapperCol } : undefined}
-        labelAlign="right"
-        colon={colon}
-        layout={layout}
-        onFinish={onFinish}
-        onValuesChange={onValuesChange}
-      >
-        {itemInfo.map(e =>
-          e.hide ? null : e.type === "blockNode" ? (
-            <span key={typeof e.name === "string" ? e.name : e.name.join("_")}>{e.label}</span>
-          ) : (
-            <Form.Item
-              key={typeof e.name === "string" ? e.name : e.name.join("_")}
-              name={e.name}
-              label={e.label}
-              extra={e.extra}
-              rules={[e.rule]}
-              valuePropName={e.type === "switch" ? "checked" : "value"}
-              initialValue={e.type === "radio" ? e.options?.[0].value : undefined}
-            >
-              {getFormElement(e.type, e)}
-            </Form.Item>
-          )
-        )}
-
-        {searchBtn}
-
-        {submitBtn ? (
-          submitNode ? (
-            submitNode
-          ) : (
-            <Button htmlType="submit" type="primary" block>
-              保存
-            </Button>
-          )
-        ) : null}
-      </Form>
-    </div>
+    <Form form={realForm} labelCol={labelCol ? { span: labelCol } : undefined} wrapperCol={wrapperCol ? { span: wrapperCol } : undefined} onFinish={onOk} {...restProps}>
+      {itemInfo.map((e, idx) => {
+        if (e.hide) {
+          return null;
+        }
+
+        if (e.type === "blockNode") {
+          return <span key={typeof e.name === "string" ? e.name || idx : e.name.join("_")}>{e.label}</span>;
+        }
+
+        return (
+          <Form.Item
+            label={e.label}
+            extra={e.extra}
+            rules={[e.rule]}
+            hidden={!(e.visible ?? true)}
+            name={e.name ? e.name : undefined}
+            valuePropName={e.type === "switch" ? "checked" : "value"}
+            key={typeof e.name === "string" ? e.name || idx : e.name.join("_")}
+            initialValue={e.type === "radio" ? e.options?.[0].value : e.type === "switch" ? true : undefined}
+          >
+            {getFormElement(e.type, e)}
+          </Form.Item>
+        );
+      })}
+
+      {searchBtn}
+
+      {submitBtnNode}
+    </Form>
   );
 };