@hw-component/table 0.0.3-beta-v1 → 0.0.3-beta-v3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (56) hide show
  1. package/es/HTableBody/index.d.ts +1 -1
  2. package/es/HTableBody/index.js +7 -2
  3. package/es/HTableHeader/index.d.ts +2 -2
  4. package/es/HTableHeader/index.js +7 -3
  5. package/es/Table.js +23 -43
  6. package/es/TableCustomize.d.ts +4 -0
  7. package/es/TableCustomize.js +70 -0
  8. package/es/context.d.ts +5 -1
  9. package/es/hooks/useCurrentTable.d.ts +3 -2
  10. package/es/hooks/useCurrentTable.js +3 -1
  11. package/es/hooks/useDispatch.d.ts +3 -0
  12. package/es/hooks/useDispatch.js +10 -0
  13. package/es/hooks/useHTable.d.ts +2 -1
  14. package/es/hooks/useHTable.js +6 -2
  15. package/es/hooks/useReq.d.ts +23 -0
  16. package/es/hooks/useReq.js +45 -0
  17. package/es/index.d.ts +4 -0
  18. package/es/index.js +4 -0
  19. package/es/modal.d.ts +3 -2
  20. package/lib/HTableBody/index.d.ts +1 -1
  21. package/lib/HTableBody/index.js +7 -2
  22. package/lib/HTableHeader/index.d.ts +2 -2
  23. package/lib/HTableHeader/index.js +7 -3
  24. package/lib/Table.js +23 -43
  25. package/lib/TableCustomize.d.ts +4 -0
  26. package/lib/TableCustomize.js +73 -0
  27. package/lib/context.d.ts +5 -1
  28. package/lib/hooks/useCurrentTable.d.ts +3 -2
  29. package/lib/hooks/useCurrentTable.js +3 -1
  30. package/lib/hooks/useDispatch.d.ts +3 -0
  31. package/lib/hooks/useDispatch.js +13 -0
  32. package/lib/hooks/useHTable.d.ts +2 -1
  33. package/lib/hooks/useHTable.js +6 -2
  34. package/lib/hooks/useReq.d.ts +23 -0
  35. package/lib/hooks/useReq.js +48 -0
  36. package/lib/index.d.ts +4 -0
  37. package/lib/index.js +8 -0
  38. package/lib/modal.d.ts +3 -2
  39. package/package.json +2 -2
  40. package/src/components/HTableBody/index.tsx +27 -12
  41. package/src/components/HTableFooter/index.tsx +9 -3
  42. package/src/components/HTableHeader/index.tsx +12 -6
  43. package/src/components/HTableHeader/utils.ts +1 -1
  44. package/src/components/Table.tsx +16 -37
  45. package/src/components/TableCustomize.tsx +48 -0
  46. package/src/components/context.ts +7 -3
  47. package/src/components/hooks/useCurrentTable.ts +4 -1
  48. package/src/components/hooks/useDispatch.ts +8 -0
  49. package/src/components/hooks/useHTable.tsx +4 -1
  50. package/src/components/hooks/useReq.ts +23 -0
  51. package/src/components/hooks/useRowObj.ts +7 -7
  52. package/src/components/index.tsx +4 -1
  53. package/src/components/modal.ts +4 -3
  54. package/src/pages/{Test → Table}/index.tsx +4 -11
  55. package/src/pages/TableCustomize/index.tsx +51 -0
  56. package/src/routes.tsx +11 -5
package/src/components/Table.tsx CHANGED
@@ -1,13 +1,13 @@
1
1
  import Header from "./HTableHeader";
2
2
  import Body from "./HTableBody";
3
- import { useRequest } from "ahooks";
4
- import { useMemo } from "react";
5
3
  import useCurrentTable from "./hooks/useCurrentTable";
6
4
  import Footer from "./HTableFooter";
7
5
  import useRowObj from "./hooks/useRowObj";
8
6
  import { HTableContext } from "./context";
9
7
  import { Space } from "antd";
10
8
  import type { HTableProps } from "./modal";
9
+ import useReq from "./hooks/useReq";
10
+ import useDispatch from "./hooks/useDispatch";
11
11
  export default ({
12
12
  request,
13
13
  configData,
@@ -24,30 +24,17 @@ export default ({
24
24
  className,
25
25
  ...props
26
26
  }: HTableProps) => {
27
- const saveParams = useMemo(() => {
28
- return {
29
- params: {},
30
- };
31
- }, []);
32
- const { run, loading, data, error } = useRequest((params = {}) => {
33
- const { size = "10", current = "1", ...oParams } = params;
34
- const reqParams = { size, current, ...oParams };
35
- saveParams.params = reqParams;
36
- return request(reqParams);
37
- });
38
- const dispatch = (key: string, params: any) => {
39
- const fn = action[key];
40
- fn?.(params);
41
- };
42
- const { selectedRowData, rowOnChange ,allSelectChange} = useRowObj();
27
+ const { run, loading, data, error, saveParams } = useReq({ request });
28
+ const dispatch = useDispatch(action);
29
+ const { selectedRowData, rowOnChange, allSelectChange } = useRowObj();
43
30
  const tableInstance = useCurrentTable({
44
31
  table,
45
- reload: (params) => {
46
- const reqParams = params || saveParams.params;
47
- run({ ...reqParams });
48
- },
32
+ reload: run,
49
33
  changeRowData: rowOnChange,
50
34
  dispatch,
35
+ reloadWithParams: (reloadParams = {}) => {
36
+ return run({ ...saveParams.old, ...reloadParams });
37
+ },
51
38
  });
52
39
  return (
53
40
  <HTableContext.Provider
@@ -58,7 +45,11 @@ export default ({
58
45
  data,
59
46
  error,
60
47
  loading,
61
- allSelectChange
48
+ allSelectChange,
49
+ action,
50
+ configData,
51
+ onFinish: run,
52
+ onPageChange: tableInstance.table.reloadWithParams,
62
53
  }}
63
54
  >
64
55
  <Space
@@ -68,21 +59,9 @@ export default ({
68
59
  className={className}
69
60
  >
70
61
  {!hideHeader && (
71
- <Header
72
- configData={configData}
73
- onFinish={run}
74
- searchSpan={searchSpan}
75
- headerStyle={headerStyle}
76
- />
62
+ <Header searchSpan={searchSpan} headerStyle={headerStyle} />
77
63
  )}
78
- <Body
79
- configData={configData}
80
- tableStyle={tableStyle}
81
- onPageChange={(page) => {
82
- run({ ...saveParams.params, ...page });
83
- }}
84
- {...props}
85
- />
64
+ <Body tableStyle={tableStyle} {...props} />
86
65
  {footerRender !== false && (
87
66
  <Footer
88
67
  actionRender={actionRender}
package/src/components/TableCustomize.tsx ADDED
@@ -0,0 +1,48 @@
1
+ import useCurrentTable from "./hooks/useCurrentTable";
2
+ import useRowObj from "./hooks/useRowObj";
3
+ import { HTableContext } from "./context";
4
+ import type { HTableProps } from "./modal";
5
+ import useReq from "./hooks/useReq";
6
+ import useDispatch from "./hooks/useDispatch";
7
+ import React from "react";
8
+ const Index: React.FC<HTableProps> = ({
9
+ request,
10
+ configData,
11
+ table,
12
+ action = {},
13
+ children,
14
+ }) => {
15
+ const { run, loading, data, error, saveParams } = useReq({ request });
16
+ const dispatch = useDispatch(action);
17
+ const { selectedRowData, rowOnChange, allSelectChange } = useRowObj();
18
+ const tableInstance = useCurrentTable({
19
+ table,
20
+ reload: run,
21
+ changeRowData: rowOnChange,
22
+ dispatch,
23
+ reloadWithParams: (reloadParams = {}) => {
24
+ return run({ ...saveParams.old, ...reloadParams });
25
+ },
26
+ });
27
+ return (
28
+ <HTableContext.Provider
29
+ value={{
30
+ tableInstance,
31
+ selectedRowData,
32
+ rowOnChange,
33
+ data,
34
+ error,
35
+ loading,
36
+ allSelectChange,
37
+ action,
38
+ configData,
39
+ params: saveParams.old,
40
+ onFinish: run,
41
+ onPageChange: tableInstance.table.reloadWithParams,
42
+ }}
43
+ >
44
+ {children}
45
+ </HTableContext.Provider>
46
+ );
47
+ };
48
+ export default Index;
package/src/components/context.ts CHANGED
@@ -1,14 +1,18 @@
1
1
  import React, { useContext } from "react";
2
2
  import type { ResultModal, RowObj, HTableInstance } from "./modal";
3
+ import type { HTableProps } from "./modal";
3
4
 
4
- interface HContextModal {
5
+ interface HContextModal extends Omit<HTableProps, "request"> {
5
6
  tableInstance: HTableInstance;
6
7
  data?: ResultModal;
7
8
  selectedRowData: RowObj;
8
9
  rowOnChange: (keys: React.Key[], rowData: any[]) => void;
9
10
  error?: Error;
10
- loading?:boolean;
11
- allSelectChange?:VoidFunction;
11
+ loading?: boolean;
12
+ allSelectChange?: VoidFunction;
13
+ params?: any;
14
+ onFinish: (value: Record<string, any>) => Promise<any>;
15
+ onPageChange: (value: Record<string, any>) => Promise<any>;
12
16
  }
13
17
 
14
18
  export const HTableContext = React.createContext<HContextModal | null>(null);
package/src/components/hooks/useCurrentTable.ts CHANGED
@@ -5,15 +5,17 @@ import useHTable from "../hooks/useHTable";
5
5
 
6
6
  interface currentTableParams {
7
7
  table?: HTableInstance;
8
- reload: (params?: ParamsModal) => void;
8
+ reload: (params?: ParamsModal) => Promise<any>;
9
9
  changeRowData: (keys: React.Key[], data: any) => void;
10
10
  dispatch: (key: string, params: any) => void;
11
+ reloadWithParams: (params?: ParamsModal) => Promise<any>;
11
12
  }
12
13
  export default ({
13
14
  table,
14
15
  reload,
15
16
  changeRowData,
16
17
  dispatch,
18
+ reloadWithParams,
17
19
  }: currentTableParams) => {
18
20
  const useCurrentTable = useHTable();
19
21
  return useMemo(() => {
@@ -21,6 +23,7 @@ export default ({
21
23
  resultTable.table.reload = reload;
22
24
  resultTable.table.setSelectedRowData = changeRowData;
23
25
  resultTable.table.dispatch = dispatch;
26
+ resultTable.table.reloadWithParams = reloadWithParams;
24
27
  return resultTable;
25
28
  }, [table]);
26
29
  };
package/src/components/hooks/useDispatch.ts ADDED
@@ -0,0 +1,8 @@
1
+ import type { actionFn } from "@/components/modal";
2
+
3
+ export default (action: Record<string, actionFn>) => {
4
+ return (key: string, dispatchParams: any) => {
5
+ const fn = action[key];
6
+ fn?.(dispatchParams);
7
+ };
8
+ };
package/src/components/hooks/useHTable.tsx CHANGED
@@ -7,10 +7,13 @@ export default () => {
7
7
  const table = useMemo(() => {
8
8
  return {
9
9
  reload: (params?: ParamsModal) => {
10
- return params;
10
+ return Promise.resolve(params);
11
11
  },
12
12
  setSelectedRowData: () => {},
13
13
  dispatch: () => {},
14
+ reloadWithParams: (params?: ParamsModal) => {
15
+ return Promise.resolve(params);
16
+ },
14
17
  };
15
18
  }, []);
16
19
  return {
package/src/components/hooks/useReq.ts ADDED
@@ -0,0 +1,23 @@
1
+ import { useMemo } from "react";
2
+ import { useRequest } from "ahooks";
3
+ import type { ParamsModal, ResultModal } from "@/components/modal";
4
+ interface IParamsModal {
5
+ request: (params: ParamsModal) => Promise<ResultModal>;
6
+ }
7
+ export default ({ request }: IParamsModal) => {
8
+ const saveParams = useMemo(() => {
9
+ return {
10
+ old: {},
11
+ };
12
+ }, []);
13
+ const resultAction = useRequest((params = {}) => {
14
+ const { size = "10", current = "1", ...oParams } = params;
15
+ const reqParams = { size, current, ...oParams };
16
+ saveParams.old = reqParams;
17
+ return request(reqParams);
18
+ });
19
+ return {
20
+ ...resultAction,
21
+ saveParams,
22
+ };
23
+ };
package/src/components/hooks/useRowObj.ts CHANGED
@@ -4,21 +4,21 @@ import type { RowObj } from "../modal";
4
4
 
5
5
  export default () => {
6
6
  const [selectedRowData, setSelectedRowData] = useState<RowObj>({});
7
- const {selectAll=false}=selectedRowData;
7
+ const { selectAll = false } = selectedRowData;
8
8
  const rowOnChange = (keys: React.Key[], rowData: any[]) => {
9
9
  setSelectedRowData({
10
10
  keys,
11
11
  rowData,
12
12
  });
13
13
  };
14
- const allSelectChange=()=>{
15
- setSelectedRowData({
16
- selectAll:!selectAll
17
- })
18
- }
14
+ const allSelectChange = () => {
15
+ setSelectedRowData({
16
+ selectAll: !selectAll,
17
+ });
18
+ };
19
19
  return {
20
20
  rowOnChange,
21
21
  selectedRowData,
22
- allSelectChange
22
+ allSelectChange,
23
23
  };
24
24
  };
package/src/components/index.tsx CHANGED
@@ -1,4 +1,7 @@
1
1
  export { default as HTable } from "./Table";
2
2
  export { default as useHTable } from "./hooks/useHTable";
3
3
  export { default as HTableConfig } from "./TableConfig";
4
-
4
+ export { default as TableCustomize } from "./TableCustomize";
5
+ export { default as HTableBody } from "./HTableBody";
6
+ export { default as HTableFooter } from "./HTableFooter";
7
+ export { default as HTableHeader } from "./HTableHeader";
package/src/components/modal.ts CHANGED
@@ -10,7 +10,7 @@ import type React from "react";
10
10
  export interface RowObj {
11
11
  keys?: React.Key[];
12
12
  rowData?: any[];
13
- selectAll?:boolean;
13
+ selectAll?: boolean;
14
14
  }
15
15
  export interface ResultModal {
16
16
  records: any[];
@@ -39,7 +39,7 @@ export type ActionRenderFn = (
39
39
  selectedRowKeys: RowObj,
40
40
  tableInstance: HTableInstance
41
41
  ) => React.ReactNode;
42
- type actionFn = (...arg) => void;
42
+ export type actionFn = (...arg) => void;
43
43
  type FooterRenderFn = (
44
44
  tableInstance: HTableInstance,
45
45
  selectedRowData: RowObj,
@@ -66,9 +66,10 @@ export interface HTableProps extends Omit<ProTableProps<any, any>, "request"> {
66
66
  className?: string;
67
67
  }
68
68
  export interface TableInstance {
69
- reload: (params?: ParamsModal) => void;
69
+ reload: (params?: ParamsModal) => Promise<any>;
70
70
  setSelectedRowData: (keys: React.Key[], data: any) => void;
71
71
  dispatch: (key: string, params: any) => void;
72
+ reloadWithParams: (params?: ParamsModal) => Promise<any>;
72
73
  }
73
74
  export interface HTableInstance {
74
75
  form: HFormInstance;
package/src/pages/{Test → Table}/index.tsx RENAMED
@@ -1,5 +1,6 @@
1
1
  import { HTable, useHTable } from "../../components";
2
2
  import { Button } from "antd";
3
+
3
4
  const configData = [
4
5
  {
5
6
  title: "座位",
@@ -18,34 +19,26 @@ export default () => {
18
19
  const hTable = useHTable();
19
20
  return (
20
21
  <>
21
- <div
22
- onClick={() => {
23
- hTable.table.reload();
24
- }}
25
- >
26
- 点我
27
- </div>
28
22
  <HTable
29
23
  configData={configData}
30
24
  rowKey={"id"}
31
25
  headerStyle={{ borderRadius: 0 }}
32
26
  tableStyle={{ borderRadius: 0, background: "#fff" }}
33
27
  spaceSize={0}
34
- pagination={false}
35
28
  footerStyle={{ marginTop: 20 }}
36
29
  table={hTable}
37
30
  actionRender={(allCheck, selectedRowKeys, xjTable) => {
38
31
  console.log(allCheck, selectedRowKeys, xjTable);
39
32
  return <Button>点我</Button>;
40
33
  }}
41
- request={(a) => {
42
- console.log(a);
34
+ request={(params) => {
35
+ const { current = 1 } = params;
43
36
  return new Promise((resolve, reject) => {
44
37
  setTimeout(() => {
45
38
  // reject(new Error("错误"));
46
39
  resolve({
47
40
  size: "10",
48
- current: "1",
41
+ current: current.toString(10),
49
42
  total: "100",
50
43
  records: [
51
44
  {
package/src/pages/TableCustomize/index.tsx ADDED
@@ -0,0 +1,51 @@
1
+ import {
2
+ TableCustomize,
3
+ HTableHeader,
4
+ HTableBody,
5
+ HTableFooter,
6
+ } from "../../components";
7
+
8
+ const configData = [
9
+ {
10
+ title: "座位",
11
+ showSearch: true,
12
+ searchType: "select",
13
+ dataIndex: "name",
14
+ },
15
+ {
16
+ title: "操作",
17
+ name: "aaa",
18
+ showSearch: true,
19
+ searchType: "rangePicker",
20
+ },
21
+ ];
22
+ export default () => {
23
+ return (
24
+ <TableCustomize
25
+ configData={configData}
26
+ request={(params) => {
27
+ const { current = 1 } = params;
28
+ return new Promise((resolve, reject) => {
29
+ setTimeout(() => {
30
+ // reject(new Error("错误"));
31
+ resolve({
32
+ size: "10",
33
+ current: current.toString(10),
34
+ total: "100",
35
+ records: [
36
+ {
37
+ id: 1,
38
+ name: "111",
39
+ },
40
+ ],
41
+ });
42
+ }, 2000);
43
+ });
44
+ }}
45
+ >
46
+ <HTableHeader />
47
+ <HTableBody />
48
+ <HTableFooter />
49
+ </TableCustomize>
50
+ );
51
+ };
package/src/routes.tsx CHANGED
@@ -1,6 +1,7 @@
1
1
  import React from "react";
2
2
  import { Navigate } from "react-router-dom";
3
- import Select from "./pages/Test";
3
+ import Table from "./pages/Table";
4
+ import TableCustomize from "./pages/TableCustomize";
4
5
 
5
6
  export interface RouteModal {
6
7
  path?: string;
@@ -14,12 +15,17 @@ export interface RouteModal {
14
15
  const routes: RouteModal[] = [
15
16
  {
16
17
  index: true,
17
- element: <Navigate to="/select" replace={true} />,
18
+ element: <Navigate to="/table" replace={true} />,
18
19
  },
19
20
  {
20
- path: "/select",
21
- name: "下拉框",
22
- element: <Select />,
21
+ path: "/table",
22
+ name: "table",
23
+ element: <Table />,
24
+ },
25
+ {
26
+ path: "/tableCustomize",
27
+ name: "tableCustomize",
28
+ element: <TableCustomize />,
23
29
  },
24
30
  ];
25
31