fix: right shadow should display correctly in virtual when mount (#1130)

* fix: right shadow should display correctly in virtual when mount * test: adjust * chore: remove console * docs: remove showHeader * chore: use rc-util findDOMNode * chore: use getDOM * chore: upgrade rc-util
react-component · May 27, 2024 · 0fe547b · 0fe547b
1 parent b08600c
commit 0fe547b
Show file tree

Hide file tree

Showing 7 changed files with 93 additions and 10 deletions.
diff --git a/package.json b/package.json
@@ -57,7 +57,7 @@
     "@rc-component/context": "^1.4.0",
     "classnames": "^2.2.5",
     "rc-resize-observer": "^1.1.0",
-    "rc-util": "^5.37.0",
+    "rc-util": "^5.41.0",
     "rc-virtual-list": "^3.14.2"
   },
   "devDependencies": {

diff --git a/src/Table.tsx b/src/Table.tsx
@@ -75,6 +75,7 @@ import StickyScrollBar from './stickyScrollBar';
 import Column from './sugar/Column';
 import ColumnGroup from './sugar/ColumnGroup';
 import { getColumnsKey, validateValue } from './utils/valueUtil';
+import { getDOM } from 'rc-util/lib/Dom/findDOMNode';
 
 export const DEFAULT_PREFIX = 'rc-table';
 
@@ -456,7 +457,9 @@ function Table<RecordType extends DefaultRecordType>(
 
       const measureTarget = currentTarget || scrollHeaderRef.current;
       if (measureTarget) {
-        const { scrollWidth, clientWidth } = measureTarget;
+        const scrollWidth =
+          typeof mergedScrollX === 'number' ? mergedScrollX : measureTarget.scrollWidth;
+        const clientWidth = measureTarget.clientWidth;
         // There is no space to scroll
         if (scrollWidth === clientWidth) {
           setPingedLeft(false);
@@ -481,7 +484,9 @@ function Table<RecordType extends DefaultRecordType>(
 
   const triggerOnScroll = () => {
     if (horizonScroll && scrollBodyRef.current) {
-      onInternalScroll({ currentTarget: scrollBodyRef.current } as React.UIEvent<HTMLDivElement>);
+      onInternalScroll({
+        currentTarget: getDOM(scrollBodyRef.current),
+      } as React.UIEvent<HTMLDivElement>);
     } else {
       setPingedLeft(false);
       setPingedRight(false);

diff --git a/src/VirtualTable/BodyGrid.tsx b/src/VirtualTable/BodyGrid.tsx
@@ -14,7 +14,8 @@ export interface GridProps<RecordType = any> {
 
 export interface GridRef {
   scrollLeft: number;
-  scrollTo?: (scrollConfig: ScrollConfig) => void;
+  nativeElement: HTMLDivElement;
+  scrollTo: (scrollConfig: ScrollConfig) => void;
 }
 
 const Grid = React.forwardRef<GridRef, GridProps>((props, ref) => {
@@ -77,6 +78,7 @@ const Grid = React.forwardRef<GridRef, GridProps>((props, ref) => {
       scrollTo: (config: ScrollConfig) => {
         listRef.current?.scrollTo(config);
       },
+      nativeElement: listRef.current?.nativeElement,
     } as unknown as GridRef;
 
     Object.defineProperty(obj, 'scrollLeft', {
@@ -229,6 +231,7 @@ const Grid = React.forwardRef<GridRef, GridProps>((props, ref) => {
         scrollWidth={scrollX as number}
         onVirtualScroll={({ x }) => {
           onScroll({
+            currentTarget: listRef.current?.nativeElement,
             scrollLeft: x,
           });
         }}

diff --git a/src/VirtualTable/index.tsx b/src/VirtualTable/index.tsx
@@ -13,7 +13,7 @@ import getValue from 'rc-util/lib/utils/get';
 const renderBody: CustomizeScrollBody<any> = (rawData, props) => {
   const { ref, onScroll } = props;
 
-  return <Grid ref={ref} data={rawData as any} onScroll={onScroll} />;
+  return <Grid ref={ref as any} data={rawData as any} onScroll={onScroll} />;
 };
 
 export interface VirtualTableProps<RecordType> extends Omit<TableProps<RecordType>, 'scroll'> {

diff --git a/tests/Virtual.spec.tsx b/tests/Virtual.spec.tsx
@@ -45,6 +45,12 @@ describe('Table.Virtual', () => {
         },
         set: () => {},
       },
+      clientWidth: {
+        get: () => 80,
+      },
+      scrollWidth: {
+        get: () => 100,
+      },
     });
   });
 
@@ -453,4 +459,73 @@ describe('Table.Virtual', () => {
     fireEvent.scroll(container.querySelector('.rc-table-body'));
     expect(onScroll).toHaveBeenCalled();
   });
+
+  describe('shadow', () => {
+    beforeAll(() => {
+      spyElementPrototypes(HTMLElement, {
+        scrollLeft: {
+          get: () => 0,
+        },
+      });
+    });
+
+    it('right shadow should display correctly when mount', async () => {
+      const { container } = getTable({
+        columns: [
+          {
+            dataIndex: 'name',
+            width: 30,
+          },
+          {
+            dataIndex: 'age',
+            width: 30,
+          },
+          {
+            dataIndex: 'address',
+            width: 40,
+            fixed: 'right',
+          },
+        ],
+        getContainerWidth: () => 80,
+      });
+
+      resize(container.querySelector('.rc-table'));
+
+      await waitFakeTimer();
+
+      expect(
+        container.querySelector('.rc-table').classList.contains('rc-table-ping-right'),
+      ).toBeTruthy();
+    });
+
+    it('right shadow should display correctly when showHeader is false', async () => {
+      const { container } = getTable({
+        showHeader: false,
+        columns: [
+          {
+            dataIndex: 'name',
+            width: 30,
+          },
+          {
+            dataIndex: 'age',
+            width: 30,
+          },
+          {
+            dataIndex: 'address',
+            width: 40,
+            fixed: 'right',
+          },
+        ],
+        getContainerWidth: () => 80,
+      });
+
+      resize(container.querySelector('.rc-table'));
+
+      await waitFakeTimer();
+
+      expect(
+        container.querySelector('.rc-table').classList.contains('rc-table-ping-right'),
+      ).toBeTruthy();
+    });
+  });
 });
diff --git a/tests/__snapshots__/ExpandRow.spec.jsx.snap b/tests/__snapshots__/ExpandRow.spec.jsx.snap
@@ -625,7 +625,7 @@ LoadedCheerio {
 exports[`Table.Expand > renders fixed column correctly > work 1`] = `
 LoadedCheerio {
   "0": <div
-    class="rc-table rc-table-fixed-column rc-table-scroll-horizontal rc-table-has-fix-left rc-table-has-fix-right"
+    class="rc-table rc-table-ping-right rc-table-fixed-column rc-table-scroll-horizontal rc-table-has-fix-left rc-table-has-fix-right"
   >
     <div
       class="rc-table-container"

diff --git a/tests/__snapshots__/FixedColumn.spec.tsx.snap b/tests/__snapshots__/FixedColumn.spec.tsx.snap
@@ -823,7 +823,7 @@ LoadedCheerio {
 exports[`Table.FixedColumn > renders correctly > scrollX - with data 1`] = `
 LoadedCheerio {
   "0": <div
-    class="rc-table rc-table-fixed-column rc-table-scroll-horizontal rc-table-has-fix-left rc-table-has-fix-right"
+    class="rc-table rc-table-ping-right rc-table-fixed-column rc-table-scroll-horizontal rc-table-has-fix-left rc-table-has-fix-right"
   >
     <div
       class="rc-table-container"
@@ -1642,7 +1642,7 @@ LoadedCheerio {
 exports[`Table.FixedColumn > renders correctly > scrollX - without data 1`] = `
 LoadedCheerio {
   "0": <div
-    class="rc-table rc-table-fixed-column rc-table-scroll-horizontal rc-table-has-fix-left rc-table-has-fix-right"
+    class="rc-table rc-table-ping-right rc-table-fixed-column rc-table-scroll-horizontal rc-table-has-fix-left rc-table-has-fix-right"
   >
     <div
       class="rc-table-container"
@@ -1931,7 +1931,7 @@ LoadedCheerio {
 exports[`Table.FixedColumn > renders correctly > scrollXY - with data 1`] = `
 LoadedCheerio {
   "0": <div
-    class="rc-table rc-table-fixed-header rc-table-fixed-column rc-table-scroll-horizontal rc-table-has-fix-left rc-table-has-fix-right"
+    class="rc-table rc-table-ping-right rc-table-fixed-header rc-table-fixed-column rc-table-scroll-horizontal rc-table-has-fix-left rc-table-has-fix-right"
   >
     <div
       class="rc-table-container"
@@ -2804,7 +2804,7 @@ LoadedCheerio {
 exports[`Table.FixedColumn > renders correctly > scrollXY - without data 1`] = `
 LoadedCheerio {
   "0": <div
-    class="rc-table rc-table-fixed-header rc-table-fixed-column rc-table-scroll-horizontal rc-table-has-fix-left rc-table-has-fix-right"
+    class="rc-table rc-table-ping-right rc-table-fixed-header rc-table-fixed-column rc-table-scroll-horizontal rc-table-has-fix-left rc-table-has-fix-right"
   >
     <div
       class="rc-table-container"