@hw-component/table 1.10.23 → 1.10.25

package/src/components/EditTable/hooks.ts

@@ -1,6 +1,6 @@
 import { useRequest } from "ahooks";
-import { HEditTableProps } from "./modal";
-import { MutableRefObject, useEffect, useMemo, useRef, useState } from "react";
+import {EditTableInstance, HEditTableProps} from "./modal";
+import React, { MutableRefObject, useEffect, useMemo, useRef, useState } from "react";
 import type { ActionType } from "@ant-design/pro-table";
 import { EditableFormInstance } from "@ant-design/pro-table/lib/components/EditableTable";
 import config from "../render/config";
@@ -73,6 +73,42 @@ export const useCuRef = ({ actionRef, editableFormRef }: HEditTableProps) => {
     cuEditableFormRef,
   };
 };
+
+export const useEditTable = ():EditTableInstance => {
+    return {
+         reload:()=>{
+           return Promise.resolve();
+         },
+       editableForm:{},
+      action:{}
+    }
+}
+export const useCuEditTable=({table}:HEditTableProps)=>{
+   const cuTable=useEditTable();
+   return table||cuTable;
+}
+
+interface EditTableInitParams {
+  table:EditTableInstance;
+  actionRef:MutableRefObject<ActionType | undefined>;
+  editableFormRef:MutableRefObject<EditableFormInstance | undefined>;
+  request:VoidFunction;
+}
+
+export const useEditTableInit = ({table,actionRef, editableFormRef,request }:EditTableInitParams) => {
+    useEffect(() => {
+        if (!table) {
+          return;
+        }
+
+        table.editableForm=editableFormRef?.current||{};
+        table.reload=()=>{
+           request();
+        }
+        table.action=actionRef?.current||{};
+    },[actionRef,editableFormRef,table])
+}
+
 interface ColProps extends HEditTableProps {
   reload: VoidFunction;
 }

package/src/components/EditTable/index.tsx

@@ -1,15 +1,16 @@
-import { EditableProTable } from "@ant-design/pro-table";
+import {type ActionType, EditableProTable} from "@ant-design/pro-table";
 import { HEditTableProps } from "./modal";
-import { useClassName } from "@/components/hooks";
+import { useClassName } from "../hooks";
 import HTablePagination from "../HTablePagination";
 import { ConfigProvider } from "antd";
 import {
   emptyDefaultRender,
   errorDefaultRender,
-} from "@/components/HTableBody/defaultRender";
-import { useHTableConfigContext } from "@/components/TableConfig";
-import { useColsMk, useCuRef, useListRequest } from "./hooks";
-import React from "react";
+} from "../HTableBody/defaultRender";
+import { useHTableConfigContext } from "../TableConfig";
+import {useColsMk, useCuEditTable, useEditTableInit, useListRequest} from "./hooks";
+import React, {useRef} from "react";
+import {EditableFormInstance} from "@ant-design/pro-table/lib/components/EditableTable";
 
 export default ({
   configData,
@@ -26,11 +27,11 @@ export default ({
   errorRender,
   onAdd,
   onEdit,
-  actionRef,
-  editableFormRef,
   style,
+  table,
   ...props
 }: HEditTableProps) => {
+  const cuTable=useCuEditTable({table});
   const tableBody = useClassName("hw-table-body");
   const { loading, data, error, run } = useListRequest({
     request,
@@ -41,11 +42,15 @@ export default ({
     emptyRender: tableEmptyRender = emptyDefaultRender,
     errorRender: tableErrorRender = errorDefaultRender,
   } = useHTableConfigContext({ emptyRender, errorRender });
+  const defaultActionRef = useRef<ActionType>();
+  const defaultEditableFormRef = useRef<EditableFormInstance>();
 
-  const { cuActionRef, cuEditableFormRef } = useCuRef({
-    actionRef,
-    editableFormRef,
-  });
+  useEditTableInit({
+     actionRef:defaultActionRef,
+    editableFormRef:defaultEditableFormRef,
+    table:cuTable,
+    request:run
+  })
   const columns = useColsMk({ configData, reload: run });
   return (
     <div className={tableBody} style={style}>
@@ -64,19 +69,23 @@ export default ({
           columns={columns}
           loading={loading}
           rowKey={rowKey}
-          editableFormRef={cuEditableFormRef}
-          actionRef={cuActionRef}
+          editableFormRef={defaultEditableFormRef}
+          actionRef={defaultActionRef}
           value={data?.records}
-          recordCreatorProps={recordCreatorProps===false?recordCreatorProps:{
-            position: "bottom",
-            record: () => ({ id: "add", ...defaultRecordValue }),
-            creatorButtonText,
-            ...recordCreatorProps,
-          }}
+          recordCreatorProps={
+            recordCreatorProps === false
+              ? recordCreatorProps
+              : {
+                  position: "bottom",
+                  record: () => ({ id: "add", ...defaultRecordValue }),
+                  creatorButtonText,
+                  ...recordCreatorProps,
+                }
+          }
           editable={{
             type: "single",
             onCancel: async (keys) => {
-              cuEditableFormRef.current?.resetFields([keys]);
+              defaultEditableFormRef.current?.resetFields([keys]);
             },
             actionRender: (trow, tconfig, defaultDoms) => {
               return [defaultDoms.save, defaultDoms.cancel];
@@ -85,7 +94,7 @@ export default ({
               const { index, id, ...oRow } = row;
               if (key === "add") {
                 await onAdd?.(oRow);
-                cuEditableFormRef.current?.resetFields(["add"]);
+                defaultEditableFormRef.current?.resetFields(["add"]);
                 run();
                 return;
               }
@@ -93,7 +102,7 @@ export default ({
                 id,
                 ...oRow,
               });
-              cuEditableFormRef.current?.resetFields([key]);
+              defaultEditableFormRef.current?.resetFields([key]);
               run();
             },
             ...editable,

package/src/components/EditTable/modal.ts

@@ -1,8 +1,14 @@
-import { EditableProTableProps } from "@ant-design/pro-table/lib/components/EditableTable";
+import {EditableFormInstance, EditableProTableProps} from "@ant-design/pro-table/lib/components/EditableTable";
 import { ParamsType } from "@ant-design/pro-provider";
 import { IPaginationProps } from "../HTablePagination";
 import { EmptyPageRender, ErrorPageRender } from "../modal";
-import { ProColumns } from "@ant-design/pro-table/lib/typing";
+import {ActionType, ProColumns} from "@ant-design/pro-table/lib/typing";
+
+export interface EditTableInstance {
+  editableForm:EditableFormInstance|{};
+  action:ActionType|{};
+  reload:()=>void;
+}
 
 export interface HEditTableProps<T = any>
   extends Omit<
@@ -15,7 +21,7 @@ export interface HEditTableProps<T = any>
     EditableProTableProps<T, ParamsType>["recordCreatorProps"]
   >;
   dataSource?: any[];
-  request?: (params: Record<string, any>) => Promise<T>;
+  request?: (params?: Record<string, any>) => Promise<T>;
   pagination?: IPaginationProps | false;
   manual?: boolean;
   emptyRender?: EmptyPageRender;
@@ -23,4 +29,5 @@ export interface HEditTableProps<T = any>
   onAdd?: (data: T) => Promise<void>;
   onEdit?: (data: T) => Promise<void>;
   configData?: ProColumns<T>[];
+  table?:EditTableInstance;
 }

package/src/components/index.tsx

@@ -15,3 +15,4 @@ export { DefaultSubComponent as HTableHeaderSubBtn } from "./HTableHeader/defaul
 export { default as HEditTable } from "./EditTable";
 export { default as HModalEditTable } from "./DialogTable/ModalEditTable";
 export { default as HDwEditTable } from "./DialogTable/DwEditTable";
+export { useEditTable } from "./EditTable/hooks";

package/src/pages/EditTable/index.tsx

@@ -1,4 +1,4 @@
-import { HEditTable } from "@/components";
+import { HEditTable ,useEditTable} from "@/components";
 import { useRef, useState } from "react";
 import type { ActionType } from "@ant-design/pro-table";
 
@@ -10,15 +10,15 @@ const dataSource = [
   },
 ];
 export default () => {
-  const defaultActionRef = useRef<ActionType>();
   const [cuData, setCuData] = useState(dataSource);
-  console.log(defaultActionRef, "defaultActionRef");
+  const editTableInstance=useEditTable();
   return (
     <div>
-      <div onClick={() => {}}>刷新</div>
+      <div onClick={() => {
+          editTableInstance.reload()
+      }}>刷新</div>
       <HEditTable
-        manual
-       recordCreatorProps={false}
+        table={editTableInstance}
         onAdd={async (data) => {
           const newData = [...cuData];
           newData.push({
@@ -28,16 +28,11 @@ export default () => {
           setCuData(newData);
         }}
         onEdit={async (data) => {}}
-        request={() => {
-          return {
-            records: [
-              {
-                id: 1,
-                title: "1",
-                time: "1757574280",
-              },
-            ],
-          };
+        request={()=>{
+            console.log("fffff")
+            return {
+
+            }
         }}
         configData={[
           { title: "标题", dataIndex: "title" },