Skip to content

Commit 0fe547b

Browse files
linxianxilinxianxi
authored
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
1 parent b08600c commit 0fe547b

File tree

7 files changed

+93
-10
lines changed

7 files changed

+93
-10
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@
5757
"@rc-component/context": "^1.4.0",
5858
"classnames": "^2.2.5",
5959
"rc-resize-observer": "^1.1.0",
60-
"rc-util": "^5.37.0",
60+
"rc-util": "^5.41.0",
6161
"rc-virtual-list": "^3.14.2"
6262
},
6363
"devDependencies": {

‎src/Table.tsx

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,7 @@ import StickyScrollBar from './stickyScrollBar';
7575
import Column from './sugar/Column';
7676
import ColumnGroup from './sugar/ColumnGroup';
7777
import { getColumnsKey, validateValue } from './utils/valueUtil';
78+
import { getDOM } from 'rc-util/lib/Dom/findDOMNode';
7879

7980
export const DEFAULT_PREFIX = 'rc-table';
8081

@@ -456,7 +457,9 @@ function Table<RecordType extends DefaultRecordType>(
456457

457458
const measureTarget = currentTarget || scrollHeaderRef.current;
458459
if (measureTarget) {
459-
const { scrollWidth, clientWidth } = measureTarget;
460+
const scrollWidth =
461+
typeof mergedScrollX === 'number' ? mergedScrollX : measureTarget.scrollWidth;
462+
const clientWidth = measureTarget.clientWidth;
460463
// There is no space to scroll
461464
if (scrollWidth === clientWidth) {
462465
setPingedLeft(false);
@@ -481,7 +484,9 @@ function Table<RecordType extends DefaultRecordType>(
481484

482485
const triggerOnScroll = () => {
483486
if (horizonScroll && scrollBodyRef.current) {
484-
onInternalScroll({ currentTarget: scrollBodyRef.current } as React.UIEvent<HTMLDivElement>);
487+
onInternalScroll({
488+
currentTarget: getDOM(scrollBodyRef.current),
489+
} as React.UIEvent<HTMLDivElement>);
485490
} else {
486491
setPingedLeft(false);
487492
setPingedRight(false);

‎src/VirtualTable/BodyGrid.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,8 @@ export interface GridProps<RecordType = any> {
1414

1515
export interface GridRef {
1616
scrollLeft: number;
17-
scrollTo?: (scrollConfig: ScrollConfig) => void;
17+
nativeElement: HTMLDivElement;
18+
scrollTo: (scrollConfig: ScrollConfig) => void;
1819
}
1920

2021
const Grid = React.forwardRef<GridRef, GridProps>((props, ref) => {
@@ -77,6 +78,7 @@ const Grid = React.forwardRef<GridRef, GridProps>((props, ref) => {
7778
scrollTo: (config: ScrollConfig) => {
7879
listRef.current?.scrollTo(config);
7980
},
81+
nativeElement: listRef.current?.nativeElement,
8082
} as unknown as GridRef;
8183

8284
Object.defineProperty(obj, 'scrollLeft', {
@@ -229,6 +231,7 @@ const Grid = React.forwardRef<GridRef, GridProps>((props, ref) => {
229231
scrollWidth={scrollX as number}
230232
onVirtualScroll={({ x }) => {
231233
onScroll({
234+
currentTarget: listRef.current?.nativeElement,
232235
scrollLeft: x,
233236
});
234237
}}

‎src/VirtualTable/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import getValue from 'rc-util/lib/utils/get';
1313
const renderBody: CustomizeScrollBody<any> = (rawData, props) => {
1414
const { ref, onScroll } = props;
1515

16-
return <Grid ref={ref} data={rawData as any} onScroll={onScroll} />;
16+
return <Grid ref={ref as any} data={rawData as any} onScroll={onScroll} />;
1717
};
1818

1919
export interface VirtualTableProps<RecordType> extends Omit<TableProps<RecordType>, 'scroll'> {

‎tests/Virtual.spec.tsx

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,12 @@ describe('Table.Virtual', () => {
4545
},
4646
set: () => {},
4747
},
48+
clientWidth: {
49+
get: () => 80,
50+
},
51+
scrollWidth: {
52+
get: () => 100,
53+
},
4854
});
4955
});
5056

@@ -453,4 +459,73 @@ describe('Table.Virtual', () => {
453459
fireEvent.scroll(container.querySelector('.rc-table-body'));
454460
expect(onScroll).toHaveBeenCalled();
455461
});
462+
463+
describe('shadow', () => {
464+
beforeAll(() => {
465+
spyElementPrototypes(HTMLElement, {
466+
scrollLeft: {
467+
get: () => 0,
468+
},
469+
});
470+
});
471+
472+
it('right shadow should display correctly when mount', async () => {
473+
const { container } = getTable({
474+
columns: [
475+
{
476+
dataIndex: 'name',
477+
width: 30,
478+
},
479+
{
480+
dataIndex: 'age',
481+
width: 30,
482+
},
483+
{
484+
dataIndex: 'address',
485+
width: 40,
486+
fixed: 'right',
487+
},
488+
],
489+
getContainerWidth: () => 80,
490+
});
491+
492+
resize(container.querySelector('.rc-table'));
493+
494+
await waitFakeTimer();
495+
496+
expect(
497+
container.querySelector('.rc-table').classList.contains('rc-table-ping-right'),
498+
).toBeTruthy();
499+
});
500+
501+
it('right shadow should display correctly when showHeader is false', async () => {
502+
const { container } = getTable({
503+
showHeader: false,
504+
columns: [
505+
{
506+
dataIndex: 'name',
507+
width: 30,
508+
},
509+
{
510+
dataIndex: 'age',
511+
width: 30,
512+
},
513+
{
514+
dataIndex: 'address',
515+
width: 40,
516+
fixed: 'right',
517+
},
518+
],
519+
getContainerWidth: () => 80,
520+
});
521+
522+
resize(container.querySelector('.rc-table'));
523+
524+
await waitFakeTimer();
525+
526+
expect(
527+
container.querySelector('.rc-table').classList.contains('rc-table-ping-right'),
528+
).toBeTruthy();
529+
});
530+
});
456531
});

‎tests/__snapshots__/ExpandRow.spec.jsx.snap

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -625,7 +625,7 @@ LoadedCheerio {
625625
exports[`Table.Expand > renders fixed column correctly > work 1`] = `
626626
LoadedCheerio {
627627
"0": <div
628-
class="rc-table rc-table-fixed-column rc-table-scroll-horizontal rc-table-has-fix-left rc-table-has-fix-right"
628+
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"
629629
>
630630
<div
631631
class="rc-table-container"

‎tests/__snapshots__/FixedColumn.spec.tsx.snap

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -823,7 +823,7 @@ LoadedCheerio {
823823
exports[`Table.FixedColumn > renders correctly > scrollX - with data 1`] = `
824824
LoadedCheerio {
825825
"0": <div
826-
class="rc-table rc-table-fixed-column rc-table-scroll-horizontal rc-table-has-fix-left rc-table-has-fix-right"
826+
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"
827827
>
828828
<div
829829
class="rc-table-container"
@@ -1642,7 +1642,7 @@ LoadedCheerio {
16421642
exports[`Table.FixedColumn > renders correctly > scrollX - without data 1`] = `
16431643
LoadedCheerio {
16441644
"0": <div
1645-
class="rc-table rc-table-fixed-column rc-table-scroll-horizontal rc-table-has-fix-left rc-table-has-fix-right"
1645+
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"
16461646
>
16471647
<div
16481648
class="rc-table-container"
@@ -1931,7 +1931,7 @@ LoadedCheerio {
19311931
exports[`Table.FixedColumn > renders correctly > scrollXY - with data 1`] = `
19321932
LoadedCheerio {
19331933
"0": <div
1934-
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"
1934+
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"
19351935
>
19361936
<div
19371937
class="rc-table-container"
@@ -2804,7 +2804,7 @@ LoadedCheerio {
28042804
exports[`Table.FixedColumn > renders correctly > scrollXY - without data 1`] = `
28052805
LoadedCheerio {
28062806
"0": <div
2807-
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"
2807+
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"
28082808
>
28092809
<div
28102810
class="rc-table-container"

0 commit comments

Comments
 (0)