feat: use css hover when no colSpan

react-component · Feb 7, 2024 · 1c24035 · 1c24035
1 parent 886671b
commit 1c24035
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 13 deletions.
diff --git a/assets/index.less b/assets/index.less
@@ -214,6 +214,12 @@
         background: #fff;
       }
 
+      &:hover {
+        td {
+          background: #fff4f4;
+        }
+      }
+
       th {
         background: @table-head-background-color;
       }

diff --git a/src/Body/BodyRow.tsx b/src/Body/BodyRow.tsx
@@ -129,6 +129,15 @@ function BodyRow<RecordType extends { children?: readonly RecordType[] }>(
   const computedExpandedRowClassName =
     expandedRowClassName && expandedRowClassName(record, index, indent);
 
+  const cellPropsArray = flattenColumns.map((column, colIndex) =>
+    getCellProps(rowInfo, column, colIndex, indent, index),
+  );
+  const useJsHover = flattenColumns.some((_, colIndex) => {
+    const { additionalCellProps } = cellPropsArray[colIndex];
+    const rowSpan = additionalCellProps.rowSpan ?? 1;
+    return rowSpan !== 1;
+  });
+
   // ======================== Base tr row ========================
   const baseRowNode = (
     <RowComponent
@@ -149,16 +158,11 @@ function BodyRow<RecordType extends { children?: readonly RecordType[] }>(
       {flattenColumns.map((column: ColumnType<RecordType>, colIndex) => {
         const { render, dataIndex, className: columnClassName } = column;
 
-        const { key, fixedInfo, appendCellNode, additionalCellProps } = getCellProps(
-          rowInfo,
-          column,
-          colIndex,
-          indent,
-          index,
-        );
+        const { key, fixedInfo, appendCellNode, additionalCellProps } = cellPropsArray[colIndex];
 
         return (
           <Cell
+            useJsHover={useJsHover}
             className={columnClassName}
             ellipsis={column.ellipsis}
             align={column.align}
@@ -213,8 +217,4 @@ function BodyRow<RecordType extends { children?: readonly RecordType[] }>(
   );
 }
 
-if (process.env.NODE_ENV !== 'production') {
-  BodyRow.displayName = 'BodyRow';
-}
-
 export default responseImmutable(BodyRow);
diff --git a/src/Cell/index.tsx b/src/Cell/index.tsx
@@ -33,6 +33,7 @@ export interface CellProps<RecordType extends DefaultRecordType> {
   scope?: ScopeType;
   ellipsis?: CellEllipsisType;
   align?: AlignType;
+  useJsHover?: boolean;
 
   shouldCellUpdate?: (record: RecordType, prevRecord: RecordType) => boolean;
 
@@ -87,6 +88,7 @@ function Cell<RecordType>(props: CellProps<RecordType>) {
     prefixCls,
     className,
     align,
+    useJsHover = true,
 
     // Value
     record,
@@ -244,8 +246,8 @@ function Cell<RecordType>(props: CellProps<RecordType>) {
       title={title}
       scope={scope}
       // Hover
-      onMouseEnter={onMouseEnter}
-      onMouseLeave={onMouseLeave}
+      onMouseEnter={useJsHover ? onMouseEnter : undefined}
+      onMouseLeave={useJsHover ? onMouseLeave : undefined}
       //Span
       colSpan={mergedColSpan !== 1 ? mergedColSpan : null}
       rowSpan={mergedRowSpan !== 1 ? mergedRowSpan : null}