fix inifity flip

This commit is contained in:
hamid zarghami
2026-01-07 11:02:55 +03:30
parent a62688e151
commit b359473919
+31 -8
View File
@@ -1,4 +1,4 @@
import { type FC, useRef, useCallback, useState } from 'react'; import { type FC, useRef, useCallback, useState, useEffect } from 'react';
import HTMLFlipBook from 'react-pageflip'; import HTMLFlipBook from 'react-pageflip';
import { type PageData } from '../types'; import { type PageData } from '../types';
import BookPage from './BookPage'; import BookPage from './BookPage';
@@ -30,18 +30,41 @@ const BookViewer: FC<BookViewerProps> = ({ pages }) => {
const bookRef = useRef<FlipBookInstance | null>(null); const bookRef = useRef<FlipBookInstance | null>(null);
const [currentPage, setCurrentPage] = useState(0); const [currentPage, setCurrentPage] = useState(0);
// اطمینان از اینکه currentPage همیشه در محدوده معتبر است
useEffect(() => {
if (currentPage < 0) {
setCurrentPage(0);
} else if (currentPage >= pages.length) {
setCurrentPage(pages.length - 1);
}
}, [currentPage, pages.length]);
const handlePageFlip = useCallback((e: FlipEvent) => { const handlePageFlip = useCallback((e: FlipEvent) => {
const pageNum = e.data; // react-pageflip شماره صفحه را به صورت 0-based برمی‌گرداند
// اما باید مطمئن شویم که در محدوده معتبر است
let pageNum = e.data;
// اگر pageNum منفی است یا بزرگتر از تعداد صفحات، آن را محدود می‌کنیم
if (pageNum < 0) {
pageNum = 0;
} else if (pageNum >= pages.length) {
pageNum = pages.length - 1;
}
setCurrentPage(pageNum); setCurrentPage(pageNum);
}, []); }, [pages.length]);
const goToNextPage = useCallback(() => { const goToNextPage = useCallback(() => {
bookRef.current?.pageFlip()?.flipNext(); if (currentPage < pages.length - 1) {
}, []); bookRef.current?.pageFlip()?.flipNext();
}
}, [currentPage, pages.length]);
const goToPrevPage = useCallback(() => { const goToPrevPage = useCallback(() => {
bookRef.current?.pageFlip()?.flipPrev(); if (currentPage > 0) {
}, []); bookRef.current?.pageFlip()?.flipPrev();
}
}, [currentPage]);
return ( return (
<div className="flex flex-col items-center gap-4 md:gap-6 w-full h-full" dir="rtl"> <div className="flex flex-col items-center gap-4 md:gap-6 w-full h-full" dir="rtl">
@@ -106,7 +129,7 @@ const BookViewer: FC<BookViewerProps> = ({ pages }) => {
{/* شماره صفحه */} {/* شماره صفحه */}
<div className="flex items-center gap-2 min-w-[100px] md:min-w-[120px] justify-center"> <div className="flex items-center gap-2 min-w-[100px] md:min-w-[120px] justify-center">
<span className="text-xs md:text-sm text-gray-600"> <span className="text-xs md:text-sm text-gray-600">
صفحه {currentPage + 1} از {pages.length} صفحه {Math.min(currentPage + 1, pages.length)} از {pages.length}
</span> </span>
</div> </div>