make visibility property depends on calculating cell height

VladLasitsa · Sep 16, 2021 · d1d4305 · d1d4305
1 parent 77bcbb2
commit d1d4305
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 2 deletions.
diff --git 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
@@ -119,6 +119,11 @@ export const Cell: FunctionComponent<GridChildComponentProps> = ({
     [`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<GridChildComponentProps> = ({
         style={{
           ...style,
           top: `${parseFloat(style.top as string) + headerRowHeight}px`,
+          visibility: isHideCell ? 'hidden' : 'visible',
         }}
       />
     );
@@ -169,6 +175,7 @@ export const Cell: FunctionComponent<GridChildComponentProps> = ({
         style={{
           ...style,
           top: `${parseFloat(style.top as string) + headerRowHeight}px`,
+          visibility: isHideCell ? 'hidden' : 'visible',
         }}
       />
     );
@@ -206,6 +213,7 @@ export const Cell: FunctionComponent<GridChildComponentProps> = ({
         style={{
           ...style,
           top: `${parseFloat(style.top as string) + headerRowHeight}px`,
+          visibility: isHideCell ? 'hidden' : 'visible',
         }}
       />
     );
@@ -526,6 +534,8 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
 
   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<EuiDataGridBodyProps> = (
       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
@@ -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
@@ -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;
   }