mirror of
https://github.com/captbaritone/webamp.git
synced 2026-07-23 01:57:29 +00:00
Remove react-virtualied
This commit is contained in:
Jordan Eldredge
parent
93772c4559
commit
cba83c0455
4 changed files with 106 additions and 90 deletions
|
|
@ -11,7 +11,6 @@
|
|||
"react-loadermixin": "^1.0.4",
|
||||
"react-loadqueueloader": "^1.0.3",
|
||||
"react-scripts": "1.1.1",
|
||||
"react-virtualized": "^9.18.5",
|
||||
"shell-escape": "^0.2.0",
|
||||
"webamp": "^1.0.0"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -8,3 +8,10 @@
|
|||
.screenshot.loaded {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.skin:hover {
|
||||
/*
|
||||
z-index: 10;
|
||||
box-shadow: 0px 0px 15px 5px rgba(46, 46, 139, 0.75);
|
||||
*/
|
||||
}
|
||||
|
|
|
|||
170
src/App.js
170
src/App.js
|
|
@ -1,5 +1,4 @@
|
|||
import React from "react";
|
||||
import { List, WindowScroller } from "react-virtualized";
|
||||
import skins from "./skins.json";
|
||||
import "./App.css";
|
||||
|
||||
|
|
@ -24,102 +23,127 @@ class Skin extends React.Component {
|
|||
render() {
|
||||
return (
|
||||
<div
|
||||
className={"skin"}
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
left: 0,
|
||||
backgroundColor: this.props.color,
|
||||
width: this.props.width,
|
||||
height: "100%",
|
||||
display: "inline-block"
|
||||
height: this.props.height,
|
||||
transform: `translate3d(${this.props.left}px, ${
|
||||
this.props.top
|
||||
}px, 0px)`
|
||||
}}
|
||||
>
|
||||
<a href={this.props.href} target="_blank">
|
||||
{(this.state.loaded || !this.props.isScrolling) && (
|
||||
<img
|
||||
src={this.props.src}
|
||||
className={`screenshot ${this.state.loaded ? "loaded" : ""}`}
|
||||
onLoad={this._handleLoad}
|
||||
/>
|
||||
)}
|
||||
<img
|
||||
src={this.props.src}
|
||||
className={`screenshot ${this.state.loaded ? "loaded" : ""}`}
|
||||
onLoad={this._handleLoad}
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function getWindowSize() {
|
||||
var w = window,
|
||||
d = document,
|
||||
e = d.documentElement,
|
||||
g = d.getElementsByTagName("body")[0],
|
||||
x = w.innerWidth || e.clientWidth || g.clientWidth,
|
||||
y = w.innerHeight || e.clientHeight || g.clientHeight;
|
||||
|
||||
return {
|
||||
windowWidth: x,
|
||||
windowHeight: y
|
||||
};
|
||||
}
|
||||
|
||||
function getScrollTop() {
|
||||
return window.pageYOffset || document.documentElement.scrollTop;
|
||||
}
|
||||
// Render your table
|
||||
|
||||
class App extends React.Component {
|
||||
constructor() {
|
||||
super();
|
||||
this._rowRenderer = this._rowRenderer.bind(this);
|
||||
this.state = {
|
||||
...getWindowSize(),
|
||||
scrollTop: getScrollTop(),
|
||||
scrollDirection: null
|
||||
};
|
||||
this._handleScroll();
|
||||
this._handleScroll = this._handleScroll.bind(this);
|
||||
this._handleResize = this._handleResize.bind(this);
|
||||
}
|
||||
|
||||
_rowRenderer({
|
||||
index,
|
||||
key,
|
||||
style,
|
||||
columnCount,
|
||||
columnWidth,
|
||||
rowHeight,
|
||||
isScrolling,
|
||||
isVisible
|
||||
}) {
|
||||
const columns = [];
|
||||
for (let i = 0; i < columnCount; i++) {
|
||||
const hash = hashes[index * columnCount + i];
|
||||
columns.push(
|
||||
<Skin
|
||||
key={hash}
|
||||
src={`https://s3.amazonaws.com/webamp-uploaded-skins/screenshots/${hash}.png`}
|
||||
width={columnWidth}
|
||||
height={rowHeight}
|
||||
color={skins[hash].color}
|
||||
isScrolling={isScrolling}
|
||||
isVisible={isVisible}
|
||||
href={`https://webamp.org/?skinUrl=https://s3.amazonaws.com/webamp-uploaded-skins/skins/${hash}.wsz`}
|
||||
/>
|
||||
);
|
||||
}
|
||||
_handleResize() {
|
||||
// TODO: Try to recompute the scroll position
|
||||
this.setState(getWindowSize());
|
||||
}
|
||||
|
||||
return (
|
||||
<div key={key} style={style} className="screenshot-container">
|
||||
{columns}
|
||||
</div>
|
||||
);
|
||||
componentDidMount() {
|
||||
window.addEventListener("scroll", this._handleScroll);
|
||||
window.addEventListener("resize", this._handleResize);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
window.removeEventListener("scroll", this._handleScroll);
|
||||
window.removeEventListener("resize", this._handleResize);
|
||||
}
|
||||
|
||||
_handleScroll() {
|
||||
const newScrollTop = getScrollTop();
|
||||
this.setState({
|
||||
scrollTop: newScrollTop,
|
||||
scrollDirection: newScrollTop > this.state.scrollTop ? "DOWN" : "UP"
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="App">
|
||||
<WindowScroller>
|
||||
{({ height, width, isScrolling, onChildScroll, scrollTop }) => {
|
||||
const columnCount = Math.floor(width / SKIN_WIDTH);
|
||||
const columnWidth = width / columnCount;
|
||||
const rowHeight = columnWidth * SKIN_RATIO;
|
||||
const columnCount = Math.floor(this.state.windowWidth / SKIN_WIDTH);
|
||||
const columnWidth = this.state.windowWidth / columnCount; // TODO: Consider flooring this to get things aligned to the pixel
|
||||
const rowHeight = columnWidth * SKIN_RATIO;
|
||||
// Add one since we might be showing half a row at the top, and half a row at the bottom
|
||||
const visibleRows = Math.ceil(this.state.windowHeight / rowHeight) + 1;
|
||||
|
||||
return (
|
||||
<List
|
||||
autoHeight
|
||||
height={height}
|
||||
isScrolling={isScrolling}
|
||||
onScroll={onChildScroll}
|
||||
overscanRowCount={10}
|
||||
rowCount={hashes.length / columnCount}
|
||||
rowHeight={rowHeight}
|
||||
rowRenderer={props =>
|
||||
this._rowRenderer({
|
||||
...props,
|
||||
width,
|
||||
columnCount,
|
||||
columnWidth,
|
||||
rowHeight
|
||||
})
|
||||
}
|
||||
scrollTop={scrollTop}
|
||||
width={width}
|
||||
/>
|
||||
);
|
||||
}}
|
||||
</WindowScroller>
|
||||
const topRow = Math.floor(this.state.scrollTop / rowHeight);
|
||||
|
||||
// TODO: Add overscan
|
||||
const firstHashToRender = topRow * columnCount;
|
||||
const lastHashToRender = firstHashToRender + visibleRows * columnCount;
|
||||
|
||||
const skinElements = [];
|
||||
for (let i = firstHashToRender; i <= lastHashToRender; i++) {
|
||||
const hash = hashes[i];
|
||||
const row = Math.floor(i / columnCount);
|
||||
const top = row * rowHeight;
|
||||
const column = i % columnCount;
|
||||
const left = column * columnWidth;
|
||||
skinElements.push(
|
||||
<Skin
|
||||
href={`https://webamp.org/?skinUrl=https://s3.amazonaws.com/webamp-uploaded-skins/skins/${hash}.wsz`}
|
||||
src={`https://s3.amazonaws.com/webamp-uploaded-skins/screenshots/${hash}.png`}
|
||||
key={hash}
|
||||
top={top}
|
||||
left={left}
|
||||
width={columnWidth}
|
||||
height={rowHeight}
|
||||
color={skins[hash].color}
|
||||
/>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
height: Math.ceil(hashes.length / columnCount) * SKIN_HEIGHT,
|
||||
position: "relative"
|
||||
}}
|
||||
>
|
||||
{skinElements}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
18
yarn.lock
18
yarn.lock
|
|
@ -1374,7 +1374,7 @@ clap@^1.0.9:
|
|||
dependencies:
|
||||
chalk "^1.1.3"
|
||||
|
||||
classnames@^2.2.3, classnames@^2.2.5:
|
||||
classnames@^2.2.5:
|
||||
version "2.2.5"
|
||||
resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.5.tgz#fb3801d453467649ef3603c7d61a02bd129bde6d"
|
||||
|
||||
|
|
@ -1983,10 +1983,6 @@ dom-converter@~0.1:
|
|||
dependencies:
|
||||
utila "~0.3"
|
||||
|
||||
"dom-helpers@^2.4.0 || ^3.0.0":
|
||||
version "3.3.1"
|
||||
resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.3.1.tgz#fc1a4e15ffdf60ddde03a480a9c0fece821dd4a6"
|
||||
|
||||
dom-serializer@0:
|
||||
version "0.1.0"
|
||||
resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.1.0.tgz#073c697546ce0780ce23be4a28e293e40bc30c82"
|
||||
|
|
@ -4233,7 +4229,7 @@ longest@^1.0.1:
|
|||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"
|
||||
|
||||
loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.0, loose-envify@^1.3.1:
|
||||
loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1:
|
||||
version "1.3.1"
|
||||
resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848"
|
||||
dependencies:
|
||||
|
|
@ -5617,16 +5613,6 @@ react-scripts@1.1.1:
|
|||
optionalDependencies:
|
||||
fsevents "^1.1.3"
|
||||
|
||||
react-virtualized@^9.18.5:
|
||||
version "9.18.5"
|
||||
resolved "https://registry.yarnpkg.com/react-virtualized/-/react-virtualized-9.18.5.tgz#42dd390ebaa7ea809bfcaf775d39872641679b89"
|
||||
dependencies:
|
||||
babel-runtime "^6.26.0"
|
||||
classnames "^2.2.3"
|
||||
dom-helpers "^2.4.0 || ^3.0.0"
|
||||
loose-envify "^1.3.0"
|
||||
prop-types "^15.6.0"
|
||||
|
||||
react@^16.2.0:
|
||||
version "16.2.0"
|
||||
resolved "https://registry.yarnpkg.com/react/-/react-16.2.0.tgz#a31bd2dab89bff65d42134fa187f24d054c273ba"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue