frontend: smarter paging for many thousands
Massimo Melina committed
Feb 28, 2023 at 14:20 UTC
3d69f4964a9c592d61e361ca8164c9d36386d417
1 file changed
+9
-5
frontend/src/BrowseFiles.ts
+9
-5
@@ -139,6 +139,9 @@ const Paging = memo(({ nPages, current, pageSize, pageChange, atBottom }: Paging
139
}, [])
140
const ref = useRef<HTMLElement>()
141
useEffect(() => ref.current?.scrollIntoView({ block: 'nearest' }), [current])
142
+ const shrink = nPages > 20
143
+ const from = _.floor(current, -1)
144
+ const to = from + 10
145
return h('div', { id:'paging' },
146
h('button', {
147
className: !current ? 'toggled' : undefined,
@@ -146,11 +149,12 @@ const Paging = memo(({ nPages, current, pageSize, pageChange, atBottom }: Paging
149
}, hIcon('to-start')),
150
h('div', { id: 'paging-middle' }, // using sticky first/last would prevent scrollIntoView from working
151
_.range(1, nPages).map(i =>
149
- h('button', {
150
- key: i,
151
- ...i === current && { className: 'toggled', ref },
152
- onClick: () => pageChange(i),
153
- }, i * pageSize) )
152
+ (!shrink || !(i%10) || (i >= from && i < to)) // if shrinking, we show thousands or hundreds for current thousand
153
+ && h('button', {
154
+ key: i,
155
+ ...i === current && { className: 'toggled', ref },
156
+ onClick: () => pageChange(i),
157
+ }, shrink && !(i%10) ? (i/10) + 'K' : i * pageSize) )
158
),
159
h('button', {
160
className: atBottom ? 'toggled' : undefined,