Mirrors/webamp
1
0
Fork 0
mirror of https://github.com/captbaritone/webamp.git synced 2026-07-23 18:17:38 +00:00
Code Issues Projects Releases Wiki Activity

Use top/left it's more performent

Browse source
This commit is contained in:
Jordan Eldredge 2018-07-25 18:31:53 -07:00
parent 5dce7432a4
commit a63bfe5915
1 changed files with 19 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

28
src/App.js
View file

@ -31,9 +31,8 @@ class Skin extends React.Component {
backgroundColor: this.props.color,
width: this.props.width,
height: this.props.height,
transform: `translate3d(${this.props.left}px, ${
this.props.top
}px, 0px)`
top: this.props.top,
left: this.props.left
}}
>
<a href={this.props.href} target="_blank">
@ -96,10 +95,18 @@ class App extends React.Component {
}
_handleScroll() {
const newScrollTop = getScrollTop();
this.setState({
scrollTop: newScrollTop,
scrollDirection: newScrollTop > this.state.scrollTop ? "DOWN" : "UP"
// If there's a timer, cancel it
if (this._timeout) {
window.cancelAnimationFrame(this._timeout);
}
this._timeout = window.requestAnimationFrame(() => {
// Run our scroll functions
const newScrollTop = getScrollTop();
this.setState({
scrollTop: newScrollTop,
scrollDirection: newScrollTop > this.state.scrollTop ? "DOWN" : "UP"
});
});
}
@ -114,10 +121,13 @@ class App extends React.Component {
// TODO: Add overscan
const firstHashToRender = topRow * columnCount;
const lastHashToRender = firstHashToRender + visibleRows * columnCount;
const lastHashToRender = Math.min(
firstHashToRender + visibleRows * columnCount,
hashes.length
);
const skinElements = [];
for (let i = firstHashToRender; i <= lastHashToRender; i++) {
for (let i = firstHashToRender; i < lastHashToRender; i++) {
const hash = hashes[i];
const row = Math.floor(i / columnCount);
const top = row * rowHeight;