@dhis2-ui/pagination 8.0.1 → 8.1.1

package/build/es/page-summary.js

@@ -1,7 +1,7 @@
 import _JSXStyle from "styled-jsx/style";
 import { colors, spacers } from '@dhis2/ui-constants';
 import PropTypes from 'prop-types';
-import React from 'react'; // TODO: i18n translate
+import React from 'react';
 
 const translate = (prop, interpolationObject) => {
   if (typeof prop === 'function') {
@@ -11,47 +11,20 @@ const translate = (prop, interpolationObject) => {
   return prop;
 };
 
-const getItemRange = (page, pageSize, total) => {
-  let firstItem, lastItem;
-
-  if (total === 0) {
-    // if no items are found, the pager total is 0
-    // and we want to force the first and last item to be 0 too
-    firstItem = 0;
-    lastItem = 0;
-  } else {
-    // page is 1-based
-    firstItem = (page - 1) * pageSize + 1;
-    lastItem = firstItem + pageSize - 1;
-  }
-
-  if (lastItem > total) {
-    lastItem = total;
-  }
-
-  return {
-    firstItem,
-    lastItem
-  };
-};
-
 const PageSummary = ({
   dataTest,
+  firstItem,
+  lastItem,
   page,
   pageCount,
-  pageSize,
   pageSummaryText,
   total
 }) => {
-  const {
-    firstItem,
-    lastItem
-  } = getItemRange(page, pageSize, total);
   const summary = translate(pageSummaryText, {
-    page,
-    pageCount,
     firstItem,
     lastItem,
+    page,
+    pageCount,
     total
   });
   return /*#__PURE__*/React.createElement("div", {
@@ -68,9 +41,10 @@ const PageSummary = ({
 PageSummary.propTypes = {
   dataTest: PropTypes.string.isRequired,
   page: PropTypes.number.isRequired,
-  pageCount: PropTypes.number.isRequired,
-  pageSize: PropTypes.number.isRequired,
   pageSummaryText: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
-  total: PropTypes.number.isRequired
+  firstItem: PropTypes.number,
+  lastItem: PropTypes.number,
+  pageCount: PropTypes.number,
+  total: PropTypes.number
 };
-export { PageSummary, getItemRange };
+export { PageSummary };

package/build/es/pagination.js

@@ -1,7 +1,10 @@
 import _JSXStyle from "styled-jsx/style";
+import { requiredIf } from '@dhis2/prop-types';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
+import { getDefaultPageSummaryText } from './get-default-page-summary-text.js';
+import { getItemRange } from './get-item-range.js';
 import i18n from './locales/index.js';
 import { PageControls } from './page-controls.js';
 import { PageSelect } from './page-select.js';
@@ -11,22 +14,34 @@ import { PageSummary } from './page-summary.js';
 const Pagination = ({
   className,
   dataTest,
-  hidePageSizeSelect,
   hidePageSelect,
+  hidePageSizeSelect,
   hidePageSummary,
+  isLastPage,
+  nextPageText,
+  onPageChange,
+  onPageSizeChange,
   page,
   pageCount,
+  pageLength,
+  pageSelectText,
   pageSize,
-  total,
   pageSizes,
-  onPageChange,
-  onPageSizeChange,
-  nextPageText,
-  pageSelectText,
   pageSizeSelectText,
   pageSummaryText,
-  previousPageText
+  previousPageText,
+  total
 }) => {
+  const {
+    firstItem,
+    lastItem
+  } = getItemRange({
+    isLastPage,
+    page,
+    pageLength,
+    pageSize,
+    total
+  });
   return /*#__PURE__*/React.createElement("div", {
     "data-test": dataTest,
     className: "jsx-3647884394" + " " + (cx('container', className) || "")
@@ -40,14 +55,15 @@ const Pagination = ({
     pageSizeSelectText: pageSizeSelectText
   }), !hidePageSummary && /*#__PURE__*/React.createElement(PageSummary, {
     dataTest: dataTest,
+    firstItem: firstItem,
+    lastItem: lastItem,
     page: page,
     pageCount: pageCount,
-    pageSize: pageSize,
-    total: total,
-    pageSummaryText: pageSummaryText
+    pageSummaryText: pageSummaryText,
+    total: total
   }), /*#__PURE__*/React.createElement("div", {
     className: "jsx-3647884394" + " " + "page-navigation"
-  }, !hidePageSelect && /*#__PURE__*/React.createElement(PageSelect, {
+  }, !hidePageSelect && total && /*#__PURE__*/React.createElement(PageSelect, {
     dataTest: dataTest,
     pageSelectText: pageSelectText,
     page: page,
@@ -55,9 +71,9 @@ const Pagination = ({
     onChange: onPageChange
   }), /*#__PURE__*/React.createElement(PageControls, {
     dataTest: dataTest,
+    isLastPage: isLastPage || page === pageCount,
     nextPageText: nextPageText,
     page: page,
-    pageCount: pageCount,
     previousPageText: previousPageText,
     onClick: onPageChange
   })), /*#__PURE__*/React.createElement(_JSXStyle, {
@@ -71,25 +87,27 @@ Pagination.defaultProps = {
   nextPageText: () => i18n.t('Next'),
   pageSelectText: () => i18n.t('Page'),
   pageSizeSelectText: () => i18n.t('Items per page'),
-  pageSummaryText: interpolationObject => i18n.t('Page {{page}} of {{pageCount}}, items {{firstItem}}-{{lastItem}} of {{total}}', interpolationObject),
+  pageSummaryText: getDefaultPageSummaryText,
   previousPageText: () => i18n.t('Previous')
 };
 Pagination.propTypes = {
   page: PropTypes.number.isRequired,
-  pageCount: PropTypes.number.isRequired,
   pageSize: PropTypes.number.isRequired,
-  total: PropTypes.number.isRequired,
   className: PropTypes.string,
   dataTest: PropTypes.string,
   hidePageSelect: PropTypes.bool,
   hidePageSizeSelect: PropTypes.bool,
   hidePageSummary: PropTypes.bool,
+  isLastPage: PropTypes.bool,
   nextPageText: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+  pageCount: PropTypes.number,
+  pageLength: requiredIf(props => props.isLastPage, PropTypes.number),
   pageSelectText: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
   pageSizeSelectText: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
   pageSizes: PropTypes.arrayOf(PropTypes.string),
   pageSummaryText: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
   previousPageText: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+  total: PropTypes.number,
   onPageChange: PropTypes.func,
   onPageSizeChange: PropTypes.func
 };

package/build/es/pagination.stories.js

@@ -35,40 +35,51 @@ export default {
     }
   },
   // Default args for stories
-  args: { // Fixes 'defaultProps' errors for storybook
-    ...Pagination.defaultProps,
+  args: {
     onPageChange: logOnPageChange,
-    onPageSizeChange: logOnPageSizeChange,
-    ...pagers.atTenthPage
+    onPageSizeChange: logOnPageSizeChange
   }
 };
 
 const Template = args => /*#__PURE__*/React.createElement(Pagination, args);
 
 export const Default = Template.bind({});
+Default.args = { ...pagers.atTenthPage
+};
 export const PagerAtFirstPage = Template.bind({});
 PagerAtFirstPage.args = { ...pagers.atFirstPage
 };
 export const PagerAtLastPage = Template.bind({});
 PagerAtLastPage.args = { ...pagers.atLastPage
 };
+export const NoTotal = Template.bind({});
+NoTotal.args = { ...pagers.noTotal
+};
+export const NoTotalAtLastPage = Template.bind({});
+NoTotalAtLastPage.args = { ...pagers.noTotalAtLastPage,
+  pageLength: 26
+};
+export const NoTotalAtLastPageWithoutPageLength = Template.bind({});
+NoTotalAtLastPageWithoutPageLength.args = { ...pagers.noTotalAtLastPage
+};
 export const WithoutPageSizeSelect = Template.bind({});
-WithoutPageSizeSelect.args = {
+WithoutPageSizeSelect.args = { ...pagers.atTenthPage,
   hidePageSizeSelect: true
 };
 export const WithoutGoToPageSelect = Template.bind({});
-WithoutGoToPageSelect.args = {
+WithoutGoToPageSelect.args = { ...pagers.atTenthPage,
   hidePageSelect: true
 };
 export const WithoutPageSummary = Template.bind({});
-WithoutPageSummary.args = {
+WithoutPageSummary.args = { ...pagers.atTenthPage,
   hidePageSummary: true
 };
 export const WithCustomPageSummary = Template.bind({});
-WithCustomPageSummary.args = {
-  pageSummaryText: interpolationObject => i18n.t('Page nr {{page}} of {{pageCount}} pages, items {{firstItem}}-{{lastItem}}, NO TOTAL', interpolationObject)
+WithCustomPageSummary.args = { ...pagers.atTenthPage,
+  pageSummaryText: interpolationObject => i18n.t('You are at page {{page}} showing items {{firstItem}}-{{lastItem}}, but there are {{pageCount}} pages and {{total}} items', interpolationObject)
 };
 export const WithoutAnySelect = Template.bind({});
-WithoutAnySelect.args = { ...WithoutGoToPageSelect.args,
+WithoutAnySelect.args = { ...pagers.atTenthPage,
+  ...WithoutGoToPageSelect.args,
   ...WithoutPageSizeSelect.args
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/pagination",
-    "version": "8.0.1",
+    "version": "8.1.1",
     "description": "UI Pagination",
     "repository": {
         "type": "git",
@@ -33,10 +33,10 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.0.0-beta.1",
-        "@dhis2-ui/button": "8.0.1",
-        "@dhis2-ui/select": "8.0.1",
-        "@dhis2/ui-constants": "8.0.1",
-        "@dhis2/ui-icons": "8.0.1",
+        "@dhis2-ui/button": "8.1.1",
+        "@dhis2-ui/select": "8.1.1",
+        "@dhis2/ui-constants": "8.1.1",
+        "@dhis2/ui-icons": "8.1.1",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },