Skip to content

Instantly share code, notes, and snippets.

@beb4
Created August 11, 2017 05:13
Show Gist options
  • Save beb4/cc91f4e9b8982d172613cff248090769 to your computer and use it in GitHub Desktop.
Save beb4/cc91f4e9b8982d172613cff248090769 to your computer and use it in GitHub Desktop.
react-virtualized Feed Scroller with varying heights
class Scroller extends React.Component {
_cache = new CellMeasurerCache({ defaultHeight: 100, fixedWidth: true });
_mostRecentWidth = 0;
constructor(props) {
super(props);
this.state = {
localCache: []
}
}
componentDidMount(){
this._loadData(0);
}
._loadData = (offset, callback) => {
//Loads data from server and sets it in this.state.localCache
}
_recomputeRowHeights = (index) => {
if (this._list) {
console.log('Recomputing');
this._cache.clearAll();
this._list.recomputeRowHeights(index);
}
}
_isRowLoaded = ({ index }) => {
return !!this.state.localCache[index];
}
_loadMoreRows = ({ startIndex, stopIndex }) => {
this._loadData(startIndex, (() => {
this._recomputeRowHeights();
promiseResolver
}));
let promiseResolver;
return new Promise((resolve) => {
promiseResolver = resolve;
});
}
rowRenderer = ({ index, key, style, parent }) => {
const row = this.state.localCache[index];
let content;
if (row) {
content = (<Feed data={row} style={style}/>);
} else {
content = (<CustomLoader style={style} />);
}
return (
<CellMeasurer
cache={this._cache}
columnIndex={0}
key={key}
parent={parent}
rowIndex={index}
width={this._mostRecentWidth}
>
{content}
</CellMeasurer>);
}
_setListRef = (ref) => {
this._list = ref;
this._registerList(ref);
};
render() {
const { localCache } = this.state;
return (
<div className="flex_grow">
<InfiniteLoader
isRowLoaded={this._isRowLoaded}
loadMoreRows={this._loadMoreRows}
rowCount={10}
>
{({ onRowsRendered, registerChild }) =>
<AutoSizer disableHeight>
{({ width, height }) => {
this._mostRecentWidth = width;
this._registerList = registerChild;
return (
<List
deferredMeasurementCache={this._cache}
overscanRowCount={1}
ref={this._setListRef}
height={height}
onRowsRendered={onRowsRendered}
rowCount={10}
rowHeight={this._cache.rowHeight}
rowRenderer={this.rowRenderer}
width={width}
/>
)
}
}
</AutoSizer>}
</InfiniteLoader>
</div>
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment