@trafilea/afrodita-components 5.0.0-beta.130 → 5.0.0-beta.131

package/build/index.d.ts

@@ -2013,8 +2013,9 @@ interface PaginationProps {
     underlineActive?: boolean;
     boldActive?: boolean;
     disabled?: boolean;
+    showReducedPages?: boolean;
 }
-declare const Pagination: ({ from, to, currentPage, onChange, underlineActive, boldActive, disabled, }: PaginationProps) => JSX.Element;
+declare const Pagination: ({ from, to, currentPage, onChange, underlineActive, boldActive, disabled, showReducedPages, }: PaginationProps) => JSX.Element;
 
 declare const PaginatorBlog: ({ from, to, currentPage, onChange, }: Pick<PaginationProps, 'from' | 'to' | 'onChange' | 'currentPage'>) => JSX.Element;
 

package/build/index.esm.js

@@ -12825,7 +12825,7 @@ var PageNumber = newStyled.span(templateObject_4$8 || (templateObject_4$8 = __ma
 }, mediaQueries({
     fontSize: ['1rem', '1.25rem'],
     lineHeight: ['1.5rem', '1.75rem'],
-    width: ['1.25rem', '1.875rem'],
+    width: ['1.5rem', '1.875rem'],
 }), function (_a) {
     var background = _a.background;
     return background || 'unset';
@@ -12833,9 +12833,10 @@ var PageNumber = newStyled.span(templateObject_4$8 || (templateObject_4$8 = __ma
 var templateObject_1$r, templateObject_2$g, templateObject_3$g, templateObject_4$8;
 
 var Pagination = function (_a) {
-    var from = _a.from, to = _a.to, _b = _a.currentPage, currentPage = _b === void 0 ? from : _b, onChange = _a.onChange, _c = _a.underlineActive, underlineActive = _c === void 0 ? true : _c, _d = _a.boldActive, boldActive = _d === void 0 ? true : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e;
+    var from = _a.from, to = _a.to, _b = _a.currentPage, currentPage = _b === void 0 ? from : _b, onChange = _a.onChange, _c = _a.underlineActive, underlineActive = _c === void 0 ? true : _c, _d = _a.boldActive, boldActive = _d === void 0 ? true : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.showReducedPages, showReducedPages = _f === void 0 ? false : _f;
+    var RANGE_OF_PAGES = 3;
     var theme = useTheme();
-    var _f = React__default.useState(currentPage), page = _f[0], setPage = _f[1];
+    var _g = useState(currentPage), page = _g[0], setPage = _g[1];
     var handlePageChange = function (page) {
         if (disabled || page < from || page > to) {
             return;
@@ -12843,7 +12844,39 @@ var Pagination = function (_a) {
         setPage(page);
         onChange(page);
     };
-    return (jsxs$1(Container$k, __assign$1({ "data-testid": "PaginationContainer" }, { children: [jsx$1(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page - 1); }, "data-testid": "LeftChevron" }, { children: jsx$1(Icon.Arrows.ChevronLeft, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0), jsx$1(PageNumbersContainer, __assign$1({ "data-testid": "PageNumbersContainer", theme: theme }, { children: new Array(to - from + 1).fill(0).map(function (_, i) { return (jsx$1(PageNumber, __assign$1({ onClick: function () { return handlePageChange(i + from); }, bold: boldActive && page === i + from, underline: underlineActive && page === i + from, role: 'button', color: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, borderColor: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, theme: theme }, { children: i + from }), i)); }) }), void 0), jsx$1(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "RightChevron" }, { children: jsx$1(Icon.Arrows.ChevronRight, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
+    var reducedPages = useMemo(function () {
+        if (!showReducedPages) {
+            return [];
+        }
+        var pages = [];
+        new Array(to - from + 1).fill(0).map(function (_, i) {
+            var initialRange = page - RANGE_OF_PAGES;
+            var finalRange = page + RANGE_OF_PAGES;
+            if (from + i > initialRange && from + i < finalRange) {
+                pages.push(from + i);
+            }
+        });
+        if (pages[0] === from + RANGE_OF_PAGES - 1) {
+            pages = [from, from + 1].concat(pages);
+        }
+        else if (pages[0] > from + RANGE_OF_PAGES - 1) {
+            pages = [from, -2].concat(pages);
+        }
+        else if (pages[0] === from + 1) {
+            pages = [from].concat(pages);
+        }
+        if (pages[pages.length - 1] === to - RANGE_OF_PAGES + 1) {
+            pages = pages.concat([to - 1, to]);
+        }
+        else if (pages[pages.length - 1] < to - RANGE_OF_PAGES + 1) {
+            pages = pages.concat([-2, to]);
+        }
+        else if (pages[pages.length - 1] === to - 1) {
+            pages = pages.concat([to]);
+        }
+        return pages;
+    }, [from, page, showReducedPages, to]);
+    return (jsxs$1(Container$k, __assign$1({ "data-testid": "PaginationContainer" }, { children: [jsx$1(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page - 1); }, "data-testid": "LeftChevron" }, { children: jsx$1(Icon.Arrows.ChevronLeft, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0), !showReducedPages && (jsx$1(PageNumbersContainer, __assign$1({ "data-testid": "PageNumbersContainer", theme: theme }, { children: new Array(to - from + 1).fill(0).map(function (_, i) { return (jsx$1(PageNumber, __assign$1({ onClick: function () { return handlePageChange(i + from); }, bold: boldActive && page === i + from, underline: underlineActive && page === i + from, role: 'button', color: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, borderColor: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, theme: theme }, { children: i + from }), i)); }) }), void 0)), showReducedPages && (jsx$1(PageNumbersContainer, __assign$1({ "data-testid": "PageNumbersContainer", theme: theme }, { children: reducedPages.map(function (reducedPage, index) { return (jsx$1(PageNumber, __assign$1({ onClick: function () { return handlePageChange(reducedPage); }, bold: boldActive && page === reducedPage, underline: underlineActive && page === reducedPage, role: 'button', color: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, borderColor: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, theme: theme }, { children: reducedPage !== -2 ? reducedPage : '...' }), index)); }) }), void 0)), jsx$1(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "RightChevron" }, { children: jsx$1(Icon.Arrows.ChevronRight, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
 };
 
 var PaginatorBlog = function (_a) {