Corrects overflow, runs prettier.

ClickHouse · Feb 7, 2025 · ee47873 · ee47873
1 parent 3df9be8
commit ee47873
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 161 deletions.
diff --git a/src/components/Grid/Cell.tsx b/src/components/Grid/Cell.tsx
@@ -20,7 +20,6 @@ export const Cell = memo(
       rowHeight,
       rowStart,
       rowAutoHeight,
-      getRowHeight
     } = data;
 
     const currentRowIndex = rowIndex + rowStart;
@@ -58,23 +57,19 @@ export const Cell = memo(
 
     const cellRef = useRef<HTMLDivElement>(null);
 
-    const currentHeight = getRowHeight(rowIndex);
-    console.log(`Which is bigger, rowHeight ${rowHeight} or current height? ${currentHeight}`)
-
     useEffect(() => {
-      console.log("Current ref form cell: ", cellRef.current?.getBoundingClientRect().height)
       if (cellRef.current && data.updateRowHeight) {
         const height = cellRef.current.getBoundingClientRect().height;
         data.updateRowHeight(rowIndex, height);
       }
-    }, [cellRef, data.updateRowHeight, rowIndex]);
+    });
 
-    console.log("Row height is: ", rowHeight)
+    console.log("Row height is: ", rowHeight);
     return (
       <div
         style={{
           ...style,
-          height: "max-content",
+          height: "auto",
         }}
         data-row={currentRowIndex}
         data-column={columnIndex}

diff --git a/src/components/Grid/Grid.stories.tsx b/src/components/Grid/Grid.stories.tsx
@@ -2,7 +2,14 @@ import { useCallback, useEffect, useState } from "react";
 import { CellProps, GridContextMenuItemProps, SelectedRegion, SelectionFocus } from "..";
 import { Grid as CUIGrid } from "./Grid";
 
-const Cell: CellProps = ({ type, rowIndex, columnIndex, isScrolling, width, ...props }) => {
+const Cell: CellProps = ({
+  type,
+  rowIndex,
+  columnIndex,
+  isScrolling,
+  width,
+  ...props
+}) => {
   return (
     <div
       data-scrolling={isScrolling}
@@ -123,109 +130,3 @@ export const Playground = {
     },
   },
 };
-
-export const AutoHeightWithVariableData = {
-  args: {
-    rowCount: 10,
-    columnCount: 5,
-    rowAutoHeight: true,
-    rowStart: 0,
-  },
-  parameters: {
-    docs: {
-      source: {
-        transform: (_: string, story: { args: Props; [x: string]: unknown }) => {
-          const { rowCount, columnCount, rowAutoHeight, ...props } = story.args;
-          return `
-const VariableCell: CellProps = ({ type, rowIndex, columnIndex, isScrolling, width, ...props }) => {
-  let content = \`Row \${rowIndex}, Col \${columnIndex}\${rowIndex % 2 === 0 ? '\\nExtra line' : ''}\`;
-  
-  if (rowIndex === 0 && columnIndex === 0) {
-    content = \`CREATE TABLE random_user_events (
-    user_id UInt32,
-    event_time DateTime,
-    event_type Enum8('click' = 1, 'view' = 2, 'purchase' = 3),
-    item_id String,
-    price Decimal(10,2),
-    quantity UInt16
-) ENGINE = MergeTree()
-ORDER BY (user_id, event_time)
-PARTITION BY toYYYYMM(event_time)
-SETTINGS index_granularity = 8192;\`;
-  }
-
-  return (
-    <div
-      data-scrolling={isScrolling}
-      style={{
-        whiteSpace: 'pre-wrap',
-        padding: '8px',
-        borderBottom: '1px solid #ccc',
-        fontFamily: rowIndex === 0 && columnIndex === 0 ? 'monospace' : 'inherit',
-        fontSize: rowIndex === 0 && columnIndex === 0 ? '12px' : 'inherit',
-      }}
-      {...props}
-    >
-      {content}
-    </div>
-  );
-};
-
-<Grid
-  cell={VariableCell}
-  focus={{ row: 0, column: 0 }}
-  columnWidth={() => 300}
-  rowAutoHeight={${rowAutoHeight}}
-${Object.entries(props)
-  .flatMap(([key, value]) =>
-    typeof value === "boolean"
-      ? value
-        ? `  ${key}`
-        : []
-      : `  ${key}=${typeof value == "string" ? `"${value}"` : `{${value}}`}`
-  )
-  .join("\n")}
-/>
-`;
-        },
-      },
-    },
-  },
-  render: (args) => {
-    const VariableCell: CellProps = ({ type, rowIndex, columnIndex, isScrolling, width, ...props }) => {
-      let content = `Row ${rowIndex}, Col ${columnIndex}${rowIndex % 2 === 0 ? '\nExtra line' : ''}`;
-
-      if (rowIndex === 0 && columnIndex === 0) {
-        content = `CREATE TABLE random_user_events (
-    user_id UInt32,
-    event_time DateTime,
-    event_type Enum8('click' = 1, 'view' = 2, 'purchase' = 3),
-    item_id String,
-    price Decimal(10,2),
-    quantity UInt16
-) ENGINE = MergeTree()
-ORDER BY (user_id, event_time)
-PARTITION BY toYYYYMM(event_time)
-SETTINGS index_granularity = 8192;`;
-      }
-
-      return (
-        <div
-          data-scrolling={isScrolling}
-          style={{
-            whiteSpace: 'pre-wrap',
-            padding: '8px',
-            borderBottom: '1px solid #ccc',
-            fontFamily: rowIndex === 0 && columnIndex === 0 ? 'monospace' : 'inherit',
-            fontSize: rowIndex === 0 && columnIndex === 0 ? '12px' : 'inherit',
-          }}
-          {...props}
-        >
-          {content}
-        </div>
-      );
-    };
-
-    return <Grid {...args} cell={VariableCell} columnWidth={() => 300} />;
-  },
-};
diff --git a/src/components/Grid/Grid.tsx b/src/components/Grid/Grid.tsx
@@ -213,33 +213,27 @@ export const Grid = forwardRef<HTMLDivElement, GridProps>(
       onCopyCallback,
     ]);
 
-
     const rowHeightsRef = useRef(new Map());
-  
-    const getRowHeight = useCallback((index: number) => {
-      // console.log(`GetRowHeight: from ref: ${rowHeightsRef.current.get(index)}`)
-      if (rowHeightsRef.current.get(index)) {
-        // console.log(`Returning ref: ${rowHeightsRef.current.get(index)}`)
-        return rowHeightsRef.current.get(index) + 33;
-      }
-      // console.log("Returning rowHeight")
-      return rowHeight;
-    }, [rowHeight]);
+
+    const getRowHeight = useCallback(
+      (index: number) => {
+        if (rowAutoHeight && rowHeightsRef.current.get(index)) {
+          return rowHeightsRef.current.get(index) + 33;
+        }
+        return rowHeight;
+      },
+      [rowHeight, rowAutoHeight]
+    );
 
     const updateRowHeight = useCallback((rowIndex: number, height: number) => {
-      console.log("Updating row height!");
       const prevHeight = rowHeightsRef.current.get(rowIndex) || 0;
-      console.log("Previous row height", prevHeight);
       if (height > prevHeight) {
         rowHeightsRef.current.set(rowIndex, height);
-        console.log("Current height > prevheight", rowHeightsRef);
         if (gridRef.current) {
           gridRef.current.resetAfterRowIndex(rowIndex);
-          console.log("Reset the grid");
         }
       }
     }, []);
-
 
     const customOnCopy: () => Promise<void> = useMemo(() => {
       const result = async () => {
@@ -436,7 +430,7 @@ export const Grid = forwardRef<HTMLDivElement, GridProps>(
       rowStart,
       rowAutoHeight,
       updateRowHeight,
-      getRowHeight
+      getRowHeight,
     };
 
     const InnerElementType = forwardRef<HTMLDivElement, InnerElementTypeTypes>(
@@ -818,32 +812,13 @@ export const Grid = forwardRef<HTMLDivElement, GridProps>(
       );
     };
 
-    // Handles the case when rowCount changes, expanding the cell height
-    // to fit content if there is only one row.
+    // Handles the case when rowCount/columnCount changes, rerenders styles
     useEffect(() => {
       if (gridRef.current) {
-        gridRef.current.resetAfterRowIndex(1);
-        // console.log("Inner: ", innerCellRef.current?.scrollHeight)
-        // console.log("Bounding: ", innerCellRef.current?.scrollHeight)
-      }
-    }, [rowCount]);
-
-
-    const innerCellRef = useRef<HTMLDivElement>(null);
-
-    useEffect(() => {
-      // console.log("Inner: ", innerCellRef.current?.getBoundingClientRect().height)
-      if (innerCellRef.current) {
-        // gridRef.current.resetAfterRowIndex(0);
-        // console.log("Is current")
+        gridRef.current.resetAfterRowIndex(0);
       }
-    }, [onItemsRendered]);
+    }, [rowCount, columnCount]);
 
-
-
-
-    // console.log("Inner ref? ", innerCellRef.current?.scrollHeight)
-    // console.log("Bounding client height? ", innerCellRef.current?.getBoundingClientRect().height)
     return (
       <ContextMenu
         modal={false}
@@ -894,7 +869,6 @@ export const Grid = forwardRef<HTMLDivElement, GridProps>(
                 outerRef={outerRef}
                 outerElementType={OuterElementType}
                 onItemsRendered={onItemsRendered}
-                innerRef={innerCellRef}
                 {...props}
               >
                 {CellWithWidth}

diff --git a/src/components/Grid/Header.tsx b/src/components/Grid/Header.tsx
@@ -99,6 +99,7 @@ const RowColumnContainer = styled(HeaderCellContainer)<{
 const RowColumn = styled(StyledCell)`
   width: 100%;
   text-align: right;
+  overflow: hidden;
 `;
 
 const Column = ({
@@ -130,7 +131,7 @@ const Column = ({
     (leftSelectionType === "selectDirect" || isSelected) &&
     leftSelectionType !== selectionType;
 
-  const columnWidth = getColumnWidth(columnIndex)
+  const columnWidth = getColumnWidth(columnIndex);
   return (
     <HeaderCellContainer
       $width={columnWidth}
@@ -152,6 +153,7 @@ const Column = ({
         $isLastRow={false}
         $isFirstRow
         $height={height}
+        $overflow="hidden"
         data-grid-row={-1}
         data-grid-column={columnIndex}
         data-selected={isSelected}
@@ -186,7 +188,7 @@ const Header = ({
   getColumnHorizontalPosition,
   getResizerPosition,
   showBorder,
-  resizingState
+  resizingState,
 }: HeaderProps) => {
   const selectedAllType = getSelectionType({
     type: "all",

diff --git a/src/components/Grid/RowNumberColumn.tsx b/src/components/Grid/RowNumberColumn.tsx
@@ -5,13 +5,14 @@ const RowNumberColumnContainer = styled.div<{
   $height: number;
   $width: number;
   $scrolledHorizontal: boolean;
+  $rowAutoHeight?: boolean;
 }>`
   position: sticky;
   left: 0;
   ${({ $height, $width }) => `
     top: ${$height}px;
     width: ${$width}px;
-    height: 100%;
+    height: 100%
   `}
 
   ${({ $scrolledHorizontal, theme }) =>
@@ -68,7 +69,7 @@ const RowNumber = ({
   isFirstRow,
   showBorder,
   rowStart,
-  rowAutoHeight
+  rowAutoHeight,
 }: RowNumberProps) => {
   const currentRowIndex = rowIndex + rowStart;
   const selectionType = getSelectionType({
@@ -102,6 +103,7 @@ const RowNumber = ({
         $isSelectedLeft={isSelected}
         $isSelectedTop={isSelectedTop}
         $rowAutoHeight={rowAutoHeight}
+        $overflow="hidden"
         data-selected={isSelected}
         data-grid-row={currentRowIndex}
         data-grid-column={-1}
@@ -127,13 +129,14 @@ const RowNumberColumn = ({
   scrolledHorizontal,
   rowStart = 0,
   showBorder,
-  rowAutoHeight
+  rowAutoHeight,
 }: RowNumberColumnProps) => {
   return (
     <RowNumberColumnContainer
       $height={headerHeight}
       $width={rowWidth}
       $scrolledHorizontal={scrolledHorizontal}
+      $rowAutoHeight={rowAutoHeight}
     >
       {Array.from({ length: maxRow - minRow + 1 }, (_, index) => minRow + index).map(
         rowIndex => (

diff --git a/src/components/Grid/StyledCell.tsx b/src/components/Grid/StyledCell.tsx
@@ -14,6 +14,7 @@ export const StyledCell = styled.div<{
   $type?: "body" | "header";
   $showBorder: boolean;
   $rowAutoHeight?: boolean;
+  $overflow?: string;
 }>`
   display: block;
   text-align: left;
@@ -36,10 +37,11 @@ export const StyledCell = styled.div<{
     $type = "body",
     $showBorder,
     $rowAutoHeight,
+    $overflow,
   }) => `
     height: ${$rowAutoHeight ? "100%" : `${$height}px`};
     min-height: ${$rowAutoHeight ? "auto" : ""};
-    overflow-y: ${$rowAutoHeight ? "auto" : "hidden"};
+    overflow-y: ${$overflow ? $overflow : "auto"};
     background: ${theme.click.grid[$type].cell.color.background[$selectionType]};
     color: ${
       $type === "header"