Skip to content

Commit 2467b53

Browse files
zombieJzombieJ
authored
refactor(continue): fixed shadow using logical position (#1244)
* feat: position fixed also use logical position * test: fix part * test: test case * chore: fix lint
1 parent 9fce9b7 commit 2467b53

File tree

8 files changed

+55
-78
lines changed

8 files changed

+55
-78
lines changed

‎assets/index.less‎

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -112,18 +112,24 @@
112112
}
113113
}
114114

115-
&-ping-left {
116-
.@{tablePrefixCls}-cell-fix-left-first::after,
117-
.@{tablePrefixCls}-cell-fix-left-last::after {
118-
box-shadow: inset 10px 0 8px -8px green;
119-
}
115+
&-fix-start-shadow::before,
116+
&-fix-end-shadow::after {
117+
content: '';
118+
position: absolute;
119+
z-index: 1;
120+
top: 0;
121+
bottom: 0;
122+
width: 5px;
120123
}
121124

122-
&-ping-right {
123-
.@{tablePrefixCls}-cell-fix-right-first::after,
124-
.@{tablePrefixCls}-cell-fix-right-last::after {
125-
box-shadow: inset -10px 0 8px -8px green;
126-
}
125+
&-fix-start-shadow-show::before {
126+
inset-inline-start: 0;
127+
background: rgba(0, 0, 0, 0.5);
128+
}
129+
130+
&-fix-end-shadow-show::after {
131+
inset-inline-end: 0;
132+
background: rgba(0, 0, 0, 0.5);
127133
}
128134

129135
// ================= Expand =================

‎src/Cell/index.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -141,9 +141,7 @@ function Cell<RecordType>(props: CellProps<RecordType>) {
141141
return [false, false];
142142
}
143143

144-
const [scroll, scrollWidth] = scrollInfo;
145-
146-
const absScroll = Math.abs(scroll);
144+
const [absScroll, scrollWidth] = scrollInfo;
147145

148146
const showStartShadow = isFixStart && fixedStartShadow && absScroll > fixStart;
149147
const showEndShadow = isFixEnd && fixedEndShadow && scrollWidth - absScroll > fixEnd;

‎src/Table.tsx‎

Lines changed: 14 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -347,8 +347,8 @@ function Table<RecordType extends DefaultRecordType>(
347347

348348
// ====================== Scroll ======================
349349
const scrollSummaryRef = React.useRef<HTMLDivElement>();
350-
const [pingedLeft, setPingedLeft] = React.useState(false);
351-
const [pingedRight, setPingedRight] = React.useState(false);
350+
const [shadowStart, setShadowStart] = React.useState(false);
351+
const [shadowEnd, setShadowEnd] = React.useState(false);
352352
const [colsWidths, updateColsWidths] = useLayoutState(new Map<React.Key, number>());
353353

354354
// Convert map to number width
@@ -440,7 +440,6 @@ function Table<RecordType extends DefaultRecordType>(
440440

441441
const onInternalScroll = useEvent(
442442
({ currentTarget, scrollLeft }: { currentTarget: HTMLElement; scrollLeft?: number }) => {
443-
const isRTL = direction === 'rtl';
444443
const mergedScrollLeft =
445444
typeof scrollLeft === 'number' ? scrollLeft : currentTarget.scrollLeft;
446445

@@ -463,24 +462,20 @@ function Table<RecordType extends DefaultRecordType>(
463462
: measureTarget.scrollWidth;
464463
const clientWidth = measureTarget.clientWidth;
465464

465+
const absScrollStart = Math.abs(mergedScrollLeft);
466466
setScrollInfo(ori => {
467-
const nextScrollInfo: ScrollInfoType = [mergedScrollLeft, scrollWidth - clientWidth];
467+
const nextScrollInfo: ScrollInfoType = [absScrollStart, scrollWidth - clientWidth];
468468
return isEqual(ori, nextScrollInfo) ? ori : nextScrollInfo;
469469
});
470470

471471
// There is no space to scroll
472472
if (scrollWidth === clientWidth) {
473-
setPingedLeft(false);
474-
setPingedRight(false);
473+
setShadowStart(false);
474+
setShadowEnd(false);
475475
return;
476476
}
477-
if (isRTL) {
478-
setPingedLeft(-mergedScrollLeft < scrollWidth - clientWidth);
479-
setPingedRight(-mergedScrollLeft > 0);
480-
} else {
481-
setPingedLeft(mergedScrollLeft > 0);
482-
setPingedRight(mergedScrollLeft < scrollWidth - clientWidth);
483-
}
477+
setShadowStart(absScrollStart > 0);
478+
setShadowEnd(absScrollStart < scrollWidth - clientWidth);
484479
}
485480
},
486481
);
@@ -497,8 +492,8 @@ function Table<RecordType extends DefaultRecordType>(
497492
scrollLeft: scrollBodyRef.current?.scrollLeft,
498493
});
499494
} else {
500-
setPingedLeft(false);
501-
setPingedRight(false);
495+
setShadowStart(false);
496+
setShadowEnd(false);
502497
}
503498
};
504499

@@ -771,8 +766,10 @@ function Table<RecordType extends DefaultRecordType>(
771766
<div
772767
className={classNames(prefixCls, className, {
773768
[`${prefixCls}-rtl`]: direction === 'rtl',
774-
[`${prefixCls}-ping-left`]: pingedLeft,
775-
[`${prefixCls}-ping-right`]: pingedRight,
769+
[`${prefixCls}-fix-start-shadow`]: horizonScroll,
770+
[`${prefixCls}-fix-end-shadow`]: horizonScroll,
771+
[`${prefixCls}-fix-start-shadow-show`]: horizonScroll && shadowStart,
772+
[`${prefixCls}-fix-end-shadow-show`]: horizonScroll && shadowEnd,
776773
[`${prefixCls}-layout-fixed`]: tableLayout === 'fixed',
777774
[`${prefixCls}-fixed-header`]: fixHeader,
778775
/** No used but for compatible */

‎tests/FixedColumn.spec.tsx‎

Lines changed: 10 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -140,12 +140,8 @@ describe('Table.FixedColumn', () => {
140140
fireEvent.scroll(tableContent);
141141
}
142142
});
143-
expect(
144-
container.querySelector('.rc-table')?.classList.contains('rc-table-ping-left'),
145-
).toBeTruthy();
146-
expect(
147-
container.querySelector('.rc-table')?.classList.contains('rc-table-ping-right'),
148-
).toBeTruthy();
143+
expect(container.querySelector('.rc-table')).toHaveClass('rc-table-fix-start-shadow-show');
144+
expect(container.querySelector('.rc-table')).toHaveClass('rc-table-fix-end-shadow-show');
149145

150146
act(() => {
151147
if (tableContent) {
@@ -155,12 +151,8 @@ describe('Table.FixedColumn', () => {
155151
fireEvent.scroll(tableContent);
156152
}
157153
});
158-
expect(
159-
container.querySelector('.rc-table')?.classList.contains('rc-table-ping-left'),
160-
).toBeFalsy();
161-
expect(
162-
container.querySelector('.rc-table')?.classList.contains('rc-table-ping-right'),
163-
).toBeTruthy();
154+
expect(container.querySelector('.rc-table')).not.toHaveClass('rc-table-fix-start-shadow-show');
155+
expect(container.querySelector('.rc-table')).toHaveClass('rc-table-fix-end-shadow-show');
164156

165157
act(() => {
166158
if (tableContent) {
@@ -170,12 +162,8 @@ describe('Table.FixedColumn', () => {
170162
fireEvent.scroll(tableContent);
171163
}
172164
});
173-
expect(
174-
container.querySelector('.rc-table')?.classList.contains('rc-table-ping-left'),
175-
).toBeTruthy();
176-
expect(
177-
container.querySelector('.rc-table')?.classList.contains('rc-table-ping-right'),
178-
).toBeFalsy();
165+
expect(container.querySelector('.rc-table')).toHaveClass('rc-table-fix-start-shadow-show');
166+
expect(container.querySelector('.rc-table')).not.toHaveClass('rc-table-fix-end-shadow-show');
179167

180168
act(() => {
181169
if (tableContent) {
@@ -185,12 +173,8 @@ describe('Table.FixedColumn', () => {
185173
fireEvent.scroll(tableContent);
186174
}
187175
});
188-
expect(
189-
container.querySelector('.rc-table')?.classList.contains('rc-table-ping-left'),
190-
).toBeFalsy();
191-
expect(
192-
container.querySelector('.rc-table')?.classList.contains('rc-table-ping-right'),
193-
).toBeFalsy();
176+
expect(container.querySelector('.rc-table')).not.toHaveClass('rc-table-fix-start-shadow-show');
177+
expect(container.querySelector('.rc-table')).not.toHaveClass('rc-table-fix-end-shadow-show');
194178
});
195179

196180
it('ellipsis will wrap additional dom', () => {
@@ -349,11 +333,7 @@ describe('Table.FixedColumn', () => {
349333
fireEvent.scroll(tableContent);
350334
}
351335
});
352-
expect(
353-
container.querySelector('.rc-table')?.classList.contains('rc-table-ping-left'),
354-
).toBeTruthy();
355-
expect(
356-
container.querySelector('.rc-table')?.classList.contains('rc-table-ping-right'),
357-
).toBeTruthy();
336+
expect(container.querySelector('.rc-table')).toHaveClass('rc-table-fix-start-shadow-show');
337+
expect(container.querySelector('.rc-table')).toHaveClass('rc-table-fix-end-shadow-show');
358338
});
359339
});

‎tests/Virtual.spec.tsx‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -528,9 +528,7 @@ describe('Table.Virtual', () => {
528528

529529
await waitFakeTimer();
530530

531-
expect(
532-
container.querySelector('.rc-table').classList.contains('rc-table-ping-right'),
533-
).toBeTruthy();
531+
expect(container.querySelector('.rc-table')).toHaveClass('rc-table-fix-end-shadow-show');
534532
});
535533

536534
it('right shadow should display correctly when showHeader is false', async () => {
@@ -558,9 +556,7 @@ describe('Table.Virtual', () => {
558556

559557
await waitFakeTimer();
560558

561-
expect(
562-
container.querySelector('.rc-table').classList.contains('rc-table-ping-right'),
563-
).toBeTruthy();
559+
expect(container.querySelector('.rc-table')).toHaveClass('rc-table-fix-end-shadow-show');
564560
});
565561
});
566562
});

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@ exports[`Table.Expand > childrenColumnName 1`] = `
107107

108108
exports[`Table.Expand > does not crash if scroll is not set 1`] = `
109109
<div
110-
class="rc-table rc-table-scroll-horizontal"
110+
class="rc-table rc-table-fix-start-shadow rc-table-fix-end-shadow rc-table-scroll-horizontal"
111111
>
112112
<div
113113
class="rc-table-container"
@@ -229,7 +229,7 @@ exports[`Table.Expand > does not crash if scroll is not set 1`] = `
229229

230230
exports[`Table.Expand > does not crash if scroll is not set 2`] = `
231231
<div
232-
class="rc-table rc-table-scroll-horizontal"
232+
class="rc-table rc-table-fix-start-shadow rc-table-fix-end-shadow rc-table-scroll-horizontal"
233233
>
234234
<div
235235
class="rc-table-container"
@@ -438,7 +438,7 @@ exports[`Table.Expand > not use nest when children is invalidate 1`] = `
438438

439439
exports[`Table.Expand > renders fixed column correctly > work 1`] = `
440440
<div
441-
class="rc-table rc-table-fixed-column rc-table-scroll-horizontal rc-table-has-fix-left rc-table-has-fix-right"
441+
class="rc-table rc-table-fix-start-shadow rc-table-fix-end-shadow rc-table-fixed-column rc-table-scroll-horizontal rc-table-has-fix-left rc-table-has-fix-right"
442442
>
443443
<div
444444
class="rc-table-container"
@@ -906,7 +906,7 @@ exports[`Table.Expand > renders tree row correctly with different children 1`] =
906906

907907
exports[`Table.Expand > work in expandable fix 1`] = `
908908
<div
909-
class="rc-table rc-table-scroll-horizontal"
909+
class="rc-table rc-table-fix-start-shadow rc-table-fix-end-shadow rc-table-scroll-horizontal"
910910
>
911911
<div
912912
class="rc-table-container"
@@ -1028,7 +1028,7 @@ exports[`Table.Expand > work in expandable fix 1`] = `
10281028

10291029
exports[`Table.Expand > work in expandable fix 2`] = `
10301030
<div
1031-
class="rc-table rc-table-fixed-column rc-table-scroll-horizontal"
1031+
class="rc-table rc-table-fix-start-shadow rc-table-fix-end-shadow rc-table-fixed-column rc-table-scroll-horizontal"
10321032
>
10331033
<div
10341034
class="rc-table-container"

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
exports[`Table.FixedColumn > fixed column renders correctly RTL 1`] = `
44
<div
5-
class="rc-table rc-table-rtl rc-table-fixed-column rc-table-scroll-horizontal rc-table-has-fix-left"
5+
class="rc-table rc-table-rtl rc-table-fix-start-shadow rc-table-fix-end-shadow rc-table-fixed-column rc-table-scroll-horizontal rc-table-has-fix-left"
66
>
77
<div
88
class="rc-table-container"
@@ -753,7 +753,7 @@ exports[`Table.FixedColumn > renders correctly > all column has width should use
753753
754754
exports[`Table.FixedColumn > renders correctly > scrollX - with data 1`] = `
755755
<div
756-
class="rc-table rc-table-fixed-column rc-table-scroll-horizontal rc-table-has-fix-left rc-table-has-fix-right"
756+
class="rc-table rc-table-fix-start-shadow rc-table-fix-end-shadow rc-table-fixed-column rc-table-scroll-horizontal rc-table-has-fix-left rc-table-has-fix-right"
757757
>
758758
<div
759759
class="rc-table-container"
@@ -1542,7 +1542,7 @@ exports[`Table.FixedColumn > renders correctly > scrollX - with data 1`] = `
15421542
15431543
exports[`Table.FixedColumn > renders correctly > scrollX - without data 1`] = `
15441544
<div
1545-
class="rc-table rc-table-fixed-column rc-table-scroll-horizontal rc-table-has-fix-left rc-table-has-fix-right"
1545+
class="rc-table rc-table-fix-start-shadow rc-table-fix-end-shadow rc-table-fixed-column rc-table-scroll-horizontal rc-table-has-fix-left rc-table-has-fix-right"
15461546
>
15471547
<div
15481548
class="rc-table-container"
@@ -1801,7 +1801,7 @@ exports[`Table.FixedColumn > renders correctly > scrollX - without data 1`] = `
18011801
18021802
exports[`Table.FixedColumn > renders correctly > scrollXY - with data 1`] = `
18031803
<div
1804-
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"
1804+
class="rc-table rc-table-fix-start-shadow rc-table-fix-end-shadow rc-table-fixed-header rc-table-fixed-column rc-table-scroll-horizontal rc-table-has-fix-left rc-table-has-fix-right"
18051805
>
18061806
<div
18071807
class="rc-table-container"
@@ -2644,7 +2644,7 @@ exports[`Table.FixedColumn > renders correctly > scrollXY - with data 1`] = `
26442644
26452645
exports[`Table.FixedColumn > renders correctly > scrollXY - without data 1`] = `
26462646
<div
2647-
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"
2647+
class="rc-table rc-table-fix-start-shadow rc-table-fix-end-shadow rc-table-fixed-header rc-table-fixed-column rc-table-scroll-horizontal rc-table-has-fix-left rc-table-has-fix-right"
26482648
>
26492649
<div
26502650
class="rc-table-container"

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ exports[`Table.Basic > custom components > renders correctly 1`] = `
7676

7777
exports[`Table.Basic > custom components > renders fixed column and header correctly 1`] = `
7878
<div
79-
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"
79+
class="rc-table rc-table-fix-start-shadow rc-table-fix-end-shadow rc-table-fixed-header rc-table-fixed-column rc-table-scroll-horizontal rc-table-has-fix-left rc-table-has-fix-right"
8080
>
8181
<div
8282
class="rc-table-container"
@@ -209,7 +209,7 @@ exports[`Table.Basic > custom components > renders fixed column and header corre
209209

210210
exports[`Table.Basic > custom components > scroll content > with scroll 1`] = `
211211
<div
212-
class="rc-table rc-table-fixed-header rc-table-scroll-horizontal"
212+
class="rc-table rc-table-fix-start-shadow rc-table-fix-end-shadow rc-table-fixed-header rc-table-scroll-horizontal"
213213
>
214214
<div
215215
class="rc-table-container"

0 commit comments

Comments
 (0)