From 0fe547bf55b77a84a053aa461ba4b7f8efbfc8a7 Mon Sep 17 00:00:00 2001 From: daisy <904492381@qq.com> Date: Mon, 27 May 2024 17:10:00 +0800 Subject: [PATCH] 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 --- package.json | 2 +- src/Table.tsx | 9 ++- src/VirtualTable/BodyGrid.tsx | 5 +- src/VirtualTable/index.tsx | 2 +- tests/Virtual.spec.tsx | 75 +++++++++++++++++++ tests/__snapshots__/ExpandRow.spec.jsx.snap | 2 +- tests/__snapshots__/FixedColumn.spec.tsx.snap | 8 +- 7 files changed, 93 insertions(+), 10 deletions(-) diff --git a/package.json b/package.json index 8cbb173ec..a778e9258 100644 --- 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 index 121a8ff75..e2c24516e 100644 --- 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( 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( const triggerOnScroll = () => { if (horizonScroll && scrollBodyRef.current) { - onInternalScroll({ currentTarget: scrollBodyRef.current } as React.UIEvent); + onInternalScroll({ + currentTarget: getDOM(scrollBodyRef.current), + } as React.UIEvent); } else { setPingedLeft(false); setPingedRight(false); diff --git a/src/VirtualTable/BodyGrid.tsx b/src/VirtualTable/BodyGrid.tsx index a514857b8..8c57c5dcc 100644 --- a/src/VirtualTable/BodyGrid.tsx +++ b/src/VirtualTable/BodyGrid.tsx @@ -14,7 +14,8 @@ export interface GridProps { export interface GridRef { scrollLeft: number; - scrollTo?: (scrollConfig: ScrollConfig) => void; + nativeElement: HTMLDivElement; + scrollTo: (scrollConfig: ScrollConfig) => void; } const Grid = React.forwardRef((props, ref) => { @@ -77,6 +78,7 @@ const Grid = React.forwardRef((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((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 index b01f3f605..61c9dc49f 100644 --- 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 = (rawData, props) => { const { ref, onScroll } = props; - return ; + return ; }; export interface VirtualTableProps extends Omit, 'scroll'> { diff --git a/tests/Virtual.spec.tsx b/tests/Virtual.spec.tsx index 7255f8e77..2dce7c60a 100644 --- 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 index 08b694eff..72dfbbe21 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":
renders correctly > scrollX - with data 1`] = ` LoadedCheerio { "0":
renders correctly > scrollX - without data 1`] = ` LoadedCheerio { "0":
renders correctly > scrollXY - with data 1`] = ` LoadedCheerio { "0":
renders correctly > scrollXY - without data 1`] = ` LoadedCheerio { "0":