From bfa65ba68d9f34ba80c3800be14f83e92754e768 Mon Sep 17 00:00:00 2001
From: daisy <904492381@qq.com>
Date: Wed, 9 Oct 2024 17:27:09 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20Fix=20the=20shadow=20issue=20when=20scro?=
 =?UTF-8?q?llX=20is=20smaller=20than=20the=20sum=20of=20col=E2=80=A6=20(#1?=
 =?UTF-8?q?199)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: Fix the shadow issue when scrollX is smaller than the sum of columns

* chore: update snapshot

* chore: update snapshot

* chore: adjust comment
---
 src/Table.tsx                                 |  5 ++-
 tests/FixedColumn.spec.tsx                    | 34 +++++++++++++++++++
 tests/__snapshots__/ExpandRow.spec.jsx.snap   |  2 +-
 tests/__snapshots__/FixedColumn.spec.tsx.snap |  8 ++---
 4 files changed, 43 insertions(+), 6 deletions(-)

diff --git a/src/Table.tsx b/src/Table.tsx
index 31edce798..a1db3de5b 100644
--- a/src/Table.tsx
+++ b/src/Table.tsx
@@ -455,7 +455,10 @@ function Table<RecordType extends DefaultRecordType>(
       const measureTarget = currentTarget || scrollHeaderRef.current;
       if (measureTarget) {
         const scrollWidth =
-          typeof mergedScrollX === 'number' ? mergedScrollX : measureTarget.scrollWidth;
+          // Should use mergedScrollX in virtual table(useInternalHooks && tailor === true)
+          useInternalHooks && tailor && typeof mergedScrollX === 'number'
+            ? mergedScrollX
+            : measureTarget.scrollWidth;
         const clientWidth = measureTarget.clientWidth;
         // There is no space to scroll
         if (scrollWidth === clientWidth) {
diff --git a/tests/FixedColumn.spec.tsx b/tests/FixedColumn.spec.tsx
index 9e1c95abf..50a21baf9 100644
--- a/tests/FixedColumn.spec.tsx
+++ b/tests/FixedColumn.spec.tsx
@@ -341,4 +341,38 @@ describe('Table.FixedColumn', () => {
     expect(container.querySelectorAll('.rc-table-cell-fix-right-first').length).toBe(101);
     expect(container).toMatchSnapshot();
   });
+
+  it('right shadow should be shown when scrollX is less than the sum of the widths of all columns', async () => {
+    const wrapper = mount(
+      <Table
+        columns={[
+          { title: 'a', width: 200, fixed: 'left' },
+          { title: 'b', width: 200 },
+          { title: 'c', width: 200 },
+          { title: 'd', width: 200, fixed: 'right' },
+        ]}
+        data={data}
+        scroll={{ x: 100 }}
+        style={{ width: 400 }}
+      />,
+    );
+
+    await safeAct(wrapper);
+    // Use `onScroll` directly since simulate not support `currentTarget`
+    act(() => {
+      wrapper
+        .find('.rc-table-content')
+        .props()
+        .onScroll({
+          currentTarget: {
+            scrollLeft: 10,
+            scrollWidth: 800,
+            clientWidth: 400,
+          },
+        } as any);
+    });
+    wrapper.update();
+    expect(wrapper.find('.rc-table').hasClass('rc-table-ping-left')).toBeTruthy();
+    expect(wrapper.find('.rc-table').hasClass('rc-table-ping-right')).toBeTruthy();
+  });
 });
diff --git a/tests/__snapshots__/ExpandRow.spec.jsx.snap b/tests/__snapshots__/ExpandRow.spec.jsx.snap
index 72dfbbe21..08b694eff 100644
--- 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-ping-right rc-table-fixed-column rc-table-scroll-horizontal rc-table-has-fix-left rc-table-has-fix-right"
+    class="rc-table 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
index d108ba0f9..f3091dfd0 100644
--- 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-ping-right rc-table-fixed-column rc-table-scroll-horizontal rc-table-has-fix-left rc-table-has-fix-right"
+    class="rc-table 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-ping-right rc-table-fixed-column rc-table-scroll-horizontal rc-table-has-fix-left rc-table-has-fix-right"
+    class="rc-table 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-ping-right 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-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-ping-right 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-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"