@hw-component/table 1.9.87 → 1.9.88

package/src/components/HTableBody/hooks/useRowClassName.ts

@@ -0,0 +1,33 @@
+import type { HTableBodyProps } from "@/components/HTableBody/modal";
+import { useHTableContext } from "@/components/context";
+import { useContext } from "react";
+import { ConfigProvider } from "antd";
+import type { RowClassName } from "rc-table/lib/interface";
+import { useHTableConfigContext } from "@/components/TableConfig";
+
+export default ({
+  rowClassName,
+  rowKey = "id",
+}: HTableBodyProps): RowClassName<any> => {
+  const { selectedRowData } = useHTableContext();
+  const { defaultSelectedRowClassName } = useHTableConfigContext({});
+  const { keys = [] } = selectedRowData;
+  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+
+  return (record: any, index: number, indent: number) => {
+    const key =
+      typeof rowKey === "function" ? rowKey(record, index) : record[rowKey];
+    const propsRowClassName =
+      typeof rowClassName === "function"
+        ? rowClassName(record, index, indent)
+        : rowClassName;
+    const relPropsRowClassName = propsRowClassName || "";
+    if (keys?.indexOf(key) === -1) {
+      return relPropsRowClassName;
+    }
+    if (typeof defaultSelectedRowClassName === "undefined") {
+      return `${getPrefixCls("table-row-selected")} ${relPropsRowClassName}`;
+    }
+    return `${defaultSelectedRowClassName || ""} ${relPropsRowClassName}`;
+  };
+};

package/src/components/HTableBody/index.tsx

@@ -17,8 +17,7 @@ import Options from "./Options";
 import HeaderTitle from "./HeaderTitle";
 import { errorDefaultRender, emptyDefaultRender } from "./defaultRender";
 import type { HTableBodyProps } from "./modal";
-import { useContext } from "react";
-const { ConfigContext } = ConfigProvider;
+import useRowClassName from "@/components/HTableBody/hooks/useRowClassName";
 
 export default (bodyProps: HTableBodyProps) => {
   const {
@@ -110,9 +109,7 @@ export default (bodyProps: HTableBodyProps) => {
     table: tableInstance,
     localSorter,
   });
-  const { keys = [], selectAll } = selectedRowData;
-  const { getPrefixCls } = useContext(ConfigContext);
-
+  const rowClassNameFn = useRowClassName(bodyProps);
   return (
     <div style={defaultTableStyle} className={`hw_table_body  ${className}`}>
       <Space size={16} direction={"vertical"} style={{ width: "100%" }}>
@@ -134,22 +131,7 @@ export default (bodyProps: HTableBodyProps) => {
         >
           <ProTable
             {...props}
-            rowClassName={(record, index, indent) => {
-              const key =
-                typeof rowKey === "function"
-                  ? rowKey(record, index)
-                  : record[rowKey];
-              const propsRowClassName =
-                typeof rowClassName === "function"
-                  ? rowClassName(record, index, indent)
-                  : rowClassName;
-              if (keys?.indexOf(key) !== -1) {
-                return `${getPrefixCls(
-                  "table-row-selected"
-                )} ${propsRowClassName}`;
-              }
-              return propsRowClassName;
-            }}
+            rowClassName={(rowClassNameFn as any)}
             bordered={bordered}
             columnsState={{
               ...selfColStatus,

package/src/components/HTableBody/modal.ts

@@ -1,5 +1,5 @@
 import type { OptionConfig } from "@ant-design/pro-table/lib/components/ToolBar";
-import type React from "react";
+import React, {Key} from "react";
 import type { ProTableProps } from "@ant-design/pro-table";
 import type {
   ActionRenderFn,
@@ -39,3 +39,10 @@ export interface HTableBodyProps
   table?: HTableInstance;
   pagination?: IPaginationProps | false;
 }
+
+export interface RowRadioSelectionProps {
+  data: any;
+  onChange?:(keys:Key[],data:any[])=>void;
+  getCheckboxProps?: HRowSelection["getCheckboxProps"];
+  index: number;
+}

package/src/components/HTableBody/utils.ts

@@ -91,3 +91,8 @@ export const outColSetting = (
     keys,
   };
 };
+interface RowItemFnModal {}
+
+export const rowItemFn = (action, record, index) => {
+  return typeof action === "function" ? action(record, index) : record[action];
+};

package/src/components/TableConfig.tsx

@@ -8,6 +8,7 @@ interface HTableConfigContextModal {
   tableStyle?: React.CSSProperties;
   paginationStyle?: React.CSSProperties;
   valueTypeConfig?: ValueTypeConfigModal;
+  defaultSelectedRowClassName?: string | null;
 }
 export const HTableConfigContext =
   React.createContext<HTableConfigContextModal | null>(null);
@@ -26,6 +27,7 @@ export const useHTableConfigContext = ({
     tableStyle: configTableStyle,
     paginationStyle: configPaginationStyle,
     valueTypeConfig = {},
+    defaultSelectedRowClassName,
   } = useContext(HTableConfigContext) || {};
 
   return {
@@ -35,6 +37,7 @@ export const useHTableConfigContext = ({
     tableStyle: tableStyle || configTableStyle,
     paginationStyle: paginationStyle || configPaginationStyle,
     valueTypeConfig,
+    defaultSelectedRowClassName,
   };
 };
 const Index: React.FC<HTableConfigContextModal> = ({ children, ...props }) => {

package/src/components/hooks/useRowObj.ts

@@ -1,5 +1,5 @@
 import type React from "react";
-import { useMemo, useState } from "react";
+import {  useState } from "react";
 import type { RowObj } from "../modal";
 import type { HRowSelection } from "../modal";
 

package/src/components/modal.ts

@@ -5,7 +5,7 @@ import type {
   HFormInstance,
 } from "@hw-component/form/es/Form/modal";
 import type { ColProps, FormInstance } from "antd";
-import type React from "react";
+import React, {Key} from "react";
 import type { ModalProps } from "antd";
 import type { TableProps } from "antd/lib/table";
 import type { AffixProps } from "antd/lib/affix";
@@ -54,7 +54,9 @@ interface BcItemModal {
 export type ConfigItemModal = Omit<HItemProps, "render" | "type"> &
   HColumns &
   BcItemModal;
+
 export type ConfigDataModal = ConfigItemModal[];
+
 export type ActionRenderFn = (
   selectedRowKeys: RowObj,
   tableInstance: HTableInstance
@@ -65,9 +67,12 @@ export type FooterBtnRenderFn = (
   selectedRowKeys: RowObj,
   setAllCheck: (row: RowObj) => void
 ) => React.ReactNode;
+
 export type actionFn = (...arg) => void;
+
 export interface RowSelectionOuter {
   allPageCheck?: boolean;
+  onChange?:(keys:Key[],data:any[])=>void;
 }
 export type HRowSelection = RowSelectionOuter &
   (TableProps<any>["rowSelection"] & {

package/src/pages/Table/index.tsx

@@ -121,38 +121,47 @@ export default () => {
         >
           获取
         </div>
-        <HTable
-          configData={configData}
-          rowKey={(rowData, index) => {
-            return index;
-          }}
-          table={hTable}
-          labelWidth={88}
-          action={{
-            test: (params) => {
-              console.log(params, "lllll");
-            },
-          }}
-          rowSelection={{
-            preserveSelectedRowKeys: true,
-          }}
-          affixProps={{
-            target: () => document.querySelector(".body"),
-          }}
-          scroll={{
-            x: 1000,
-          }}
-          columnsState={{
-            persistenceKey: "test",
-            persistenceType: "localStorage",
-          }}
-          formInitValues={{
-            deviceType: "1",
-          }}
-          dataSource={[{}, {}, {}]}
-          headerTitle={
-            <Space size={8}>
-              <div style={{ width: 1000 }}>
+        <HTableConfig defaultSelectedRowClassName={null}>
+          <HTable
+            configData={configData}
+            rowKey={(rowData, index) => {
+              return index;
+            }}
+            table={hTable}
+            labelWidth={88}
+            action={{
+              test: (params) => {
+                console.log(params, "lllll");
+              },
+            }}
+            rowSelection={{
+              preserveSelectedRowKeys: true,
+            }}
+            affixProps={{
+              target: () => document.querySelector(".body"),
+            }}
+            scroll={{
+              x: 1000,
+            }}
+            columnsState={{
+              persistenceKey: "test",
+              persistenceType: "localStorage",
+            }}
+            formInitValues={{
+              deviceType: "1",
+            }}
+            dataSource={[{}, {}, {}]}
+            headerTitle={
+              <Space size={8}>
+                <div style={{ width: 1000 }}>
+                  <Button
+                    onClick={() => {
+                      console.log(hTable.table.getColSettingKeys());
+                    }}
+                  >
+                    操作
+                  </Button>
+                </div>
                 <Button
                   onClick={() => {
                     console.log(hTable.table.getColSettingKeys());
@@ -160,34 +169,27 @@ export default () => {
                 >
                   操作
                 </Button>
-              </div>
-              <Button
-                onClick={() => {
-                  console.log(hTable.table.getColSettingKeys());
-                }}
-              >
-                操作
-              </Button>
-              <Button
-                onClick={() => {
-                  console.log(hTable.table.getColSettingKeys());
-                }}
-              >
-                操作
-              </Button>
-            </Space>
-          }
-          options={{
-            settingRender: () => {
-              return (
-                <Tooltip title="321312312312321">
-                  <SettingOutlined width={24} />
-                </Tooltip>
-              );
-            },
-          }}
-          pagination={false}
-        />
+                <Button
+                  onClick={() => {
+                    console.log(hTable.table.getColSettingKeys());
+                  }}
+                >
+                  操作
+                </Button>
+              </Space>
+            }
+            options={{
+              settingRender: () => {
+                return (
+                  <Tooltip title="321312312312321">
+                    <SettingOutlined width={24} />
+                  </Tooltip>
+                );
+              },
+            }}
+            pagination={false}
+          />
+        </HTableConfig>
       </div>
     </HFormConfigProvider>
   );