@hw-component/table 1.2.1 → 1.2.3

package/src/components/HTableBody/Options/modal.d.ts

@@ -2,7 +2,7 @@ import type { OptionConfig } from "@ant-design/pro-table/lib/components/ToolBar"
 import type { SizeType } from "antd/lib/config-provider/SizeContext";
 import type { ConfigDataModal } from "../../modal";
 import type { ColumnsState } from "@ant-design/pro-table/es/container";
-import React from "react";
+import type React from "react";
 
 export interface IProps extends OptionConfig {
   size?: SizeType;
@@ -11,7 +11,7 @@ export interface IProps extends OptionConfig {
   onChange: (keys: string[], notCheck: string[]) => void;
   colStatusValue: Record<string, ColumnsState>;
   reset: VoidFunction;
-  settingRender?:()=>React.ReactNode
+  settingRender?: () => React.ReactNode;
 }
 
 export interface ItemProps {

package/src/components/HTableBody/RowSelection.tsx

@@ -21,8 +21,8 @@ export const RowSelectionTitle = ({
   });
   const { keys, selectAll } = selectedRowData;
   const allCheck = () => {
-    const setKeys = newData.map((item) => {
-      return item[rowKey];
+    const setKeys = newData.map((item,index) => {
+      return typeof rowKey==="function"?rowKey(item,index):item[(rowKey as string)];
     });
     rowOnChange(setKeys, newData);
     onChange?.(setKeys, newData);
@@ -106,15 +106,17 @@ interface RowSelectionBoxProps {
   data: any;
   onChange?: HRowSelection["onChange"];
   getCheckboxProps?: HRowSelection["getCheckboxProps"];
+  index:number;
 }
 export const RowSelectionBox = ({
   data,
   onChange,
+                                  index,
   getCheckboxProps,
 }: RowSelectionBoxProps) => {
   const { selectedRowData, rowOnChange, rowKey = "id" } = useHTableContext();
   const { rowData = [], keys = [] } = selectedRowData;
-  const key = data[rowKey];
+  const key = typeof rowKey==="function"?rowKey(data,index):data[rowKey];
   const check = (e) => {
     const checked = e.target.checked;
     const newKeys = [...keys];

package/src/components/HTableBody/hooks.tsx

@@ -25,10 +25,11 @@ const rowSelectionCol = (rowSelection?: HRowSelection) => {
     width: 32,
     rowSelectionTitle: true,
     fixed: "left",
-    render: (dom, data) => {
+    render: (dom, data,index) => {
       return (
         <RowSelectionBox
           data={data}
+          index={index}
           onChange={onChange}
           getCheckboxProps={getCheckboxProps}
         />

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 = {},
@@ -85,10 +83,8 @@ export default ({
     configData: contextConfigData,
     data,
     selectedRowData,
-    rowOnChange,
     error,
     loading,
-    allSelectChange,
   } = useHTableContext();
   const {
     emptyRender: tableEmptyRender = defaultRender,
@@ -129,75 +125,76 @@ 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/context.ts

@@ -14,7 +14,6 @@ interface HContextModal extends Omit<HTableProps, "request"> {
   onFinish: (value: Record<string, any>) => Promise<any>;
   onPageChange: (value: Record<string, any>) => Promise<any>;
   setSelectedRowData: (row: RowObj) => void;
-  rowKey?: string;
   headerOpen?: boolean;
   setHeaderOpen: Dispatch<SetStateAction<boolean | undefined>>;
 }

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[];
@@ -66,6 +66,7 @@ export type actionFn = (...arg) => void;
 export interface RowSelectionOuter {
   allPageCheck?: boolean;
 }
+type RowKeyFn=(data:any,index:number)=>string;
 export type HRowSelection = RowSelectionOuter &
   (TableProps<any>["rowSelection"] & {
     alwaysShowAlert?: boolean;
@@ -96,7 +97,7 @@ export interface HTableProps
   manual?: boolean;
   dataSource?: ResultModal;
   paginationStyle?: React.CSSProperties;
-  rowKey?: string;
+  rowKey?: string|RowKeyFn;
   allPageCheck?: boolean;
   rowSelection?: HRowSelection | false;
   affixProps?: AffixProps | false;
@@ -108,7 +109,7 @@ export interface HTableProps
   formInitValues?: Record<string, any>;
   labelWidth?: number;
   hideLabel?: boolean;
-  options?:OptionModal|false
+  options?: OptionModal | false;
 }
 interface ColCheckResultKeys {
   keys?: string[];