pagination
This commit is contained in:
hamid zarghami
@@ -1,107 +1,41 @@
|
||||
import React from "react";
|
||||
import Button from "./Button";
|
||||
|
||||
interface PaginationProps {
|
||||
currentPage: number;
|
||||
totalPages: number;
|
||||
onPageChange: (page: number) => void;
|
||||
hasNext: boolean;
|
||||
nextCursor?: string;
|
||||
previousCursor?: string;
|
||||
onNext: (cursor?: string) => void;
|
||||
onPrevious: (cursor?: string) => void;
|
||||
}
|
||||
|
||||
const Pagination: React.FC<PaginationProps> = ({
|
||||
currentPage,
|
||||
totalPages,
|
||||
onPageChange,
|
||||
hasNext,
|
||||
nextCursor,
|
||||
previousCursor,
|
||||
onNext,
|
||||
onPrevious,
|
||||
}) => {
|
||||
// اگر فقط یک صفحه داریم، pagination نمایش داده نمیشود
|
||||
if (totalPages <= 1) return null;
|
||||
|
||||
const getPageNumbers = () => {
|
||||
const pageNumbers: (number | string)[] = [];
|
||||
const maxVisiblePages = window.innerWidth < 768 ? 3 : 5; // تعداد کمتر برای موبایل
|
||||
|
||||
if (totalPages <= maxVisiblePages) {
|
||||
for (let i = 1; i <= totalPages; i++) {
|
||||
pageNumbers.push(i);
|
||||
}
|
||||
} else {
|
||||
// نمایش صفحه اول
|
||||
pageNumbers.push(1);
|
||||
|
||||
if (currentPage > 3) {
|
||||
pageNumbers.push("...");
|
||||
}
|
||||
|
||||
// صفحات میانی
|
||||
const start = Math.max(2, Math.min(currentPage - 1, totalPages - 3));
|
||||
const end = Math.min(totalPages - 1, Math.max(currentPage + 1, 4));
|
||||
|
||||
for (let i = start; i <= end; i++) {
|
||||
if (!pageNumbers.includes(i)) {
|
||||
pageNumbers.push(i);
|
||||
}
|
||||
}
|
||||
|
||||
if (currentPage < totalPages - 2) {
|
||||
pageNumbers.push("...");
|
||||
}
|
||||
|
||||
// نمایش صفحه آخر
|
||||
if (!pageNumbers.includes(totalPages)) {
|
||||
pageNumbers.push(totalPages);
|
||||
}
|
||||
}
|
||||
|
||||
return pageNumbers;
|
||||
};
|
||||
|
||||
const pageNumbers = getPageNumbers();
|
||||
// اگر hasNext فالس باشد، pagination نمایش داده نمیشود
|
||||
if (!hasNext && !previousCursor) return null;
|
||||
|
||||
return (
|
||||
<div className="flex justify-center items-center gap-1 md:gap-2 py-4 md:py-6 mt-3 md:mt-4 border-t border-gray-100">
|
||||
{/* دکمه صفحه قبل */}
|
||||
<button
|
||||
className={`px-2 md:px-3 py-2 text-xs md:text-sm rounded-lg transition-colors ${currentPage === 1
|
||||
? "text-gray-400 cursor-not-allowed"
|
||||
: "text-gray-600 hover:bg-gray-100 hover:text-gray-800"
|
||||
}`}
|
||||
onClick={() => currentPage > 1 && onPageChange(currentPage - 1)}
|
||||
disabled={currentPage === 1}
|
||||
>
|
||||
قبلی
|
||||
</button>
|
||||
<div className="flex items-center justify-center gap-4 mt-6">
|
||||
<Button
|
||||
label="قبلی"
|
||||
onClick={() => onPrevious(previousCursor)}
|
||||
disabled={!previousCursor}
|
||||
className="w-fit"
|
||||
/>
|
||||
|
||||
<Button
|
||||
label="بعدی"
|
||||
onClick={() => onNext(nextCursor)}
|
||||
disabled={!hasNext}
|
||||
className="w-fit"
|
||||
/>
|
||||
|
||||
{/* شماره صفحات */}
|
||||
<div className="flex gap-1">
|
||||
{pageNumbers.map((page, index) =>
|
||||
typeof page === "number" ? (
|
||||
<button
|
||||
key={index}
|
||||
className={`w-8 h-8 md:w-10 md:h-10 text-xs md:text-sm rounded-lg transition-colors ${currentPage === page
|
||||
? "bg-primary text-white shadow-sm"
|
||||
: "text-gray-600 hover:bg-gray-100 hover:text-gray-800"
|
||||
}`}
|
||||
onClick={() => onPageChange(page)}
|
||||
>
|
||||
{page}
|
||||
</button>
|
||||
) : (
|
||||
<span key={index} className="flex items-center px-1 md:px-2 text-gray-400 text-xs md:text-sm">
|
||||
{page}
|
||||
</span>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* دکمه صفحه بعد */}
|
||||
<button
|
||||
className={`px-2 md:px-3 py-2 text-xs md:text-sm rounded-lg transition-colors ${currentPage === totalPages
|
||||
? "text-gray-400 cursor-not-allowed"
|
||||
: "text-gray-600 hover:bg-gray-100 hover:text-gray-800"
|
||||
}`}
|
||||
onClick={() => currentPage < totalPages && onPageChange(currentPage + 1)}
|
||||
disabled={currentPage === totalPages}
|
||||
>
|
||||
بعدی
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
+17
-10
@@ -372,9 +372,11 @@ const Table = <T extends RowDataType>({
|
||||
|
||||
{pagination && (
|
||||
<Pagination
|
||||
currentPage={pagination.currentPage}
|
||||
totalPages={pagination.totalPages}
|
||||
onPageChange={pagination.onPageChange}
|
||||
hasNext={!!pagination.nextCursor}
|
||||
nextCursor={pagination.nextCursor}
|
||||
previousCursor={pagination.previousCursor}
|
||||
onNext={pagination.onNext}
|
||||
onPrevious={pagination.onPrevious}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
@@ -403,13 +405,18 @@ const Table = <T extends RowDataType>({
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{pagination && (
|
||||
<Pagination
|
||||
currentPage={pagination.currentPage}
|
||||
totalPages={pagination.totalPages}
|
||||
onPageChange={pagination.onPageChange}
|
||||
/>
|
||||
)}
|
||||
{pagination && (() => {
|
||||
console.log('Table component rendering pagination:', pagination);
|
||||
return (
|
||||
<Pagination
|
||||
hasNext={pagination.hasNext}
|
||||
nextCursor={pagination.nextCursor}
|
||||
previousCursor={pagination.previousCursor}
|
||||
onNext={pagination.onNext}
|
||||
onPrevious={pagination.onPrevious}
|
||||
/>
|
||||
);
|
||||
})()}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -14,9 +14,11 @@ export interface ColumnType<T extends RowDataType = RowDataType> {
|
||||
}
|
||||
|
||||
export interface PaginationConfig {
|
||||
currentPage: number;
|
||||
totalPages: number;
|
||||
onPageChange: (page: number) => void;
|
||||
hasNext: boolean;
|
||||
nextCursor?: string;
|
||||
previousCursor?: string;
|
||||
onNext: (cursor?: string) => void;
|
||||
onPrevious: (cursor?: string) => void;
|
||||
}
|
||||
|
||||
export interface InlineActionItem {
|
||||
|
||||
Reference in New Issue
Block a user