@hw-component/table 0.0.4-beta-v3 → 0.0.4-beta-v7

package/src/components/HTableFooter/index.tsx

@@ -4,7 +4,7 @@ import type { ActionRenderFn } from "../modal";
 import { useHTableContext } from "../context";
 import React from "react";
 import type { HTableInstance, ResultModal, RowObj } from "../modal";
-import type {FooterBtnRenderFn} from "../modal";
+import type { FooterBtnRenderFn } from "../modal";
 
 const { Text, Link } = Typography;
 interface IFooterProps {
@@ -15,15 +15,20 @@ interface IFooterProps {
     data?: ResultModal
   ) => React.ReactNode;
   footerStyle?: React.CSSProperties;
-  footerBtnRender?: FooterBtnRenderFn
+  footerBtnRender?: FooterBtnRenderFn;
 }
-export default ({ actionRender, footerRender, footerStyle ,footerBtnRender}: IFooterProps) => {
+export default ({
+  actionRender,
+  footerRender,
+  footerStyle,
+  footerBtnRender,
+}: IFooterProps) => {
   const {
     data,
     selectedRowData = {},
     allSelectChange,
     tableInstance,
-    setSelectedRowData
+    setSelectedRowData,
   } = useHTableContext();
   const { total = "0" } = data || {};
   const totalNum = Number.parseInt(total, 10);
@@ -33,21 +38,25 @@ export default ({ actionRender, footerRender, footerStyle ,footerBtnRender}: IFo
   if (footerRender) {
     return <>{footerRender(tableInstance, selectedRowData, data)}</>;
   }
-  const btnDom=  <Space size={20}>
-    <Button
+  const btnDom = (
+    <Space size={20}>
+      <Button
         type={"primary"}
         ghost
         disabled={showTotalNum == 0}
         style={{ padding: "4px 24px", borderRadius: "4px" }}
-        onClick={()=>{allSelectChange?.()}}
-    >
-      {!selectAll ? "选择全部" : "取消选择"}
-    </Button>
-    <Text type={"secondary"}>共{total}条</Text>
-    <Text type={"secondary"}>
-      已选择<Link>{num}</Link>条
-    </Text>
-  </Space>;
+        onClick={() => {
+          allSelectChange?.();
+        }}
+      >
+        {!selectAll ? "选择全部" : "取消选择"}
+      </Button>
+      <Text type={"secondary"}>共{total}条</Text>
+      <Text type={"secondary"}>
+        已选择<Link>{num}</Link>条
+      </Text>
+    </Space>
+  );
   const dom = (
     <Card
       style={{ borderRadius: 4, ...footerStyle }}
@@ -55,7 +64,9 @@ export default ({ actionRender, footerRender, footerStyle ,footerBtnRender}: IFo
       className="hw_table_footer"
     >
       <Row justify="space-between" align="middle">
-        {footerBtnRender?footerBtnRender(btnDom,total,selectedRowData,setSelectedRowData):btnDom}
+        {footerBtnRender
+          ? footerBtnRender(btnDom, total, selectedRowData, setSelectedRowData)
+          : btnDom}
         {actionRender?.(selectedRowData, tableInstance)}
       </Row>
     </Card>

package/src/components/HTableHeader/utils.ts

@@ -45,12 +45,12 @@ function formConfigDataItemProvider({
   title,
   name,
   dataIndex,
-  itemProps={},
+  itemProps = {},
   searchRender,
 }: ConfigItemModal): HItemProps {
-  const {allowClear=true}=(itemProps as any);
+  const { allowClear = true } = itemProps as any;
   return {
-    itemProps:{
+    itemProps: {
       ...itemProps,
       allowClear,
     },

package/src/components/ModalTable/hooks.ts

@@ -0,0 +1,58 @@
+import useHTable from "../hooks/useHTable";
+import type {
+  HDiaLogTableInstance,
+  HOnDiaLogTableInstance,
+  ModalTableProps,
+} from "../modal";
+import { useEffect, useState } from "react";
+import type { DialogParamsModal } from "../modal";
+
+export const useHDialogTable = () => {
+  const tableInstance = useHTable();
+  return {
+    ...tableInstance,
+    show: (params: DialogParamsModal) => {},
+    hide: () => {},
+  } as HDiaLogTableInstance;
+};
+interface ParamsModal extends HOnDiaLogTableInstance {
+  dialogTable?: HDiaLogTableInstance;
+}
+export const useTableProps = ({
+  configData,
+  params,
+  title,
+    request,
+}: Omit<ModalTableProps, "tableProps">) => {
+  const [modalTableParams, setModalTableParams] = useState({
+    params,
+    title,
+    configData,
+    request
+  });
+  return {
+    modalTableParams,
+    setModalTableParams,
+  };
+};
+export const useCurrentTable = ({ show, hide, dialogTable }: ParamsModal) => {
+  const cuDialogTableInstance = useHDialogTable();
+  const dialogTableInstance = dialogTable || cuDialogTableInstance;
+  useEffect(() => {
+    dialogTableInstance.show = show;
+    dialogTableInstance.hide = hide;
+  }, []);
+  return dialogTableInstance;
+};
+
+export const useVisible = (visible: boolean) => {
+  const [modalVisible, setModalVisible] = useState(visible);
+  useEffect(() => {
+    setModalVisible(visible);
+  }, [visible]);
+
+  return {
+    modalVisible,
+    setModalVisible,
+  };
+};

package/src/components/ModalTable/index.tsx

@@ -0,0 +1,71 @@
+import { Modal } from "antd";
+import Table from "../Table";
+import type { ModalTableProps } from "../modal";
+import { useCurrentTable, useTableProps, useVisible } from "./hooks";
+export default ({
+  configData:configDataProps,
+  request:requestProps,
+  tableProps,
+  dialogTable,
+  visible = false,
+  onCancel,
+  ...props
+}: ModalTableProps) => {
+  const { modalVisible, setModalVisible } = useVisible(visible);
+  const { modalTableParams, setModalTableParams } = useTableProps({
+    ...props,
+    configData:configDataProps,
+    request:requestProps
+  });
+  const currentTable = useCurrentTable({
+    show: (showParams) => {
+      if (showParams) {
+        setModalTableParams((oldParams) => {
+          const { configData, request, title } = oldParams;
+          const {
+            title: showTitle = title,
+            configData: showConfigData = configData,
+            request: showReq,
+            params = request,
+          } = showParams;
+          return {
+            title: showTitle,
+            request: showReq,
+            configData: showConfigData,
+            params,
+          };
+        });
+      }
+      setModalVisible(true);
+    },
+    hide: () => {
+      setModalVisible(false);
+    },
+    dialogTable,
+  });
+  const { configData, request, title, params } = modalTableParams;
+  const req = request
+    ? (reqParams) => {
+        return request({ ...params, ...reqParams });
+      }
+    : undefined;
+  return (
+    <Modal
+      {...props}
+      visible={modalVisible}
+      onCancel={(e) => {
+        setModalVisible(false);
+        onCancel?.(e);
+      }}
+      destroyOnClose
+      title={title}
+    >
+      <Table
+        {...tableProps}
+        configData={configData||[]}
+        table={currentTable}
+        request={req}
+      />
+    </Modal>
+  );
+};

package/src/components/Table.tsx

@@ -23,12 +23,13 @@ export default ({
   spaceSize = 15,
   className,
   paginationStyle,
-                    footerBtnRender,
+  footerBtnRender,
   ...props
 }: HTableProps) => {
   const { run, loading, data, error, saveParams } = useReq({ request });
   const dispatch = useDispatch(action);
-  const { selectedRowData, rowOnChange, allSelectChange ,setSelectedRowData} = useRowObj();
+  const { selectedRowData, rowOnChange, allSelectChange, setSelectedRowData } =
+    useRowObj();
   const tableInstance = useCurrentTable({
     table,
     reload: (params) => {
@@ -62,27 +63,27 @@ export default ({
           return run(value);
         },
         onPageChange: tableInstance.table.reloadWithParams,
-        setSelectedRowData
+        setSelectedRowData,
       }}
     >
-        <Space direction={"vertical"} size={spaceSize} style={{width:'100%'}}>
-            {!hideHeader && (
-                <Header searchSpan={searchSpan} headerStyle={headerStyle} />
-            )}
-            <Body
-                tableStyle={tableStyle}
-                paginationStyle={paginationStyle}
-                {...props}
-            />
-            {footerRender !== false && (
-                <Footer
-                    actionRender={actionRender}
-                    footerRender={footerRender}
-                    footerStyle={footerStyle}
-                    footerBtnRender={footerBtnRender}
-                />
-            )}
-        </Space>
+      <Space direction={"vertical"} size={spaceSize} style={{ width: "100%" }}>
+        {!hideHeader && (
+          <Header searchSpan={searchSpan} headerStyle={headerStyle} />
+        )}
+        <Body
+          tableStyle={tableStyle}
+          paginationStyle={paginationStyle}
+          {...props}
+        />
+        {footerRender !== false && (
+          <Footer
+            actionRender={actionRender}
+            footerRender={footerRender}
+            footerStyle={footerStyle}
+            footerBtnRender={footerBtnRender}
+          />
+        )}
+      </Space>
     </HTableContext.Provider>
   );
 };

package/src/components/TableCustomize.tsx

@@ -19,7 +19,8 @@ const Index: React.FC<HTableProps> = ({
     ...props,
   } as IParamsModal);
   const dispatch = useDispatch(action);
-  const { selectedRowData, rowOnChange, allSelectChange ,setSelectedRowData} = useRowObj();
+  const { selectedRowData, rowOnChange, allSelectChange, setSelectedRowData } =
+    useRowObj();
   const tableInstance = useCurrentTable({
     table,
     reload: (params) => {
@@ -32,9 +33,9 @@ const Index: React.FC<HTableProps> = ({
       rowOnChange([], []);
       return run({ ...saveParams.old, ...reloadParams });
     },
-    getTableParams:()=>{
-        return saveParams.old;
-    }
+    getTableParams: () => {
+      return saveParams.old;
+    },
   });
   return (
     <HTableContext.Provider
@@ -54,7 +55,7 @@ const Index: React.FC<HTableProps> = ({
           return run(value);
         },
         onPageChange: tableInstance.table.reloadWithParams,
-          setSelectedRowData
+        setSelectedRowData,
       }}
     >
       {children}

package/src/components/context.ts

@@ -13,7 +13,7 @@ interface HContextModal extends Omit<HTableProps, "request"> {
   params?: any;
   onFinish: (value: Record<string, any>) => Promise<any>;
   onPageChange: (value: Record<string, any>) => Promise<any>;
-  setSelectedRowData:(row:RowObj)=>void;
+  setSelectedRowData: (row: RowObj) => void;
 }
 
 export const HTableContext = React.createContext<HContextModal | null>(null);

package/src/components/hooks/useCurrentTable.ts

@@ -17,7 +17,7 @@ export default ({
   changeRowData,
   dispatch,
   reloadWithParams,
-                  getTableParams,
+  getTableParams,
 }: currentTableParams) => {
   const useCurrentTable = useHTable();
   return useMemo(() => {

package/src/components/hooks/useHTable.tsx

@@ -15,7 +15,7 @@ export default () => {
         return Promise.resolve(params);
       },
       getParams: () => {
-        return ({} as any);
+        return {} as any;
       },
     };
   }, []);

package/src/components/hooks/useReq.ts

@@ -1,4 +1,4 @@
-import {useEffect, useMemo} from "react";
+import { useEffect, useMemo } from "react";
 import { useRequest } from "ahooks";
 import type { ParamsModal, ResultModal } from "@/components/modal";
 export interface IParamsModal {
@@ -7,50 +7,59 @@ export interface IParamsModal {
   error?: Error;
   reload?: (params: any) => Promise<any>;
   dataSource?: any;
-  manual?: boolean
+  manual?: boolean;
 }
-export default ({ request ,loading,error,reload,dataSource,manual=false}: IParamsModal) => {
+export default ({
+  request,
+  loading,
+  error,
+  reload,
+  dataSource,
+  manual = false,
+}: IParamsModal) => {
   const saveParams = useMemo(() => {
     return {
       old: {},
     };
   }, []);
-  const reloadFn=async (params: Record<string, any>={})=>{
+  const reloadFn = async (params: Record<string, any> = {}) => {
     const { size = "10", current = "1", ...oParams } = params;
     const reqParams = { size, current, ...oParams };
     saveParams.old = reqParams;
     return reload?.(reqParams);
-  }
-  const resultAction = useRequest((params = {}) => {
-    const { size = "10", current = "1", ...oParams } = params;
-    const reqParams = { size, current, ...oParams };
-    saveParams.old = reqParams;
-    return request?.(reqParams);
-  },{manual:true});
+  };
+  const resultAction = useRequest(
+    (params = {}) => {
+      const { size = "10", current = "1", ...oParams } = params;
+      const reqParams = { size, current, ...oParams };
+      saveParams.old = reqParams;
+      return request?.(reqParams);
+    },
+    { manual: true }
+  );
 
-  useEffect(()=>{
-     if (manual){
-       return;
-     }
-     if (request){
-        resultAction.run();
-        return;
-     }
-     reloadFn();
-  },[]);
+  useEffect(() => {
+    if (manual) {
+      return;
+    }
+    if (request) {
+      resultAction.run();
+      return;
+    }
+    reloadFn();
+  }, []);
 
-  if (request){
+  if (request) {
     return {
       ...resultAction,
       saveParams,
     };
   }
-  return  {
+  return {
     loading,
     error,
-    data:dataSource,
-    run:reloadFn,
+    data: dataSource,
+    run: reloadFn,
     saveParams,
-
-  }
+  };
 };

package/src/components/hooks/useRowObj.ts

@@ -12,7 +12,7 @@ export default () => {
     });
   };
   const allSelectChange = (checked?: boolean) => {
-    const newChecked=typeof checked==="undefined"?!selectAll:checked;
+    const newChecked = typeof checked === "undefined" ? !selectAll : checked;
     setSelectedRowData({
       selectAll: newChecked,
     });
@@ -22,6 +22,6 @@ export default () => {
     rowOnChange,
     selectedRowData,
     allSelectChange,
-    setSelectedRowData
+    setSelectedRowData,
   };
 };

package/src/components/index.tsx

@@ -7,3 +7,5 @@ export { default as HTableBody } from "./HTableBody";
 export { default as HTableFooter } from "./HTableFooter";
 export { default as HTableHeader } from "./HTableHeader";
 export { default as HTablePagination } from "./HTablePagination";
+export { default as HModalTable } from "./ModalTable";
+export { useHDialogTable } from "./ModalTable/hooks";

package/src/components/modal.ts

@@ -6,6 +6,7 @@ import type {
 } from "@hw-component/form/es/Form/modal";
 import type { ColProps } from "antd";
 import type React from "react";
+import type { ModalProps } from "antd";
 
 export interface RowObj {
   keys?: React.Key[];
@@ -40,10 +41,10 @@ export type ActionRenderFn = (
   tableInstance: HTableInstance
 ) => React.ReactNode;
 export type FooterBtnRenderFn = (
-    dom: React.ReactNode,
-    total: string,
-    selectedRowKeys: RowObj,
-    setAllCheck: (row: RowObj) => void
+  dom: React.ReactNode,
+  total: string,
+  selectedRowKeys: RowObj,
+  setAllCheck: (row: RowObj) => void
 ) => React.ReactNode;
 export type actionFn = (...arg) => void;
 type FooterRenderFn = (
@@ -89,3 +90,26 @@ export interface HTableInstance {
   form: HFormInstance;
   table: TableInstance;
 }
+export interface DialogParamsModal {
+  configData?: HTableProps["configData"];
+  request?: HTableProps["request"];
+  params?: Record<string, any>;
+  title?: string;
+}
+export interface HOnDiaLogTableInstance {
+  show: (params?: DialogParamsModal) => void;
+  hide: () => void;
+}
+export interface HDiaLogTableInstance {
+  form: HFormInstance;
+  table: TableInstance;
+  show: (params?: DialogParamsModal) => void;
+  hide: () => void;
+}
+export interface ModalTableProps extends ModalProps {
+  tableProps: HTableProps;
+  dialogTable?: HDiaLogTableInstance;
+  params?: Record<string, any>;
+  configData?: HTableProps["configData"];
+  request?: HTableProps["request"];
+}

package/src/pages/ModalTable/index.tsx

@@ -0,0 +1,93 @@
+import { Button } from "antd";
+import { HModalTable, useHDialogTable } from "../../components";
+const configData = [
+  {
+    title: "座位",
+    showSearch: true,
+    searchType: "select",
+    dataIndex: "name",
+    itemProps: {
+      options: [{ label: "1", value: 1 }],
+    },
+  },
+  {
+    title: "操作",
+    name: "aaa",
+    fixed: "right",
+    width: 200,
+    showSearch: true,
+    render: () => {
+      return <div>fff</div>;
+    },
+  },
+];
+const req1 = (params) => {
+  console.log(params, "req1");
+  const { current = 1 } = params;
+  return new Promise((resolve, reject) => {
+    setTimeout(() => {
+      // reject(new Error("错误"));
+      resolve({
+        size: "10",
+        current: current.toString(10),
+        total: "100",
+        records: [
+          {
+            id: 1,
+            name: "111",
+          },
+        ],
+      });
+    }, 2000);
+  });
+};
+
+const req2 = (params) => {
+  console.log(params, "req2");
+  const { current = 1 } = params;
+  return new Promise((resolve, reject) => {
+    setTimeout(() => {
+      // reject(new Error("错误"));
+      resolve({
+        size: "10",
+        current: current.toString(10),
+        total: "100",
+        records: [
+          {
+            id: 1,
+            name: "111",
+          },
+        ],
+      });
+    }, 2000);
+  });
+};
+export default () => {
+  const dialogTable = useHDialogTable();
+  return (
+    <>
+      <Button
+        onClick={() => {
+          dialogTable.show({
+            title: "12312",
+            request: req1,
+            params: { name: 23123 },
+          });
+        }}
+      >
+        点我
+      </Button>
+      <Button
+        onClick={() => {
+          dialogTable.show({ title: "3333", request: req2 });
+        }}
+      >
+        点我333
+      </Button>
+      <HModalTable
+        dialogTable={dialogTable}
+        configData={configData}
+      />
+    </>
+  );
+};

package/src/pages/Table/index.tsx

@@ -8,25 +8,25 @@ const configData = [
     showSearch: true,
     searchType: "select",
     dataIndex: "name",
-    itemProps:{
-      options:[{label:"1",value:1}]
-    }
+    itemProps: {
+      options: [{ label: "1", value: 1 }],
+    },
   },
   {
     title: "操作",
     name: "aaa",
-    fixed:"right",
-    width:200,
+    fixed: "right",
+    width: 200,
     showSearch: true,
-    render:()=>{
-      return <div>fff</div>
-    }
+    render: () => {
+      return <div>fff</div>;
+    },
   },
 ];
-const Test=({name,selectedRowData})=>{
-   console.log(selectedRowData);
-   return <div>{name}</div>
-}
+const Test = ({ name, selectedRowData }) => {
+  console.log(selectedRowData);
+  return <div>{name}</div>;
+};
 export default () => {
   const hTable = useHTable();
   return (
@@ -35,9 +35,9 @@ export default () => {
         configData={configData}
         rowKey={"id"}
         table={hTable}
-        scroll={{x:1000,y:100}}
+        scroll={{ x: 1000, y: 100 }}
         rowSelection={false}
-        headerTitle={<Test name="321321"/>}
+        headerTitle={<Test name="321321" />}
         actionRender={(allCheck, selectedRowKeys, xjTable) => {
           console.log(allCheck, selectedRowKeys, xjTable);
           return <Button>点我</Button>;