@hw-component/table 0.0.1-beta-v8 → 0.0.2-beta-v1

package/lib/hooks/useHTable.js

@@ -1,11 +1,11 @@
-'use strict';
+"use strict";
 
-Object.defineProperty(exports, '__esModule', { value: true });
+Object.defineProperty(exports, "__esModule", { value: true });
 
-var React = require('react');
-var form = require('@hw-component/form');
+var React = require("react");
+var form = require("@hw-component/form");
 
-var useHTable = (function () {
+var useHTable = function () {
   var form$1 = form.useHForm();
   var table = React.useMemo(function () {
     return {
@@ -13,14 +13,14 @@ var useHTable = (function () {
         return params;
       },
       setSelectedRowData: function setSelectedRowData() {},
-      dispatch: function dispatch() {}
+      dispatch: function dispatch() {},
     };
   }, []);
   return {
     form: form$1,
-    table: table
+    table: table,
   };
-});
+};
 
 exports.default = useHTable;
 // powered by h

package/lib/hooks/useRowObj.d.ts

@@ -1,7 +1,7 @@
 import type React from "react";
 import type { RowObj } from "../modal";
 declare const _default: () => {
-    rowOnChange: (keys: React.Key[], rowData: any[]) => void;
-    selectedRowData: RowObj;
+  rowOnChange: (keys: React.Key[], rowData: any[]) => void;
+  selectedRowData: RowObj;
 };
 export default _default;

package/lib/hooks/useRowObj.js

@@ -1,11 +1,11 @@
-'use strict';
+"use strict";
 
-Object.defineProperty(exports, '__esModule', { value: true });
+Object.defineProperty(exports, "__esModule", { value: true });
 
-var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
-var React = require('react');
+var _slicedToArray = require("@babel/runtime-corejs3/helpers/slicedToArray");
+var React = require("react");
 
-var useRowObj = (function () {
+var useRowObj = function () {
   var _useState = React.useState({}),
     _useState2 = _slicedToArray(_useState, 2),
     selectedRowData = _useState2[0],
@@ -13,14 +13,14 @@ var useRowObj = (function () {
   var rowOnChange = function rowOnChange(keys, rowData) {
     setSelectedRowData({
       keys: keys,
-      rowData: rowData
+      rowData: rowData,
     });
   };
   return {
     rowOnChange: rowOnChange,
-    selectedRowData: selectedRowData
+    selectedRowData: selectedRowData,
   };
-});
+};
 
 exports.default = useRowObj;
 // powered by h

package/lib/index.js

@@ -1,10 +1,8 @@
-'use strict';
-
-var Table = require('./Table.js');
-var useHTable = require('./hooks/useHTable.js');
-var TableConfig = require('./TableConfig.js');
-
+"use strict";
 
+var Table = require("./Table.js");
+var useHTable = require("./hooks/useHTable.js");
+var TableConfig = require("./TableConfig.js");
 
 exports.HTable = Table.default;
 exports.useHTable = useHTable.default;

package/lib/modal.d.ts

@@ -1,52 +1,76 @@
 import type { ProColumns } from "@ant-design/pro-table/lib/typing";
 import type { ProTableProps } from "@ant-design/pro-table";
-import type { HItemProps, HFormInstance } from "@hw-component/form/es/Form/modal";
+import type {
+  HItemProps,
+  HFormInstance,
+} from "@hw-component/form/es/Form/modal";
 import type { ColProps } from "antd";
 import type React from "react";
 export interface RowObj {
-    keys?: React.Key[];
-    rowData?: any[];
+  keys?: React.Key[];
+  rowData?: any[];
 }
 export interface ResultModal {
-    records: any[];
-    current: string;
-    size: string;
-    total: string;
+  records: any[];
+  current: string;
+  size: string;
+  total: string;
 }
 export interface ParamsModal extends Record<string, any> {
-    size?: number;
-    current?: number;
+  size?: number;
+  current?: number;
 }
 interface HColumns extends Omit<ProColumns, "render"> {
-    render?: (dom: React.ReactNode, data: any, index: number, tableInstance: HTableInstance) => React.ReactNode;
-    showSearch?: boolean;
-    searchType?: HItemProps["type"];
-    searchRender?: HItemProps["render"];
+  render?: (
+    dom: React.ReactNode,
+    data: any,
+    index: number,
+    tableInstance: HTableInstance
+  ) => React.ReactNode;
+  showSearch?: boolean;
+  searchType?: HItemProps["type"];
+  searchRender?: HItemProps["render"];
 }
 export type ConfigItemModal = Omit<HItemProps, "render" | "type"> & HColumns;
 export type ConfigDataModal = ConfigItemModal[];
-export type ActionRenderFn = (allCheck: boolean, selectedRowKeys: RowObj, tableInstance: HTableInstance) => React.ReactNode;
+export type ActionRenderFn = (
+  allCheck: boolean,
+  selectedRowKeys: RowObj,
+  tableInstance: HTableInstance
+) => React.ReactNode;
 type actionFn = (...arg: any[]) => void;
-type FooterRenderFn = (tableInstance: HTableInstance, selectedRowData: RowObj, data?: ResultModal) => React.ReactNode;
+type FooterRenderFn = (
+  tableInstance: HTableInstance,
+  selectedRowData: RowObj,
+  data?: ResultModal
+) => React.ReactNode;
 export interface HTableProps extends Omit<ProTableProps<any, any>, "request"> {
-    request: (params: ParamsModal) => Promise<ResultModal>;
-    configData: ConfigDataModal;
-    searchSpan?: ColProps;
-    table?: HTableInstance;
-    actionRender?: ActionRenderFn;
-    emptyRender?: (tableInstance: HTableInstance) => React.ReactNode;
-    errorRender?: (tableInstance: HTableInstance, error: Error) => React.ReactNode;
-    footerRender?: FooterRenderFn | false;
-    hideHeader?: boolean;
-    action?: Record<string, actionFn>;
+  request: (params: ParamsModal) => Promise<ResultModal>;
+  configData: ConfigDataModal;
+  searchSpan?: ColProps;
+  table?: HTableInstance;
+  actionRender?: ActionRenderFn;
+  emptyRender?: (tableInstance: HTableInstance) => React.ReactNode;
+  errorRender?: (
+    tableInstance: HTableInstance,
+    error: Error
+  ) => React.ReactNode;
+  footerRender?: FooterRenderFn | false;
+  hideHeader?: boolean;
+  action?: Record<string, actionFn>;
+  headerStyle?: React.CSSProperties;
+  tableStyle?: React.CSSProperties;
+  footerStyle?: React.CSSProperties;
+  spaceSize?: number;
+  className?: string;
 }
 export interface TableInstance {
-    reload: (params?: ParamsModal) => void;
-    setSelectedRowData: (keys: React.Key[], data: any) => void;
-    dispatch: (key: string, params: any) => void;
+  reload: (params?: ParamsModal) => void;
+  setSelectedRowData: (keys: React.Key[], data: any) => void;
+  dispatch: (key: string, params: any) => void;
 }
 export interface HTableInstance {
-    form: HFormInstance;
-    table: TableInstance;
+  form: HFormInstance;
+  table: TableInstance;
 }
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hw-component/table",
-  "version": "0.0.1-beta-v8",
+  "version": "0.0.2-beta-v1",
   "description": "基于antd二次开发table组件",
   "keywords": [
     "table"

package/src/components/Body/index.tsx

@@ -16,6 +16,7 @@ interface HTableBodyProps extends Omit<ProTableProps<any, any>, "dataSource"> {
     tableInstance: HTableInstance,
     error: Error
   ) => React.ReactNode;
+  tableStyle?: React.CSSProperties;
 }
 const defaultRender = () => {
   return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />;
@@ -29,6 +30,7 @@ export default ({
   rowKey = "id",
   emptyRender,
   errorRender,
+  tableStyle,
   ...props
 }: HTableBodyProps) => {
   // @ts-ignore
@@ -49,7 +51,7 @@ export default ({
   };
   useSynchronousKeys({ selectedRowKeys, records, rowKey });
   return (
-    <div style={{ borderRadius: 4, overflow: "hidden" }}>
+    <div style={{ borderRadius: 4, overflow: "hidden", ...tableStyle }}>
       <ConfigProvider
         renderEmpty={() => {
           if (error) {

package/src/components/Footer/index.tsx

@@ -13,8 +13,9 @@ interface IFooterProps {
     selectedRowData: RowObj,
     data?: ResultModal
   ) => React.ReactNode;
+  footerStyle?: React.CSSProperties;
 }
-export default ({ actionRender, footerRender }: IFooterProps) => {
+export default ({ actionRender, footerRender, footerStyle }: IFooterProps) => {
   const { data, selectedRowData, tableInstance, error } = useHTableContext();
   const [allCheck, setAllCheck] = useState<boolean>(false);
   const { total = "0" } = data || {};
@@ -25,7 +26,7 @@ export default ({ actionRender, footerRender }: IFooterProps) => {
     return <>{footerRender(tableInstance, selectedRowData, data)}</>;
   }
   const dom = (
-    <Card style={{ borderRadius: 4 }} bordered={false}>
+    <Card style={{ borderRadius: 4, ...footerStyle }} bordered={false}>
       <Row justify="space-between">
         <Space size={20}>
           <Button

package/src/components/Header/index.tsx

@@ -3,7 +3,7 @@ import { Card } from "antd";
 import type { ConfigDataModal } from "../modal";
 import { useHTableContext } from "../context";
 import { HForm } from "@hw-component/form";
-import { useMemo } from "react";
+import React, { useMemo } from "react";
 import { formConfigDataProvider } from "./utils";
 import type { HItemProps } from "@hw-component/form/lib/Form/modal";
 
@@ -12,6 +12,7 @@ interface IHeaderProps {
   onFinish: (value: Record<string, any>) => Promise<any>;
   searchSpan?: ColProps;
   loading?: boolean;
+  headerStyle?: React.CSSProperties;
 }
 
 export default ({
@@ -19,6 +20,7 @@ export default ({
   onFinish,
   searchSpan = { span: 6 },
   loading,
+  headerStyle,
 }: IHeaderProps) => {
   const { tableInstance } = useHTableContext();
   const { form } = tableInstance;
@@ -30,7 +32,7 @@ export default ({
 
   return (
     <Card
-      style={{ borderRadius: 4 }}
+      style={{ borderRadius: 4, ...headerStyle }}
       bordered={false}
       bodyStyle={{ paddingBottom: 0 }}
     >

package/src/components/Table.tsx

@@ -16,7 +16,12 @@ export default ({
   actionRender,
   footerRender,
   hideHeader,
+  headerStyle = {},
+  footerStyle = {},
+  tableStyle = {},
   action = {},
+  spaceSize = 20,
+  className,
   ...props
 }: HTableProps) => {
   const saveParams = useMemo(() => {
@@ -54,25 +59,36 @@ export default ({
         error,
       }}
     >
-      <Space size={20} direction={"vertical"} style={{ width: "100%" }}>
+      <Space
+        size={spaceSize}
+        direction={"vertical"}
+        style={{ width: "100%" }}
+        className={className}
+      >
         {!hideHeader && (
           <Header
             configData={configData}
             onFinish={run}
             loading={loading}
             searchSpan={searchSpan}
+            headerStyle={headerStyle}
           />
         )}
         <Body
           loading={loading}
           configData={configData}
+          tableStyle={tableStyle}
           onPageChange={(page) => {
             run({ ...saveParams.params, ...page });
           }}
           {...props}
         />
         {footerRender !== false && (
-          <Footer actionRender={actionRender} footerRender={footerRender} />
+          <Footer
+            actionRender={actionRender}
+            footerRender={footerRender}
+            footerStyle={footerStyle}
+          />
         )}
       </Space>
     </HTableContext.Provider>

package/src/components/modal.ts

@@ -59,6 +59,11 @@ export interface HTableProps extends Omit<ProTableProps<any, any>, "request"> {
   footerRender?: FooterRenderFn | false;
   hideHeader?: boolean;
   action?: Record<string, actionFn>;
+  headerStyle?: React.CSSProperties;
+  tableStyle?: React.CSSProperties;
+  footerStyle?: React.CSSProperties;
+  spaceSize?: number;
+  className?: string;
 }
 export interface TableInstance {
   reload: (params?: ParamsModal) => void;

package/src/pages/Test/index.tsx

@@ -28,6 +28,10 @@ export default () => {
       <HTable
         configData={configData}
         rowKey={"id"}
+        headerStyle={{ borderRadius: 0 }}
+        tableStyle={{ borderRadius: 0, background: "#fff" }}
+        spaceSize={0}
+        footerStyle={{ marginTop: 20 }}
         table={hTable}
         actionRender={(allCheck, selectedRowKeys, xjTable) => {
           console.log(allCheck, selectedRowKeys, xjTable);