Created
August 11, 2017 05:13
-
-
Save beb4/cc91f4e9b8982d172613cff248090769 to your computer and use it in GitHub Desktop.
react-virtualized Feed Scroller with varying heights
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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