Skip to content

Commit

Permalink
fix grid height detection to wait until header height is known
Browse files Browse the repository at this point in the history
  • Loading branch information
@chandlerprall
chandlerprall committed Dec 21, 2020
1 parent 1179b6f commit 52798b3
Show file tree
Hide file tree
Showing 2 changed files with 83 additions and 94 deletions.
171 changes: 78 additions & 93 deletions src/components/datagrid/data_grid.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,10 +64,7 @@ import { useDataGridColumnSelector } from './column_selector';
import { useDataGridStyleSelector, startingStyles } from './style_selector';
import { EuiTablePagination } from '../table/table_pagination';
import { EuiFocusTrap } from '../focus_trap';
import {
EuiResizeObserver,
useResizeObserver,
} from '../observer/resize_observer';
import { useResizeObserver } from '../observer/resize_observer';
import { EuiDataGridInMemoryRenderer } from './data_grid_inmemory_renderer';
import {
useMergedSchema,
Expand Down Expand Up @@ -403,19 +400,6 @@ function useColumnWidths(
return [columnWidths, setColumnWidth];
}

function useOnResize(
setGridWidth: (newWidth: number) => void,
setGridHeight: (newHeight: number) => void
) {
return useCallback(
({ width, height }: { width: number; height: number }) => {
setGridWidth(width);
setGridHeight(height);
},
[setGridWidth, setGridHeight]
);
}

function useInMemoryValues(
inMemory: EuiDataGridInMemory | undefined,
rowCount: number
Expand Down Expand Up @@ -688,6 +672,7 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = (props) => {
// but in reality ... maybe don't do that?
const [gridHeight, setGridHeight] = useState(IS_JEST_ENVIRONMENT ? 500 : 0);
const pageSize = pagination?.pageSize;
const resetGridHeight = useCallback(() => setGridHeight(0), []);
useEffect(() => {
if (height == null) {
// if already 0 this update will be ignored
Expand Down Expand Up @@ -776,7 +761,14 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = (props) => {
};

// enables/disables grid controls based on available width
const onResize = useOnResize(setGridWidth, setGridHeight);
const [resizeRef, setResizeRef] = useState<HTMLDivElement | null>(null);
const gridDimensions = useResizeObserver(resizeRef);
useEffect(() => {
const { height, width } = gridDimensions;
setGridWidth(width);
setGridHeight(height);
}, [gridDimensions]);

const hasRoomForGridControls = gridWidth > minSizeForControls || isFullScreen;

const [columnWidths, setColumnWidth] = useColumnWidths(
Expand Down Expand Up @@ -1054,83 +1046,76 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = (props) => {
: null}
</div>
) : null}
<EuiResizeObserver onResize={onResize}>
{(resizeRef) => (
<div
onKeyDown={createKeyDownHandler(
props,
orderedVisibleColumns,
leadingControlColumns,
trailingControlColumns,
focusedCell,
headerIsInteractive,
setFocusedCell
)}
className="euiDataGrid__verticalScroll"
ref={setResizeRef}>
<div className="euiDataGrid__overflow">
{inMemory ? (
<EuiDataGridInMemoryRenderer
inMemory={inMemory}
renderCellValue={renderCellValue}
columns={columns}
rowCount={
inMemory.level === 'enhancements'
? // if `inMemory.level === enhancements` then we can only be sure the pagination's pageSize is available in memory
pagination?.pageSize || rowCount
: // otherwise, all of the data is present and usable
rowCount
}
onCellRender={onCellRender}
/>
) : null}
<div
onKeyDown={createKeyDownHandler(
props,
orderedVisibleColumns,
leadingControlColumns,
trailingControlColumns,
focusedCell,
headerIsInteractive,
setFocusedCell
)}
className="euiDataGrid__verticalScroll"
ref={resizeRef}>
<div className="euiDataGrid__overflow">
{inMemory ? (
<EuiDataGridInMemoryRenderer
inMemory={inMemory}
renderCellValue={renderCellValue}
columns={columns}
rowCount={
inMemory.level === 'enhancements'
? // if `inMemory.level === enhancements` then we can only be sure the pagination's pageSize is available in memory
pagination?.pageSize || rowCount
: // otherwise, all of the data is present and usable
rowCount
}
onCellRender={onCellRender}
/>
) : null}
<div
ref={setContentRef}
data-test-subj="dataGridWrapper"
className="euiDataGrid__content"
role="grid"
id={gridId}
{...wrappingDivFocusProps}
{...gridAriaProps}>
<EuiDataGridBody
columns={orderedVisibleColumns}
columnWidths={columnWidths}
defaultColumnWidth={defaultColumnWidth}
leadingControlColumns={
leadingControlColumns
}
schema={mergedSchema}
trailingControlColumns={
trailingControlColumns
}
setVisibleColumns={setVisibleColumns}
switchColumnPos={switchColumnPos}
setColumnWidth={setColumnWidth}
headerIsInteractive={
headerIsInteractive
}
handleHeaderMutation={
handleHeaderMutation
}
gridHeight={gridHeight}
gridWidth={gridWidth}
inMemoryValues={inMemoryValues}
inMemory={inMemory}
schemaDetectors={allSchemaDetectors}
popoverContents={popoverContents}
pagination={pagination}
renderCellValue={renderCellValue}
renderFooterCellValue={
renderFooterCellValue
}
rowCount={rowCount}
interactiveCellId={interactiveCellId}
/>
</div>
</div>
ref={setContentRef}
data-test-subj="dataGridWrapper"
className="euiDataGrid__content"
role="grid"
id={gridId}
{...wrappingDivFocusProps}
{...gridAriaProps}>
<EuiDataGridBody
columns={orderedVisibleColumns}
columnWidths={columnWidths}
defaultColumnWidth={defaultColumnWidth}
leadingControlColumns={
leadingControlColumns
}
schema={mergedSchema}
trailingControlColumns={
trailingControlColumns
}
setVisibleColumns={setVisibleColumns}
switchColumnPos={switchColumnPos}
setColumnWidth={setColumnWidth}
headerIsInteractive={headerIsInteractive}
handleHeaderMutation={handleHeaderMutation}
gridHeight={gridHeight}
gridWidth={gridWidth}
inMemoryValues={inMemoryValues}
inMemory={inMemory}
schemaDetectors={allSchemaDetectors}
popoverContents={popoverContents}
pagination={pagination}
renderCellValue={renderCellValue}
renderFooterCellValue={
renderFooterCellValue
}
rowCount={rowCount}
interactiveCellId={interactiveCellId}
resetGridHeight={resetGridHeight}
/>
</div>
)}
</EuiResizeObserver>
</div>
</div>
{props.pagination && props['aria-labelledby'] && (
<p id={ariaLabelledBy} hidden>
{ariaLabelledBy}
Expand Down
6 changes: 5 additions & 1 deletion src/components/datagrid/data_grid_body.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,7 @@ export interface EuiDataGridBodyProps {
handleHeaderMutation: MutationCallback;
setVisibleColumns: EuiDataGridHeaderRowProps['setVisibleColumns'];
switchColumnPos: EuiDataGridHeaderRowProps['switchColumnPos'];
resetGridHeight: () => void;
}

const defaultComparator: NonNullable<
Expand Down Expand Up @@ -290,6 +291,7 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
handleHeaderMutation,
setVisibleColumns,
switchColumnPos,
resetGridHeight
} = props;

const [headerRowRef, setHeaderRowRef] = useState<HTMLDivElement | null>(null);
Expand All @@ -300,6 +302,8 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
});
const { height: headerRowHeight } = useResizeObserver(headerRowRef, 'height');

useEffect(() => resetGridHeight(), [headerRowHeight]);

const startRow = pagination ? pagination.pageIndex * pagination.pageSize : 0;
let endRow = pagination
? (pagination.pageIndex + 1) * pagination.pageSize
Expand Down Expand Up @@ -519,7 +523,7 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
columnWidth={getWidth}
height={
// intentionally ignoring gridHeight if it is null/undefined/0
gridHeight ||
(headerRowHeight && gridHeight) ||
rowHeight * visibleRowIndices.length +
SCROLLBAR_HEIGHT +
headerRowHeight +
Expand Down

0 comments on commit 52798b3

Please sign in to comment.