Skip to content

Commit 61f783c

Browse files
zombieJzombieJ
authored
chore: add reverse css var (#1248)
* chore: add reverse zIndex * test: update test case
1 parent 2480d88 commit 61f783c

File tree

6 files changed

+127
-116
lines changed

6 files changed

+127
-116
lines changed

‎src/Cell/index.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ export interface CellProps<RecordType extends DefaultRecordType> {
4444
offsetFixedStartShadow?: number;
4545
offsetFixedEndShadow?: number;
4646
zIndex?: number;
47+
zIndexReverse?: number;
4748
allColsFixedLeft?: boolean;
4849

4950
// ====================== Private Props ======================
@@ -112,6 +113,7 @@ function Cell<RecordType>(props: CellProps<RecordType>) {
112113
offsetFixedStartShadow,
113114
offsetFixedEndShadow,
114115
zIndex,
116+
zIndexReverse,
115117

116118
// Private
117119
appendNode,
@@ -164,10 +166,12 @@ function Cell<RecordType>(props: CellProps<RecordType>) {
164166
if (isFixStart) {
165167
fixedStyle.insetInlineStart = fixStart as number;
166168
fixedStyle['--z-offset'] = zIndex;
169+
fixedStyle['--z-offset-reverse'] = zIndexReverse;
167170
}
168171
if (isFixEnd) {
169172
fixedStyle.insetInlineEnd = fixEnd as number;
170173
fixedStyle['--z-offset'] = zIndex;
174+
fixedStyle['--z-offset-reverse'] = zIndexReverse;
171175
}
172176

173177
// ================ RowSpan & ColSpan =================

‎src/utils/fixUtil.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,10 @@ export interface FixedInfo {
1717
/** Show the shadow when `scrollLeft` arrive for `fixed: end` */
1818
offsetFixedEndShadow?: number;
1919

20+
/** First sticky column `zIndex` will be larger than next */
2021
zIndex?: number;
22+
/** First sticky column `zIndex` will be smaller than next */
23+
zIndexReverse?: number;
2124
}
2225

2326
function isFixedStart(column: { fixed?: FixedType }) {
@@ -53,14 +56,17 @@ export function getCellFixedInfo(
5356
// first fixed start (start -> end) column `zIndex` should be greater than next column.
5457
// first fixed end (end -> start) column `zIndex` should be greater than next column.
5558
let zIndex = 0;
59+
let zIndexReverse = 0;
5660

5761
if (fixStart !== null) {
5862
fixedStartShadow = !columns[colEnd + 1] || !isFixedStart(columns[colEnd + 1]);
5963
zIndex = columns.length * 2 - colStart; // Fix start always overlay fix end
64+
zIndexReverse = colStart;
6065
}
6166
if (fixEnd !== null) {
6267
fixedEndShadow = !columns[colStart - 1] || !isFixedEnd(columns[colStart - 1]);
6368
zIndex = colEnd;
69+
zIndexReverse = columns.length * 2 - colEnd; // Fix end always overlay fix start
6470
}
6571

6672
// Check if scrollLeft will show the shadow
@@ -91,5 +97,6 @@ export function getCellFixedInfo(
9197
offsetFixedEndShadow,
9298
isSticky: stickyOffsets.isSticky,
9399
zIndex,
100+
zIndexReverse,
94101
};
95102
}

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

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -461,12 +461,12 @@ exports[`Table.Expand > renders fixed column correctly > work 1`] = `
461461
<tr>
462462
<th
463463
class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix rc-table-cell-fix-start"
464-
style="inset-inline-start: 0; --z-offset: 8;"
464+
style="inset-inline-start: 0; --z-offset: 8; --z-offset-reverse: 0;"
465465
/>
466466
<th
467467
class="rc-table-cell rc-table-cell-fix rc-table-cell-fix-start rc-table-cell-fix-start-shadow"
468468
scope="col"
469-
style="inset-inline-start: 0; --z-offset: 7;"
469+
style="inset-inline-start: 0; --z-offset: 7; --z-offset-reverse: 1;"
470470
>
471471
Name
472472
</th>
@@ -479,7 +479,7 @@ exports[`Table.Expand > renders fixed column correctly > work 1`] = `
479479
<th
480480
class="rc-table-cell rc-table-cell-fix rc-table-cell-fix-end rc-table-cell-fix-end-shadow"
481481
scope="col"
482-
style="inset-inline-end: 0; --z-offset: 3;"
482+
style="inset-inline-end: 0; --z-offset: 3; --z-offset-reverse: 5;"
483483
>
484484
Gender
485485
</th>
@@ -536,15 +536,15 @@ exports[`Table.Expand > renders fixed column correctly > work 1`] = `
536536
>
537537
<td
538538
class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix rc-table-cell-fix-start"
539-
style="inset-inline-start: 0; --z-offset: 8;"
539+
style="inset-inline-start: 0; --z-offset: 8; --z-offset-reverse: 0;"
540540
>
541541
<span
542542
class="rc-table-row-expand-icon rc-table-row-expanded"
543543
/>
544544
</td>
545545
<td
546546
class="rc-table-cell rc-table-cell-fix rc-table-cell-fix-start rc-table-cell-fix-start-shadow"
547-
style="inset-inline-start: 0; --z-offset: 7;"
547+
style="inset-inline-start: 0; --z-offset: 7; --z-offset-reverse: 1;"
548548
>
549549
Lucy
550550
</td>
@@ -555,7 +555,7 @@ exports[`Table.Expand > renders fixed column correctly > work 1`] = `
555555
</td>
556556
<td
557557
class="rc-table-cell rc-table-cell-fix rc-table-cell-fix-end rc-table-cell-fix-end-shadow"
558-
style="inset-inline-end: 0; --z-offset: 3;"
558+
style="inset-inline-end: 0; --z-offset: 3; --z-offset-reverse: 5;"
559559
>
560560
F
561561
</td>
@@ -583,15 +583,15 @@ exports[`Table.Expand > renders fixed column correctly > work 1`] = `
583583
>
584584
<td
585585
class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix rc-table-cell-fix-start"
586-
style="inset-inline-start: 0; --z-offset: 8;"
586+
style="inset-inline-start: 0; --z-offset: 8; --z-offset-reverse: 0;"
587587
>
588588
<span
589589
class="rc-table-row-expand-icon rc-table-row-expanded"
590590
/>
591591
</td>
592592
<td
593593
class="rc-table-cell rc-table-cell-fix rc-table-cell-fix-start rc-table-cell-fix-start-shadow"
594-
style="inset-inline-start: 0; --z-offset: 7;"
594+
style="inset-inline-start: 0; --z-offset: 7; --z-offset-reverse: 1;"
595595
>
596596
Jack
597597
</td>
@@ -602,7 +602,7 @@ exports[`Table.Expand > renders fixed column correctly > work 1`] = `
602602
</td>
603603
<td
604604
class="rc-table-cell rc-table-cell-fix rc-table-cell-fix-end rc-table-cell-fix-end-shadow"
605-
style="inset-inline-end: 0; --z-offset: 3;"
605+
style="inset-inline-end: 0; --z-offset: 3; --z-offset-reverse: 5;"
606606
>
607607
M
608608
</td>
@@ -1072,7 +1072,7 @@ exports[`Table.Expand > work in expandable fix 2`] = `
10721072
</th>
10731073
<th
10741074
class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix rc-table-cell-fix-start rc-table-cell-fix-start-shadow"
1075-
style="inset-inline-start: 0; --z-offset: 5;"
1075+
style="inset-inline-start: 0; --z-offset: 5; --z-offset-reverse: 3;"
10761076
/>
10771077
</tr>
10781078
</thead>
@@ -1142,7 +1142,7 @@ exports[`Table.Expand > work in expandable fix 2`] = `
11421142
</td>
11431143
<td
11441144
class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix rc-table-cell-fix-start rc-table-cell-fix-start-shadow"
1145-
style="inset-inline-start: 0; --z-offset: 5;"
1145+
style="inset-inline-start: 0; --z-offset: 5; --z-offset-reverse: 3;"
11461146
>
11471147
<span
11481148
class="rc-table-row-expand-icon rc-table-row-collapsed"
@@ -1170,7 +1170,7 @@ exports[`Table.Expand > work in expandable fix 2`] = `
11701170
</td>
11711171
<td
11721172
class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix rc-table-cell-fix-start rc-table-cell-fix-start-shadow"
1173-
style="inset-inline-start: 0; --z-offset: 5;"
1173+
style="inset-inline-start: 0; --z-offset: 5; --z-offset-reverse: 3;"
11741174
>
11751175
<span
11761176
class="rc-table-row-expand-icon rc-table-row-collapsed"

0 commit comments

Comments
 (0)