Adds rowAutoHeight prop and removes isOnlyRow prop.

ClickHouse · Feb 4, 2025 · acc1208 · acc1208
1 parent e9d3f52
commit acc1208
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 131 deletions.
diff --git a/src/components/Grid/Cell.tsx b/src/components/Grid/Cell.tsx
@@ -19,6 +19,7 @@ export const Cell = memo(
       showHeader,
       rowHeight,
       rowStart,
+      rowAutoHeight,
     } = data;
 
     const currentRowIndex = rowIndex + rowStart;
@@ -78,7 +79,7 @@ export const Cell = memo(
           data-grid-row={currentRowIndex}
           data-grid-column={columnIndex}
           $showBorder
-          $isOnlyRow={rowCount === 1}
+          $rowAutoHeight={rowAutoHeight}
           {...props}
         />
       </div>

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}
@@ -20,7 +27,6 @@ interface Props {
     row: number;
     column: number;
   };
-  autoheight?: boolean;
 }
 const Grid = ({ columnCount, rowCount, focus: focusProp, ...props }: Props) => {
   const [focus, setFocus] = useState(focusProp);
@@ -72,7 +78,6 @@ const Grid = ({ columnCount, rowCount, focus: focusProp, ...props }: Props) => {
           });
         }}
         getMenuOptions={getMenuOptions}
-        autoheight={props.autoheight}
         {...props}
       />
     </div>
@@ -123,109 +128,3 @@ export const Playground = {
     },
   },
 };
-
-export const AutoHeightWithVariableData = {
-  args: {
-    rowCount: 10,
-    columnCount: 5,
-    autoheight: true,
-    rowStart: 0,
-  },
-  parameters: {
-    docs: {
-      source: {
-        transform: (_: string, story: { args: Props; [x: string]: unknown }) => {
-          const { rowCount, columnCount, autoheight, ...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}
-  autoheight={${autoheight}}
-${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
@@ -406,6 +406,7 @@ export const Grid = forwardRef<HTMLDivElement, GridProps>(
       headerHeight,
       rowNumberWidth,
       rowStart,
+      rowAutoHeight,
     };
 
     const InnerElementType = forwardRef<HTMLDivElement, InnerElementTypeTypes>(
@@ -436,6 +437,7 @@ export const Grid = forwardRef<HTMLDivElement, GridProps>(
                 showHeader={showHeader}
                 rowStart={rowStart}
                 showBorder={showBorder}
+                rowAutoHeight={rowAutoHeight}
               />
             )}
 
@@ -778,7 +780,6 @@ export const Grid = forwardRef<HTMLDivElement, GridProps>(
     }, [rowStart, onItemsRendered]);
 
     const CellWithWidth = (args: GridChildComponentProps<ItemDataType>): JSX.Element => {
-      console.log("Cell with width ", rowAutoHeight)
       const width = columnWidth(args.columnIndex);
       return (
         <Cell
@@ -796,17 +797,6 @@ export const Grid = forwardRef<HTMLDivElement, GridProps>(
       }
     }, [rowCount]);
 
-    const getRowHeight = useCallback(
-      (index: number, parentHeight: number): number => {
-        if (rowCount === 1 && index === 0) {
-          return parentHeight - rowHeight * 2;
-        }
-
-        return rowHeight;
-      },
-      [rowCount, rowHeight]
-    );
-
     return (
       <ContextMenu
         modal={false}
@@ -841,7 +831,7 @@ export const Grid = forwardRef<HTMLDivElement, GridProps>(
                 height={height}
                 width={width}
                 columnCount={columnCount}
-                rowHeight={index => getRowHeight(index, height)}
+                rowHeight={() => rowHeight}
                 useIsScrolling={useIsScrolling}
                 innerElementType={InnerElementType}
                 itemData={data}

diff --git a/src/components/Grid/RowNumberColumn.tsx b/src/components/Grid/RowNumberColumn.tsx
@@ -47,6 +47,7 @@ interface RowNumberColumnProps {
   scrolledHorizontal: boolean;
   rowStart: number;
   showBorder: boolean;
+  rowAutoHeight?: boolean;
 }
 interface RowNumberProps
   extends Pick<
@@ -56,6 +57,7 @@ interface RowNumberProps
   rowIndex: number;
   isLastRow: boolean;
   isFirstRow: boolean;
+  rowAutoHeight?: boolean;
 }
 const RowNumber = ({
   rowIndex,
@@ -65,6 +67,7 @@ const RowNumber = ({
   isFirstRow,
   showBorder,
   rowStart,
+  rowAutoHeight
 }: RowNumberProps) => {
   const currentRowIndex = rowIndex + rowStart;
   const selectionType = getSelectionType({
@@ -96,6 +99,7 @@ const RowNumber = ({
         $isLastRow={isLastRow}
         $isSelectedLeft={isSelected}
         $isSelectedTop={isSelectedTop}
+        $rowAutoHeight={rowAutoHeight}
         data-selected={isSelected}
         data-grid-row={currentRowIndex}
         data-grid-column={-1}
@@ -121,6 +125,7 @@ const RowNumberColumn = ({
   scrolledHorizontal,
   rowStart = 0,
   showBorder,
+  rowAutoHeight
 }: RowNumberColumnProps) => {
   return (
     <RowNumberColumnContainer
@@ -139,6 +144,7 @@ const RowNumberColumn = ({
             isFirstRow={!showHeader && rowIndex === 0}
             showBorder={showBorder}
             rowStart={rowStart}
+            rowAutoHeight={rowAutoHeight}
           />
         )
       )}

diff --git a/src/components/Grid/StyledCell.tsx b/src/components/Grid/StyledCell.tsx
@@ -13,7 +13,7 @@ export const StyledCell = styled.div<{
   $height: number;
   $type?: "body" | "header";
   $showBorder: boolean;
-  $isOnlyRow?: boolean;
+  $rowAutoHeight?: boolean;
 }>`
   display: block;
   text-align: left;
@@ -35,10 +35,10 @@ export const StyledCell = styled.div<{
     $height,
     $type = "body",
     $showBorder,
-    $isOnlyRow,
+    $rowAutoHeight,
   }) => `
-    height: ${$isOnlyRow ? "auto" : `${$height}px`};
-    overflow-y: ${$isOnlyRow ? "auto" : "hidden"};
+    height: ${$rowAutoHeight ? "auto" : `${$height}px`};
+    overflow-y: ${$rowAutoHeight ? "auto" : "hidden"};
     background: ${theme.click.grid[$type].cell.color.background[$selectionType]};
     color: ${
       $type === "header"
@@ -89,7 +89,7 @@ export const StyledCell = styled.div<{
     `
         : "border-right: none;"
     }
-    ${$isOnlyRow && "border: none;"}
+    ${$rowAutoHeight && "border: none;"}
   `}
   ${({
     theme,
@@ -99,12 +99,12 @@ export const StyledCell = styled.div<{
     $type = "body",
     $isSelectedTop,
     $isSelectedLeft,
-    $isOnlyRow,
+    $rowAutoHeight,
   }) =>
     $isSelectedTop ||
     $isSelectedLeft ||
     ($selectionType === "selectDirect" && ($isLastRow || $isLastColumn)) ||
-    $isOnlyRow
+    $rowAutoHeight
       ? `
           &::before {
             content: "";
@@ -133,7 +133,7 @@ export const StyledCell = styled.div<{
                 ? `border-right: 1px solid ${theme.click.grid[$type].cell.color.stroke.selectDirect};`
                 : ""
             }
-            ${$isOnlyRow && "border: none;"}
+            ${$rowAutoHeight && "border: none;"}
           }
         `
       : ""};

diff --git a/src/components/Grid/types.ts b/src/components/Grid/types.ts
@@ -157,6 +157,7 @@ export interface ItemDataType {
   headerHeight: number;
   rowNumberWidth: number;
   rowStart: number;
+  rowAutoHeight?: boolean;
 }
 
 export interface GridContextMenuItemProps extends Omit<ContextMenuItemProps, "children"> {