refactor: Add AutoSizer to react-virtualized Grid (#17606)

* remove styles from renderCell

* remove styling on grid
This commit is contained in:
Hugh A. Miles II 2021-12-02 09:47:47 -08:00 committed by GitHub
parent b13d953b34
commit d9e9c3a3de
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -20,6 +20,7 @@ import JSONbig from 'json-bigint';
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import JSONTree from 'react-json-tree'; import JSONTree from 'react-json-tree';
import { import {
AutoSizer,
Column, Column,
Grid, Grid,
ScrollSync, ScrollSync,
@ -58,8 +59,8 @@ function safeJsonObjectParse(
} }
} }
const SCROLL_BAR_HEIGHT = 15;
const GRID_POSITION_ADJUSTMENT = 4; const GRID_POSITION_ADJUSTMENT = 4;
const SCROLL_BAR_HEIGHT = 15;
const JSON_TREE_THEME = { const JSON_TREE_THEME = {
scheme: 'monokai', scheme: 'monokai',
author: 'wimer hazenberg (http://www.monokai.nl)', author: 'wimer hazenberg (http://www.monokai.nl)',
@ -479,39 +480,38 @@ export default class FilterableTable extends PureComponent<
return ( return (
<StyledFilterableTable> <StyledFilterableTable>
<ScrollSync> <ScrollSync>
{({ onScroll, scrollTop }) => ( {({ onScroll, scrollLeft }) => (
<div <>
className="filterable-table-container Table" <AutoSizer disableHeight>
data-test="filterable-table-container" {({ width }) => (
ref={this.container} <div>
> <Grid
<div className="LeftColumn"> cellRenderer={this.renderGridCellHeader}
<Grid columnCount={orderedColumnKeys.length}
cellRenderer={this.renderGridCellHeader} columnWidth={getColumnWidth}
columnCount={orderedColumnKeys.length} height={rowHeight}
columnWidth={getColumnWidth} rowCount={1}
height={rowHeight} rowHeight={rowHeight}
rowCount={1} scrollLeft={scrollLeft}
rowHeight={rowHeight} width={width}
scrollTop={scrollTop} style={{ overflow: 'hidden' }}
width={this.totalTableWidth} />
/> <Grid
</div> cellRenderer={this.renderGridCell}
<div className="RightColumn"> columnCount={orderedColumnKeys.length}
<Grid columnWidth={getColumnWidth}
cellRenderer={this.renderGridCell} height={totalTableHeight - rowHeight}
columnCount={orderedColumnKeys.length} onScroll={onScroll}
columnWidth={getColumnWidth} overscanColumnCount={overscanColumnCount}
height={totalTableHeight - rowHeight} overscanRowCount={overscanRowCount}
onScroll={onScroll} rowCount={this.list.length}
overscanColumnCount={overscanColumnCount} rowHeight={rowHeight}
overscanRowCount={overscanRowCount} width={width}
rowCount={this.list.length} />
rowHeight={rowHeight} </div>
width={this.totalTableWidth} )}
/> </AutoSizer>
</div> </>
</div>
)} )}
</ScrollSync> </ScrollSync>
</StyledFilterableTable> </StyledFilterableTable>