@hw-component/table 0.0.3-beta-v2 → 0.0.3-beta-v4

package/src/components/HTableBody/index.tsx

@@ -7,9 +7,9 @@ import React from "react";
 import { ConfigProvider, Empty } from "antd";
 import type { HTableInstance } from "../modal";
 import { useHTableConfigContext } from "../TableConfig";
-
+import HTablePagination from "../HTablePagination";
 interface HTableBodyProps extends Omit<ProTableProps<any, any>, "dataSource"> {
-  configData: ConfigDataModal;
+  configData?: ConfigDataModal;
   onPageChange?: (params: ParamsModal) => void;
   emptyRender?: (tableInstance: HTableInstance) => React.ReactNode;
   errorRender?: (
@@ -34,14 +34,22 @@ export default ({
 }: HTableBodyProps) => {
   // @ts-ignore
   const { selectedRowKeys, onChange } = rowSelection;
-  const { tableInstance, data, selectedRowData, rowOnChange, error, loading } =
-    useHTableContext();
+  const {
+    tableInstance,
+    configData: contextConfigData,
+    data,
+    selectedRowData,
+    rowOnChange,
+    error,
+    loading,
+  } = useHTableContext();
   const {
     emptyRender: tableEmptyRender = defaultRender,
     errorRender: tableErrorRender = defaultRender,
   } = useHTableConfigContext({ emptyRender, errorRender });
+  const bodyConfigData = configData || contextConfigData;
   const { records, size, current, total } = data || {};
-  const cols = useCols(configData, tableInstance);
+  const cols = useCols(bodyConfigData, tableInstance);
   const change = (key: React.Key[], rowData: any[]) => {
     if (onChange) {
       return onChange(key, rowData);
@@ -67,6 +75,9 @@ export default ({
           columns={cols}
           tableAlertRender={false}
           search={false}
+          tableStyle={{
+            paddingBottom: 0,
+          }}
           rowSelection={{
             ...rowSelection,
             selectedRowKeys: selectedRowData.keys,
@@ -75,22 +86,11 @@ export default ({
           loading={loading}
           rowKey={rowKey}
           dataSource={records}
-          onChange={(paginationData) => {
-            const { pageSize: ps, current: pn } = paginationData;
-            onPageChange?.({ size: ps, current: pn });
-          }}
-          pagination={
-            pagination === false
-              ? pagination
-              : {
-                  current: Number.parseInt(current || "1", 10),
-                  total: Number.parseInt(total || "0", 10),
-                  pageSize: Number.parseInt(size || "10", 10),
-                  showQuickJumper: true,
-                  ...pagination,
-                }
-          }
+          pagination={false}
         />
+        {pagination !== false && (
+          <HTablePagination onPageChange={onPageChange} {...pagination} />
+        )}
       </ConfigProvider>
     </div>
   );

package/src/components/HTableHeader/index.tsx

@@ -8,8 +8,8 @@ import { formConfigDataProvider } from "./utils";
 import type { HItemProps } from "@hw-component/form/lib/Form/modal";
 
 interface IHeaderProps {
-  configData: ConfigDataModal;
-  onFinish: (value: Record<string, any>) => Promise<any>;
+  configData?: ConfigDataModal;
+  onFinish?: (value: Record<string, any>) => Promise<any>;
   searchSpan?: ColProps;
   loading?: boolean;
   headerStyle?: React.CSSProperties;
@@ -21,11 +21,17 @@ export default ({
   searchSpan = { span: 6 },
   headerStyle,
 }: IHeaderProps) => {
-  const { tableInstance, loading } = useHTableContext();
+  const {
+    tableInstance,
+    loading,
+    onFinish: contextOnFinish,
+    configData: contextConfigData,
+  } = useHTableContext();
+  const headerConfigData = configData || contextConfigData;
   const { form } = tableInstance;
-
+  const subOnFinish = onFinish || contextOnFinish;
   const nConfigData: HItemProps[] = useMemo(
-    () => formConfigDataProvider(configData),
+    () => formConfigDataProvider(headerConfigData),
     [configData]
   );
 
@@ -38,7 +44,7 @@ export default ({
     >
       <HForm
         itemSpan={searchSpan}
-        onFinish={onFinish}
+        onFinish={subOnFinish}
         submitLoading={loading}
         gutter={[20, 0]}
         hideLabel={true}

package/src/components/HTablePagination/index.tsx

@@ -0,0 +1,43 @@
+import type { PaginationProps} from "antd";
+import { Pagination, Row } from "antd";
+import { useHTableContext } from "../context";
+import type { ParamsModal } from "@/components/modal";
+interface IPaginationProps extends PaginationProps {
+  onPageChange?: (params: ParamsModal) => void;
+}
+export default ({ onPageChange, ...props }: IPaginationProps) => {
+  const {
+    onPageChange: contextOnPageChange,
+    configData: contextConfigData,
+    data,
+  } = useHTableContext();
+  const tableOnPageChange = onPageChange || contextOnPageChange;
+  const { size, current, total } = data || {};
+  const pageCurrent = Number.parseInt(current || "1", 10);
+  const pageSize = Number.parseInt(size || "10", 10);
+  const pageTotal = Number.parseInt(total || "0", 10);
+  if (data) {
+    return (
+      <Row
+        justify={"end"}
+        style={{ paddingBottom: 24, paddingRight: 24, paddingLeft: 24 }}
+      >
+        <Pagination
+          size={"small"}
+          showQuickJumper={true}
+          pageSize={pageSize}
+          current={pageCurrent}
+          showTotal={(totalNum, [showCurrent, showCurrentEnd]) => {
+            return `第${showCurrent}-${showCurrentEnd}/总共${totalNum}条`;
+          }}
+          total={pageTotal}
+          onChange={(pn, ps) => {
+            tableOnPageChange({ size: ps, current: pn });
+          }}
+          {...props}
+        />
+      </Row>
+    );
+  }
+  return <></>;
+};

package/src/components/Table.tsx

@@ -1,13 +1,13 @@
 import Header from "./HTableHeader";
 import Body from "./HTableBody";
-import { useRequest } from "ahooks";
-import { useMemo } from "react";
 import useCurrentTable from "./hooks/useCurrentTable";
 import Footer from "./HTableFooter";
 import useRowObj from "./hooks/useRowObj";
 import { HTableContext } from "./context";
 import { Space } from "antd";
 import type { HTableProps } from "./modal";
+import useReq from "./hooks/useReq";
+import useDispatch from "./hooks/useDispatch";
 export default ({
   request,
   configData,
@@ -24,30 +24,17 @@ export default ({
   className,
   ...props
 }: HTableProps) => {
-  const saveParams = useMemo(() => {
-    return {
-      params: {},
-    };
-  }, []);
-  const { run, loading, data, error } = useRequest((params = {}) => {
-    const { size = "10", current = "1", ...oParams } = params;
-    const reqParams = { size, current, ...oParams };
-    saveParams.params = reqParams;
-    return request(reqParams);
-  });
-  const dispatch = (key: string, params: any) => {
-    const fn = action[key];
-    fn?.(params);
-  };
+  const { run, loading, data, error, saveParams } = useReq({ request });
+  const dispatch = useDispatch(action);
   const { selectedRowData, rowOnChange, allSelectChange } = useRowObj();
   const tableInstance = useCurrentTable({
     table,
-    reload: (params) => {
-      const reqParams = params || saveParams.params;
-      run({ ...reqParams });
-    },
+    reload: run,
     changeRowData: rowOnChange,
     dispatch,
+    reloadWithParams: (reloadParams = {}) => {
+      return run({ ...saveParams.old, ...reloadParams });
+    },
   });
   return (
     <HTableContext.Provider
@@ -59,6 +46,10 @@ export default ({
         error,
         loading,
         allSelectChange,
+        action,
+        configData,
+        onFinish: run,
+        onPageChange: tableInstance.table.reloadWithParams,
       }}
     >
       <Space
@@ -68,21 +59,9 @@ export default ({
         className={className}
       >
         {!hideHeader && (
-          <Header
-            configData={configData}
-            onFinish={run}
-            searchSpan={searchSpan}
-            headerStyle={headerStyle}
-          />
+          <Header searchSpan={searchSpan} headerStyle={headerStyle} />
         )}
-        <Body
-          configData={configData}
-          tableStyle={tableStyle}
-          onPageChange={(page) => {
-            run({ ...saveParams.params, ...page });
-          }}
-          {...props}
-        />
+        <Body tableStyle={tableStyle} {...props} />
         {footerRender !== false && (
           <Footer
             actionRender={actionRender}

package/src/components/TableCustomize.tsx

@@ -0,0 +1,48 @@
+import useCurrentTable from "./hooks/useCurrentTable";
+import useRowObj from "./hooks/useRowObj";
+import { HTableContext } from "./context";
+import type { HTableProps } from "./modal";
+import useReq from "./hooks/useReq";
+import useDispatch from "./hooks/useDispatch";
+import React from "react";
+const Index: React.FC<HTableProps> = ({
+  request,
+  configData,
+  table,
+  action = {},
+  children,
+}) => {
+  const { run, loading, data, error, saveParams } = useReq({ request });
+  const dispatch = useDispatch(action);
+  const { selectedRowData, rowOnChange, allSelectChange } = useRowObj();
+  const tableInstance = useCurrentTable({
+    table,
+    reload: run,
+    changeRowData: rowOnChange,
+    dispatch,
+    reloadWithParams: (reloadParams = {}) => {
+      return run({ ...saveParams.old, ...reloadParams });
+    },
+  });
+  return (
+    <HTableContext.Provider
+      value={{
+        tableInstance,
+        selectedRowData,
+        rowOnChange,
+        data,
+        error,
+        loading,
+        allSelectChange,
+        action,
+        configData,
+        params: saveParams.old,
+        onFinish: run,
+        onPageChange: tableInstance.table.reloadWithParams,
+      }}
+    >
+      {children}
+    </HTableContext.Provider>
+  );
+};
+export default Index;

package/src/components/context.ts

@@ -1,7 +1,8 @@
 import React, { useContext } from "react";
 import type { ResultModal, RowObj, HTableInstance } from "./modal";
+import type { HTableProps } from "./modal";
 
-interface HContextModal {
+interface HContextModal extends Omit<HTableProps, "request"> {
   tableInstance: HTableInstance;
   data?: ResultModal;
   selectedRowData: RowObj;
@@ -9,6 +10,9 @@ interface HContextModal {
   error?: Error;
   loading?: boolean;
   allSelectChange?: VoidFunction;
+  params?: any;
+  onFinish: (value: Record<string, any>) => Promise<any>;
+  onPageChange: (value: Record<string, any>) => Promise<any>;
 }
 
 export const HTableContext = React.createContext<HContextModal | null>(null);

package/src/components/hooks/useCurrentTable.ts

@@ -5,15 +5,17 @@ import useHTable from "../hooks/useHTable";
 
 interface currentTableParams {
   table?: HTableInstance;
-  reload: (params?: ParamsModal) => void;
+  reload: (params?: ParamsModal) => Promise<any>;
   changeRowData: (keys: React.Key[], data: any) => void;
   dispatch: (key: string, params: any) => void;
+  reloadWithParams: (params?: ParamsModal) => Promise<any>;
 }
 export default ({
   table,
   reload,
   changeRowData,
   dispatch,
+  reloadWithParams,
 }: currentTableParams) => {
   const useCurrentTable = useHTable();
   return useMemo(() => {
@@ -21,6 +23,7 @@ export default ({
     resultTable.table.reload = reload;
     resultTable.table.setSelectedRowData = changeRowData;
     resultTable.table.dispatch = dispatch;
+    resultTable.table.reloadWithParams = reloadWithParams;
     return resultTable;
   }, [table]);
 };

package/src/components/hooks/useDispatch.ts

@@ -0,0 +1,8 @@
+import type { actionFn } from "@/components/modal";
+
+export default (action: Record<string, actionFn>) => {
+  return (key: string, dispatchParams: any) => {
+    const fn = action[key];
+    fn?.(dispatchParams);
+  };
+};

package/src/components/hooks/useHTable.tsx

@@ -7,10 +7,13 @@ export default () => {
   const table = useMemo(() => {
     return {
       reload: (params?: ParamsModal) => {
-        return params;
+        return Promise.resolve(params);
       },
       setSelectedRowData: () => {},
       dispatch: () => {},
+      reloadWithParams: (params?: ParamsModal) => {
+        return Promise.resolve(params);
+      },
     };
   }, []);
   return {

package/src/components/hooks/useReq.ts

@@ -0,0 +1,23 @@
+import { useMemo } from "react";
+import { useRequest } from "ahooks";
+import type { ParamsModal, ResultModal } from "@/components/modal";
+interface IParamsModal {
+  request: (params: ParamsModal) => Promise<ResultModal>;
+}
+export default ({ request }: IParamsModal) => {
+  const saveParams = useMemo(() => {
+    return {
+      old: {},
+    };
+  }, []);
+  const resultAction = useRequest((params = {}) => {
+    const { size = "10", current = "1", ...oParams } = params;
+    const reqParams = { size, current, ...oParams };
+    saveParams.old = reqParams;
+    return request(reqParams);
+  });
+  return {
+    ...resultAction,
+    saveParams,
+  };
+};

package/src/components/index.tsx

@@ -1,3 +1,7 @@
 export { default as HTable } from "./Table";
 export { default as useHTable } from "./hooks/useHTable";
 export { default as HTableConfig } from "./TableConfig";
+export { default as TableCustomize } from "./TableCustomize";
+export { default as HTableBody } from "./HTableBody";
+export { default as HTableFooter } from "./HTableFooter";
+export { default as HTableHeader } from "./HTableHeader";

package/src/components/modal.ts

@@ -39,7 +39,7 @@ export type ActionRenderFn = (
   selectedRowKeys: RowObj,
   tableInstance: HTableInstance
 ) => React.ReactNode;
-type actionFn = (...arg) => void;
+export type actionFn = (...arg) => void;
 type FooterRenderFn = (
   tableInstance: HTableInstance,
   selectedRowData: RowObj,
@@ -66,9 +66,10 @@ export interface HTableProps extends Omit<ProTableProps<any, any>, "request"> {
   className?: string;
 }
 export interface TableInstance {
-  reload: (params?: ParamsModal) => void;
+  reload: (params?: ParamsModal) => Promise<any>;
   setSelectedRowData: (keys: React.Key[], data: any) => void;
   dispatch: (key: string, params: any) => void;
+  reloadWithParams: (params?: ParamsModal) => Promise<any>;
 }
 export interface HTableInstance {
   form: HFormInstance;

package/src/pages/{Test → Table}/index.tsx

@@ -1,5 +1,6 @@
 import { HTable, useHTable } from "../../components";
 import { Button } from "antd";
+
 const configData = [
   {
     title: "座位",
@@ -18,34 +19,26 @@ export default () => {
   const hTable = useHTable();
   return (
     <>
-      <div
-        onClick={() => {
-          hTable.table.reload();
-        }}
-      >
-        点我
-      </div>
       <HTable
         configData={configData}
         rowKey={"id"}
         headerStyle={{ borderRadius: 0 }}
         tableStyle={{ borderRadius: 0, background: "#fff" }}
         spaceSize={0}
-        pagination={false}
         footerStyle={{ marginTop: 20 }}
         table={hTable}
         actionRender={(allCheck, selectedRowKeys, xjTable) => {
           console.log(allCheck, selectedRowKeys, xjTable);
           return <Button>点我</Button>;
         }}
-        request={(a) => {
-          console.log(a);
+        request={(params) => {
+          const { current = 1 } = params;
           return new Promise((resolve, reject) => {
             setTimeout(() => {
               // reject(new Error("错误"));
               resolve({
                 size: "10",
-                current: "1",
+                current: current.toString(10),
                 total: "100",
                 records: [
                   {

package/src/pages/TableCustomize/index.tsx

@@ -0,0 +1,51 @@
+import {
+  TableCustomize,
+  HTableHeader,
+  HTableBody,
+  HTableFooter,
+} from "../../components";
+
+const configData = [
+  {
+    title: "座位",
+    showSearch: true,
+    searchType: "select",
+    dataIndex: "name",
+  },
+  {
+    title: "操作",
+    name: "aaa",
+    showSearch: true,
+    searchType: "rangePicker",
+  },
+];
+export default () => {
+  return (
+    <TableCustomize
+      configData={configData}
+      request={(params) => {
+        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);
+        });
+      }}
+    >
+      <HTableHeader />
+      <HTableBody />
+      <HTableFooter />
+    </TableCustomize>
+  );
+};

package/src/routes.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { Navigate } from "react-router-dom";
-import Select from "./pages/Test";
+import Table from "./pages/Table";
+import TableCustomize from "./pages/TableCustomize";
 
 export interface RouteModal {
   path?: string;
@@ -14,12 +15,17 @@ export interface RouteModal {
 const routes: RouteModal[] = [
   {
     index: true,
-    element: <Navigate to="/select" replace={true} />,
+    element: <Navigate to="/table" replace={true} />,
   },
   {
-    path: "/select",
-    name: "下拉框",
-    element: <Select />,
+    path: "/table",
+    name: "table",
+    element: <Table />,
+  },
+  {
+    path: "/tableCustomize",
+    name: "tableCustomize",
+    element: <TableCustomize />,
   },
 ];