fix: antd #33453 fix the table tree hover error (#729)

Co-authored-by: zengguhao.zgh <[email protected]>

Author: LongHaoo

src/Body/BodyRow.tsx

@@ -16,6 +16,7 @@ import ExpandedRow from './ExpandedRow';
 export interface BodyRowProps<RecordType> {
   record: RecordType;
   index: number;
+  renderIndex: number;
   className?: string;
   style?: React.CSSProperties;
   recordKey: Key;
@@ -38,6 +39,7 @@ function BodyRow<RecordType extends { children?: readonly RecordType[] }>(
     style,
     record,
     index,
+    renderIndex,
     rowKey,
     rowExpandable,
     expandedKeys,
@@ -165,6 +167,7 @@ function BodyRow<RecordType extends { children?: readonly RecordType[] }>(
             key={key}
             record={record}
             index={index}
+            renderIndex={renderIndex}
             dataIndex={dataIndex}
             render={render}
             shouldCellUpdate={column.shouldCellUpdate}

src/Body/index.tsx

@@ -71,7 +71,8 @@ function Body<RecordType>({
             rowKey={key}
             record={record}
             recordKey={key}
-            index={renderIndex}
+            index={idx}
+            renderIndex={renderIndex}
             rowComponent={trComponent}
             cellComponent={tdComponent}
             expandedKeys={expandedKeys}

src/Cell/index.tsx

@@ -43,8 +43,10 @@ interface InternalCellProps<RecordType extends DefaultRecordType>
   prefixCls?: string;
   className?: string;
   record?: RecordType;
-  /** `record` index. Not `column` index. */
+  /** `column` index is the real show rowIndex */
   index?: number;
+  /** the index of the record. For the render(value, record, renderIndex) */
+  renderIndex?: number;
   dataIndex?: DataIndex;
   render?: ColumnType<RecordType>['render'];
   component?: CustomizeComponent;
@@ -89,6 +91,7 @@ function Cell<RecordType extends DefaultRecordType>(
     className,
     record,
     index,
+    renderIndex,
     dataIndex,
     render,
     children,
@@ -131,7 +134,7 @@ function Cell<RecordType extends DefaultRecordType>(
     // Customize render node
     childNode = value;
     if (render) {
-      const renderData = render(value, record, index);
+      const renderData = render(value, record, renderIndex);
 
       if (isRenderCell(renderData)) {
         if (process.env.NODE_ENV !== 'production') {

tests/Table.spec.js

@@ -988,4 +988,36 @@ describe('Table.Basic', () => {
     expect(trs.at(4).find('Cell').at(1).text()).toEqual('0');
     expect(trs.at(5).find('Cell').at(1).text()).toEqual('1');
   });
+
+  it('hover the tree table', () => {
+    const tColumns = [
+      {
+        title: 'Key',
+        dataIndex: 'key',
+      },
+    ];
+
+    const tData = [
+      { key: 'row0', children: [{ key: 'row0-0' }, { key: 'row0-1' }] },
+      { key: 'row1', children: [{ key: 'row1-0' }, { key: 'row1-1' }] },
+    ];
+    const wrapper = mount(
+      <Table columns={tColumns} expandable={{ defaultExpandAllRows: true }} data={tData} />,
+    );
+
+    const trs = wrapper.find('tr.rc-table-row');
+
+    trs.forEach((tr, index) => {
+      tr.find('td.rc-table-cell').at(0).simulate('mouseEnter');
+      const currentClassName = wrapper
+        .find('tr.rc-table-row')
+        .at(index)
+        .find('td.rc-table-cell')
+        .at(0)
+        .getElement().props.className;
+
+      expect(currentClassName.includes('rc-table-cell-row-hover')).toEqual(true);
+      expect(wrapper.find('td.rc-table-cell-row-hover')).toHaveLength(1);
+    });
+  });
 });