widenarrow-ui 1.0.48 → 1.0.50

package/lib/components/Pagination/Pagination.types.d.ts

@@ -2,14 +2,18 @@ import { HierarchyTypes } from 'src/constants';
 import { SearchResultInterface } from '../../types/common.types';
 export interface PaginationProps {
     pagination: SearchResultInterface;
-    onPaginate: (page: number) => void;
-    onPageSizeChange?: (pageSize: number) => void;
+    onChange: (searchResult: SearchResultInterface) => void;
     slim?: boolean;
-    tablePagination?: boolean;
+    withPageSizeChange?: boolean;
+    withTablePagination?: boolean;
+    withFastForwardButtons?: boolean;
+    pageSizeOptions?: Array<number>;
     buttonType?: HierarchyTypes.PRIMARY | HierarchyTypes.SECONDARY;
     className?: string;
     nextPageTitle?: string;
     previousPageTitle?: string;
+    firstPageTitle?: string;
+    lastPageTitle?: string;
     pageSizeTitleCallback?: (args: {
         pageSize: number;
     }) => string;

package/lib/index.d.ts

@@ -497,27 +497,28 @@ declare const FacetButton: FC<FacetButtonProps>;
 interface SearchResultInterface {
     currentPage: number;
     numberOfPages: number;
+    pages: number;
     pageSize: number;
     numberOfHits: number;
     sortOrder: number;
     fetching?: boolean;
-    pages: number;
-    fetched?: boolean;
     searchTerm?: string;
-    ids?: Array<number>;
-    pending?: boolean;
 }
 
 interface PaginationProps {
     pagination: SearchResultInterface;
-    onPaginate: (page: number) => void;
-    onPageSizeChange?: (pageSize: number) => void;
+    onChange: (searchResult: SearchResultInterface) => void;
     slim?: boolean;
-    tablePagination?: boolean;
+    withPageSizeChange?: boolean;
+    withTablePagination?: boolean;
+    withFastForwardButtons?: boolean;
+    pageSizeOptions?: Array<number>;
     buttonType?: HierarchyTypes$1.PRIMARY | HierarchyTypes$1.SECONDARY;
     className?: string;
     nextPageTitle?: string;
     previousPageTitle?: string;
+    firstPageTitle?: string;
+    lastPageTitle?: string;
     pageSizeTitleCallback?: (args: {
         pageSize: number;
     }) => string;

package/lib/index.esm.js

@@ -2608,7 +2608,7 @@ var styles$b = {"body":"Pagination-module_WRLv5h","container":"Pagination-module
 var s$b = classNames.bind(styles$b);
 var Pagination = function (_a) {
     var _b;
-    var className = _a.className, pagination = _a.pagination, onPaginate = _a.onPaginate, slim = _a.slim, onPageSizeChange = _a.onPageSizeChange, _c = _a.buttonType, buttonType = _c === void 0 ? HierarchyTypes.SECONDARY : _c, tablePagination = _a.tablePagination, previousPageTitle = _a.previousPageTitle, nextPageTitle = _a.nextPageTitle, pageSizeTitleCallback = _a.pageSizeTitleCallback, tableIntervalTitleCallback = _a.tableIntervalTitleCallback;
+    var className = _a.className, pagination = _a.pagination, slim = _a.slim, onChange = _a.onChange, _c = _a.buttonType, buttonType = _c === void 0 ? HierarchyTypes.SECONDARY : _c, _d = _a.pageSizeOptions, pageSizeOptions = _d === void 0 ? [10, 20, 30, 40, 50, 80, 100] : _d, firstPageTitle = _a.firstPageTitle, previousPageTitle = _a.previousPageTitle, nextPageTitle = _a.nextPageTitle, lastPageTitle = _a.lastPageTitle, pageSizeTitleCallback = _a.pageSizeTitleCallback, tableIntervalTitleCallback = _a.tableIntervalTitleCallback, withTablePagination = _a.withTablePagination, withFastForwardButtons = _a.withFastForwardButtons, withPageSizeChange = _a.withPageSizeChange;
     if (!pagination) {
         return null;
     }
@@ -2624,9 +2624,6 @@ var Pagination = function (_a) {
         var _a;
         return s$b('button', (_a = { button_slim: slim }, _a[additionalClassName] = additionalClassName, _a));
     };
-    if (numberOfPages < 2) {
-        return null;
-    }
     if (pagination.fetching && !numberOfPages) {
         return (jsx("ul", { className: s$b('container', (_b = {}, _b[className] = className, _b)), children: times(function (i) { return (jsx("li", { className: itemClassName, children: jsx("div", { className: buttonClassName() }) }, i)); }, 5) }));
     }
@@ -2637,39 +2634,40 @@ var Pagination = function (_a) {
                     ? tableIntervalTitleCallback({ start: start, end: end, total: pagination.numberOfHits })
                     : "".concat(start, " - ").concat(end, " of ").concat(pagination.numberOfHits) }) }));
     };
+    var firstPageButton = withFastForwardButtons ? (jsx("li", { children: jsx("button", { title: firstPageTitle || 'First page', className: buttonClassName(isFirstPage ? 'button_disabled' : undefined), onClick: function () {
+                onChange(__assign(__assign({}, pagination), { currentPage: 1 }));
+            }, disabled: isFirstPage, children: jsx(Icon, { icon: IconTypes.ARROW_FIRST_PAGE }) }) })) : null;
+    var previousPageButton = (jsx("li", { className: itemClassName, children: jsx("button", { title: previousPageTitle || 'Previous page', className: buttonClassName(isFirstPage ? 'button_disabled' : undefined), onClick: function () {
+                !isFirstPage && onChange(__assign(__assign({}, pagination), { currentPage: pagination.currentPage - 1 }));
+            }, disabled: isFirstPage, children: jsx(Icon, { icon: IconTypes.CHEVRON_LEFT }) }) }));
+    var nextPageButton = (jsx("li", { className: itemClassName, children: jsx("button", { title: nextPageTitle || 'Next page', className: buttonClassName(isLastPage ? 'button_disabled' : undefined), onClick: function () {
+                onChange(__assign(__assign({}, pagination), { currentPage: pagination.currentPage + 1 }));
+            }, disabled: isLastPage, children: jsx(Icon, { icon: IconTypes.CHEVRON_RIGHT }) }) }));
+    var lastPageButton = withFastForwardButtons ? (jsx("li", { children: jsx("button", { title: lastPageTitle || 'Last page', className: buttonClassName(isLastPage ? 'button_disabled' : undefined), onClick: function () {
+                onChange(__assign(__assign({}, pagination), { currentPage: numberOfPages }));
+            }, disabled: isLastPage, children: jsx(Icon, { icon: IconTypes.ARROW_LAST_PAGE }) }) })) : null;
     /*
         paginationMarkup
     */
     var paginationMarkup = function () {
         var _a, _b;
-        if (tablePagination) {
-            return (jsxs(Box, { alignItems: 'center', children: [jsxs("ul", { className: s$b('container', (_a = {}, _a[className] = className, _a)), children: [jsx("li", { className: itemClassName, children: jsx("button", { title: previousPageTitle || 'Previous page', className: buttonClassName(isFirstPage ? 'button_disabled' : undefined), onClick: function () {
-                                        !isFirstPage && onPaginate(pagination.currentPage - 1);
-                                    }, disabled: isFirstPage, children: jsx(Icon, { icon: IconTypes.CHEVRON_LEFT }) }) }), jsx("li", { className: itemClassName, children: jsx("button", { title: nextPageTitle || 'Next page', className: buttonClassName(isLastPage ? 'button_disabled' : undefined), onClick: function () {
-                                        onPaginate(pagination.currentPage + 1);
-                                    }, disabled: isLastPage, children: jsx(Icon, { icon: IconTypes.CHEVRON_RIGHT }) }) })] }), getPageInfoText()] }));
+        if (withTablePagination) {
+            return (jsxs(Box, { alignItems: 'center', children: [jsxs("ul", { className: s$b('container', (_a = {}, _a[className] = className, _a)), children: [firstPageButton, previousPageButton, nextPageButton, lastPageButton] }), getPageInfoText()] }));
         }
-        return (jsxs("ul", { className: s$b('container', (_b = {}, _b[className] = className, _b)), children: [jsx("li", { className: itemClassName, children: jsx("button", { title: previousPageTitle || 'Previous page', className: buttonClassName(isFirstPage ? 'button_disabled' : undefined), onClick: function () {
-                            !isFirstPage && onPaginate(pagination.currentPage - 1);
-                        }, disabled: isFirstPage, children: jsx(Icon, { icon: IconTypes.CHEVRON_LEFT }) }) }), getPaginationArray(pagination).map(function (pageObject, index) {
+        return (jsxs("ul", { className: s$b('container', (_b = {}, _b[className] = className, _b)), children: [firstPageButton, previousPageButton, getPaginationArray(pagination).map(function (pageObject, index) {
                     if (pageObject.type === 'dots') {
                         return (jsx("li", { className: itemClassName, children: jsx("div", { className: s$b('dots', { dots_slim: slim }), children: "..." }) }, "".concat(pageObject.type, "-").concat(index)));
                     }
                     return (jsx("li", { className: itemClassName, children: jsx("button", { title: "Go to page ".concat(pageObject.page), className: buttonClassName(pageObject.page === pagination.currentPage ? 'button_isActive' : undefined), onClick: function () {
-                                onPaginate(pageObject.page);
+                                onChange(__assign(__assign({}, pagination), { currentPage: pageObject.page }));
                             }, children: pageObject.page }) }, "".concat(pageObject.type, "-").concat(index)));
-                }), jsx("li", { className: itemClassName, children: jsx("button", { title: nextPageTitle || 'Next page', className: buttonClassName(isLastPage ? 'button_disabled' : undefined), onClick: function () {
-                            onPaginate(pagination.currentPage + 1);
-                        }, disabled: isLastPage, children: jsx(Icon, { icon: IconTypes.CHEVRON_RIGHT }) }) })] }));
+                }), nextPageButton, lastPageButton] }));
     };
-    /*
-    pageSizeMarkup
-    */
     var sizeTitle = pageSizeTitleCallback ? pageSizeTitleCallback({ pageSize: pagination.pageSize }) : "Page size: ".concat(pagination.pageSize);
     var pageSizeMarkup = function () {
-        return onPageSizeChange ? (jsxs(Fragment, { children: [jsx(Separator, { marginX: '15' }), jsx(DropDown, { buttonComponent: jsx(InlineButton, { type: buttonType, text: sizeTitle }), title: sizeTitle, children: [10, 20, 30, 40, 50, 80, 100]
+        return withPageSizeChange ? (jsxs(Fragment, { children: [jsx(Separator, { marginX: '15' }), jsx(DropDown, { buttonComponent: jsx(InlineButton, { type: buttonType, text: sizeTitle }), title: sizeTitle, children: pageSizeOptions
                         .filter(function (pageSize) { return pageSize < pagination.numberOfHits; })
-                        .map(function (pageSize) { return (jsx(DropDownItem, { text: pageSize.toString(), onClickCallback: function () { return onPageSizeChange(pageSize); }, active: pagination.pageSize === pageSize, closeDropDownOnClick: true, withEllipsis: true })); }) })] })) : null;
+                        .map(function (pageSize) { return (jsx(DropDownItem, { text: pageSize.toString(), onClickCallback: function () { return onChange(__assign(__assign({}, pagination), { pageSize: pageSize })); }, active: pagination.pageSize === pageSize, closeDropDownOnClick: true, withEllipsis: true })); }) })] })) : null;
     };
     return (jsxs(Box, { alignItems: 'center', children: [paginationMarkup(), pageSizeMarkup()] }));
 };