From cba83c0455d747e8c7f5cef3571dc239e03ce61b Mon Sep 17 00:00:00 2001 From: Jordan Eldredge Date: Wed, 25 Jul 2018 18:13:18 -0700 Subject: [PATCH] Remove react-virtualied --- package.json | 1 - src/App.css | 7 +++ src/App.js | 170 +++++++++++++++++++++++++++++---------------------- yarn.lock | 18 +----- 4 files changed, 106 insertions(+), 90 deletions(-) diff --git a/package.json b/package.json index 9dd4ca9d..3d70edc4 100644 --- a/package.json +++ b/package.json @@ -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" }, diff --git a/src/App.css b/src/App.css index d35295b6..17124b21 100644 --- a/src/App.css +++ b/src/App.css @@ -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); + */ +} diff --git a/src/App.js b/src/App.js index 5b5892c0..bb06a77d 100644 --- a/src/App.js +++ b/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 (
- {(this.state.loaded || !this.props.isScrolling) && ( - - )} +
); } } +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( - - ); - } + _handleResize() { + // TODO: Try to recompute the scroll position + this.setState(getWindowSize()); + } - return ( -
- {columns} -
- ); + 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 ( -
- - {({ 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 ( - - this._rowRenderer({ - ...props, - width, - columnCount, - columnWidth, - rowHeight - }) - } - scrollTop={scrollTop} - width={width} - /> - ); - }} - + 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( + + ); + } + return ( +
+ {skinElements}
); } diff --git a/yarn.lock b/yarn.lock index a8998f01..9e0078da 100644 --- a/yarn.lock +++ b/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"