From efc9082d9436350a8cd1d618b42cb9ee122d0633 Mon Sep 17 00:00:00 2001 From: Chandler Prall Date: Mon, 6 Dec 2021 12:47:01 -0700 Subject: [PATCH 1/8] Calculate the grid's height based on all known values --- .../datagrid/body/data_grid_body.tsx | 24 ++++++++++++++++++- 1 file changed, 23 insertions(+), 1 deletion(-) diff --git a/src/components/datagrid/body/data_grid_body.tsx b/src/components/datagrid/body/data_grid_body.tsx index 3d77da0a3c7..808ce14be27 100644 --- a/src/components/datagrid/body/data_grid_body.tsx +++ b/src/components/datagrid/body/data_grid_body.tsx @@ -573,11 +573,33 @@ export const EuiDataGridBody: FunctionComponent = ( } }, [getRowHeight]); + let knownHeight = 0; + let knownRowCount = 0; + for (let i = startRow; i < endRow; i++) { + const correctRowIndex = getCorrectRowIndex(i); + const rowHeightOption = rowHeightUtils.getRowHeightOption( + correctRowIndex, + rowHeightsOptions + ); + if (rowHeightOption) { + knownRowCount++; + knownHeight += rowHeightUtils.getCalculatedHeight( + rowHeightOption, + defaultHeight, // minRowHeight, + correctRowIndex, + rowHeightUtils.isRowHeightOverride(correctRowIndex, rowHeightsOptions) + ); + } + } + const rowCountToAffordFor = pagination ? pagination.pageSize : visibleRowIndices.length; const unconstrainedHeight = - defaultHeight * rowCountToAffordFor + headerRowHeight + footerRowHeight; + defaultHeight * (rowCountToAffordFor - knownRowCount) + + knownHeight + + headerRowHeight + + footerRowHeight; // unable to determine this until the container's size is known anyway const unconstrainedWidth = 0; From b94922195852492a4d9716c5a5db2c8c9c747e80 Mon Sep 17 00:00:00 2001 From: Chandler Prall Date: Mon, 6 Dec 2021 13:53:44 -0700 Subject: [PATCH 2/8] Add cypress test to verify switching from default single row height to auto fit will expand the grid --- src/components/datagrid/data_grid.spec.tsx | 29 ++++++++++++++++++++++ 1 file changed, 29 insertions(+) diff --git a/src/components/datagrid/data_grid.spec.tsx b/src/components/datagrid/data_grid.spec.tsx index 39a33169a5a..ac893cd1928 100644 --- a/src/components/datagrid/data_grid.spec.tsx +++ b/src/components/datagrid/data_grid.spec.tsx @@ -51,6 +51,35 @@ describe('EuiDataGrid', () => { .should('have.lengthOf', 0); }); }); + + describe('height calculation', async () => { + it('computes a new unconstrained height when switching to auto height', () => { + const renderCellValue: EuiDataGridProps['renderCellValue'] = ({ + rowIndex, + columnId, + }) => ( + <> + row {rowIndex} +
+ column {columnId} + + ); + + mount(); + + getGridData(); + cy.get('[data-test-subj=euiDataGridBody]') + .invoke('outerHeight') + .then((firstHeight) => { + cy.get('[data-test-subj=dataGridDisplaySelectorPopover]').click(); + cy.get('[data-text="Auto fit"]').click(); + + cy.get('[data-test-subj=euiDataGridBody]') + .invoke('outerHeight') + .should('be.greaterThan', firstHeight); + }); + }); + }); }); function getGridData() { From eee6d88cfa2308753e1bded70fa2d5caebd1d488 Mon Sep 17 00:00:00 2001 From: Chandler Prall Date: Mon, 6 Dec 2021 20:54:40 -0700 Subject: [PATCH 3/8] remove comment --- src/components/datagrid/body/data_grid_body.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/datagrid/body/data_grid_body.tsx b/src/components/datagrid/body/data_grid_body.tsx index 808ce14be27..634db8d0384 100644 --- a/src/components/datagrid/body/data_grid_body.tsx +++ b/src/components/datagrid/body/data_grid_body.tsx @@ -585,7 +585,7 @@ export const EuiDataGridBody: FunctionComponent = ( knownRowCount++; knownHeight += rowHeightUtils.getCalculatedHeight( rowHeightOption, - defaultHeight, // minRowHeight, + defaultHeight, correctRowIndex, rowHeightUtils.isRowHeightOverride(correctRowIndex, rowHeightsOptions) ); From 47a21131720d5b8f9911eae44e5624705ee488c5 Mon Sep 17 00:00:00 2001 From: Chandler Prall Date: Mon, 6 Dec 2021 21:28:26 -0700 Subject: [PATCH 4/8] Compute the grid's unconstrained height when a row's height changes --- .../datagrid/__mocks__/row_height_utils.ts | 2 ++ .../body/__snapshots__/data_grid_cell.test.tsx.snap | 4 ++++ src/components/datagrid/body/data_grid_body.tsx | 9 +++++++++ src/components/datagrid/row_height_utils.ts | 13 +++++++++++++ 4 files changed, 28 insertions(+) diff --git a/src/components/datagrid/__mocks__/row_height_utils.ts b/src/components/datagrid/__mocks__/row_height_utils.ts index dd8f6ffedef..21de4d6be7c 100644 --- a/src/components/datagrid/__mocks__/row_height_utils.ts +++ b/src/components/datagrid/__mocks__/row_height_utils.ts @@ -27,6 +27,8 @@ export const mockRowHeightUtils = ({ getLineCount: jest.fn(actual.getLineCount), calculateHeightForLineCount: jest.fn(() => 50), isRowHeightOverride: jest.fn(actual.isRowHeightOverride), + onUpdatedRowHeight: jest.fn(), + offUpdatedRowHeight: jest.fn(), } as unknown) as ActualRowHeightUtils; export const RowHeightUtils = jest.fn(() => mockRowHeightUtils); diff --git a/src/components/datagrid/body/__snapshots__/data_grid_cell.test.tsx.snap b/src/components/datagrid/body/__snapshots__/data_grid_cell.test.tsx.snap index 0f574bea5be..d4b927425ba 100644 --- a/src/components/datagrid/body/__snapshots__/data_grid_cell.test.tsx.snap +++ b/src/components/datagrid/body/__snapshots__/data_grid_cell.test.tsx.snap @@ -32,6 +32,8 @@ exports[`EuiDataGridCell renders 1`] = ` "getStylesForCell": [MockFunction], "isAutoHeight": [MockFunction], "isRowHeightOverride": [MockFunction], + "offUpdatedRowHeight": [MockFunction], + "onUpdatedRowHeight": [MockFunction], "pruneHiddenColumnHeights": [MockFunction], "setGrid": [MockFunction], "setRowHeight": [MockFunction], @@ -96,6 +98,8 @@ exports[`EuiDataGridCell renders 1`] = ` "getStylesForCell": [MockFunction], "isAutoHeight": [MockFunction], "isRowHeightOverride": [MockFunction], + "offUpdatedRowHeight": [MockFunction], + "onUpdatedRowHeight": [MockFunction], "pruneHiddenColumnHeights": [MockFunction], "setGrid": [MockFunction], "setRowHeight": [MockFunction], diff --git a/src/components/datagrid/body/data_grid_body.tsx b/src/components/datagrid/body/data_grid_body.tsx index 634db8d0384..dd0d7df6942 100644 --- a/src/components/datagrid/body/data_grid_body.tsx +++ b/src/components/datagrid/body/data_grid_body.tsx @@ -498,6 +498,15 @@ export const EuiDataGridBody: FunctionComponent = ( ] ); + const [, setRenderPass] = useState(0); + useEffect(() => { + const callback = () => { + setRenderPass((x) => x + 1); + }; + rowHeightUtils.onUpdatedRowHeight(callback); + return () => rowHeightUtils.offUpdatedRowHeight(callback); + }, [rowHeightUtils]); + const setGridRef = useCallback( (ref: Grid | null) => { gridRef.current = ref; diff --git a/src/components/datagrid/row_height_utils.ts b/src/components/datagrid/row_height_utils.ts index f3822d4aa0a..aa47a90d980 100644 --- a/src/components/datagrid/row_height_utils.ts +++ b/src/components/datagrid/row_height_utils.ts @@ -28,6 +28,8 @@ export const AUTO_HEIGHT = 'auto'; export const DEFAULT_ROW_HEIGHT = 34; export class RowHeightUtils { + onUpdateCallbacks: Array<() => void> = []; + getRowHeightOption( rowIndex: number, rowHeightsOptions?: EuiDataGridRowHeightsOptions @@ -173,6 +175,15 @@ export class RowHeightUtils { return Math.max(...rowHeightValues); } + onUpdatedRowHeight(callback: () => void) { + this.onUpdateCallbacks.push(callback); + } + + offUpdatedRowHeight(callback: () => void) { + const idx = this.onUpdateCallbacks.indexOf(callback); + if (idx !== -1) this.onUpdateCallbacks.splice(idx, 1); + } + setRowHeight( rowIndex: number, colId: string, @@ -192,6 +203,8 @@ export class RowHeightUtils { rowHeights.set(colId, adaptedHeight); this.heightsCache.set(rowIndex, rowHeights); this.resetRow(visibleRowIndex); + + this.onUpdateCallbacks.forEach((callback) => callback()); } pruneHiddenColumnHeights(visibleColumns: EuiDataGridColumn[]) { From cc8012080cc38e44ee4854b8eb76bb381d7f85f0 Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Tue, 7 Dec 2021 09:22:44 -0800 Subject: [PATCH 5/8] Simplify setRenderPass logic --- .../datagrid/__mocks__/row_height_utils.ts | 3 +-- .../data_grid_cell.test.tsx.snap | 6 ++---- .../datagrid/body/data_grid_body.tsx | 7 ++----- .../datagrid/row_height_utils.test.ts | 7 +++++++ src/components/datagrid/row_height_utils.ts | 19 ++++++------------- 5 files changed, 18 insertions(+), 24 deletions(-) diff --git a/src/components/datagrid/__mocks__/row_height_utils.ts b/src/components/datagrid/__mocks__/row_height_utils.ts index 21de4d6be7c..c321d17a408 100644 --- a/src/components/datagrid/__mocks__/row_height_utils.ts +++ b/src/components/datagrid/__mocks__/row_height_utils.ts @@ -27,8 +27,7 @@ export const mockRowHeightUtils = ({ getLineCount: jest.fn(actual.getLineCount), calculateHeightForLineCount: jest.fn(() => 50), isRowHeightOverride: jest.fn(actual.isRowHeightOverride), - onUpdatedRowHeight: jest.fn(), - offUpdatedRowHeight: jest.fn(), + setRerenderGridBody: jest.fn(), } as unknown) as ActualRowHeightUtils; export const RowHeightUtils = jest.fn(() => mockRowHeightUtils); diff --git a/src/components/datagrid/body/__snapshots__/data_grid_cell.test.tsx.snap b/src/components/datagrid/body/__snapshots__/data_grid_cell.test.tsx.snap index d4b927425ba..1398581b6eb 100644 --- a/src/components/datagrid/body/__snapshots__/data_grid_cell.test.tsx.snap +++ b/src/components/datagrid/body/__snapshots__/data_grid_cell.test.tsx.snap @@ -32,10 +32,9 @@ exports[`EuiDataGridCell renders 1`] = ` "getStylesForCell": [MockFunction], "isAutoHeight": [MockFunction], "isRowHeightOverride": [MockFunction], - "offUpdatedRowHeight": [MockFunction], - "onUpdatedRowHeight": [MockFunction], "pruneHiddenColumnHeights": [MockFunction], "setGrid": [MockFunction], + "setRerenderGridBody": [MockFunction], "setRowHeight": [MockFunction], } } @@ -98,10 +97,9 @@ exports[`EuiDataGridCell renders 1`] = ` "getStylesForCell": [MockFunction], "isAutoHeight": [MockFunction], "isRowHeightOverride": [MockFunction], - "offUpdatedRowHeight": [MockFunction], - "onUpdatedRowHeight": [MockFunction], "pruneHiddenColumnHeights": [MockFunction], "setGrid": [MockFunction], + "setRerenderGridBody": [MockFunction], "setRowHeight": [MockFunction], } } diff --git a/src/components/datagrid/body/data_grid_body.tsx b/src/components/datagrid/body/data_grid_body.tsx index dd0d7df6942..be8454011a2 100644 --- a/src/components/datagrid/body/data_grid_body.tsx +++ b/src/components/datagrid/body/data_grid_body.tsx @@ -500,11 +500,8 @@ export const EuiDataGridBody: FunctionComponent = ( const [, setRenderPass] = useState(0); useEffect(() => { - const callback = () => { - setRenderPass((x) => x + 1); - }; - rowHeightUtils.onUpdatedRowHeight(callback); - return () => rowHeightUtils.offUpdatedRowHeight(callback); + const callback = () => setRenderPass((x) => x + 1); + rowHeightUtils.setRerenderGridBody(callback); }, [rowHeightUtils]); const setGridRef = useCallback( diff --git a/src/components/datagrid/row_height_utils.test.ts b/src/components/datagrid/row_height_utils.test.ts index 592591f2c07..7281892ed8c 100644 --- a/src/components/datagrid/row_height_utils.test.ts +++ b/src/components/datagrid/row_height_utils.test.ts @@ -282,6 +282,13 @@ describe('RowHeightUtils', () => { expect(resetRowSpy).not.toHaveBeenCalled(); }); + + it('calls rerenderGridBody', () => { + const rerenderGridBody = jest.fn(); + rowHeightUtils.setRerenderGridBody(rerenderGridBody); + rowHeightUtils.setRowHeight(1, 'a', 34, 1); + expect(rerenderGridBody).toHaveBeenCalled(); + }); }); describe('getRowHeight', () => { diff --git a/src/components/datagrid/row_height_utils.ts b/src/components/datagrid/row_height_utils.ts index aa47a90d980..a0907e33db9 100644 --- a/src/components/datagrid/row_height_utils.ts +++ b/src/components/datagrid/row_height_utils.ts @@ -28,8 +28,6 @@ export const AUTO_HEIGHT = 'auto'; export const DEFAULT_ROW_HEIGHT = 34; export class RowHeightUtils { - onUpdateCallbacks: Array<() => void> = []; - getRowHeightOption( rowIndex: number, rowHeightsOptions?: EuiDataGridRowHeightsOptions @@ -152,6 +150,7 @@ export class RowHeightUtils { private timerId?: number; private grid?: Grid; private lastUpdatedRow: number = Infinity; + private rerenderGridBody: Function = () => {}; isAutoHeight( rowIndex: number, @@ -175,15 +174,6 @@ export class RowHeightUtils { return Math.max(...rowHeightValues); } - onUpdatedRowHeight(callback: () => void) { - this.onUpdateCallbacks.push(callback); - } - - offUpdatedRowHeight(callback: () => void) { - const idx = this.onUpdateCallbacks.indexOf(callback); - if (idx !== -1) this.onUpdateCallbacks.splice(idx, 1); - } - setRowHeight( rowIndex: number, colId: string, @@ -203,8 +193,7 @@ export class RowHeightUtils { rowHeights.set(colId, adaptedHeight); this.heightsCache.set(rowIndex, rowHeights); this.resetRow(visibleRowIndex); - - this.onUpdateCallbacks.forEach((callback) => callback()); + this.rerenderGridBody(); } pruneHiddenColumnHeights(visibleColumns: EuiDataGridColumn[]) { @@ -242,4 +231,8 @@ export class RowHeightUtils { setGrid(grid: Grid) { this.grid = grid; } + + setRerenderGridBody(rerenderGridBody: Function) { + this.rerenderGridBody = rerenderGridBody; + } } From fb8f1f26feda14c908fd066d9a9f238651c4fcb0 Mon Sep 17 00:00:00 2001 From: Chandler Prall Date: Tue, 7 Dec 2021 11:03:33 -0700 Subject: [PATCH 6/8] Added useForceRender hook, refactored data grid row height updating to use the new hook --- .../datagrid/body/data_grid_body.tsx | 12 ++--- .../datagrid/row_height_utils.test.ts | 3 +- src/services/hooks/index.ts | 5 +- src/services/hooks/useForceRender.test.tsx | 47 +++++++++++++++++++ src/services/hooks/useForceRender.ts | 16 +++++++ 5 files changed, 74 insertions(+), 9 deletions(-) create mode 100644 src/services/hooks/useForceRender.test.tsx create mode 100644 src/services/hooks/useForceRender.ts diff --git a/src/components/datagrid/body/data_grid_body.tsx b/src/components/datagrid/body/data_grid_body.tsx index be8454011a2..7938b0282fd 100644 --- a/src/components/datagrid/body/data_grid_body.tsx +++ b/src/components/datagrid/body/data_grid_body.tsx @@ -48,6 +48,7 @@ import { EuiDataGridSchemaDetector, } from '../data_grid_types'; import { makeRowManager } from './data_grid_row_manager'; +import { useForceRender } from '../../../services/hooks/useForceRender'; export const VIRTUALIZED_CONTAINER_CLASS = 'euiDataGrid__virtualized'; @@ -498,12 +499,6 @@ export const EuiDataGridBody: FunctionComponent = ( ] ); - const [, setRenderPass] = useState(0); - useEffect(() => { - const callback = () => setRenderPass((x) => x + 1); - rowHeightUtils.setRerenderGridBody(callback); - }, [rowHeightUtils]); - const setGridRef = useCallback( (ref: Grid | null) => { gridRef.current = ref; @@ -514,6 +509,11 @@ export const EuiDataGridBody: FunctionComponent = ( [rowHeightUtils] ); + const forceRender = useForceRender(); + useEffect(() => { + rowHeightUtils.setRerenderGridBody(forceRender); + }, [rowHeightUtils, forceRender]); + const [minRowHeight, setRowHeight] = useState(DEFAULT_ROW_HEIGHT); const defaultHeight = useMemo(() => { diff --git a/src/components/datagrid/row_height_utils.test.ts b/src/components/datagrid/row_height_utils.test.ts index 7281892ed8c..536c46efd72 100644 --- a/src/components/datagrid/row_height_utils.test.ts +++ b/src/components/datagrid/row_height_utils.test.ts @@ -286,8 +286,9 @@ describe('RowHeightUtils', () => { it('calls rerenderGridBody', () => { const rerenderGridBody = jest.fn(); rowHeightUtils.setRerenderGridBody(rerenderGridBody); + expect(rerenderGridBody).toHaveBeenCalledTimes(0); rowHeightUtils.setRowHeight(1, 'a', 34, 1); - expect(rerenderGridBody).toHaveBeenCalled(); + expect(rerenderGridBody).toHaveBeenCalledTimes(1); }); }); diff --git a/src/services/hooks/index.ts b/src/services/hooks/index.ts index 573f9165bb2..6f7778cc4f0 100644 --- a/src/services/hooks/index.ts +++ b/src/services/hooks/index.ts @@ -6,8 +6,9 @@ * Side Public License, v 1. */ -export * from './useCombinedRefs'; -export * from './useUpdateEffect'; export * from './useDependentState'; +export * from './useCombinedRefs'; +export * from './useForceRender'; export * from './useIsWithinBreakpoints'; export * from './useMouseMove'; +export * from './useUpdateEffect'; diff --git a/src/services/hooks/useForceRender.test.tsx b/src/services/hooks/useForceRender.test.tsx new file mode 100644 index 00000000000..e8f71aef5ca --- /dev/null +++ b/src/services/hooks/useForceRender.test.tsx @@ -0,0 +1,47 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import React, { useImperativeHandle, createRef, forwardRef } from 'react'; +import { act } from 'react-dom/test-utils'; +import { mount } from 'enzyme'; +import { useForceRender } from './useForceRender'; + +interface MockRefShape { + render: () => void; +} + +describe('useForceRender', () => { + const renderTracker = jest.fn(); + + // eslint-disable-next-line local/forward-ref + const MockComponent = forwardRef((props, ref) => { + const render = useForceRender(); + + renderTracker(); + + // expose the render function on the component's ref + useImperativeHandle(ref, () => ({ render }), [render]); + + return null; + }); + + beforeEach(() => { + jest.clearAllMocks(); + }); + + it('causes the component to re-render', () => { + const ref = createRef(); + mount(); + + expect(renderTracker).toHaveBeenCalledTimes(1); + act(() => { + ref.current!.render(); + }); + expect(renderTracker).toHaveBeenCalledTimes(2); + }); +}); diff --git a/src/services/hooks/useForceRender.ts b/src/services/hooks/useForceRender.ts new file mode 100644 index 00000000000..3f1c0b9d964 --- /dev/null +++ b/src/services/hooks/useForceRender.ts @@ -0,0 +1,16 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import { useState, useCallback } from 'react'; + +export const useForceRender = () => { + const [, setRenderCount] = useState(0); + return useCallback(() => { + setRenderCount((x) => x + 1); + }, [setRenderCount]); +}; From 4d55a901fab14e7fbcede87f5c30374df20bd6f1 Mon Sep 17 00:00:00 2001 From: Chandler Prall Date: Tue, 7 Dec 2021 11:29:39 -0700 Subject: [PATCH 7/8] Created a hook to better organize and document how the unconstrained height is calculated --- .../datagrid/body/data_grid_body.tsx | 106 ++++++++++++------ 1 file changed, 73 insertions(+), 33 deletions(-) diff --git a/src/components/datagrid/body/data_grid_body.tsx b/src/components/datagrid/body/data_grid_body.tsx index 7938b0282fd..782a715b8bb 100644 --- a/src/components/datagrid/body/data_grid_body.tsx +++ b/src/components/datagrid/body/data_grid_body.tsx @@ -28,7 +28,7 @@ import { useMutationObserver, } from '../../observer/mutation_observer'; import { useResizeObserver } from '../../observer/resize_observer'; -import { DEFAULT_ROW_HEIGHT } from '../row_height_utils'; +import { DEFAULT_ROW_HEIGHT, RowHeightUtils } from '../row_height_utils'; import { EuiDataGridCell } from './data_grid_cell'; import { DataGridSortingContext, @@ -44,6 +44,7 @@ import { import { EuiDataGridBodyProps, EuiDataGridInMemoryValues, + EuiDataGridRowHeightsOptions, EuiDataGridRowManager, EuiDataGridSchemaDetector, } from '../data_grid_types'; @@ -254,6 +255,67 @@ export function getParentCellContent(_element: Node | HTMLElement) { return element; } +// computes the unconstrained (total possible) height of a grid +const useUnconstrainedHeight = ({ + rowHeightUtils, + startRow, + endRow, + getCorrectRowIndex, + rowHeightsOptions, + defaultHeight, + headerRowHeight, + footerRowHeight, +}: { + rowHeightUtils: RowHeightUtils; + startRow: number; + endRow: number; + getCorrectRowIndex: (rowIndex: number) => number; + rowHeightsOptions?: EuiDataGridRowHeightsOptions; + defaultHeight: number; + headerRowHeight: number; + footerRowHeight: number; +}) => { + // when a row height is updated, force a re-render of the grid body to update the unconstrained height + const forceRender = useForceRender(); + useEffect(() => { + rowHeightUtils.setRerenderGridBody(forceRender); + }, [rowHeightUtils, forceRender]); + + let knownHeight = 0; // tracks the pixel height of rows we know the size of + let knownRowCount = 0; // how many rows we know the size of + for (let i = startRow; i < endRow; i++) { + const correctRowIndex = getCorrectRowIndex(i); // map visible row to logical row + + // lookup the height configuration of this row + const rowHeightOption = rowHeightUtils.getRowHeightOption( + correctRowIndex, + rowHeightsOptions + ); + + if (rowHeightOption) { + // this row's height is known + knownRowCount++; + knownHeight += rowHeightUtils.getCalculatedHeight( + rowHeightOption, + defaultHeight, + correctRowIndex, + rowHeightUtils.isRowHeightOverride(correctRowIndex, rowHeightsOptions) + ); + } + } + + // how many rows to provide space for on the screen + const rowCountToAffordFor = endRow - startRow; + + const unconstrainedHeight = + defaultHeight * (rowCountToAffordFor - knownRowCount) + // guess how much space is required for unknown rows + knownHeight + // computed pixel height of the known rows + headerRowHeight + // account for header + footerRowHeight; // account for footer + + return unconstrainedHeight; +}; + export const EuiDataGridBody: FunctionComponent = ( props ) => { @@ -509,11 +571,6 @@ export const EuiDataGridBody: FunctionComponent = ( [rowHeightUtils] ); - const forceRender = useForceRender(); - useEffect(() => { - rowHeightUtils.setRerenderGridBody(forceRender); - }, [rowHeightUtils, forceRender]); - const [minRowHeight, setRowHeight] = useState(DEFAULT_ROW_HEIGHT); const defaultHeight = useMemo(() => { @@ -579,33 +636,16 @@ export const EuiDataGridBody: FunctionComponent = ( } }, [getRowHeight]); - let knownHeight = 0; - let knownRowCount = 0; - for (let i = startRow; i < endRow; i++) { - const correctRowIndex = getCorrectRowIndex(i); - const rowHeightOption = rowHeightUtils.getRowHeightOption( - correctRowIndex, - rowHeightsOptions - ); - if (rowHeightOption) { - knownRowCount++; - knownHeight += rowHeightUtils.getCalculatedHeight( - rowHeightOption, - defaultHeight, - correctRowIndex, - rowHeightUtils.isRowHeightOverride(correctRowIndex, rowHeightsOptions) - ); - } - } - - const rowCountToAffordFor = pagination - ? pagination.pageSize - : visibleRowIndices.length; - const unconstrainedHeight = - defaultHeight * (rowCountToAffordFor - knownRowCount) + - knownHeight + - headerRowHeight + - footerRowHeight; + const unconstrainedHeight = useUnconstrainedHeight({ + rowHeightUtils, + startRow, + endRow, + getCorrectRowIndex, + rowHeightsOptions, + defaultHeight, + headerRowHeight, + footerRowHeight, + }); // unable to determine this until the container's size is known anyway const unconstrainedWidth = 0; From 6335717e253577ff7f45ce808dcb4bf3cef03fdb Mon Sep 17 00:00:00 2001 From: Chandler Prall Date: Tue, 7 Dec 2021 11:55:27 -0700 Subject: [PATCH 8/8] Update src/services/hooks/useForceRender.ts Co-authored-by: Constance --- src/services/hooks/useForceRender.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/services/hooks/useForceRender.ts b/src/services/hooks/useForceRender.ts index 3f1c0b9d964..f4eb9a52cbd 100644 --- a/src/services/hooks/useForceRender.ts +++ b/src/services/hooks/useForceRender.ts @@ -12,5 +12,5 @@ export const useForceRender = () => { const [, setRenderCount] = useState(0); return useCallback(() => { setRenderCount((x) => x + 1); - }, [setRenderCount]); + }, []); };