From 3acf90dfdb2ac7a1eb4b8df442acaa4f54081f4b Mon Sep 17 00:00:00 2001 From: Gazook89 Date: Sat, 24 Aug 2024 09:05:43 -0500 Subject: [PATCH] Add handlePageChange() to control input Reintroducing handlePageChange() method to handle the page input separately from the scroll function. It tests the regex pattern on the string, parses to integer, and sets pageNum state. scrollToPage also now sets the pageNum state after performing the scroll so the input box matches the new current page. --- .../homebrew/brewRenderer/toolBar/toolBar.jsx | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/client/homebrew/brewRenderer/toolBar/toolBar.jsx b/client/homebrew/brewRenderer/toolBar/toolBar.jsx index 316b9219c..2f611a2ef 100644 --- a/client/homebrew/brewRenderer/toolBar/toolBar.jsx +++ b/client/homebrew/brewRenderer/toolBar/toolBar.jsx @@ -24,16 +24,27 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{ setZoomLevel(newZoomLevel); }; + const handlePageChange = (page)=>{ + const regex = /[0-9]/; + if(regex.test(page)){ + const num = parseInt(page); // input type is 'text', so `page` comes in as a string, not number. + setPageNum(num) + } else { + return; + } + }; + const scrollToPage = (pageNumber)=>{ - pageNumber = _.clamp(pageNumber - 1, 0, totalPages - 1); + pageNumber = _.clamp(pageNumber, 1, totalPages); const iframe = document.getElementById('BrewRenderer'); if(iframe && iframe.contentWindow) { const brewRenderer = iframe.contentWindow.document.querySelector('.brewRenderer'); if(brewRenderer) { const pages = brewRenderer.querySelectorAll('.page'); - pages[pageNumber]?.scrollIntoView({ block: 'start' }); + pages[pageNumber - 1]?.scrollIntoView({ block: 'start' }); } } + setPageNum(pageNumber); }; return ( @@ -92,7 +103,7 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{ inputMode='numeric' pattern='[0-9]' value={pageNum} - onChange={(e)=>{setPageNum(parseInt(e.target.value));}} + onChange={(e)=>{handlePageChange(e.target.value);}} onBlur={()=>scrollToPage(pageNum)} onKeyDown={(e)=>{e.key == 'Enter' ? scrollToPage(pageNum) : null;}} />