fix: apply expandedRowClassName to virtual tree rows (#1482)

Author: QDyanbing

src/VirtualTable/BodyLine.tsx

@@ -39,12 +39,12 @@ const BodyLine = React.forwardRef<HTMLDivElement, BodyLineProps>((props, ref) =>
   // ========================== Expand ==========================
   const { rowSupportExpand, expanded, rowProps, expandedRowRender, expandedRowClassName } = rowInfo;
 
+  const expandedClsName = computedExpandedClassName(expandedRowClassName, record, index, indent);
+
   let expandRowNode: React.ReactElement<any>;
   if (rowSupportExpand && expanded) {
     const expandContent = expandedRowRender(record, index, indent + 1, expanded);
 
-    const expandedClsName = computedExpandedClassName(expandedRowClassName, record, index, indent);
-
     let additionalProps: React.TdHTMLAttributes<HTMLElement> = {};
     if (fixColumn) {
       additionalProps = {
@@ -94,6 +94,7 @@ const BodyLine = React.forwardRef<HTMLDivElement, BodyLineProps>((props, ref) =>
       data-row-key={rowKey}
       ref={rowSupportExpand ? null : ref}
       className={clsx(className, `${prefixCls}-row`, rowProps?.className, {
+        [expandedClsName]: indent >= 1,
         [`${prefixCls}-row-extra`]: extra,
       })}
       style={{ ...rowStyle, ...rowProps?.style }}

tests/Virtual.spec.tsx

@@ -183,6 +183,32 @@ describe('Table.Virtual', () => {
       });
     });
 
+    it('applies expanded row class to tree rows', () => {
+      const { container } = getTable({
+        data: [
+          {
+            name: 'parent',
+            age: 0,
+            address: 'address0',
+            children: [
+              {
+                name: 'child',
+                age: 1,
+                address: 'address1',
+              },
+            ],
+          },
+        ],
+        expandable: {
+          expandedRowKeys: ['parent'],
+          expandedRowClassName: 'bamboo',
+          expandIcon: () => <span className="custom-expand-icon" />,
+        },
+      });
+
+      expect(container.querySelector('[data-row-key="child"]')).toHaveClass('bamboo');
+    });
+
     it('fixed', () => {
       const { container } = getTable({
         columns: [