Skip to content

Commit 26ec013

Browse files
amanmahajan7nstepien
amanmahajan7
and
nstepien
authored
Use :nth-child/:nth-last-child selector to set frozen and summary row styles (#3433)
* Use `has` selector to set some styles * Fix selector * Fix group row selector * Use nth-child selector to set summary row styles * Update src/GroupRow.tsx Co-authored-by: Nicolas Stepien <[email protected]> * Update src/style/core.ts Co-authored-by: Nicolas Stepien <[email protected]> * Update src/style/core.ts Co-authored-by: Nicolas Stepien <[email protected]> * Reuse classname * Remove classname test for summary row * Fix box shadow if the frozen cell is the last cell * Specific styles, add variable for shadow * move `--rdg-selection-color` * Similpify last frozen column styles * Remove unused import * address comments --------- Co-authored-by: Nicolas Stepien <[email protected]>
1 parent 7e216e0 commit 26ec013

File tree

12 files changed

+40
-67
lines changed

12 files changed

+40
-67
lines changed

‎src/DataGrid.tsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1132,7 +1132,6 @@ function DataGrid<R, SR, K extends Key>(
11321132
lastFrozenColumnIndex={lastFrozenColumnIndex}
11331133
selectedCellIdx={isSummaryRowSelected ? selectedPosition.idx : undefined}
11341134
isTop
1135-
showBorder={rowIdx === topSummaryRowsCount - 1}
11361135
selectCell={selectCellLatest}
11371136
/>
11381137
);
@@ -1164,7 +1163,6 @@ function DataGrid<R, SR, K extends Key>(
11641163
lastFrozenColumnIndex={lastFrozenColumnIndex}
11651164
selectedCellIdx={isSummaryRowSelected ? selectedPosition.idx : undefined}
11661165
isTop={false}
1167-
showBorder={rowIdx === 0}
11681166
selectCell={selectCellLatest}
11691167
/>
11701168
);

‎src/GroupRow.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { getRowStyle } from './utils';
77
import type { BaseRenderRowProps, GroupRow } from './types';
88
import { SELECT_COLUMN_KEY } from './Columns';
99
import GroupCell from './GroupCell';
10-
import { cell, cellFrozenLast } from './style/cell';
10+
import { cell, cellFrozen } from './style/cell';
1111
import { rowClassname, rowSelectedClassname } from './style/row';
1212

1313
const groupRow = css`
@@ -16,7 +16,8 @@ const groupRow = css`
1616
background-color: var(--rdg-header-background-color);
1717
}
1818
19-
> .${cell}:not(:last-child):not(.${cellFrozenLast}) {
19+
> .${cell}:not(:last-child, .${cellFrozen}),
20+
> :nth-last-child(n + 2 of .${cellFrozen}) {
2021
border-inline-end: none;
2122
}
2223
}

‎src/SummaryRow.tsx

Lines changed: 8 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,12 @@ import clsx from 'clsx';
55
import { getColSpan, getRowStyle } from './utils';
66
import type { RenderRowProps } from './types';
77
import { cell, cellFrozen } from './style/cell';
8-
import { rowClassname, rowSelectedClassname } from './style/row';
8+
import {
9+
bottomSummaryRowClassname,
10+
rowClassname,
11+
rowSelectedClassname,
12+
topSummaryRowClassname
13+
} from './style/row';
914
import SummaryCell from './SummaryCell';
1015

1116
type SharedRenderRowProps<R, SR> = Pick<
@@ -21,7 +26,6 @@ interface SummaryRowProps<R, SR> extends SharedRenderRowProps<R, SR> {
2126
lastFrozenColumnIndex: number;
2227
selectedCellIdx: number | undefined;
2328
isTop: boolean;
24-
showBorder: boolean;
2529
}
2630

2731
const summaryRow = css`
@@ -46,26 +50,8 @@ const topSummaryRow = css`
4650
}
4751
`;
4852

49-
export const topSummaryRowBorderClassname = css`
50-
@layer rdg.SummaryRow {
51-
> .${cell} {
52-
border-block-end: 2px solid var(--rdg-summary-border-color);
53-
}
54-
}
55-
`;
56-
57-
export const bottomSummaryRowBorderClassname = css`
58-
@layer rdg.SummaryRow {
59-
> .${cell} {
60-
border-block-start: 2px solid var(--rdg-summary-border-color);
61-
}
62-
}
63-
`;
64-
6553
const summaryRowClassname = `rdg-summary-row ${summaryRow}`;
6654

67-
const topSummaryRowClassname = `rdg-top-summary-row ${topSummaryRow}`;
68-
6955
function SummaryRow<R, SR>({
7056
rowIdx,
7157
gridRowStart,
@@ -76,7 +62,6 @@ function SummaryRow<R, SR>({
7662
lastFrozenColumnIndex,
7763
selectedCellIdx,
7864
isTop,
79-
showBorder,
8065
selectCell,
8166
'aria-rowindex': ariaRowIndex
8267
}: SummaryRowProps<R, SR>) {
@@ -113,10 +98,8 @@ function SummaryRow<R, SR>({
11398
summaryRowClassname,
11499
{
115100
[rowSelectedClassname]: selectedCellIdx === -1,
116-
[topSummaryRowClassname]: isTop,
117-
[topSummaryRowBorderClassname]: isTop && showBorder,
118-
[bottomSummaryRowBorderClassname]: !isTop && showBorder,
119-
'rdg-bottom-summary-row': !isTop
101+
[`${topSummaryRowClassname} ${topSummaryRow}`]: isTop,
102+
[bottomSummaryRowClassname]: !isTop
120103
}
121104
)}
122105
style={

‎src/hooks/useCalculatedColumns.ts

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,6 @@ export function useCalculatedColumns<R, SR>({
9292
idx: 0,
9393
level: 0,
9494
frozen,
95-
isLastFrozenColumn: false,
9695
width: rawColumn.width ?? defaultWidth,
9796
minWidth: rawColumn.minWidth ?? defaultMinWidth,
9897
maxWidth: rawColumn.maxWidth ?? defaultMaxWidth,
@@ -142,10 +141,6 @@ export function useCalculatedColumns<R, SR>({
142141
}
143142
});
144143

145-
if (lastFrozenColumnIndex !== -1) {
146-
columns[lastFrozenColumnIndex].isLastFrozenColumn = true;
147-
}
148-
149144
return {
150145
columns,
151146
colSpanColumns,

‎src/style/cell.ts

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -35,15 +35,12 @@ export const cellFrozen = css`
3535
position: sticky;
3636
/* Should have a higher value than 0 to show up above unfrozen cells */
3737
z-index: 1;
38-
}
39-
`;
40-
41-
export const cellFrozenClassname = `rdg-cell-frozen ${cellFrozen}`;
4238
43-
export const cellFrozenLast = css`
44-
@layer rdg.Cell {
45-
box-shadow: calc(2px * var(--rdg-sign)) 0 5px -2px rgba(136, 136, 136, 0.3);
39+
/* Add box-shadow on the last frozen cell */
40+
&:nth-last-child(1 of &) {
41+
box-shadow: var(--rdg-cell-frozen-box-shadow);
42+
}
4643
}
4744
`;
4845

49-
export const cellFrozenLastClassname = `rdg-cell-frozen-last ${cellFrozenLast}`;
46+
export const cellFrozenClassname = `rdg-cell-frozen ${cellFrozen}`;

‎src/style/core.ts

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { css } from '@linaria/core';
22

3-
import { row } from './row';
3+
import { cell } from './cell';
4+
import { bottomSummaryRowClassname, row, topSummaryRowClassname } from './row';
45

56
const lightTheme = `
67
--rdg-color: #000;
@@ -49,6 +50,7 @@ const root = css`
4950
${lightTheme}
5051
--rdg-selection-color: #66afe9;
5152
--rdg-font-size: 14px;
53+
--rdg-cell-frozen-box-shadow: calc(2px * var(--rdg-sign)) 0 5px -2px rgba(136, 136, 136, 0.3);
5254
5355
display: grid;
5456
@@ -88,6 +90,18 @@ const root = css`
8890
${darkTheme}
8991
}
9092
}
93+
94+
> :nth-last-child(1 of .${topSummaryRowClassname}) {
95+
> .${cell} {
96+
border-block-end: 2px solid var(--rdg-summary-border-color);
97+
}
98+
}
99+
100+
> :nth-child(1 of .${bottomSummaryRowClassname}) {
101+
> .${cell} {
102+
border-block-start: 2px solid var(--rdg-summary-border-color);
103+
}
104+
}
91105
}
92106
`;
93107

‎src/style/row.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,3 +43,7 @@ export const rowSelectedWithFrozenCell = css`
4343
}
4444
}
4545
`;
46+
47+
export const topSummaryRowClassname = 'rdg-top-summary-row';
48+
49+
export const bottomSummaryRowClassname = 'rdg-bottom-summary-row';

‎src/types.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,6 @@ export interface CalculatedColumn<TRow, TSummaryRow = unknown> extends Column<TR
7171
readonly sortable: boolean;
7272
readonly draggable: boolean;
7373
readonly frozen: boolean;
74-
readonly isLastFrozenColumn: boolean;
7574
readonly renderCell: (props: RenderCellProps<TRow, TSummaryRow>) => ReactNode;
7675
}
7776

‎src/utils/styleUtils.ts

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import type { CSSProperties } from 'react';
22
import clsx from 'clsx';
33

44
import type { CalculatedColumn, CalculatedColumnOrColumnGroup } from '../types';
5-
import { cellClassname, cellFrozenClassname, cellFrozenLastClassname } from '../style/cell';
5+
import { cellClassname, cellFrozenClassname } from '../style/cell';
66

77
export function getRowStyle(rowIdx: number, height?: number): CSSProperties {
88
if (height !== undefined) {
@@ -59,8 +59,7 @@ export function getCellClassname<R, SR>(
5959
return clsx(
6060
cellClassname,
6161
{
62-
[cellFrozenClassname]: column.frozen,
63-
[cellFrozenLastClassname]: column.isLastFrozenColumn
62+
[cellFrozenClassname]: column.frozen
6463
},
6564
...extraClasses
6665
);

‎test/column/frozen.test.ts

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import type { Column } from '../../src';
2-
import { cellClassname, cellFrozenClassname, cellFrozenLastClassname } from '../../src/style/cell';
2+
import { cellClassname, cellFrozenClassname } from '../../src/style/cell';
33
import { getHeaderCells, setup } from '../utils';
44

55
interface Row {
@@ -36,9 +36,7 @@ test('frozen column have a specific class, and are stable-sorted before non-froz
3636
const [cell1, cell2, cell3, cell4] = getHeaderCells();
3737

3838
expect(cell1).toHaveClass(`${cellClassname} ${cellFrozenClassname}`, { exact: true });
39-
expect(cell2).toHaveClass(`${cellClassname} ${cellFrozenClassname} ${cellFrozenLastClassname}`, {
40-
exact: true
41-
});
39+
expect(cell2).toHaveClass(`${cellClassname} ${cellFrozenClassname}`, { exact: true });
4240
expect(cell3).toHaveClass(`${cellClassname}`, { exact: true });
4341
expect(cell4).toHaveClass(`${cellClassname}`, { exact: true });
4442

0 commit comments

Comments
 (0)