fix: Fix the shadow issue when scrollX is smaller than the sum of col… (

#1199) * fix: Fix the shadow issue when scrollX is smaller than the sum of columns * chore: update snapshot * chore: update snapshot * chore: adjust comment
react-component · Oct 9, 2024 · bfa65ba · bfa65ba
1 parent 7755ae0
commit bfa65ba
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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"