fix: virtual list prefixCls not working (#1082)

* fix: virtual list prefixCls not working * chore: update unit test typo
react-component · Feb 28, 2024 · 1f9606a · 1f9606a
1 parent 9103b81
commit 1f9606a
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 8 deletions.
diff --git a/docs/examples/virtual.tsx b/docs/examples/virtual.tsx
@@ -230,7 +230,7 @@ const Demo = () => {
         getContainerWidth={(ele, width) => {
           // Minus border
           const borderWidth = getComputedStyle(
-            ele.querySelector('.rc-virtual-list'),
+            ele.querySelector('.rc-table-tbody'),
           ).borderInlineStartWidth;
           const mergedWidth = width - parseInt(borderWidth, 10);
 

diff --git a/src/VirtualTable/BodyGrid.tsx b/src/VirtualTable/BodyGrid.tsx
@@ -219,8 +219,9 @@ const Grid = React.forwardRef<GridRef, GridProps>((props, ref) => {
       <VirtualList<FlattenData<any>>
         fullHeight={false}
         ref={listRef}
+        prefixCls={`${tblPrefixCls}-virtual`}
         styles={{ horizontalScrollBar: horizontalScrollBarStyle }}
-        className={classNames(tblPrefixCls, `${tblPrefixCls}-virtual`)}
+        className={tblPrefixCls}
         height={scrollY}
         itemHeight={listItemHeight || 24}
         data={flattenData}

diff --git a/tests/Virtual.spec.tsx b/tests/Virtual.spec.tsx
@@ -109,7 +109,7 @@ describe('Table.Virtual', () => {
 
     await waitFakeTimer();
 
-    expect(container.querySelector('.rc-virtual-list')).toBeTruthy();
+    expect(container.querySelector('.rc-table-tbody-virtual')).toBeTruthy();
   });
 
   it('warning for scroll props is not a number', () => {
@@ -198,7 +198,7 @@ describe('Table.Virtual', () => {
     scrollLeftCalled = false;
     expect(scrollLeftCalled).toBeFalsy();
 
-    fireEvent.wheel(container.querySelector('.rc-virtual-list-holder')!, {
+    fireEvent.wheel(container.querySelector('.rc-table-tbody-virtual-holder')!, {
       deltaX: 10,
     });
     expect(scrollLeftCalled).toBeTruthy();
@@ -221,7 +221,10 @@ describe('Table.Virtual', () => {
       data: [{}],
     });
 
-    expect(container.querySelector('.rc-virtual-list')).toHaveAttribute('data-scroll-width', '603');
+    expect(container.querySelector('.rc-table-tbody-virtual')).toHaveAttribute(
+      'data-scroll-width',
+      '603',
+    );
   });
 
   it('render params should correct', () => {
@@ -276,7 +279,7 @@ describe('Table.Virtual', () => {
       data: [{}],
     });
 
-    expect(container.querySelector('.rc-virtual-list')).toHaveAttribute(
+    expect(container.querySelector('.rc-table-tbody-virtual')).toHaveAttribute(
       'data-scroll-width',
       '1128',
     );
@@ -303,7 +306,7 @@ describe('Table.Virtual', () => {
 
     await waitFakeTimer();
 
-    expect(container.querySelector('.rc-virtual-list-scrollbar-horizontal')).toHaveStyle({
+    expect(container.querySelector('.rc-table-tbody-virtual-scrollbar-horizontal')).toHaveStyle({
       position: 'sticky',
       bottom: '10px',
     });
@@ -420,7 +423,7 @@ describe('Table.Virtual', () => {
     await waitFakeTimer();
 
     expect(container.querySelector('thead th')).toHaveAttribute('data-mark', 'my-th');
-    expect(container.querySelector('.rc-virtual-list-holder')).toHaveAttribute(
+    expect(container.querySelector('.rc-table-tbody-virtual-holder')).toHaveAttribute(
       'data-mark',
       'my-wrapper',
     );