0
0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2025-12-29 00:22:47 +00:00

Adjust "next page" button

Prior to fix, the "next page" button in the toolbar wouldn't work well if there were multiple pages in view that were in a single 'row'.  This is because the logic is to take the pages that are "visible", take the max of those pages, and then scroll to that page.  But the issue is that if the 'max' page is in the same row as other pages, the range of visible pages doesn't change....the max will always be the same.

So the change here basically runs the scroll function twice-- if the first run results in the same 'max' page as before the scroll, it runs it again but with the target page being "max + 1", which will bump the target to the next row.
This commit is contained in:
Gazook89
2024-11-06 21:24:18 -06:00
parent 2222550669
commit 3818424251

View File

@@ -1,3 +1,4 @@
/* eslint-disable max-lines */
require('./toolBar.less');
const React = require('react');
const { useState, useEffect } = React;
@@ -242,8 +243,16 @@ const ToolBar = ({ displayOptions, onDisplayOptionsChange, visiblePages, totalPa
type='button'
title='Next Page(s)'
onClick={()=>{
const rangeOffset = visiblePages.length > 1 ? 0 : 1;
scrollToPage(_.max(visiblePages) + rangeOffset);
// if there are multiple pages in a 'row' and they are in 'view',
// then the 'max'/last page in view will always be the same, and
// the other pages will always be the same (since the viewport doesn't change).
// So this needs to scroll to the 'max', then see what is newly in view,
// and if the same pages are visible, do it again but +1.
const start = _.max(visiblePages);
scrollToPage(start);
if(start === _.max(visiblePages)){
scrollToPage(start + 1)
};
}}
disabled={pageNum >= totalPages}
>