From acc1208761324376ee6d8512b2341f658ac4ef2d Mon Sep 17 00:00:00 2001 From: Nataly Merezhuk Date: Tue, 4 Feb 2025 18:17:16 -0500 Subject: [PATCH] Adds rowAutoHeight prop and removes isOnlyRow prop. --- src/components/Grid/Cell.tsx | 3 +- src/components/Grid/Grid.stories.tsx | 117 ++---------------------- src/components/Grid/Grid.tsx | 16 +--- src/components/Grid/RowNumberColumn.tsx | 6 ++ src/components/Grid/StyledCell.tsx | 16 ++-- src/components/Grid/types.ts | 1 + 6 files changed, 28 insertions(+), 131 deletions(-) diff --git a/src/components/Grid/Cell.tsx b/src/components/Grid/Cell.tsx index 4f036cc1..8a4e4f28 100644 --- 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} /> diff --git a/src/components/Grid/Grid.stories.tsx b/src/components/Grid/Grid.stories.tsx index e5b90a51..d4552e95 100644 --- 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 (
{ const [focus, setFocus] = useState(focusProp); @@ -72,7 +78,6 @@ const Grid = ({ columnCount, rowCount, focus: focusProp, ...props }: Props) => { }); }} getMenuOptions={getMenuOptions} - autoheight={props.autoheight} {...props} />
@@ -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 ( -
- {content} -
- ); -}; - - 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 ( -
- {content} -
- ); - }; - - return 300} />; - }, -}; diff --git a/src/components/Grid/Grid.tsx b/src/components/Grid/Grid.tsx index 8b64de76..82787355 100644 --- a/src/components/Grid/Grid.tsx +++ b/src/components/Grid/Grid.tsx @@ -406,6 +406,7 @@ export const Grid = forwardRef( headerHeight, rowNumberWidth, rowStart, + rowAutoHeight, }; const InnerElementType = forwardRef( @@ -436,6 +437,7 @@ export const Grid = forwardRef( showHeader={showHeader} rowStart={rowStart} showBorder={showBorder} + rowAutoHeight={rowAutoHeight} /> )} @@ -778,7 +780,6 @@ export const Grid = forwardRef( }, [rowStart, onItemsRendered]); const CellWithWidth = (args: GridChildComponentProps): JSX.Element => { - console.log("Cell with width ", rowAutoHeight) const width = columnWidth(args.columnIndex); return ( ( } }, [rowCount]); - const getRowHeight = useCallback( - (index: number, parentHeight: number): number => { - if (rowCount === 1 && index === 0) { - return parentHeight - rowHeight * 2; - } - - return rowHeight; - }, - [rowCount, rowHeight] - ); - return ( ( 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 index feed1bc9..e42375a6 100644 --- 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 ( ) )} diff --git a/src/components/Grid/StyledCell.tsx b/src/components/Grid/StyledCell.tsx index 529f3a7c..3c9cd166 100644 --- 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 index e972ae26..f0c63de4 100644 --- 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 {