Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Virtualize beatmap listing #3001

Merged
merged 5 commits into from Apr 17, 2018
Merged

Virtualize beatmap listing #3001

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
03d97f1
virtualize beatmap listing
notbakaneko Apr 9, 2018
6664fc3
change number of columns to render when window size changes.
notbakaneko Apr 9, 2018
2a18231
columnCount should be overriden even if reloading state
notbakaneko Apr 16, 2018
5f7b1a6
osu.isDesktop() is a thing
notbakaneko Apr 17, 2018
8841500
Merge branch 'master' into feature/virtualize-beatmap-listing-smaller
nanaya Apr 17, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Expand Up @@ -34,6 +34,7 @@
"react-autosize-textarea": "*",
"react-dom": "^16.2.0",
"react-dom-factories": "^1.0.0",
"react-virtual-list": "^2.2.4",
"require-dir": "^0.3.2",
"retina.js": "^1.1.0",
"timeago": "^1.5.0",
Expand Down
50 changes: 43 additions & 7 deletions resources/assets/coffee/react/beatmaps/main.coffee
View file
Open in desktop
Expand Up @@ -18,6 +18,28 @@

{div} = ReactDOMFactories
el = React.createElement
VirtualList = window.VirtualList

ITEM_HEIGHT = 205 # needs to be known in advance to calculate size of virtual scrolling area.

ListRender = ({ virtual, itemHeight }) ->
style = _.extend {}, virtual.style
div
style: style
div
className: 'beatmapsets__items'
virtual.items.map (row) ->
div
className: 'beatmapsets__items-row'
key: (beatmap.id for beatmap in row).join('-')
for beatmap in row
div
className: 'beatmapsets__item'
key: beatmap.id
el BeatmapsetPanel, beatmap: beatmap

BeatmapList = VirtualList()(ListRender)


class Beatmaps.Main extends React.PureComponent
constructor: (props) ->
Expand All @@ -41,6 +63,22 @@ class Beatmaps.Main extends React.PureComponent
isExpanded: null
@stateFromUrl()

@state.columnCount = @columnCount()


columnCount: () ->
# see @screen-sm-min
if window.innerWidth < 900 then 1 else 2


updateColumnCount: () =>
@setState (prevState) =>
count = @columnCount()
# The list component has to be recreated for correct sizing.
BeatmapList = VirtualList()(ListRender) if prevState.columnCount != count

columnCount: count


componentDidMount: =>
$(document).on 'beatmap:load_more.beatmaps', @loadMore
Expand All @@ -49,6 +87,7 @@ class Beatmaps.Main extends React.PureComponent
$(document).on 'beatmap:search:filtered.beatmaps', @updateFilters
$(document).on 'turbolinks:before-visit.beatmaps', @recordUrl
$(document).on 'turbolinks:before-cache.beatmaps', @saveState
$(window).on 'resize.beatmaps', @updateColumnCount


componentWillUnmount: =>
Expand Down Expand Up @@ -77,13 +116,10 @@ class Beatmaps.Main extends React.PureComponent
div
className: 'beatmapsets__content'
if @state.beatmaps.length > 0
div
className: 'beatmapsets__items'
for beatmap in @state.beatmaps
div
className: 'beatmapsets__item'
key: beatmap.id
el BeatmapsetPanel, beatmap: beatmap
el BeatmapList,
items: _.chunk(@state.beatmaps, @state.columnCount)
itemBuffer: 5
itemHeight: ITEM_HEIGHT

else
div className: 'beatmapsets__empty',
Expand Down
5 changes: 5 additions & 0 deletions resources/assets/less/bem/beatmapsets.less
View file
Open in desktop
Expand Up @@ -52,4 +52,9 @@
display: flex;
flex-wrap: wrap;
}

&__items-row {
display: flex;
width: 100%;
}
}
2 changes: 1 addition & 1 deletion resources/assets/less/bootstrap-variables.less
View file
Open in desktop
Expand Up @@ -53,7 +53,7 @@
@input-color: @gray-dark;
@input-border-focus: @pink;

@screen-sm-min: 900px; // sync with osu.isDesktop
@screen-sm-min: 900px; // sync with osu.isDesktop, react/beatmaps/main.coffee

This comment was marked as off-topic.

Sign in to view

This comment was marked as off-topic.

Sign in to view

This comment was marked as off-topic.

Sign in to view

@screen-lg-min: 1300px;
@screen-md-min: @screen-sm-min;

Expand Down
2 changes: 2 additions & 0 deletions resources/assets/lib/import-shims.coffee
View file
Open in desktop
Expand Up @@ -21,9 +21,11 @@
import { StoreCheckout } from 'store-checkout'
import Promise from 'promise-polyfill'
import TextareaAutosize from 'react-autosize-textarea'
import VirtualList from 'react-virtual-list'

# polyfill non-Edge IE
window.Promise ?= Promise

window.StoreCheckout = StoreCheckout
window.TextareaAutosize = TextareaAutosize
window.VirtualList = VirtualList
14 changes: 14 additions & 0 deletions yarn.lock
View file
Open in desktop
Expand Up @@ -5079,6 +5079,14 @@ promise@^7.1.1:
dependencies:
asap "~2.0.3"

prop-types@^15.5.10:
version "15.6.1"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.1.tgz#36644453564255ddda391191fb3a125cbdf654ca"
dependencies:
fbjs "^0.8.16"
loose-envify "^1.3.1"
object-assign "^4.1.1"

prop-types@^15.5.6, prop-types@^15.6.0:
version "15.6.0"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.0.tgz#ceaf083022fc46b4a35f69e13ef75aed0d639856"
Expand Down Expand Up @@ -5216,6 +5224,12 @@ react-dom@^16.2.0:
object-assign "^4.1.1"
prop-types "^15.6.0"

react-virtual-list@^2.2.4:
version "2.2.4"
resolved "https://registry.yarnpkg.com/react-virtual-list/-/react-virtual-list-2.2.4.tgz#bbeb4938436f80ddbff4f8724f43de2117085691"
dependencies:
prop-types "^15.5.10"

react@^16.2.0:
version "16.2.0"
resolved "https://registry.yarnpkg.com/react/-/react-16.2.0.tgz#a31bd2dab89bff65d42134fa187f24d054c273ba"
Expand Down