Skip to content

Commit ee47873

Browse files
natalyjazzviolinnatalyjazzviolin
committed
Corrects overflow, runs prettier.
1 parent 3df9be8 commit ee47873

File tree

6 files changed

+38
-161
lines changed

6 files changed

+38
-161
lines changed

‎src/components/Grid/Cell.tsx

+3-8
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@ export const Cell = memo(
2020
rowHeight,
2121
rowStart,
2222
rowAutoHeight,
23-
getRowHeight
2423
} = data;
2524

2625
const currentRowIndex = rowIndex + rowStart;
@@ -58,23 +57,19 @@ export const Cell = memo(
5857

5958
const cellRef = useRef<HTMLDivElement>(null);
6059

61-
const currentHeight = getRowHeight(rowIndex);
62-
console.log(`Which is bigger, rowHeight ${rowHeight} or current height? ${currentHeight}`)
63-
6460
useEffect(() => {
65-
console.log("Current ref form cell: ", cellRef.current?.getBoundingClientRect().height)
6661
if (cellRef.current && data.updateRowHeight) {
6762
const height = cellRef.current.getBoundingClientRect().height;
6863
data.updateRowHeight(rowIndex, height);
6964
}
70-
}, [cellRef, data.updateRowHeight, rowIndex]);
65+
});
7166

72-
console.log("Row height is: ", rowHeight)
67+
console.log("Row height is: ", rowHeight);
7368
return (
7469
<div
7570
style={{
7671
...style,
77-
height: "max-content",
72+
height: "auto",
7873
}}
7974
data-row={currentRowIndex}
8075
data-column={columnIndex}

‎src/components/Grid/Grid.stories.tsx

+8-107
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,14 @@ import { useCallback, useEffect, useState } from "react";
22
import { CellProps, GridContextMenuItemProps, SelectedRegion, SelectionFocus } from "..";
33
import { Grid as CUIGrid } from "./Grid";
44

5-
const Cell: CellProps = ({ type, rowIndex, columnIndex, isScrolling, width, ...props }) => {
5+
const Cell: CellProps = ({
6+
type,
7+
rowIndex,
8+
columnIndex,
9+
isScrolling,
10+
width,
11+
...props
12+
}) => {
613
return (
714
<div
815
data-scrolling={isScrolling}
@@ -123,109 +130,3 @@ export const Playground = {
123130
},
124131
},
125132
};
126-
127-
export const AutoHeightWithVariableData = {
128-
args: {
129-
rowCount: 10,
130-
columnCount: 5,
131-
rowAutoHeight: true,
132-
rowStart: 0,
133-
},
134-
parameters: {
135-
docs: {
136-
source: {
137-
transform: (_: string, story: { args: Props; [x: string]: unknown }) => {
138-
const { rowCount, columnCount, rowAutoHeight, ...props } = story.args;
139-
return `
140-
const VariableCell: CellProps = ({ type, rowIndex, columnIndex, isScrolling, width, ...props }) => {
141-
let content = \`Row \${rowIndex}, Col \${columnIndex}\${rowIndex % 2 === 0 ? '\\nExtra line' : ''}\`;
142-
143-
if (rowIndex === 0 && columnIndex === 0) {
144-
content = \`CREATE TABLE random_user_events (
145-
user_id UInt32,
146-
event_time DateTime,
147-
event_type Enum8('click' = 1, 'view' = 2, 'purchase' = 3),
148-
item_id String,
149-
price Decimal(10,2),
150-
quantity UInt16
151-
) ENGINE = MergeTree()
152-
ORDER BY (user_id, event_time)
153-
PARTITION BY toYYYYMM(event_time)
154-
SETTINGS index_granularity = 8192;\`;
155-
}
156-
157-
return (
158-
<div
159-
data-scrolling={isScrolling}
160-
style={{
161-
whiteSpace: 'pre-wrap',
162-
padding: '8px',
163-
borderBottom: '1px solid #ccc',
164-
fontFamily: rowIndex === 0 && columnIndex === 0 ? 'monospace' : 'inherit',
165-
fontSize: rowIndex === 0 && columnIndex === 0 ? '12px' : 'inherit',
166-
}}
167-
{...props}
168-
>
169-
{content}
170-
</div>
171-
);
172-
};
173-
174-
<Grid
175-
cell={VariableCell}
176-
focus={{ row: 0, column: 0 }}
177-
columnWidth={() => 300}
178-
rowAutoHeight={${rowAutoHeight}}
179-
${Object.entries(props)
180-
.flatMap(([key, value]) =>
181-
typeof value === "boolean"
182-
? value
183-
? ` ${key}`
184-
: []
185-
: ` ${key}=${typeof value == "string" ? `"${value}"` : `{${value}}`}`
186-
)
187-
.join("\n")}
188-
/>
189-
`;
190-
},
191-
},
192-
},
193-
},
194-
render: (args) => {
195-
const VariableCell: CellProps = ({ type, rowIndex, columnIndex, isScrolling, width, ...props }) => {
196-
let content = `Row ${rowIndex}, Col ${columnIndex}${rowIndex % 2 === 0 ? '\nExtra line' : ''}`;
197-
198-
if (rowIndex === 0 && columnIndex === 0) {
199-
content = `CREATE TABLE random_user_events (
200-
user_id UInt32,
201-
event_time DateTime,
202-
event_type Enum8('click' = 1, 'view' = 2, 'purchase' = 3),
203-
item_id String,
204-
price Decimal(10,2),
205-
quantity UInt16
206-
) ENGINE = MergeTree()
207-
ORDER BY (user_id, event_time)
208-
PARTITION BY toYYYYMM(event_time)
209-
SETTINGS index_granularity = 8192;`;
210-
}
211-
212-
return (
213-
<div
214-
data-scrolling={isScrolling}
215-
style={{
216-
whiteSpace: 'pre-wrap',
217-
padding: '8px',
218-
borderBottom: '1px solid #ccc',
219-
fontFamily: rowIndex === 0 && columnIndex === 0 ? 'monospace' : 'inherit',
220-
fontSize: rowIndex === 0 && columnIndex === 0 ? '12px' : 'inherit',
221-
}}
222-
{...props}
223-
>
224-
{content}
225-
</div>
226-
);
227-
};
228-
229-
return <Grid {...args} cell={VariableCell} columnWidth={() => 300} />;
230-
},
231-
};

‎src/components/Grid/Grid.tsx

+14-40
Original file line numberDiff line numberDiff line change
@@ -213,33 +213,27 @@ export const Grid = forwardRef<HTMLDivElement, GridProps>(
213213
onCopyCallback,
214214
]);
215215

216-
217216
const rowHeightsRef = useRef(new Map());
218-
219-
const getRowHeight = useCallback((index: number) => {
220-
// console.log(`GetRowHeight: from ref: ${rowHeightsRef.current.get(index)}`)
221-
if (rowHeightsRef.current.get(index)) {
222-
// console.log(`Returning ref: ${rowHeightsRef.current.get(index)}`)
223-
return rowHeightsRef.current.get(index) + 33;
224-
}
225-
// console.log("Returning rowHeight")
226-
return rowHeight;
227-
}, [rowHeight]);
217+
218+
const getRowHeight = useCallback(
219+
(index: number) => {
220+
if (rowAutoHeight && rowHeightsRef.current.get(index)) {
221+
return rowHeightsRef.current.get(index) + 33;
222+
}
223+
return rowHeight;
224+
},
225+
[rowHeight, rowAutoHeight]
226+
);
228227

229228
const updateRowHeight = useCallback((rowIndex: number, height: number) => {
230-
console.log("Updating row height!");
231229
const prevHeight = rowHeightsRef.current.get(rowIndex) || 0;
232-
console.log("Previous row height", prevHeight);
233230
if (height > prevHeight) {
234231
rowHeightsRef.current.set(rowIndex, height);
235-
console.log("Current height > prevheight", rowHeightsRef);
236232
if (gridRef.current) {
237233
gridRef.current.resetAfterRowIndex(rowIndex);
238-
console.log("Reset the grid");
239234
}
240235
}
241236
}, []);
242-
243237

244238
const customOnCopy: () => Promise<void> = useMemo(() => {
245239
const result = async () => {
@@ -436,7 +430,7 @@ export const Grid = forwardRef<HTMLDivElement, GridProps>(
436430
rowStart,
437431
rowAutoHeight,
438432
updateRowHeight,
439-
getRowHeight
433+
getRowHeight,
440434
};
441435

442436
const InnerElementType = forwardRef<HTMLDivElement, InnerElementTypeTypes>(
@@ -818,32 +812,13 @@ export const Grid = forwardRef<HTMLDivElement, GridProps>(
818812
);
819813
};
820814

821-
// Handles the case when rowCount changes, expanding the cell height
822-
// to fit content if there is only one row.
815+
// Handles the case when rowCount/columnCount changes, rerenders styles
823816
useEffect(() => {
824817
if (gridRef.current) {
825-
gridRef.current.resetAfterRowIndex(1);
826-
// console.log("Inner: ", innerCellRef.current?.scrollHeight)
827-
// console.log("Bounding: ", innerCellRef.current?.scrollHeight)
828-
}
829-
}, [rowCount]);
830-
831-
832-
const innerCellRef = useRef<HTMLDivElement>(null);
833-
834-
useEffect(() => {
835-
// console.log("Inner: ", innerCellRef.current?.getBoundingClientRect().height)
836-
if (innerCellRef.current) {
837-
// gridRef.current.resetAfterRowIndex(0);
838-
// console.log("Is current")
818+
gridRef.current.resetAfterRowIndex(0);
839819
}
840-
}, [onItemsRendered]);
820+
}, [rowCount, columnCount]);
841821

842-
843-
844-
845-
// console.log("Inner ref? ", innerCellRef.current?.scrollHeight)
846-
// console.log("Bounding client height? ", innerCellRef.current?.getBoundingClientRect().height)
847822
return (
848823
<ContextMenu
849824
modal={false}
@@ -894,7 +869,6 @@ export const Grid = forwardRef<HTMLDivElement, GridProps>(
894869
outerRef={outerRef}
895870
outerElementType={OuterElementType}
896871
onItemsRendered={onItemsRendered}
897-
innerRef={innerCellRef}
898872
{...props}
899873
>
900874
{CellWithWidth}

‎src/components/Grid/Header.tsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,7 @@ const RowColumnContainer = styled(HeaderCellContainer)<{
9999
const RowColumn = styled(StyledCell)`
100100
width: 100%;
101101
text-align: right;
102+
overflow: hidden;
102103
`;
103104

104105
const Column = ({
@@ -130,7 +131,7 @@ const Column = ({
130131
(leftSelectionType === "selectDirect" || isSelected) &&
131132
leftSelectionType !== selectionType;
132133

133-
const columnWidth = getColumnWidth(columnIndex)
134+
const columnWidth = getColumnWidth(columnIndex);
134135
return (
135136
<HeaderCellContainer
136137
$width={columnWidth}
@@ -152,6 +153,7 @@ const Column = ({
152153
$isLastRow={false}
153154
$isFirstRow
154155
$height={height}
156+
$overflow="hidden"
155157
data-grid-row={-1}
156158
data-grid-column={columnIndex}
157159
data-selected={isSelected}
@@ -186,7 +188,7 @@ const Header = ({
186188
getColumnHorizontalPosition,
187189
getResizerPosition,
188190
showBorder,
189-
resizingState
191+
resizingState,
190192
}: HeaderProps) => {
191193
const selectedAllType = getSelectionType({
192194
type: "all",

‎src/components/Grid/RowNumberColumn.tsx

+6-3
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,14 @@ const RowNumberColumnContainer = styled.div<{
55
$height: number;
66
$width: number;
77
$scrolledHorizontal: boolean;
8+
$rowAutoHeight?: boolean;
89
}>`
910
position: sticky;
1011
left: 0;
1112
${({ $height, $width }) => `
1213
top: ${$height}px;
1314
width: ${$width}px;
14-
height: 100%;
15+
height: 100%
1516
`}
1617
1718
${({ $scrolledHorizontal, theme }) =>
@@ -68,7 +69,7 @@ const RowNumber = ({
6869
isFirstRow,
6970
showBorder,
7071
rowStart,
71-
rowAutoHeight
72+
rowAutoHeight,
7273
}: RowNumberProps) => {
7374
const currentRowIndex = rowIndex + rowStart;
7475
const selectionType = getSelectionType({
@@ -102,6 +103,7 @@ const RowNumber = ({
102103
$isSelectedLeft={isSelected}
103104
$isSelectedTop={isSelectedTop}
104105
$rowAutoHeight={rowAutoHeight}
106+
$overflow="hidden"
105107
data-selected={isSelected}
106108
data-grid-row={currentRowIndex}
107109
data-grid-column={-1}
@@ -127,13 +129,14 @@ const RowNumberColumn = ({
127129
scrolledHorizontal,
128130
rowStart = 0,
129131
showBorder,
130-
rowAutoHeight
132+
rowAutoHeight,
131133
}: RowNumberColumnProps) => {
132134
return (
133135
<RowNumberColumnContainer
134136
$height={headerHeight}
135137
$width={rowWidth}
136138
$scrolledHorizontal={scrolledHorizontal}
139+
$rowAutoHeight={rowAutoHeight}
137140
>
138141
{Array.from({ length: maxRow - minRow + 1 }, (_, index) => minRow + index).map(
139142
rowIndex => (

‎src/components/Grid/StyledCell.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ export const StyledCell = styled.div<{
1414
$type?: "body" | "header";
1515
$showBorder: boolean;
1616
$rowAutoHeight?: boolean;
17+
$overflow?: string;
1718
}>`
1819
display: block;
1920
text-align: left;
@@ -36,10 +37,11 @@ export const StyledCell = styled.div<{
3637
$type = "body",
3738
$showBorder,
3839
$rowAutoHeight,
40+
$overflow,
3941
}) => `
4042
height: ${$rowAutoHeight ? "100%" : `${$height}px`};
4143
min-height: ${$rowAutoHeight ? "auto" : ""};
42-
overflow-y: ${$rowAutoHeight ? "auto" : "hidden"};
44+
overflow-y: ${$overflow ? $overflow : "auto"};
4345
background: ${theme.click.grid[$type].cell.color.background[$selectionType]};
4446
color: ${
4547
$type === "header"

0 commit comments

Comments
 (0)