From d1d430595d2447e4fe9200214df06322b03ccef2 Mon Sep 17 00:00:00 2001 From: Uladzislau Lasitsa Date: Thu, 16 Sep 2021 17:48:25 +0300 Subject: [PATCH] make visibility property depends on calculating cell height --- .../datagrid/__mocks__/row_height_utils.ts | 1 + src/components/datagrid/body/data_grid_body.tsx | 12 +++++++++++- src/components/datagrid/body/data_grid_cell.tsx | 2 ++ src/components/datagrid/row_height_utils.ts | 10 +++++++++- 4 files changed, 23 insertions(+), 2 deletions(-) diff --git a/src/components/datagrid/__mocks__/row_height_utils.ts b/src/components/datagrid/__mocks__/row_height_utils.ts index dac8430c3ab..85483e3bbe2 100644 --- a/src/components/datagrid/__mocks__/row_height_utils.ts +++ b/src/components/datagrid/__mocks__/row_height_utils.ts @@ -25,6 +25,7 @@ export const mockRowHeightUtils = ({ getRowHeight: jest.fn(() => 32), getFont: jest.fn(() => null), getComputedCellStyles: jest.fn(() => {}), + isGridReseted: jest.fn(() => true), compareHeights: jest.fn( (currentRowHeight: number, cachedRowHeight: number) => currentRowHeight === cachedRowHeight diff --git a/src/components/datagrid/body/data_grid_body.tsx b/src/components/datagrid/body/data_grid_body.tsx index bf60001e75e..cd56b1d8205 100644 --- a/src/components/datagrid/body/data_grid_body.tsx +++ b/src/components/datagrid/body/data_grid_body.tsx @@ -119,6 +119,11 @@ export const Cell: FunctionComponent = ({ [`euiDataGridRowCell--${textTransform}`]: textTransform, }); + const isHideCell = + rowHeightsOptions && + rowHeightUtils?.isAutoHeight(rowIndex, rowHeightsOptions) && + !rowHeightUtils?.isGridReseted(); + if (isLeadingControlColumn) { const leadingColumn = leadingControlColumns[columnIndex]; const { id, rowCellRender } = leadingColumn; @@ -142,6 +147,7 @@ export const Cell: FunctionComponent = ({ style={{ ...style, top: `${parseFloat(style.top as string) + headerRowHeight}px`, + visibility: isHideCell ? 'hidden' : 'visible', }} /> ); @@ -169,6 +175,7 @@ export const Cell: FunctionComponent = ({ style={{ ...style, top: `${parseFloat(style.top as string) + headerRowHeight}px`, + visibility: isHideCell ? 'hidden' : 'visible', }} /> ); @@ -206,6 +213,7 @@ export const Cell: FunctionComponent = ({ style={{ ...style, top: `${parseFloat(style.top as string) + headerRowHeight}px`, + visibility: isHideCell ? 'hidden' : 'visible', }} /> ); @@ -526,6 +534,8 @@ export const EuiDataGridBody: FunctionComponent = ( const [minRowHeight, setRowHeight] = useState(INITIAL_ROW_HEIGHT); + const computedCellStyles = rowHeightUtils.getComputedCellStyles(); + // it depends on getComputedCellStyles because we use cell styles for calculating defaultHeight const defaultHeight = useMemo( () => @@ -539,7 +549,7 @@ export const EuiDataGridBody: FunctionComponent = ( rowHeightsOptions, minRowHeight, rowHeightUtils, - rowHeightUtils.getComputedCellStyles(), + computedCellStyles, ] ); diff --git a/src/components/datagrid/body/data_grid_cell.tsx b/src/components/datagrid/body/data_grid_cell.tsx index f5eca7ff69e..783f5ad365d 100644 --- a/src/components/datagrid/body/data_grid_cell.tsx +++ b/src/components/datagrid/body/data_grid_cell.tsx @@ -275,6 +275,8 @@ export class EuiDataGridCell extends Component< if (nextProps.style.left !== this.props.style.left) return true; if (nextProps.style.height !== this.props.style.height) return true; if (nextProps.style.width !== this.props.style.width) return true; + if (nextProps.style.visibility !== this.props.style.visibility) + return true; } if (nextState.cellProps !== this.state.cellProps) return true; diff --git a/src/components/datagrid/row_height_utils.ts b/src/components/datagrid/row_height_utils.ts index e6ef506b54a..36f9684ea49 100644 --- a/src/components/datagrid/row_height_utils.ts +++ b/src/components/datagrid/row_height_utils.ts @@ -53,6 +53,7 @@ export class RowHeightUtils { private timerId: any; private grid?: Grid; private lastUpdatedRow: number = Infinity; + private gridReseted: boolean = false; setRowHeight( rowIndex: number, @@ -62,12 +63,13 @@ export class RowHeightUtils { ) { const rowHeights = this.heightsCache.get(rowIndex) || {}; const adaptedHeight = - height + this.styles.paddingTop + this.styles.paddingBottom; + Math.ceil(height + this.styles.paddingTop + this.styles.paddingBottom); if (rowHeights[colIndex] === adaptedHeight) { return; } + this.gridReseted = false; rowHeights[colIndex] = adaptedHeight; this.heightsCache.set(rowIndex, rowHeights); // save the first row index of batch, reassigning it only @@ -93,10 +95,16 @@ export class RowHeightUtils { } resetGrid() { + this.gridReseted = true; + console.log('resetGrid') this.grid?.resetAfterRowIndex(this.lastUpdatedRow); this.lastUpdatedRow = Infinity; } + isGridReseted() { + return this.gridReseted; + } + setGrid(grid: Grid) { this.grid = grid; }