widenarrow-ui 1.0.47 → 1.0.49

package/lib/index.js

@@ -2610,9 +2610,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, tablePagination = _a.tablePagination, _c = _a.i18n, i18n = _c === void 0 ? {
-        t: function (value) { return value; }
-    } : _c;
+    var className = _a.className, pagination = _a.pagination, slim = _a.slim, onChange = _a.onChange, _c = _a.buttonType, buttonType = _c === void 0 ? exports.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;
     }
@@ -2628,53 +2626,50 @@ 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 (jsxRuntime.jsx("ul", { className: s$b('container', (_b = {}, _b[className] = className, _b)), children: ramda.times(function (i) { return (jsxRuntime.jsx("li", { className: itemClassName, children: jsxRuntime.jsx("div", { className: buttonClassName(undefined) }) }, i)); }, 5) }));
+        return (jsxRuntime.jsx("ul", { className: s$b('container', (_b = {}, _b[className] = className, _b)), children: ramda.times(function (i) { return (jsxRuntime.jsx("li", { className: itemClassName, children: jsxRuntime.jsx("div", { className: buttonClassName() }) }, i)); }, 5) }));
     }
     var getPageInfoText = function () {
         var start = (pagination.currentPage - 1) * pagination.pageSize + 1;
         var end = pagination.currentPage * pagination.pageSize;
-        return (jsxRuntime.jsx(react.Fragment, { children: jsxRuntime.jsx(Paragraph, { marginBottom: '0', marginLeft: '2', children: i18n.t('{{start}} - {{end}} of {{total}}', {
-                    start: start,
-                    end: end,
-                    total: pagination.numberOfHits
-                }) }) }));
+        return (jsxRuntime.jsx(react.Fragment, { children: jsxRuntime.jsx(Paragraph, { marginBottom: '0', marginLeft: '2', children: tableIntervalTitleCallback
+                    ? tableIntervalTitleCallback({ start: start, end: end, total: pagination.numberOfHits })
+                    : "".concat(start, " - ").concat(end, " of ").concat(pagination.numberOfHits) }) }));
     };
+    var firstPageButton = withFastForwardButtons ? (jsxRuntime.jsx("li", { children: jsxRuntime.jsx("button", { title: firstPageTitle || 'First page', className: buttonClassName(isFirstPage ? 'button_disabled' : undefined), onClick: function () {
+                onChange(__assign(__assign({}, pagination), { currentPage: 1 }));
+            }, disabled: isFirstPage, children: jsxRuntime.jsx(Icon, { icon: exports.IconTypes.ARROW_FIRST_PAGE }) }) })) : null;
+    var previousPageButton = (jsxRuntime.jsx("li", { className: itemClassName, children: jsxRuntime.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: jsxRuntime.jsx(Icon, { icon: exports.IconTypes.CHEVRON_LEFT }) }) }));
+    var nextPageButton = (jsxRuntime.jsx("li", { className: itemClassName, children: jsxRuntime.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: jsxRuntime.jsx(Icon, { icon: exports.IconTypes.CHEVRON_RIGHT }) }) }));
+    var lastPageButton = withFastForwardButtons ? (jsxRuntime.jsx("li", { children: jsxRuntime.jsx("button", { title: lastPageTitle || 'Last page', className: buttonClassName(isLastPage ? 'button_disabled' : undefined), onClick: function () {
+                onChange(__assign(__assign({}, pagination), { currentPage: pagination.numberOfPages }));
+            }, disabled: isLastPage, children: jsxRuntime.jsx(Icon, { icon: exports.IconTypes.ARROW_LAST_PAGE }) }) })) : null;
     /*
         paginationMarkup
     */
     var paginationMarkup = function () {
         var _a, _b;
-        if (tablePagination) {
-            return (jsxRuntime.jsxs(Box, { alignItems: 'center', children: [jsxRuntime.jsxs("ul", { className: s$b('container', (_a = {}, _a[className] = className, _a)), children: [jsxRuntime.jsx("li", { className: itemClassName, children: jsxRuntime.jsx("button", { title: i18n.t('Previous page'), className: buttonClassName(isFirstPage ? 'button_disabled' : undefined), onClick: function () {
-                                        !isFirstPage && onPaginate(pagination.currentPage - 1);
-                                    }, disabled: isFirstPage, children: jsxRuntime.jsx(Icon, { icon: exports.IconTypes.CHEVRON_LEFT }) }) }), jsxRuntime.jsx("li", { className: itemClassName, children: jsxRuntime.jsx("button", { title: i18n.t('Next page'), className: buttonClassName(isLastPage ? 'button_disabled' : undefined), onClick: function () {
-                                        onPaginate(pagination.currentPage + 1);
-                                    }, disabled: isLastPage, children: jsxRuntime.jsx(Icon, { icon: exports.IconTypes.CHEVRON_RIGHT }) }) })] }), getPageInfoText()] }));
+        if (withTablePagination) {
+            return (jsxRuntime.jsxs(Box, { alignItems: 'center', children: [jsxRuntime.jsxs("ul", { className: s$b('container', (_a = {}, _a[className] = className, _a)), children: [firstPageButton, previousPageButton, nextPageButton, lastPageButton] }), getPageInfoText()] }));
         }
-        return (jsxRuntime.jsxs("ul", { className: s$b('container', (_b = {}, _b[className] = className, _b)), children: [jsxRuntime.jsx("li", { className: itemClassName, children: jsxRuntime.jsx("button", { title: i18n.t('Previous page'), className: buttonClassName(isFirstPage ? 'button_disabled' : undefined), onClick: function () {
-                            !isFirstPage && onPaginate(pagination.currentPage - 1);
-                        }, disabled: isFirstPage, children: jsxRuntime.jsx(Icon, { icon: exports.IconTypes.CHEVRON_LEFT }) }) }), getPaginationArray(pagination).map(function (pageObject, index) {
+        return (jsxRuntime.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 (jsxRuntime.jsx("li", { className: itemClassName, children: jsxRuntime.jsx("div", { className: s$b('dots', { dots_slim: slim }), children: "..." }) }, "".concat(pageObject.type, "-").concat(index)));
                     }
-                    return (jsxRuntime.jsx("li", { className: itemClassName, children: jsxRuntime.jsx("button", { title: i18n.t('Go to page {{page}}', { page: pageObject.page }), className: buttonClassName(pageObject.page === pagination.currentPage ? 'button_isActive' : undefined), onClick: function () {
-                                onPaginate(pageObject.page);
+                    return (jsxRuntime.jsx("li", { className: itemClassName, children: jsxRuntime.jsx("button", { title: "Go to page ".concat(pageObject.page), className: buttonClassName(pageObject.page === pagination.currentPage ? 'button_isActive' : undefined), onClick: function () {
+                                onChange(__assign(__assign({}, pagination), { currentPage: pageObject.page }));
                             }, children: pageObject.page }) }, "".concat(pageObject.type, "-").concat(index)));
-                }), jsxRuntime.jsx("li", { className: itemClassName, children: jsxRuntime.jsx("button", { title: i18n.t('Next page'), className: buttonClassName(isLastPage ? 'button_disabled' : undefined), onClick: function () {
-                            onPaginate(pagination.currentPage + 1);
-                        }, disabled: isLastPage, children: jsxRuntime.jsx(Icon, { icon: exports.IconTypes.CHEVRON_RIGHT }) }) })] }));
+                }), nextPageButton, lastPageButton] }));
     };
-    /*
-    pageSizeMarkup
-    */
+    var sizeTitle = pageSizeTitleCallback ? pageSizeTitleCallback({ pageSize: pagination.pageSize }) : "Page size: ".concat(pagination.pageSize);
     var pageSizeMarkup = function () {
-        return onPageSizeChange ? (jsxRuntime.jsxs(react.Fragment, { children: [jsxRuntime.jsx(Separator, { marginX: '15' }), jsxRuntime.jsx(DropDown, { buttonComponent: jsxRuntime.jsx(InlineButton, { type: exports.HierarchyTypes.SECONDARY, text: i18n.t('Page size{{colon}} {{pageSize}}', { pageSize: pagination.pageSize, colon: ':' }) }), title: i18n.t('Page size'), children: [10, 20, 30, 40, 50, 80, 100]
+        return withPageSizeChange ? (jsxRuntime.jsxs(react.Fragment, { children: [jsxRuntime.jsx(Separator, { marginX: '15' }), jsxRuntime.jsx(DropDown, { buttonComponent: jsxRuntime.jsx(InlineButton, { type: buttonType, text: sizeTitle }), title: sizeTitle, children: pageSizeOptions
                         .filter(function (pageSize) { return pageSize < pagination.numberOfHits; })
-                        .map(function (pageSize) { return (jsxRuntime.jsx(DropDownItem, { text: pageSize.toString(), onClickCallback: function () { return onPageSizeChange(pageSize); }, active: pagination.pageSize === pageSize, closeDropDownOnClick: true, withEllipsis: true })); }) })] })) : null;
+                        .map(function (pageSize) { return (jsxRuntime.jsx(DropDownItem, { text: pageSize.toString(), onClickCallback: function () { return onChange(__assign(__assign({}, pagination), { pageSize: pageSize })); }, active: pagination.pageSize === pageSize, closeDropDownOnClick: true, withEllipsis: true })); }) })] })) : null;
     };
     return (jsxRuntime.jsxs(Box, { alignItems: 'center', children: [paginationMarkup(), pageSizeMarkup()] }));
 };