@hw-component/table 1.2.1 → 1.2.2

package/src/components/HTableBody/index.tsx

@@ -15,7 +15,7 @@ import {
 } from "./hooks";
 import { useHTableContext } from "../context";
 import React from "react";
-import { ConfigProvider, Empty, Alert } from "antd";
+import {ConfigProvider, Empty, Alert, Space} from "antd";
 import { useHTableConfigContext } from "../TableConfig";
 import HTablePagination from "../HTablePagination";
 import { useClassName } from "../hooks";
@@ -23,13 +23,16 @@ import AlertMsg from "./AlertMsg";
 import type { AffixProps } from "antd/lib/affix";
 import Options from "./Options";
 import HeaderTitle from "./HeaderTitle";
-import {OptionConfig} from "@ant-design/pro-table/lib/components/ToolBar";
+import type { OptionConfig } from "@ant-design/pro-table/lib/components/ToolBar";
 
 export interface OptionModal extends OptionConfig {
-  settingRender?:()=>React.ReactNode
+  settingRender?: () => React.ReactNode;
 }
 export interface HTableBodyProps
-  extends Omit<ProTableProps<any, any>, "dataSource" | "rowSelection"|"options"> {
+  extends Omit<
+    ProTableProps<any, any>,
+    "dataSource" | "rowSelection" | "options"
+  > {
   configData?: ConfigDataModal;
   onPageChange?: (params: ParamsModal) => void;
   emptyRender?: (tableInstance: HTableInstance) => React.ReactNode;
@@ -46,16 +49,11 @@ export interface HTableBodyProps
   optionsRender?: (node: React.ReactNode) => React.ReactNode;
   paginationActionRender?: (tableInstance: HTableInstance) => React.ReactNode;
   localSorter?: boolean;
-  options?:OptionModal|false
+  options?: OptionModal | false;
 }
 const defaultRender = () => {
   return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />;
 };
-const contentStyle = {
-  paddingLeft: 24,
-  paddingRight: 24,
-  paddingBottom: 16,
-};
 export default ({
   configData,
   pagination = {},
@@ -129,75 +127,75 @@ export default ({
     : optionsNode;
   const alwaysShowAlert = keys.length > 0 || selectAll || configAlwaysShowAlert;
   const className = useClassName("hw-table-body");
+  const {tableStyle:defaultTableStyle}=useHTableConfigContext({tableStyle})
   return (
-    <div style={tableStyle} className={`hw_table_body  ${className}`}>
-      {alwaysShowAlert && (
-        <div style={contentStyle}>
-          <Alert
-            message={<AlertMsg actionRender={actionRender} />}
-            type="info"
-          />
-        </div>
-      )}
-      <HeaderTitle
-        headerTitle={headerTitle}
-        contentStyle={contentStyle}
-        rNode={defaultOptionsNode}
-      />
-      <ConfigProvider
-        renderEmpty={() => {
-          if (error) {
-            return tableErrorRender?.(tableInstance, error);
-          }
-          return tableEmptyRender?.(tableInstance);
-        }}
-      >
-        <ProTable
-          {...props}
-          columnsState={{
-            ...selfColStatus,
-            value,
-          }}
-          columns={cols as any}
-          size={cuSize}
-          search={false}
-          onChange={(page, filters, sorter) => {
-            if (localSorter) {
-              return;
-            }
-            const { field, order } = sorter as any;
-            const orderByField =
-              typeof order === "undefined" ? undefined : field;
-            const asc =
-              typeof order === "undefined" ? undefined : order === "ascend";
-            tableInstance.table.reloadWithParams({
-              current: 1,
-              orderByField,
-              asc,
-            });
-          }}
-          tableStyle={{
-            paddingBottom: 0,
-          }}
-          options={false}
-          rowSelection={false}
-          loading={loading}
-          rowKey={rowKey}
-          dataSource={records}
-          pagination={false}
+    <div style={defaultTableStyle} className={`hw_table_body  ${className}`}>
+     <Space size={16} direction={"vertical"} style={{width:"100%"}}>
+       {alwaysShowAlert && (
+           <Alert
+               message={<AlertMsg actionRender={actionRender} />}
+               type="info"
+           />
+       )}
+       <HeaderTitle
+           headerTitle={headerTitle}
+           rNode={defaultOptionsNode}
+       />
+       <ConfigProvider
+           renderEmpty={() => {
+             if (error) {
+               return tableErrorRender?.(tableInstance, error);
+             }
+             return tableEmptyRender?.(tableInstance);
+           }}
+       >
+          <ProTable
+              {...props}
+              columnsState={{
+                ...selfColStatus,
+                value,
+              }}
+              columns={cols as any}
+              size={cuSize}
+              search={false}
+              onChange={(page, filters, sorter) => {
+                if (localSorter) {
+                  return;
+                }
+                const { field, order } = sorter as any;
+                const orderByField =
+                    typeof order === "undefined" ? undefined : field;
+                const asc =
+                    typeof order === "undefined" ? undefined : order === "ascend";
+                tableInstance.table.reloadWithParams({
+                  current: 1,
+                  orderByField,
+                  asc,
+                });
+              }}
+              tableStyle={{
+                paddingBottom: 0,
+              }}
+              options={false}
+              rowSelection={false}
+              loading={loading}
+              rowKey={rowKey}
+              dataSource={records}
+              pagination={false}
 
-        />
-        {pagination !== false && (
-          <HTablePagination
-            onPageChange={onPageChange}
-            paginationStyle={paginationStyle}
-            affixProps={affixProps}
-            goTop={goTop}
-            actionRender={paginationActionRender}
-            {...pagination}
           />
-        )}
-      </ConfigProvider>
+         {pagination !== false && (
+             <HTablePagination
+                 onPageChange={onPageChange}
+                 paginationStyle={paginationStyle}
+                 affixProps={affixProps}
+                 goTop={goTop}
+                 actionRender={paginationActionRender}
+                 {...pagination}
+             />
+         )}
+       </ConfigProvider>
+     </Space>
     </div>
   );
 };

package/src/components/HTableHeader/index.tsx

@@ -6,6 +6,7 @@ import { useClassName } from "../hooks";
 import type { IHeaderProps } from "./modal";
 import { useHideMoreTitle } from "./hooks";
 import { HeaderProvider } from "./Context";
+import {useHTableConfigContext} from "../TableConfig";
 
 const defaultSearchSpan = {
   xxl: 4,
@@ -44,13 +45,10 @@ export default ({
     typeof hideLabel === "undefined" ? contextHideLabel : hideLabel;
   const tableLabelWidth = labelWidth || contextLabelWidth;
   const className = useClassName("hw-table-header");
+  const {headerStyle:defaultHeaderStyle}=useHTableConfigContext({headerStyle})
   return (
     <Card
-      style={{
-        borderBottomLeftRadius: 0,
-        borderBottomRightRadius: 0,
-        ...headerStyle,
-      }}
+      style={defaultHeaderStyle}
       bordered={false}
       className={`hw_table_header ${className}`}
       bodyStyle={{ paddingBottom: 0 }}

package/src/components/HTablePagination/index.tsx

@@ -6,6 +6,7 @@ import { useClassName } from "../hooks";
 import React, { useState } from "react";
 import type { AffixProps } from "antd/lib/affix";
 import GoTop from "../GoTop";
+import {useHTableConfigContext} from "@/components/TableConfig";
 export interface IPaginationProps extends PaginationProps {
   onPageChange?: (params: ParamsModal) => void;
   paginationStyle?: React.CSSProperties;
@@ -36,13 +37,15 @@ export default ({
   if (!data) {
     return <></>;
   }
+  const {paginationStyle:defaultPaginationStyle}=useHTableConfigContext({paginationStyle})
+
   if (affixProps === false) {
     return (
       <Row
         justify={"space-between"}
         align={"middle"}
         className={className}
-        style={paginationStyle}
+        style={defaultPaginationStyle}
       >
         <div>{actionRender?.(tableInstance)}</div>
         <Pagination
@@ -82,7 +85,7 @@ export default ({
         justify={"space-between"}
         className={className}
         align={"middle"}
-        style={{ ...paginationStyle, ...style }}
+        style={{ ...defaultPaginationStyle, ...style }}
       >
         <div>{actionRender?.(tableInstance)}</div>
         <Pagination

package/src/components/Table.tsx

@@ -8,14 +8,15 @@ import type { HTableProps } from "./modal";
 import useReq from "./hooks/useReq";
 import useDispatch from "./hooks/useDispatch";
 import { useState } from "react";
+import {useClassName} from "@/components/hooks";
 export default ({
   request,
   configData,
   searchSpan,
   table,
   hideHeader,
-  headerStyle = {},
-  tableStyle = {},
+  headerStyle,
+  tableStyle,
   action = {},
   spaceSize = 15,
   className,
@@ -56,7 +57,8 @@ export default ({
     selectedRowData,
     dataSource: data,
   });
-  return (
+    const contentClassName = useClassName("hw-table-content");
+    return (
     <HTableContext.Provider
       value={{
         tableInstance,
@@ -81,7 +83,7 @@ export default ({
         labelWidth,
       }}
     >
-      <Space direction={"vertical"} size={0} style={{ width: "100%" }}>
+      <Space direction={"vertical"} size={0} style={{ width: "100%" }} className={contentClassName}>
         {!hideHeader && (
           <Header
             searchSpan={searchSpan}

package/src/components/TableConfig.tsx

@@ -4,20 +4,30 @@ import type { HTableInstance } from "src/components/modal";
 interface HTableConfigContextModal {
   emptyRender?: (table: HTableInstance) => React.ReactNode;
   errorRender?: (table: HTableInstance, error: Error) => React.ReactNode;
+  headerStyle?:React.CSSProperties;
+  tableStyle?:React.CSSProperties;
+  paginationStyle?:React.CSSProperties;
 }
 export const HTableConfigContext =
   React.createContext<HTableConfigContextModal | null>(null);
 
+
 export const useHTableConfigContext = ({
   emptyRender,
   errorRender,
+  headerStyle,
+                                         tableStyle,
+  paginationStyle
 }: HTableConfigContextModal) => {
-  const { errorRender: configErrorRender, emptyRender: configEmptyRender } =
+  const { errorRender: configErrorRender, emptyRender: configEmptyRender,headerStyle:configHeaderStyle,tableStyle:configTableStyle,paginationStyle:configPaginationStyle } =
     useContext(HTableConfigContext) || {};
 
   return {
     errorRender: errorRender || configErrorRender,
     emptyRender: emptyRender || configEmptyRender,
+    headerStyle:headerStyle||configHeaderStyle,
+    tableStyle:tableStyle||configTableStyle,
+    paginationStyle:paginationStyle||configPaginationStyle
   };
 };
 const Index: React.FC<HTableConfigContextModal> = ({ children, ...props }) => {

package/src/components/index.less

@@ -1,14 +1,30 @@
 @import "./styles/local.less";
-.@{ant-prefix}-hw-table-body{
-  border-bottom-left-radius: 4px;
-  border-bottom-right-radius: 4px;
+.@{ant-prefix}-hw-table-content{
+  .@{ant-prefix}-hw-table-body{
+     padding-top: 0px;
+    border-top-left-radius: 0px;
+    border-top-right-radius: 0px;
+  }
+  .@{ant-prefix}-hw-table-header{
+    border-bottom-left-radius: 0px !important;
+    border-bottom-right-radius: 0px !important;
+  }
+}
+.@{ant-prefix}-hw-table-body {
   background-color: #fff;
   position: relative;
+  padding-right: 20px;
+  padding-left: 20px;
+  padding-top: 16px;
+  border-radius: 4px;
+  overflow: hidden;
   .@{ant-prefix}-hw-table-pagination{
     padding: 12px 24px;
     background-color:#ffffff;
     border-bottom-left-radius: 4px;
     border-bottom-right-radius: 4px;
+    margin-left: -20px;
+    margin-right: -20px;
     .@{ant-prefix}-select{
       width: auto;
     }
@@ -19,9 +35,12 @@
   .@{ant-prefix}-pro-table-list-toolbar-container{
         padding-top: 0px;
   }
+  .@{ant-prefix}-pro-table>.@{ant-prefix}-pro-card>.@{ant-prefix}-pro-card-body{
+      padding: 0px;
+  }
 }
 .@{ant-prefix}-hw-table-pagination{
-   padding: 24px;
+   padding: 20px;
    border-radius: 4px;
    background-color: #ffffff;
    position: relative;
@@ -39,12 +58,17 @@
    background-size: 100%;
 }
 .@{ant-prefix}-hw-table-header{
-  border-top-left-radius: 4px !important;
-  border-top-right-radius: 4px !important;
+  border-radius: 4px !important;
   padding-bottom: 0px;
   .@{ant-prefix}-hw-table-header-item-hide{
     display: none;
   }
+  .@{ant-prefix}-card-body{
+     padding:24px 20px
+  }
+  .@{ant-prefix}-form-item{
+     margin-bottom: 16px;
+  }
 }
 
 .@{ant-prefix}-hw-table-body-option-icon{

package/src/components/modal.ts

@@ -9,7 +9,7 @@ import type React from "react";
 import type { ModalProps } from "antd";
 import type { TableProps } from "antd/lib/table";
 import type { AffixProps } from "antd/lib/affix";
-import {OptionModal} from "./HTableBody";
+import type { OptionModal } from "./HTableBody";
 
 export interface RowObj {
   keys?: React.Key[];
@@ -108,7 +108,7 @@ export interface HTableProps
   formInitValues?: Record<string, any>;
   labelWidth?: number;
   hideLabel?: boolean;
-  options?:OptionModal|false
+  options?: OptionModal | false;
 }
 interface ColCheckResultKeys {
   keys?: string[];

package/src/pages/Table/index.tsx

@@ -1,7 +1,7 @@
-import { HTable, useHTable } from "@/components";
-import {Button, Tooltip} from "antd";
+import { HTable, useHTable ,HTableConfig} from "@/components";
+import {Button, Card, Tooltip} from "antd";
 import { HFormConfigProvider } from "@hw-component/form";
-import {SettingOutlined} from "@ant-design/icons";
+import { SettingOutlined } from "@ant-design/icons";
 
 const configData = [
   {
@@ -9,7 +9,6 @@ const configData = [
     showSearch: true,
     searchType: "rangePicker",
     dataIndex: "id",
-    searchLabel: "fff",
     sorter: true,
     itemProps: {
       options: [{ label: "1", value: 1 }],
@@ -22,7 +21,6 @@ const configData = [
   },
   {
     title: "座位断开",
-    showSearch: true,
     dataIndex: "name1",
     childrenDataIndex: [
       {
@@ -41,7 +39,6 @@ const configData = [
   {
     title: <div>座位fff</div>,
     titleStr: "座位",
-    showSearch: true,
     dataIndex: "name2",
     searchType: "select",
     sorter: true,
@@ -54,9 +51,8 @@ const configData = [
     name: "aaa",
     fixed: "right",
     width: 200,
-    showSearch: true,
     render: () => {
-      return <div>fff</div>;
+      return <Card>fff</Card>;
     },
   },
 ];
@@ -67,7 +63,9 @@ const Test = ({ name, selectedRowData }) => {
 export default () => {
   const hTable = useHTable();
   return (
-    <HFormConfigProvider>
+    <HFormConfigProvider
+
+    >
       <div>
         <div
           onClick={() => {
@@ -76,78 +74,84 @@ export default () => {
         >
           获取
         </div>
-        <HTable
-          configData={configData}
-          rowKey={"id"}
-          table={hTable}
-          onReset={() => {
-            hTable.form.setFieldsValue({
-              name1: "ffff",
-            });
-          }}
-          hideLabel={false}
-          labelWidth={88}
-          action={{
-            test: (params) => {
-              console.log(params, "lllll");
-            },
-          }}
-          rowSelection={{
-            allPageCheck: false,
-          }}
-          affixProps={{
-            target: () => document.querySelector(".body"),
-          }}
-          scroll={{
-            x: 1000,
-          }}
-          columnsState={{
-            persistenceKey: "test",
-            persistenceType: "localStorage",
-          }}
-          formInitValues={{
-            name2: 1,
-          }}
-          headerTitle={
-            <Button
-              type={"primary"}
-              onClick={() => {
-                console.log(hTable.table.getColSettingKeys());
+        <HTableConfig>
+          <HTable
+              configData={configData}
+              rowKey={"id"}
+              table={hTable}
+              onReset={() => {
+                hTable.form.setFieldsValue({
+                  name1: "ffff",
+                });
               }}
-            >
-              操作
-            </Button>
-          }
-          paginationActionRender={() => {
-            return <div>你大爷</div>;
-          }}
-          request={(params) => {
-            const { current = 1, size = "10" } = params;
-            const arrayData = [];
-            for (let i = 0; i < 100; i = i + 1) {
-              arrayData.push({
-                id: i,
-                name: "11",
-              });
-            }
-            return new Promise((resolve, reject) => {
-              setTimeout(() => {
-                // reject(new Error("错误"));
-                resolve({
-                  size: size,
-                  current: current.toString(10),
-                  total: "1000",
-                  records: arrayData,
+              hideLabel={false}
+              labelWidth={88}
+              action={{
+                test: (params) => {
+                  console.log(params, "lllll");
+                },
+              }}
+              rowSelection={{
+                allPageCheck: false,
+              }}
+              affixProps={{
+                target: () => document.querySelector(".body"),
+              }}
+              scroll={{
+                x: 1000,
+              }}
+              columnsState={{
+                persistenceKey: "test",
+                persistenceType: "localStorage",
+              }}
+              formInitValues={{
+                name2: 1,
+              }}
+              headerTitle={
+                <Button
+                    type={"primary"}
+                    onClick={() => {
+                      console.log(hTable.table.getColSettingKeys());
+                    }}
+                >
+                  操作
+                </Button>
+              }
+              paginationActionRender={() => {
+                return <div>你大爷</div>;
+              }}
+              request={(params) => {
+                const { current = 1, size = "10" } = params;
+                const arrayData = [];
+                for (let i = 0; i < 100; i = i + 1) {
+                  arrayData.push({
+                    id: i,
+                    name: "11",
+                  });
+                }
+                return new Promise((resolve, reject) => {
+                  setTimeout(() => {
+                    // reject(new Error("错误"));
+                    resolve({
+                      size: size,
+                      current: current.toString(10),
+                      total: "1000",
+                      records: arrayData,
+                    });
+                  }, 2000);
                 });
-              }, 2000);
-            });
-          }}
-          options={{
-            settingRender:()=>{
-              return <Tooltip title="321312312312321"><SettingOutlined width={24} /></Tooltip>
-            }
-          }}
-        />
+              }}
+              options={{
+                settingRender: () => {
+                  return (
+                      <Tooltip title="321312312312321">
+                        <SettingOutlined width={24} />
+                      </Tooltip>
+                  );
+                },
+              }}
+          />
+        </HTableConfig>
       </div>
     </HFormConfigProvider>
   );