frontend: highlight "bottom" paging button
Massimo Melina committed
Feb 25, 2023 at 17:54 UTC
05a036547c6b235730779fe61693e6adc45489c7
1 file changed
+6
-1
frontend/src/BrowseFiles.ts
+6
-1
@@ -51,6 +51,7 @@ function FilesList() {
51
const [page, setPage] = useState(0)
52
const [extraPages, setExtraPages] = useState(0)
53
const [scrolledPages, setScrolledPages] = useState(0)
54
+ const [atBottom, setAtBottom] = useState(false)
55
const offset = page * pageSize
56
const theList = filteredList || list
57
const total = theList.length
@@ -67,6 +68,7 @@ function FilesList() {
68
const i = _.findLastIndex(document.querySelectorAll('.' + PAGE_SEPARATOR_CLASS), el =>
69
el.getBoundingClientRect().top <= window.innerHeight/2)
70
setScrolledPages(i + 1)
71
+ setAtBottom(window.innerHeight + Math.ceil(window.scrollY) >= document.body.offsetHeight)
72
}, 200),
73
[])
74
useEffect(() => domOn('scroll', () => {
@@ -116,6 +118,7 @@ function FilesList() {
118
total > pageSize && h(Paging, {
119
nPages,
120
current: page + scrolledPages,
121
+ atBottom,
122
pageSize,
123
pageChange,
124
})
@@ -125,10 +128,11 @@ function FilesList() {
128
interface PagingProps {
129
nPages: number
130
current: number
131
+ atBottom: boolean
132
pageSize: number
133
pageChange:(newPage:number, goBottom?:boolean) => void
134
}
131
-const Paging = memo(({ nPages, current, pageSize, pageChange }: PagingProps) => {
135
+const Paging = memo(({ nPages, current, pageSize, pageChange, atBottom }: PagingProps) => {
136
useEffect(() => {
137
document.body.style.overflowY = 'scroll'
138
return () => { document.body.style.overflowY = '' }
@@ -149,6 +153,7 @@ const Paging = memo(({ nPages, current, pageSize, pageChange }: PagingProps) =>
153
}, i * pageSize) )
154
),
155
h('button', {
156
+ className: atBottom ? 'toggled' : undefined,
157
onClick(){ pageChange(nPages-1, true) }
158
}, hIcon('to-end')),
159
)