fix[pc-components]: DageEditable没有抛出form实例

packages/backend-cli/template/src/pages/Login/index.tsx

@@ -19,6 +19,10 @@ export default function Login() {
   const [timestamp, setTimestamp] = useState(new Date().getTime());
   const navigate = useNavigate();
 
+  const resetCode = () => {
+    setTimestamp(new Date().getTime());
+  };
+
   const handleLogin = async (vals: LoginRequest) => {
     setLoading(true);
 
@@ -38,6 +42,8 @@ export default function Login() {
       navigate(list[0].redirect || list[0].path, {
         replace: true,
       });
+    } catch (err) {
+      resetCode();
     } finally {
       setLoading(false);
     }
@@ -96,9 +102,7 @@ export default function Login() {
                   className="icon-code"
                   src={`${baseUrl}/api/admin/getRandCode?t=${timestamp}`}
                   alt="验证码"
-                  onClick={() => {
-                    setTimestamp(new Date().getTime());
-                  }}
+                  onClick={resetCode}
                 />
               }
               placeholder="请输入验证码"

packages/docs/docs/components/EditTable/custom-input-demo.tsx

@@ -1,6 +1,6 @@
 import React, { FC, useState } from "react";
 import { DageDefaultColumnTypes, DageEditable } from "@dage/pc-components";
-import { Input, InputNumber } from "antd";
+import { Form, Input, InputNumber } from "antd";
 
 interface Item {
   key: string | number;
@@ -10,6 +10,7 @@ interface Item {
 }
 
 export const DageEditableDemo: FC = () => {
+  const [form] = Form.useForm();
   const [dataSource, setDataSource] = useState<Item[]>([
     {
       key: "0",
@@ -57,11 +58,14 @@ export const DageEditableDemo: FC = () => {
   };
 
   return (
-    <DageEditable
-      bordered
-      dataSource={dataSource}
-      defaultColumns={defaultColumns}
-      handleSave={handleSave}
-    />
+    <Form form={form}>
+      <DageEditable
+        bordered
+        form={form}
+        dataSource={dataSource}
+        defaultColumns={defaultColumns}
+        handleSave={handleSave}
+      />
+    </Form>
   );
 };

packages/docs/docs/components/EditTable/demo.tsx

@@ -1,6 +1,6 @@
 import React, { FC, useRef, useState } from "react";
 import { DageDefaultColumnTypes, DageEditable } from "@dage/pc-components";
-import { Button, Form, Popconfirm, message } from "antd";
+import { Button, Form, FormInstance, Popconfirm, message } from "antd";
 
 interface Item {
   key: string | number;
@@ -10,6 +10,8 @@ interface Item {
 }
 
 export const DageEditableDemo: FC = () => {
+  const [form] = Form.useForm();
+  const editableForm = useRef<FormInstance>(null);
   const [dataSource, setDataSource] = useState<Item[]>([
     {
       key: "0",
@@ -87,22 +89,31 @@ export const DageEditableDemo: FC = () => {
   };
 
   const handleSubmit = async () => {
+    if (
+      !(await form?.validateFields()) ||
+      !(await editableForm.current?.validateFields())
+    )
+      return;
     message.success("校验通过");
+    console.log(form?.getFieldsValue());
   };
 
   return (
-    <Form onFinish={handleSubmit}>
+    <Form form={form} onFinish={handleSubmit}>
       <Form.Item label="表格">
         <Button type="primary" style={{ marginBottom: 16 }} onClick={handleAdd}>
           Add a row
         </Button>
 
-        <DageEditable
-          bordered
-          dataSource={dataSource}
-          defaultColumns={defaultColumns}
-          handleSave={handleSave}
-        />
+        <Form.Item noStyle name="data">
+          <DageEditable
+            ref={editableForm}
+            bordered
+            dataSource={dataSource}
+            defaultColumns={defaultColumns}
+            handleSave={handleSave}
+          />
+        </Form.Item>
       </Form.Item>
       <Form.Item>
         <div style={{ textAlign: "right" }}>

packages/pc-components/src/components/DageEditable/EditableRow.tsx

@@ -1,19 +1,9 @@
-import { Form } from "antd";
 import { FC } from "react";
-import { DageEditableContext } from "./context";
 import { DageEditableRowProps } from "./types";
 
 export const DageEditableRow: FC<DageEditableRowProps> = ({
   index,
   ...props
 }) => {
-  const [form] = Form.useForm();
-
-  return (
-    <Form form={form} component={false}>
-      <DageEditableContext.Provider value={form}>
-        <tr {...props} />
-      </DageEditableContext.Provider>
-    </Form>
-  );
+  return <tr {...props} />;
 };

packages/pc-components/src/components/DageEditable/index.tsx

@@ -1,14 +1,17 @@
-import { Input, Table } from "antd";
+import { Form, FormInstance, Input, Table } from "antd";
 import { DageEditableRow } from "./EditableRow";
 import { DageEditableCell } from "./EditableCell";
 import { Editable } from "./style";
-import { DageColumnTypes, DageEditableProps } from "./types";
+import { DageEditableProps } from "./types";
+import { DageEditableContext } from "./context";
+import { ForwardedRef, forwardRef, useImperativeHandle } from "react";
+
+function DageEditableInner<T extends Record<string, any>>(
+  { defaultColumns, handleSave, ...rest }: DageEditableProps<T>,
+  ref: ForwardedRef<FormInstance<T>>
+) {
+  const [form] = Form.useForm<T>();
 
-export const DageEditable = <T extends Record<string, any>>({
-  defaultColumns,
-  handleSave,
-  ...rest
-}: DageEditableProps<T>) => {
   const components = {
     body: {
       row: DageEditableRow,
@@ -16,7 +19,7 @@ export const DageEditable = <T extends Record<string, any>>({
     },
   };
 
-  const columns = defaultColumns.map((col) => {
+  const columns: any = defaultColumns.map((col) => {
     if (!col.editable) {
       return col;
     }
@@ -33,17 +36,29 @@ export const DageEditable = <T extends Record<string, any>>({
     };
   });
 
+  useImperativeHandle(ref, () => form, [form]);
+
   return (
-    <Editable>
-      <Table
-        {...rest}
-        columns={columns as DageColumnTypes<T>}
-        rowClassName={() => "dage-editable-row"}
-        components={components}
-      />
-    </Editable>
+    <Form form={form} component={false}>
+      <DageEditableContext.Provider value={form}>
+        <Editable>
+          <Table<T>
+            {...rest}
+            columns={columns}
+            rowClassName={() => "dage-editable-row"}
+            components={components}
+          />
+        </Editable>
+      </DageEditableContext.Provider>
+    </Form>
   );
-};
+}
+
+export const DageEditable = forwardRef(DageEditableInner) as <
+  T extends Record<string, any>
+>(
+  props: DageEditableProps<T> & { ref?: ForwardedRef<FormInstance<T>> }
+) => React.ReactElement;
 
 export * from "./context";
 export * from "./types";