mautourco-components 0.2.9 → 0.2.10

package/dist/components/molecules/Pagination/Pagination.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import './Pagination.css';
+export interface PaginationProps {
+    /** Current page (1-indexed) */
+    currentPage: number;
+    /** Total number of pages */
+    totalPages: number;
+    /** Handler called when page changes */
+    onPageChange: (page: number) => void;
+    /** Number of pages to display on each side of the current page */
+    siblingCount?: number;
+    /** Additional CSS classes */
+    className?: string;
+}
+declare const Pagination: React.FC<PaginationProps>;
+export default Pagination;

package/dist/components/molecules/Pagination/Pagination.js

@@ -0,0 +1,90 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Icon from '../../atoms/Icon/Icon';
+import './Pagination.css';
+var Pagination = function (_a) {
+    var currentPage = _a.currentPage, totalPages = _a.totalPages, onPageChange = _a.onPageChange, _b = _a.siblingCount, siblingCount = _b === void 0 ? 1 : _b, _c = _a.className, className = _c === void 0 ? '' : _c;
+    var handlePrevious = function () {
+        if (currentPage > 1) {
+            onPageChange(currentPage - 1);
+        }
+    };
+    var handleNext = function () {
+        if (currentPage < totalPages) {
+            onPageChange(currentPage + 1);
+        }
+    };
+    var handlePageClick = function (page) {
+        if (page >= 1 && page <= totalPages && page !== currentPage) {
+            onPageChange(page);
+        }
+    };
+    // Generate page numbers to display
+    var getPageNumbers = function () {
+        var pages = [];
+        var totalNumbers = siblingCount * 2 + 5;
+        var totalBlocks = totalNumbers + 2;
+        if (totalPages <= totalBlocks) {
+            // Display all pages if total is small
+            for (var i = 1; i <= totalPages; i++) {
+                pages.push(i);
+            }
+        }
+        else {
+            var leftSiblingIndex = Math.max(currentPage - siblingCount, 1);
+            var rightSiblingIndex = Math.min(currentPage + siblingCount, totalPages);
+            var shouldShowLeftEllipsis = leftSiblingIndex > 2;
+            var shouldShowRightEllipsis = rightSiblingIndex < totalPages - 1;
+            if (!shouldShowLeftEllipsis && shouldShowRightEllipsis) {
+                // Case: [1] [2] [3] [4] ... [10]
+                var leftItemCount = 3 + 2 * siblingCount;
+                for (var i = 1; i <= leftItemCount; i++) {
+                    pages.push(i);
+                }
+                pages.push('ellipsis');
+                pages.push(totalPages);
+            }
+            else if (shouldShowLeftEllipsis && !shouldShowRightEllipsis) {
+                // Case: [1] ... [7] [8] [9] [10]
+                pages.push(1);
+                pages.push('ellipsis');
+                var rightItemCount = 3 + 2 * siblingCount;
+                for (var i = totalPages - rightItemCount + 1; i <= totalPages; i++) {
+                    pages.push(i);
+                }
+            }
+            else {
+                // Case: [1] ... [4] [5] [6] ... [10]
+                pages.push(1);
+                pages.push('ellipsis');
+                for (var i = leftSiblingIndex; i <= rightSiblingIndex; i++) {
+                    pages.push(i);
+                }
+                pages.push('ellipsis');
+                pages.push(totalPages);
+            }
+        }
+        return pages;
+    };
+    var pageNumbers = getPageNumbers();
+    var isPreviousDisabled = currentPage <= 1;
+    var isNextDisabled = currentPage >= totalPages;
+    return (_jsxs("div", __assign({ className: "pagination ".concat(className) }, { children: [_jsx("button", __assign({ type: "button", className: "pagination__button pagination__button--prev", onClick: handlePrevious, disabled: isPreviousDisabled, "aria-label": "Previous page" }, { children: _jsx(Icon, { name: "chevron-left", size: "sm" }) })), _jsx("div", __assign({ className: "pagination__numbers" }, { children: pageNumbers.map(function (page, index) {
+                    if (page === 'ellipsis') {
+                        return (_jsx("span", __assign({ className: "pagination__ellipsis" }, { children: "..." }), "ellipsis-".concat(index)));
+                    }
+                    var isSelected = page === currentPage;
+                    return (_jsx("button", __assign({ type: "button", className: "pagination__number ".concat(isSelected ? 'pagination__number--selected' : ''), onClick: function () { return handlePageClick(page); }, "aria-label": "Page ".concat(page), "aria-current": isSelected ? 'page' : undefined }, { children: page }), page));
+                }) })), _jsx("button", __assign({ type: "button", className: "pagination__button pagination__button--next", onClick: handleNext, disabled: isNextDisabled, "aria-label": "Next page" }, { children: _jsx(Icon, { name: "chevron-right", size: "sm" }) }))] })));
+};
+export default Pagination;