Skip to content

Commit 66bcc9b

Browse files
amanmahajan7nstepien
amanmahajan7
and
nstepien
authored
Cleanup cell styles (#2294)
* Cleanup cell styles * Fix types * Update src/utils/index.ts Co-authored-by: Nicolas Stepien <[email protected]> * Address comments * Update src/EditCell.tsx Co-authored-by: Nicolas Stepien <[email protected]> Co-authored-by: Nicolas Stepien <[email protected]>
1 parent e78547f commit 66bcc9b

File tree

8 files changed

+69
-82
lines changed

8 files changed

+69
-82
lines changed

‎src/Cell.tsx‎

Lines changed: 40 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,45 @@
11
import { forwardRef, memo } from 'react';
2-
import clsx from 'clsx';
2+
import { css } from '@linaria/core';
33

4-
import { cellClassname, cellCopiedClassname, cellDraggedOverClassname, cellDragHandleClassname, cellFrozenClassname, cellFrozenLastClassname, cellSelectedClassname } from './style';
5-
import { getCellStyle, wrapEvent } from './utils';
4+
import { cellSelectedClassname } from './style';
5+
import { getCellStyle, getCellClassname, wrapEvent } from './utils';
66
import type { CellRendererProps } from './types';
77

8+
const cellCopied = css`
9+
background-color: #ccccff;
10+
`;
11+
12+
const cellCopiedClassname = `rdg-cell-copied ${cellCopied}`;
13+
14+
const cellDraggedOver = css`
15+
background-color: #ccccff;
16+
17+
&.${cellCopied} {
18+
background-color: #9999ff;
19+
}
20+
`;
21+
22+
const cellDraggedOverClassname = `rdg-cell-dragged-over ${cellDraggedOver}`;
23+
24+
const cellDragHandle = css`
25+
cursor: move;
26+
position: absolute;
27+
right: 0;
28+
bottom: 0;
29+
width: 8px;
30+
height: 8px;
31+
background-color: var(--selection-color);
32+
33+
&:hover {
34+
width: 16px;
35+
height: 16px;
36+
border: 2px solid var(--selection-color);
37+
background-color: var(--background-color);
38+
}
39+
`;
40+
41+
const cellDragHandleClassname = `rdg-cell-drag-handle ${cellDragHandle}`;
42+
843
function Cell<R, SR>({
944
className,
1045
column,
@@ -25,11 +60,9 @@ function Cell<R, SR>({
2560
...props
2661
}: CellRendererProps<R, SR>, ref: React.Ref<HTMLDivElement>) {
2762
const { cellClass } = column;
28-
className = clsx(
29-
cellClassname,
63+
className = getCellClassname(
64+
column,
3065
{
31-
[cellFrozenClassname]: column.frozen,
32-
[cellFrozenLastClassname]: column.isLastFrozenColumn,
3366
[cellSelectedClassname]: isCellSelected,
3467
[cellCopiedClassname]: isCopied,
3568
[cellDraggedOverClassname]: isDraggedOver

‎src/EditCell.tsx‎

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
import { useState, useCallback } from 'react';
2-
import clsx from 'clsx';
32
import { css } from '@linaria/core';
43

5-
import { cellClassname, cellFrozenClassname, cellFrozenLastClassname, cellSelectedClassname } from './style';
4+
import { cellSelectedClassname } from './style';
65
import EditorContainer from './editors/EditorContainer';
7-
import { getCellStyle } from './utils';
6+
import { getCellStyle, getCellClassname } from './utils';
87
import type { CellRendererProps, SharedEditorProps, Omit } from './types';
98

109
const cellEditing = css`
@@ -41,13 +40,9 @@ export default function EditCell<R, SR>({
4140
}, []);
4241

4342
const { cellClass } = column;
44-
className = clsx(
45-
cellClassname,
46-
{
47-
[cellFrozenClassname]: column.frozen,
48-
[cellFrozenLastClassname]: column.isLastFrozenColumn
49-
},
50-
[cellSelectedClassname],
43+
className = getCellClassname(
44+
column,
45+
cellSelectedClassname,
5146
cellEditingClassname,
5247
typeof cellClass === 'function' ? cellClass(row) : cellClass,
5348
className

‎src/FilterRow.tsx‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
import { memo } from 'react';
2-
import clsx from 'clsx';
32

4-
import { getCellStyle } from './utils';
3+
import { getCellStyle, getCellClassname } from './utils';
54
import type { CalculatedColumn, Filters } from './types';
65
import type { DataGridProps } from './DataGrid';
7-
import { cellClassname, cellFrozenClassname, cellFrozenLastClassname, filterRowClassname } from './style';
6+
import { filterRowClassname } from './style';
87

98
type SharedDataGridProps<R, SR> = Pick<DataGridProps<R, SR>,
109
| 'filters'
@@ -34,15 +33,11 @@ function FilterRow<R, SR>({
3433
>
3534
{columns.map(column => {
3635
const { key } = column;
37-
const className = clsx(cellClassname, {
38-
[cellFrozenClassname]: column.frozen,
39-
[cellFrozenLastClassname]: column.isLastFrozenColumn
40-
});
4136

4237
return (
4338
<div
4439
key={key}
45-
className={className}
40+
className={getCellClassname(column)}
4641
style={getCellStyle(column)}
4742
>
4843
{column.filterRenderer && (

‎src/GroupCell.tsx‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
import { memo } from 'react';
2-
import clsx from 'clsx';
32

4-
import { getCellStyle } from './utils';
3+
import { getCellStyle, getCellClassname } from './utils';
54
import type { CalculatedColumn } from './types';
65
import type { GroupRowRendererProps } from './GroupRow';
7-
import { cellClassname, cellFrozenClassname, cellFrozenLastClassname, cellSelectedClassname } from './style';
6+
import { cellSelectedClassname } from './style';
87

98
type SharedGroupRowRendererProps<R, SR> = Pick<GroupRowRendererProps<R, SR>,
109
| 'id'
@@ -52,9 +51,7 @@ function GroupCell<R, SR>({
5251
role="gridcell"
5352
aria-colindex={column.idx + 1}
5453
key={column.key}
55-
className={clsx(cellClassname, {
56-
[cellFrozenClassname]: column.frozen,
57-
[cellFrozenLastClassname]: column.isLastFrozenColumn,
54+
className={getCellClassname(column, {
5855
[cellSelectedClassname]: isCellSelected
5956
})}
6057
style={{

‎src/HeaderCell.tsx‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
1-
import clsx from 'clsx';
21
import { css } from '@linaria/core';
32

43
import type { CalculatedColumn } from './types';
54
import type { HeaderRowProps } from './HeaderRow';
65
import SortableHeaderCell from './headerCells/SortableHeaderCell';
7-
import { getCellStyle } from './utils';
6+
import { getCellStyle, getCellClassname } from './utils';
87
import type { SortDirection } from './enums';
9-
import { cellClassname, cellFrozenClassname, cellFrozenLastClassname } from './style';
108

119
const cellResizable = css`
1210
&::after {
@@ -121,10 +119,8 @@ export default function HeaderCell<R, SR>({
121119
return column.name;
122120
}
123121

124-
const className = clsx(cellClassname, column.headerCellClass, {
125-
[cellResizableClassname]: column.resizable,
126-
[cellFrozenClassname]: column.frozen,
127-
[cellFrozenLastClassname]: column.isLastFrozenColumn
122+
const className = getCellClassname(column, column.headerCellClass, {
123+
[cellResizableClassname]: column.resizable
128124
});
129125

130126
return (

‎src/SummaryCell.tsx‎

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
11
import { memo } from 'react';
2-
import clsx from 'clsx';
32

4-
import { getCellStyle } from './utils';
3+
import { getCellStyle, getCellClassname } from './utils';
54
import type { CellRendererProps } from './types';
6-
import { cellClassname, cellFrozenClassname, cellFrozenLastClassname } from './style';
75

86
type SharedCellRendererProps<R, SR> = Pick<CellRendererProps<R, SR>, 'column'>;
97

@@ -16,12 +14,7 @@ function SummaryCell<R, SR>({
1614
row
1715
}: SummaryCellProps<R, SR>) {
1816
const { summaryFormatter: SummaryFormatter, summaryCellClass } = column;
19-
const className = clsx(
20-
cellClassname,
21-
{
22-
[cellFrozenClassname]: column.frozen,
23-
[cellFrozenLastClassname]: column.isLastFrozenColumn
24-
},
17+
const className = getCellClassname(column,
2518
typeof summaryCellClass === 'function' ? summaryCellClass(row) : summaryCellClass
2619
);
2720

‎src/style/cell.ts‎

Lines changed: 0 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -34,38 +34,3 @@ const cellSelected = css`
3434
`;
3535

3636
export const cellSelectedClassname = `rdg-cell-selected ${cellSelected}`;
37-
38-
const cellCopied = css`
39-
background-color: #ccccff;
40-
`;
41-
42-
export const cellCopiedClassname = `rdg-cell-copied ${cellCopied}`;
43-
44-
const cellDragHandle = css`
45-
cursor: move;
46-
position: absolute;
47-
right: 0;
48-
bottom: 0;
49-
width: 8px;
50-
height: 8px;
51-
background-color: var(--selection-color);
52-
53-
&:hover {
54-
width: 16px;
55-
height: 16px;
56-
border: 2px solid var(--selection-color);
57-
background-color: var(--background-color);
58-
}
59-
`;
60-
61-
export const cellDragHandleClassname = `rdg-cell-drag-handle ${cellDragHandle}`;
62-
63-
const cellDraggedOver = css`
64-
background-color: #ccccff;
65-
66-
&.${cellCopied} {
67-
background-color: #9999ff;
68-
}
69-
`;
70-
71-
export const cellDraggedOverClassname = `rdg-cell-dragged-over ${cellDraggedOver}`;

‎src/utils/index.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
1+
import clsx from 'clsx';
2+
13
import type { CalculatedColumn } from '../types';
4+
import { cell, cellFrozenClassname, cellFrozenLastClassname } from '../style';
25

36
export * from './domUtils';
47
export * from './keyboardUtils';
@@ -15,3 +18,13 @@ export function getCellStyle<R, SR>(column: CalculatedColumn<R, SR>): React.CSSP
1518
? { left: `var(--frozen-left-${column.key})` }
1619
: { gridColumnStart: column.idx + 1 };
1720
}
21+
22+
export function getCellClassname<R, SR>(column: CalculatedColumn<R, SR>, ...extraClasses: Parameters<typeof clsx>): string {
23+
return clsx(
24+
`rdg-cell ${cell}`, {
25+
[cellFrozenClassname]: column.frozen,
26+
[cellFrozenLastClassname]: column.isLastFrozenColumn
27+
},
28+
...extraClasses
29+
);
30+
}

0 commit comments

Comments
 (0)