ar-design
Version:
AR Design is a (react | nextjs) ui library.
83 lines (82 loc) • 3.97 kB
JavaScript
"use client";
import React, { useContext, useEffect, useState } from "react";
import "../../../assets/css/components/navigation/pagination/pagination.css";
import { ConfigContext } from "../../../libs/core/application/contexts/Config";
const Pagination = ({ defaultCurrent = 1, currentPage, totalRecords, perPage, onChange }) => {
// context
const { config } = useContext(ConfigContext);
// states
const [pages, setPages] = useState([]);
const [_currentPage, setCurrentPage] = useState(defaultCurrent);
const [totalPageCount, setTotalPageCount] = useState(0);
// useEffect
useEffect(() => {
if (totalRecords === 0)
return;
const liItems = [];
const _totalPageCount = Math.ceil(totalRecords / (perPage ?? config.perPage));
setTotalPageCount(_totalPageCount);
// Başlangıç ve bitiş aralığını hesapla.
const startPage = Math.max(1, _currentPage - 1);
const endPage = Math.min(_totalPageCount, _currentPage + 1);
// İlk sayfa ve ... eklemek.
if (startPage > 1) {
liItems.push(React.createElement("li", { key: 1, onClick: () => setCurrentPage(1) }, "1"));
if (startPage > 2) {
liItems.push(React.createElement("li", { key: "start-ellipsis", className: "start-ellipsis" }, "..."));
}
}
// Sayfa aralığını eklemek.
for (let i = startPage; i <= endPage; i++) {
liItems.push(React.createElement("li", { key: i, className: i === _currentPage ? "selection-page" : "", onClick: () => setCurrentPage(i) }, i));
}
// Son sayfa ve ... eklemek.
if (endPage < _totalPageCount) {
if (endPage < _totalPageCount - 1) {
liItems.push(React.createElement("li", { key: "end-ellipsis", className: "end-ellipsis" }, "..."));
}
liItems.push(React.createElement("li", { key: _totalPageCount, onClick: () => setCurrentPage(_totalPageCount) }, _totalPageCount));
}
setPages(liItems);
onChange(_currentPage);
}, [totalRecords, _currentPage]);
useEffect(() => {
setCurrentPage(currentPage);
}, [currentPage]);
return (React.createElement("div", { className: "ar-pagination" },
React.createElement("ul", null,
React.createElement("li", { className: _currentPage === 1 ? "passive" : "", onClick: () => {
if (_currentPage === 1)
return;
setCurrentPage(1);
} },
React.createElement("span", null, "«")),
React.createElement("li", { className: _currentPage === 1 ? "passive" : "", onClick: () => {
if (_currentPage === 1)
return;
setCurrentPage((prev) => {
if (prev === 1)
return prev;
return (prev -= 1);
});
} },
React.createElement("span", null, "‹")),
pages,
React.createElement("li", { className: totalPageCount === _currentPage ? "passive" : "", onClick: () => {
if (totalPageCount === _currentPage)
return;
setCurrentPage((prev) => {
if (prev === totalPageCount)
return prev;
return (prev += 1);
});
} },
React.createElement("span", null, "›")),
React.createElement("li", { className: totalPageCount === _currentPage ? "passive" : "", onClick: () => {
if (totalPageCount === _currentPage)
return;
setCurrentPage(totalPageCount);
} },
React.createElement("span", null, "»")))));
};
export default Pagination;