Reset "pageToScrollToIndex" after page selection
In case the current page changed after selecting a page, the previously selected page couldn't be selected again since the "pageToScrollToIndex" was still set to this page
This commit is contained in:
@@ -70,6 +70,7 @@ const BaseReaderViewer = forwardRef(
|
|||||||
{
|
{
|
||||||
currentPageIndex,
|
currentPageIndex,
|
||||||
pageToScrollToIndex,
|
pageToScrollToIndex,
|
||||||
|
setPageToScrollToIndex,
|
||||||
pages,
|
pages,
|
||||||
setPages,
|
setPages,
|
||||||
totalPages,
|
totalPages,
|
||||||
@@ -90,6 +91,7 @@ const BaseReaderViewer = forwardRef(
|
|||||||
ReaderStatePages,
|
ReaderStatePages,
|
||||||
| 'currentPageIndex'
|
| 'currentPageIndex'
|
||||||
| 'pageToScrollToIndex'
|
| 'pageToScrollToIndex'
|
||||||
|
| 'setPageToScrollToIndex'
|
||||||
| 'pages'
|
| 'pages'
|
||||||
| 'setPages'
|
| 'setPages'
|
||||||
| 'totalPages'
|
| 'totalPages'
|
||||||
@@ -228,6 +230,10 @@ const BaseReaderViewer = forwardRef(
|
|||||||
|
|
||||||
// handle user page selection
|
// handle user page selection
|
||||||
useLayoutEffect(() => {
|
useLayoutEffect(() => {
|
||||||
|
if (pageToScrollToIndex == null) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
const pageToScrollTo = getPage(pageToScrollToIndex, pages);
|
const pageToScrollTo = getPage(pageToScrollToIndex, pages);
|
||||||
|
|
||||||
if (isContinuousReadingModeActive) {
|
if (isContinuousReadingModeActive) {
|
||||||
@@ -251,6 +257,7 @@ const BaseReaderViewer = forwardRef(
|
|||||||
const newPageIndex = getNextIndexFromPage(pageToScrollTo);
|
const newPageIndex = getNextIndexFromPage(pageToScrollTo);
|
||||||
const isLastPage = newPageIndex === totalPages - 1;
|
const isLastPage = newPageIndex === totalPages - 1;
|
||||||
|
|
||||||
|
setPageToScrollToIndex(null);
|
||||||
updateCurrentPageIndex(newPageIndex, !isLastPage);
|
updateCurrentPageIndex(newPageIndex, !isLastPage);
|
||||||
}, [pageToScrollToIndex]);
|
}, [pageToScrollToIndex]);
|
||||||
|
|
||||||
@@ -386,6 +393,7 @@ export const ReaderViewer = withPropsFrom(
|
|||||||
[
|
[
|
||||||
'currentPageIndex',
|
'currentPageIndex',
|
||||||
'pageToScrollToIndex',
|
'pageToScrollToIndex',
|
||||||
|
'setPageToScrollToIndex',
|
||||||
'pages',
|
'pages',
|
||||||
'setPages',
|
'setPages',
|
||||||
'totalPages',
|
'totalPages',
|
||||||
|
|||||||
@@ -14,7 +14,7 @@ export const ReaderStatePagesContext = createContext<ReaderStatePages>({
|
|||||||
totalPages: 0,
|
totalPages: 0,
|
||||||
currentPageIndex: 0,
|
currentPageIndex: 0,
|
||||||
setCurrentPageIndex: () => undefined,
|
setCurrentPageIndex: () => undefined,
|
||||||
pageToScrollToIndex: 0,
|
pageToScrollToIndex: null,
|
||||||
setPageToScrollToIndex: () => undefined,
|
setPageToScrollToIndex: () => undefined,
|
||||||
setTotalPages: () => undefined,
|
setTotalPages: () => undefined,
|
||||||
pageUrls: [],
|
pageUrls: [],
|
||||||
|
|||||||
@@ -15,7 +15,7 @@ import { ReaderStatePages } from '@/modules/reader/types/ReaderProgressBar.types
|
|||||||
export const ReaderStatePagesContextProvider = ({ children }: { children: ReactNode }) => {
|
export const ReaderStatePagesContextProvider = ({ children }: { children: ReactNode }) => {
|
||||||
const [totalPages, setTotalPages] = useState<ReaderStatePages['totalPages']>(0);
|
const [totalPages, setTotalPages] = useState<ReaderStatePages['totalPages']>(0);
|
||||||
const [currentPageIndex, setCurrentPageIndex] = useState<ReaderStatePages['currentPageIndex']>(0);
|
const [currentPageIndex, setCurrentPageIndex] = useState<ReaderStatePages['currentPageIndex']>(0);
|
||||||
const [pageToScrollToIndex, setPageToScrollToIndex] = useState<ReaderStatePages['pageToScrollToIndex']>(0);
|
const [pageToScrollToIndex, setPageToScrollToIndex] = useState<ReaderStatePages['pageToScrollToIndex']>(null);
|
||||||
const [pageUrls, setPageUrls] = useState<ReaderStatePages['pageUrls']>([]);
|
const [pageUrls, setPageUrls] = useState<ReaderStatePages['pageUrls']>([]);
|
||||||
const [pageLoadStates, setPageLoadStates] = useState<ReaderStatePages['pageLoadStates']>([{ loaded: false }]);
|
const [pageLoadStates, setPageLoadStates] = useState<ReaderStatePages['pageLoadStates']>([{ loaded: false }]);
|
||||||
const [pages, setPages] = useState<ReaderStatePages['pages']>([createPageData('', 0)]);
|
const [pages, setPages] = useState<ReaderStatePages['pages']>([createPageData('', 0)]);
|
||||||
|
|||||||
@@ -181,7 +181,7 @@ const BaseReader = ({
|
|||||||
});
|
});
|
||||||
|
|
||||||
setCurrentPageIndex(0);
|
setCurrentPageIndex(0);
|
||||||
setPageToScrollToIndex(0);
|
setPageToScrollToIndex(null);
|
||||||
setTotalPages(0);
|
setTotalPages(0);
|
||||||
setPages([createPageData('', 0)]);
|
setPages([createPageData('', 0)]);
|
||||||
setPageUrls([]);
|
setPageUrls([]);
|
||||||
@@ -216,7 +216,7 @@ const BaseReader = ({
|
|||||||
} else {
|
} else {
|
||||||
setArePagesFetched(false);
|
setArePagesFetched(false);
|
||||||
setCurrentPageIndex(0);
|
setCurrentPageIndex(0);
|
||||||
setPageToScrollToIndex(0);
|
setPageToScrollToIndex(null);
|
||||||
setTotalPages(0);
|
setTotalPages(0);
|
||||||
setPages([createPageData('', 0)]);
|
setPages([createPageData('', 0)]);
|
||||||
setPageUrls([]);
|
setPageUrls([]);
|
||||||
|
|||||||
@@ -27,8 +27,8 @@ export interface ReaderStatePages {
|
|||||||
setTotalPages: React.Dispatch<React.SetStateAction<number>>;
|
setTotalPages: React.Dispatch<React.SetStateAction<number>>;
|
||||||
currentPageIndex: number;
|
currentPageIndex: number;
|
||||||
setCurrentPageIndex: React.Dispatch<React.SetStateAction<number>>;
|
setCurrentPageIndex: React.Dispatch<React.SetStateAction<number>>;
|
||||||
pageToScrollToIndex: number;
|
pageToScrollToIndex: number | null;
|
||||||
setPageToScrollToIndex: React.Dispatch<React.SetStateAction<number>>;
|
setPageToScrollToIndex: React.Dispatch<React.SetStateAction<number | null>>;
|
||||||
pageUrls: string[];
|
pageUrls: string[];
|
||||||
setPageUrls: React.Dispatch<React.SetStateAction<string[]>>;
|
setPageUrls: React.Dispatch<React.SetStateAction<string[]>>;
|
||||||
pageLoadStates: { loaded: boolean; error?: boolean }[];
|
pageLoadStates: { loaded: boolean; error?: boolean }[];
|
||||||
|
|||||||
Reference in New Issue
Block a user