Skip to content

Commit e9b24ff

Browse files
PaloSPPaloSP
committed
Address review feedback: rename Frozen → StartFrozen, restore TODO
1 parent e02559d commit e9b24ff

13 files changed

Lines changed: 96 additions & 82 deletions

‎src/DataGrid.tsx‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ import {
7777
frozenColumnShadowEndClassname,
7878
frozenColumnShadowEndTopClassname,
7979
frozenColumnShadowStartClassname,
80-
frozenColumnShadowTopClassname,
80+
frozenColumnShadowStartTopClassname,
8181
viewportDraggingClassname
8282
} from './style/core';
8383
import SummaryRow from './SummaryRow';
@@ -345,14 +345,14 @@ export function DataGrid<R, SR = unknown, K extends Key = Key>(props: DataGridPr
345345
const {
346346
columns,
347347
colSpanColumns,
348-
lastFrozenColumnIndex,
348+
lastStartFrozenColumnIndex,
349349
firstEndFrozenColumnIndex,
350350
headerRowsCount,
351351
colOverscanStartIdx,
352352
colOverscanEndIdx,
353353
templateColumns,
354354
layoutCssVars,
355-
totalFrozenColumnWidth,
355+
totalStartFrozenColumnWidth,
356356
totalEndFrozenColumnWidth
357357
} = useCalculatedColumns({
358358
rawColumns,
@@ -383,8 +383,8 @@ export function DataGrid<R, SR = unknown, K extends Key = Key>(props: DataGridPr
383383
const { leftKey, rightKey } = getLeftRightKey(direction);
384384
const ariaRowCount = rawAriaRowCount ?? headerRowsCount + rows.length + summaryRowsCount;
385385
const frozenShadowStyles: React.CSSProperties = {
386-
gridColumnStart: lastFrozenColumnIndex + 2,
387-
insetInlineStart: totalFrozenColumnWidth
386+
gridColumnStart: lastStartFrozenColumnIndex + 2,
387+
insetInlineStart: totalStartFrozenColumnWidth
388388
};
389389
const frozenEndShadowStyles: React.CSSProperties = {
390390
gridColumnStart: firstEndFrozenColumnIndex + 1,
@@ -472,7 +472,7 @@ export function DataGrid<R, SR = unknown, K extends Key = Key>(props: DataGridPr
472472
colSpanColumns,
473473
colOverscanStartIdx,
474474
colOverscanEndIdx,
475-
lastFrozenColumnIndex,
475+
lastStartFrozenColumnIndex,
476476
firstEndFrozenColumnIndex,
477477
rowOverscanStartIdx,
478478
rowOverscanEndIdx,
@@ -519,7 +519,7 @@ export function DataGrid<R, SR = unknown, K extends Key = Key>(props: DataGridPr
519519
element: gridRef.current,
520520
scrollToCell({ idx, rowIdx }) {
521521
const scrollToIdx =
522-
idx != null && idx > lastFrozenColumnIndex && idx < columns.length ? idx : undefined;
522+
idx != null && idx > lastStartFrozenColumnIndex && idx < columns.length ? idx : undefined;
523523
const scrollToRowIdx =
524524
rowIdx != null && validatePosition({ idx: 0, rowIdx }).isPositionInViewport
525525
? rowIdx + headerAndTopSummaryRowsCount
@@ -912,7 +912,7 @@ export function DataGrid<R, SR = unknown, K extends Key = Key>(props: DataGridPr
912912
minRowIdx,
913913
mainHeaderRowIdx,
914914
maxRowIdx,
915-
lastFrozenColumnIndex,
915+
lastStartFrozenColumnIndex,
916916
firstEndFrozenColumnIndex,
917917
cellNavigationMode,
918918
activePosition,
@@ -1036,7 +1036,7 @@ export function DataGrid<R, SR = unknown, K extends Key = Key>(props: DataGridPr
10361036

10371037
const { row } = activePosition;
10381038
const column = getActiveColumn();
1039-
const colSpan = getColSpan(column, lastFrozenColumnIndex, firstEndFrozenColumnIndex, {
1039+
const colSpan = getColSpan(column, lastStartFrozenColumnIndex, firstEndFrozenColumnIndex, {
10401040
type: 'ROW',
10411041
row
10421042
});
@@ -1174,7 +1174,7 @@ export function DataGrid<R, SR = unknown, K extends Key = Key>(props: DataGridPr
11741174
style={{
11751175
...style,
11761176
// set scrollPadding to correctly scroll to non-sticky cells/rows
1177-
scrollPaddingInlineStart: totalFrozenColumnWidth,
1177+
scrollPaddingInlineStart: totalStartFrozenColumnWidth,
11781178
scrollPaddingInlineEnd: totalEndFrozenColumnWidth,
11791179
scrollPaddingBlockStart: headerRowsHeight + topSummaryRowsCount * summaryRowHeight,
11801180
scrollPaddingBlockEnd: bottomSummaryRowsCount * summaryRowHeight,
@@ -1289,11 +1289,11 @@ export function DataGrid<R, SR = unknown, K extends Key = Key>(props: DataGridPr
12891289
)}
12901290
</DataGridDefaultRenderersContext>
12911291

1292-
{lastFrozenColumnIndex > -1 &&
1292+
{lastStartFrozenColumnIndex > -1 &&
12931293
renderFrozenShadow(
12941294
frozenShadowStyles,
12951295
frozenColumnShadowStartClassname,
1296-
frozenColumnShadowTopClassname
1296+
frozenColumnShadowStartTopClassname
12971297
)}
12981298

12991299
{firstEndFrozenColumnIndex > -1 &&

‎src/GroupRow.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { classnames } from './utils';
66
import type { BaseRenderRowProps, GroupRow, Omit } from './types';
77
import { SELECT_COLUMN_KEY } from './Columns';
88
import GroupCell from './GroupCell';
9-
import { cell, cellFrozen } from './style/cell';
9+
import { cell, cellFrozenStart } from './style/cell';
1010
import { rowClassname, rowActiveClassname } from './style/row';
1111

1212
const groupRow = css`
@@ -15,8 +15,8 @@ const groupRow = css`
1515
background-color: var(--rdg-header-background-color);
1616
}
1717
18-
> .${cell}:not(:last-child, .${cellFrozen}),
19-
> :nth-last-child(n + 2 of .rdg-cell-frozen),
18+
> .${cell}:not(:last-child, .${cellFrozenStart}),
19+
> :nth-last-child(n + 2 of .rdg-cell-frozen-start),
2020
> :nth-child(n + 2 of .rdg-cell-frozen-end) {
2121
border-inline-end: none;
2222
}

‎src/HeaderRow.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import type {
1212
} from './types';
1313
import type { DataGridProps } from './DataGrid';
1414
import HeaderCell from './HeaderCell';
15-
import { cell, cellFrozen } from './style/cell';
15+
import { cell, cellFrozenStart } from './style/cell';
1616
import { rowActiveClassname } from './style/row';
1717

1818
type SharedDataGridProps<R, SR, K extends React.Key> = Pick<
@@ -44,7 +44,7 @@ const headerRow = css`
4444
position: sticky;
4545
}
4646
47-
& > .${cellFrozen} {
47+
& > .${cellFrozenStart} {
4848
z-index: 3;
4949
}
5050
}

‎src/hooks/useCalculatedColumns.ts‎

Lines changed: 28 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -63,17 +63,17 @@ export function useCalculatedColumns<R, SR>({
6363
const {
6464
columns,
6565
colSpanColumns,
66-
lastFrozenColumnIndex,
66+
lastStartFrozenColumnIndex,
6767
firstEndFrozenColumnIndex,
6868
headerRowsCount
6969
} = useMemo((): {
7070
readonly columns: readonly CalculatedColumn<R, SR>[];
7171
readonly colSpanColumns: readonly CalculatedColumn<R, SR>[];
72-
readonly lastFrozenColumnIndex: number;
72+
readonly lastStartFrozenColumnIndex: number;
7373
readonly firstEndFrozenColumnIndex: number;
7474
readonly headerRowsCount: number;
7575
} => {
76-
let lastFrozenColumnIndex = -1;
76+
let lastStartFrozenColumnIndex = -1;
7777
let firstEndFrozenColumnIndex = -1;
7878
let headerRowsCount = 1;
7979
const columns: MutableCalculatedColumn<R, SR>[] = [];
@@ -121,7 +121,7 @@ export function useCalculatedColumns<R, SR>({
121121
columns.push(column);
122122

123123
if (isStartFrozen(frozen)) {
124-
lastFrozenColumnIndex++;
124+
lastStartFrozenColumnIndex++;
125125
}
126126

127127
if (level > headerRowsCount) {
@@ -139,6 +139,8 @@ export function useCalculatedColumns<R, SR>({
139139
// Stable sort preserves definition order within each band.
140140
const ra = a.frozen === 'end' ? 2 : a.frozen === false ? 1 : 0;
141141
const rb = b.frozen === 'end' ? 2 : b.frozen === false ? 1 : 0;
142+
143+
// TODO: sort columns to keep them grouped if they have a parent
142144
return ra - rb;
143145
});
144146

@@ -159,7 +161,7 @@ export function useCalculatedColumns<R, SR>({
159161
return {
160162
columns,
161163
colSpanColumns,
162-
lastFrozenColumnIndex,
164+
lastStartFrozenColumnIndex,
163165
firstEndFrozenColumnIndex,
164166
headerRowsCount
165167
};
@@ -178,19 +180,19 @@ export function useCalculatedColumns<R, SR>({
178180
const {
179181
templateColumns,
180182
layoutCssVars,
181-
totalFrozenColumnWidth,
183+
totalStartFrozenColumnWidth,
182184
totalEndFrozenColumnWidth,
183185
columnMetrics
184186
} = useMemo((): {
185187
templateColumns: readonly string[];
186188
layoutCssVars: Readonly<Record<string, string>>;
187-
totalFrozenColumnWidth: number;
189+
totalStartFrozenColumnWidth: number;
188190
totalEndFrozenColumnWidth: number;
189191
columnMetrics: ReadonlyMap<CalculatedColumn<R, SR>, ColumnMetric>;
190192
} => {
191193
const columnMetrics = new Map<CalculatedColumn<R, SR>, ColumnMetric>();
192194
let left = 0;
193-
let totalFrozenColumnWidth = 0;
195+
let totalStartFrozenColumnWidth = 0;
194196
let totalEndFrozenColumnWidth = 0;
195197
const templateColumns: string[] = [];
196198

@@ -209,24 +211,25 @@ export function useCalculatedColumns<R, SR>({
209211
left += width;
210212
}
211213

212-
if (lastFrozenColumnIndex !== -1) {
213-
const columnMetric = columnMetrics.get(columns[lastFrozenColumnIndex])!;
214-
totalFrozenColumnWidth = columnMetric.left + columnMetric.width;
214+
if (lastStartFrozenColumnIndex !== -1) {
215+
const lastStartFrozenColumnMetric = columnMetrics.get(columns[lastStartFrozenColumnIndex])!;
216+
totalStartFrozenColumnWidth =
217+
lastStartFrozenColumnMetric.left + lastStartFrozenColumnMetric.width;
215218
}
216219

217220
const layoutCssVars: Record<string, string> = {};
218221

219-
for (let i = 0; i <= lastFrozenColumnIndex; i++) {
222+
for (let i = 0; i <= lastStartFrozenColumnIndex; i++) {
220223
const column = columns[i];
221-
layoutCssVars[`--rdg-frozen-left-${column.idx}`] = `${columnMetrics.get(column)!.left}px`;
224+
layoutCssVars[`--rdg-frozen-start-${column.idx}`] = `${columnMetrics.get(column)!.left}px`;
222225
}
223226

224227
if (firstEndFrozenColumnIndex !== -1) {
225228
const lastColumn = columns[columns.length - 1];
226-
const lastMetric = columnMetrics.get(lastColumn)!;
227-
const gridEnd = lastMetric.left + lastMetric.width;
228-
const firstEndMetric = columnMetrics.get(columns[firstEndFrozenColumnIndex])!;
229-
totalEndFrozenColumnWidth = gridEnd - firstEndMetric.left;
229+
const lastColumnMetric = columnMetrics.get(lastColumn)!;
230+
const gridEnd = lastColumnMetric.left + lastColumnMetric.width;
231+
const firstEndFrozenColumnMetric = columnMetrics.get(columns[firstEndFrozenColumnIndex])!;
232+
totalEndFrozenColumnWidth = gridEnd - firstEndFrozenColumnMetric.left;
230233

231234
for (let i = firstEndFrozenColumnIndex; i < columns.length; i++) {
232235
const column = columns[i];
@@ -239,22 +242,22 @@ export function useCalculatedColumns<R, SR>({
239242
return {
240243
templateColumns,
241244
layoutCssVars,
242-
totalFrozenColumnWidth,
245+
totalStartFrozenColumnWidth,
243246
totalEndFrozenColumnWidth,
244247
columnMetrics
245248
};
246-
}, [getColumnWidth, columns, lastFrozenColumnIndex, firstEndFrozenColumnIndex]);
249+
}, [getColumnWidth, columns, lastStartFrozenColumnIndex, firstEndFrozenColumnIndex]);
247250

248251
const [colOverscanStartIdx, colOverscanEndIdx] = useMemo((): [number, number] => {
249252
if (!enableVirtualization) {
250253
return [0, columns.length - 1];
251254
}
252255
// get the viewport's left side and right side positions for non-frozen columns
253-
const viewportLeft = scrollLeft + totalFrozenColumnWidth;
256+
const viewportLeft = scrollLeft + totalStartFrozenColumnWidth;
254257
const viewportRight = scrollLeft + viewportWidth;
255258
// get first and last non-frozen column indexes
256259
const lastColIdx = columns.length - 1;
257-
const firstUnfrozenColumnIdx = min(lastFrozenColumnIndex + 1, lastColIdx);
260+
const firstUnfrozenColumnIdx = min(lastStartFrozenColumnIndex + 1, lastColIdx);
258261

259262
// skip rendering non-frozen columns if the frozen columns cover the entire viewport
260263
if (viewportLeft >= viewportRight) {
@@ -292,9 +295,9 @@ export function useCalculatedColumns<R, SR>({
292295
}, [
293296
columnMetrics,
294297
columns,
295-
lastFrozenColumnIndex,
298+
lastStartFrozenColumnIndex,
296299
scrollLeft,
297-
totalFrozenColumnWidth,
300+
totalStartFrozenColumnWidth,
298301
viewportWidth,
299302
enableVirtualization
300303
]);
@@ -307,9 +310,9 @@ export function useCalculatedColumns<R, SR>({
307310
templateColumns,
308311
layoutCssVars,
309312
headerRowsCount,
310-
lastFrozenColumnIndex,
313+
lastStartFrozenColumnIndex,
311314
firstEndFrozenColumnIndex,
312-
totalFrozenColumnWidth,
315+
totalStartFrozenColumnWidth,
313316
totalEndFrozenColumnWidth
314317
};
315318
}

‎src/hooks/useViewportColumns.ts‎

Lines changed: 23 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ interface ViewportColumnsArgs<R, SR> {
1818
bottomSummaryRows: Maybe<readonly SR[]>;
1919
colOverscanStartIdx: number;
2020
colOverscanEndIdx: number;
21-
lastFrozenColumnIndex: number;
21+
lastStartFrozenColumnIndex: number;
2222
firstEndFrozenColumnIndex: number;
2323
rowOverscanStartIdx: number;
2424
rowOverscanEndIdx: number;
@@ -32,7 +32,7 @@ export function useViewportColumns<R, SR>({
3232
bottomSummaryRows,
3333
colOverscanStartIdx,
3434
colOverscanEndIdx,
35-
lastFrozenColumnIndex,
35+
lastStartFrozenColumnIndex,
3636
firstEndFrozenColumnIndex,
3737
rowOverscanStartIdx,
3838
rowOverscanEndIdx
@@ -71,7 +71,12 @@ export function useViewportColumns<R, SR>({
7171
if (colIdx >= colOverscanStartIdx) break;
7272

7373
for (const args of iterateOverRowsForColSpanArgs()) {
74-
const colSpan = getColSpan(column, lastFrozenColumnIndex, firstEndFrozenColumnIndex, args);
74+
const colSpan = getColSpan(
75+
column,
76+
lastStartFrozenColumnIndex,
77+
firstEndFrozenColumnIndex,
78+
args
79+
);
7580

7681
if (colSpan !== undefined && colIdx + colSpan > colOverscanStartIdx) {
7782
return colIdx;
@@ -87,7 +92,7 @@ export function useViewportColumns<R, SR>({
8792
topSummaryRows,
8893
bottomSummaryRows,
8994
colOverscanStartIdx,
90-
lastFrozenColumnIndex,
95+
lastStartFrozenColumnIndex,
9196
firstEndFrozenColumnIndex,
9297
colSpanColumns
9398
]);
@@ -101,15 +106,15 @@ export function useViewportColumns<R, SR>({
101106

102107
const iterateOverViewportColumns = useCallback<IterateOverViewportColumns<R, SR>>(
103108
function* (activeColumnIdx): Generator<CalculatedColumn<R, SR>> {
104-
for (let colIdx = 0; colIdx <= lastFrozenColumnIndex; colIdx++) {
109+
for (let colIdx = 0; colIdx <= lastStartFrozenColumnIndex; colIdx++) {
105110
yield columns[colIdx];
106111
}
107112

108113
const unfrozenLastIdx =
109114
firstEndFrozenColumnIndex > -1 ? firstEndFrozenColumnIndex - 1 : columns.length - 1;
110115

111-
if (lastFrozenColumnIndex < unfrozenLastIdx) {
112-
if (activeColumnIdx > lastFrozenColumnIndex && activeColumnIdx < startIdx) {
116+
if (lastStartFrozenColumnIndex < unfrozenLastIdx) {
117+
if (activeColumnIdx > lastStartFrozenColumnIndex && activeColumnIdx < startIdx) {
113118
yield columns[activeColumnIdx];
114119
}
115120

@@ -129,7 +134,13 @@ export function useViewportColumns<R, SR>({
129134
}
130135
}
131136
},
132-
[startIdx, effectiveOverscanEndIdx, columns, lastFrozenColumnIndex, firstEndFrozenColumnIndex]
137+
[
138+
startIdx,
139+
effectiveOverscanEndIdx,
140+
columns,
141+
lastStartFrozenColumnIndex,
142+
firstEndFrozenColumnIndex
143+
]
133144
);
134145

135146
const iterateOverViewportColumnsForRow = useCallback<IterateOverViewportColumnsForRow<R, SR>>(
@@ -138,7 +149,7 @@ export function useViewportColumns<R, SR>({
138149

139150
for (const column of iterator) {
140151
let colSpan =
141-
args && getColSpan(column, lastFrozenColumnIndex, firstEndFrozenColumnIndex, args);
152+
args && getColSpan(column, lastStartFrozenColumnIndex, firstEndFrozenColumnIndex, args);
142153

143154
yield [column, column.idx === activeColumnIdx, colSpan];
144155

@@ -149,7 +160,7 @@ export function useViewportColumns<R, SR>({
149160
}
150161
}
151162
},
152-
[iterateOverViewportColumns, lastFrozenColumnIndex, firstEndFrozenColumnIndex]
163+
[iterateOverViewportColumns, lastStartFrozenColumnIndex, firstEndFrozenColumnIndex]
153164
);
154165

155166
const iterateOverViewportColumnsForRowOutsideOfViewport = useCallback<
@@ -161,11 +172,11 @@ export function useViewportColumns<R, SR>({
161172
yield [
162173
column,
163174
true,
164-
args && getColSpan(column, lastFrozenColumnIndex, firstEndFrozenColumnIndex, args)
175+
args && getColSpan(column, lastStartFrozenColumnIndex, firstEndFrozenColumnIndex, args)
165176
];
166177
}
167178
},
168-
[columns, lastFrozenColumnIndex, firstEndFrozenColumnIndex]
179+
[columns, lastStartFrozenColumnIndex, firstEndFrozenColumnIndex]
169180
);
170181

171182
const viewportColumns = useMemo((): readonly CalculatedColumn<R, SR>[] => {

0 commit comments

Comments
 (0)