Revert PR #537

Author: hoorayimhelping

src/components/Grid/Cell.tsx

@@ -1,14 +1,20 @@
-import { memo, useEffect, useRef } from "react";
+import { memo } from "react";
 import { GridChildComponentProps, areEqual } from "react-window";
 import { ItemDataType } from "./types";
 import { StyledCell } from "./StyledCell";
 
 type CellProps = GridChildComponentProps<ItemDataType> & {
   width: number;
-};
+}
 
 export const Cell = memo(
-  ({ data, rowIndex, columnIndex, style, ...props }: CellProps) => {
+  ({
+    data,
+    rowIndex,
+    columnIndex,
+    style,
+    ...props
+  }: CellProps) => {
     const {
       cell: CellData,
       getSelectionType,
@@ -19,8 +25,6 @@ export const Cell = memo(
       showHeader,
       rowHeight,
       rowStart,
-      rowAutoHeight,
-      updateRowHeight,
     } = data;
 
     const currentRowIndex = rowIndex + rowStart;
@@ -56,29 +60,11 @@ export const Cell = memo(
     const selectionBorderLeft = rightOfSelectionBorder || rightOfFocus || isFocused;
     const selectionBorderTop = belowSelectionBorder || belowFocus || isFocused;
 
-    const cellRef = useRef<HTMLDivElement>(null);
-
-    useEffect(() => {
-      if (!rowAutoHeight) {
-        return;
-      }
-      if (cellRef.current) {
-        const height = cellRef.current.getBoundingClientRect().height;
-        updateRowHeight(rowIndex, height);
-      }
-    }, [updateRowHeight, rowIndex, rowAutoHeight]);
-
-    const styleWithHeight = {
-      ...style,
-      height: "auto",
-    };
-
     return (
       <div
-        style={styleWithHeight}
+        style={style}
         data-row={currentRowIndex}
         data-column={columnIndex}
-        ref={cellRef}
       >
         <StyledCell
           as={CellData}
@@ -99,7 +85,6 @@ export const Cell = memo(
           data-grid-row={currentRowIndex}
           data-grid-column={columnIndex}
           $showBorder
-          $rowAutoHeight={rowAutoHeight}
           {...props}
         />
       </div>

src/components/Grid/Grid.stories.tsx

@@ -2,14 +2,7 @@ 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}
@@ -27,7 +20,6 @@ interface Props {
     row: number;
     column: number;
   };
-  rowAutoHeight?: boolean;
 }
 const Grid = ({ columnCount, rowCount, focus: focusProp, ...props }: Props) => {
   const [focus, setFocus] = useState(focusProp);
@@ -79,7 +71,6 @@ const Grid = ({ columnCount, rowCount, focus: focusProp, ...props }: Props) => {
           });
         }}
         getMenuOptions={getMenuOptions}
-        rowAutoHeight={props.rowAutoHeight}
         {...props}
       />
     </div>

src/components/Grid/Grid.test.tsx

@@ -1,32 +1,16 @@
-import { CellProps, Grid, GridProps } from "@/components";
-import { renderCUI } from "@/utils/test-utils";
-import { SelectionFocus } from "./types";
-import { ReactNode } from "react";
+import {CellProps, Grid, GridProps} from "@/components";
+import {renderCUI} from "@/utils/test-utils";
+import {SelectionFocus} from "./types";
+import {ReactNode} from "react";
 
 const Cell: CellProps = ({ type, rowIndex, columnIndex, isScrolling, ...props }) => {
-  let content = `${rowIndex} ${columnIndex} - ${type}`;
-
-  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}
       {...props}
       data-testid={`${type}-${rowIndex ?? "x"}-${columnIndex ?? "x"}`}
     >
-      {content}
+      {rowIndex} {columnIndex} - {type}
     </div>
   );
 };
@@ -47,7 +31,6 @@ interface Props
   focus?: SelectionFocus;
   onFocusChange?: (rowIndex: number, columnIndex: number) => void;
   onColumnResize?: () => void;
-  rowAutoHeight?: boolean;
 }
 type AutoSizerModule = typeof import("react-virtualized-auto-sizer");
 
@@ -77,7 +60,6 @@ describe("Grid", () => {
     onColumnResize,
     focus,
     onFocusChange,
-    rowAutoHeight,
     ...props
   }: Props) =>
     renderCUI(
@@ -90,7 +72,6 @@ describe("Grid", () => {
         onColumnResize={onColumnResize ?? onColumnResizeTestFn}
         onFocusChange={onFocusChange ?? onFocusChangeTestFn}
         getMenuOptions={getMenuOptions}
-        rowAutoHeight={rowAutoHeight}
         {...props}
       />
     );
@@ -118,31 +99,4 @@ describe("Grid", () => {
     cell && expect(cell.dataset.selected).toEqual("true");
     cell && expect(cell.dataset.focused).toEqual("true");
   });
-
-  it("should set row height to default (33px) when rowAutoHeight is false", async () => {
-    const { getByTestId } = renderGrid({
-      rowCount: 10,
-      columnCount: 10,
-      rowAutoHeight: false,
-    });
-
-    const cell = getByTestId("row-cell-0-0");
-
-    const computedHeight = window.getComputedStyle(cell).height;
-    const heightValue = parseFloat(computedHeight);
-    expect(heightValue).toBe(33);
-  });
-
-  it("should expand row height to 100% when rowAutoHeight is true", async () => {
-    const { getByTestId } = renderGrid({
-      rowCount: 1,
-      columnCount: 1,
-      rowAutoHeight: true,
-    });
-
-    const cell = getByTestId("row-cell-0-0");
-
-    const computedHeight = window.getComputedStyle(cell).height;
-    expect(computedHeight).toBe("100%");
-  });
 });

src/components/Grid/Grid.tsx

@@ -149,7 +149,6 @@ export const Grid = forwardRef<HTMLDivElement, GridProps>(
       onContextMenu: onContextMenuProp,
       forwardedGridRef,
       onItemsRendered: onItemsRenderedProp,
-      rowAutoHeight,
       ...props
     },
     forwardedRef
@@ -213,34 +212,6 @@ export const Grid = forwardRef<HTMLDivElement, GridProps>(
       onCopyCallback,
     ]);
 
-    const rowHeightsRef = useRef(new Map());
-
-    const getRowHeight = useCallback(
-      (index: number) => {
-        if (rowAutoHeight && rowHeightsRef.current.get(index)) {
-          return rowHeightsRef.current.get(index) + rowHeight;
-        }
-        return rowHeight;
-      },
-      [rowHeight, rowAutoHeight]
-    );
-
-    const updateRowHeight = useCallback(
-      (rowIndex: number, height: number) => {
-        if (!rowAutoHeight) {
-          return;
-        }
-        const prevHeight = rowHeightsRef.current.get(rowIndex) ?? 0;
-        if (height > prevHeight) {
-          rowHeightsRef.current.set(rowIndex, height);
-          if (gridRef.current) {
-            gridRef.current.resetAfterRowIndex(rowIndex);
-          }
-        }
-      },
-      [rowAutoHeight]
-    );
-
     const customOnCopy: () => Promise<void> = useMemo(() => {
       const result = async () => {
         if (onCopyProp) {
@@ -434,9 +405,6 @@ export const Grid = forwardRef<HTMLDivElement, GridProps>(
       headerHeight,
       rowNumberWidth,
       rowStart,
-      rowAutoHeight,
-      updateRowHeight,
-      getRowHeight,
     };
 
     const InnerElementType = forwardRef<HTMLDivElement, InnerElementTypeTypes>(
@@ -467,7 +435,6 @@ export const Grid = forwardRef<HTMLDivElement, GridProps>(
                 showHeader={showHeader}
                 rowStart={rowStart}
                 showBorder={showBorder}
-                rowAutoHeight={rowAutoHeight}
               />
             )}
 
@@ -788,6 +755,7 @@ export const Grid = forwardRef<HTMLDivElement, GridProps>(
     const onItemsRendered = useCallback(
       (props: GridOnItemsRenderedProps) => {
         lastItemsRenderedProps.current = props;
+
         return onItemsRenderedProp?.({
           ...props,
           visibleRowStartIndex: props.visibleRowStartIndex + rowStart,
@@ -818,13 +786,6 @@ export const Grid = forwardRef<HTMLDivElement, GridProps>(
       );
     };
 
-    // Handles the case when rowCount/columnCount changes, rerenders styles
-    useEffect(() => {
-      if (gridRef.current) {
-        gridRef.current.resetAfterRowIndex(0);
-      }
-    }, [rowCount, columnCount]);
-
     return (
       <ContextMenu
         modal={false}
@@ -859,7 +820,7 @@ export const Grid = forwardRef<HTMLDivElement, GridProps>(
                 height={height}
                 width={width}
                 columnCount={columnCount}
-                rowHeight={getRowHeight}
+                rowHeight={() => rowHeight}
                 useIsScrolling={useIsScrolling}
                 innerElementType={InnerElementType}
                 itemData={data}

src/components/Grid/Header.tsx

@@ -99,7 +99,6 @@ const RowColumnContainer = styled(HeaderCellContainer)<{
 const RowColumn = styled(StyledCell)`
   width: 100%;
   text-align: right;
-  overflow: hidden;
 `;
 
 const Column = ({
@@ -131,7 +130,7 @@ const Column = ({
     (leftSelectionType === "selectDirect" || isSelected) &&
     leftSelectionType !== selectionType;
 
-  const columnWidth = getColumnWidth(columnIndex);
+  const columnWidth = getColumnWidth(columnIndex)
   return (
     <HeaderCellContainer
       $width={columnWidth}
@@ -187,7 +186,7 @@ const Header = ({
   getColumnHorizontalPosition,
   getResizerPosition,
   showBorder,
-  resizingState,
+  resizingState
 }: HeaderProps) => {
   const selectedAllType = getSelectionType({
     type: "all",