@dhis2-ui/pagination 8.1.11 → 8.2.2

package/build/es/page-controls.js

@@ -3,7 +3,7 @@ import { Button } from '@dhis2-ui/button';
 import { spacers } from '@dhis2/ui-constants';
 import { IconChevronLeft16, IconChevronRight16 } from '@dhis2/ui-icons';
 import PropTypes from 'prop-types';
-import React from 'react'; // TODO: i18n translate
+import React from 'react';
 
 const translate = (prop, interpolationObject) => {
   if (typeof prop === 'function') {
@@ -13,34 +13,38 @@ const translate = (prop, interpolationObject) => {
   return prop;
 };
 
-const PageControls = ({
-  dataTest,
-  isLastPage,
-  onClick,
-  nextPageText,
-  page,
-  previousPageText
-}) => /*#__PURE__*/React.createElement("div", {
-  "data-test": `${dataTest}-pagecontrols`,
-  className: _JSXStyle.dynamic([["2407365506", [spacers.dp4]]])
-}, /*#__PURE__*/React.createElement(Button, {
-  secondary: true,
-  className: "button-previous",
-  small: true,
-  disabled: page === 1,
-  onClick: () => onClick(page - 1),
-  dataTest: `${dataTest}-page-previous`
-}, /*#__PURE__*/React.createElement(IconChevronLeft16, null), translate(previousPageText)), /*#__PURE__*/React.createElement(Button, {
-  secondary: true,
-  className: "button-next",
-  small: true,
-  disabled: !!isLastPage,
-  onClick: () => onClick(page + 1),
-  dataTest: `${dataTest}-page-next`
-}, translate(nextPageText), /*#__PURE__*/React.createElement(IconChevronRight16, null)), /*#__PURE__*/React.createElement(_JSXStyle, {
-  id: "2407365506",
-  dynamic: [spacers.dp4]
-}, ["div.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", "div.__jsx-style-dynamic-selector .button-previous{height:32px;padding-left:0;}", `div.__jsx-style-dynamic-selector .button-next{height:32px;padding-right:0;margin-left:${spacers.dp4};}`]));
+const PageControls = _ref => {
+  let {
+    dataTest,
+    isNextDisabled,
+    isPreviousDisabled,
+    nextPageText,
+    page,
+    previousPageText,
+    onClick
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-test": "".concat(dataTest, "-pagecontrols"),
+    className: _JSXStyle.dynamic([["2407365506", [spacers.dp4]]])
+  }, /*#__PURE__*/React.createElement(Button, {
+    secondary: true,
+    className: "button-previous",
+    small: true,
+    disabled: isPreviousDisabled,
+    onClick: () => onClick(page - 1),
+    dataTest: "".concat(dataTest, "-page-previous")
+  }, /*#__PURE__*/React.createElement(IconChevronLeft16, null), translate(previousPageText)), /*#__PURE__*/React.createElement(Button, {
+    secondary: true,
+    className: "button-next",
+    small: true,
+    disabled: isNextDisabled,
+    onClick: () => onClick(page + 1),
+    dataTest: "".concat(dataTest, "-page-next")
+  }, translate(nextPageText), /*#__PURE__*/React.createElement(IconChevronRight16, null)), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2407365506",
+    dynamic: [spacers.dp4]
+  }, ["div.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", "div.__jsx-style-dynamic-selector .button-previous{height:32px;padding-left:0;}", "div.__jsx-style-dynamic-selector .button-next{height:32px;padding-right:0;margin-left:".concat(spacers.dp4, ";}")]));
+};
 
 PageControls.propTypes = {
   dataTest: PropTypes.string.isRequired,
@@ -48,6 +52,7 @@ PageControls.propTypes = {
   page: PropTypes.number.isRequired,
   previousPageText: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
   onClick: PropTypes.func.isRequired,
-  isLastPage: PropTypes.bool
+  isNextDisabled: PropTypes.bool,
+  isPreviousDisabled: PropTypes.bool
 };
 export { PageControls };

package/build/es/page-select.js

@@ -16,38 +16,47 @@ const createAvailablePages = length => Array.from({
   length
 }, (_x, i) => (i + 1).toString());
 
-const PageSelect = ({
-  dataTest,
-  pageSelectText,
-  onChange,
-  page,
-  pageCount
-}) => /*#__PURE__*/React.createElement("div", {
-  "data-test": `${dataTest}-gotopage`,
-  className: _JSXStyle.dynamic([["485717002", [spacers.dp12]]])
-}, /*#__PURE__*/React.createElement(SingleSelect, {
-  dense: true,
-  selected: page.toString(),
-  onChange: ({
-    selected
-  }) => onChange(parseInt(selected, 10)),
-  className: "select",
-  dataTest: `${dataTest}-page-select`,
-  prefix: translate(pageSelectText)
-}, createAvailablePages(pageCount).map(availablePage => /*#__PURE__*/React.createElement(SingleSelectOption, {
-  key: availablePage,
-  value: availablePage,
-  label: availablePage
-}))), /*#__PURE__*/React.createElement(_JSXStyle, {
-  id: "485717002",
-  dynamic: [spacers.dp12]
-}, [`div.__jsx-style-dynamic-selector{margin-right:${spacers.dp12};}`]));
+const PageSelect = _ref => {
+  let {
+    dataTest,
+    disabled,
+    pageSelectText,
+    onChange,
+    page,
+    pageCount
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-test": "".concat(dataTest, "-gotopage"),
+    className: _JSXStyle.dynamic([["485717002", [spacers.dp12]]])
+  }, /*#__PURE__*/React.createElement(SingleSelect, {
+    dense: true,
+    disabled: disabled,
+    selected: page.toString(),
+    onChange: _ref2 => {
+      let {
+        selected
+      } = _ref2;
+      return onChange(parseInt(selected, 10));
+    },
+    className: "select",
+    dataTest: "".concat(dataTest, "-page-select"),
+    prefix: translate(pageSelectText)
+  }, createAvailablePages(pageCount).map(availablePage => /*#__PURE__*/React.createElement(SingleSelectOption, {
+    key: availablePage,
+    value: availablePage,
+    label: availablePage
+  }))), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "485717002",
+    dynamic: [spacers.dp12]
+  }, ["div.__jsx-style-dynamic-selector{margin-right:".concat(spacers.dp12, ";}")]));
+};
 
 PageSelect.propTypes = {
   dataTest: PropTypes.string.isRequired,
   page: PropTypes.number.isRequired,
   pageCount: PropTypes.number.isRequired,
   pageSelectText: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
-  onChange: PropTypes.func.isRequired
+  onChange: PropTypes.func.isRequired,
+  disabled: PropTypes.bool
 };
 export { PageSelect, createAvailablePages };

package/build/es/page-size-select.js

@@ -12,38 +12,47 @@ const translate = (prop, interpolationObject) => {
   return prop;
 };
 
-const PageSizeSelect = ({
-  dataTest,
-  pageSizeSelectText,
-  pageSize,
-  pageSizes,
-  onChange
-}) => /*#__PURE__*/React.createElement("div", {
-  "data-test": `${dataTest}-pagesize`,
-  className: _JSXStyle.dynamic([["1934482915", [spacers.dp12]]])
-}, /*#__PURE__*/React.createElement(SingleSelect, {
-  dense: true,
-  selected: pageSize.toString(),
-  onChange: ({
-    selected
-  }) => onChange(parseInt(selected, 10)),
-  className: "select",
-  dataTest: `${dataTest}-pagesize-select`,
-  prefix: translate(pageSizeSelectText)
-}, pageSizes.map(length => /*#__PURE__*/React.createElement(SingleSelectOption, {
-  key: length,
-  value: length,
-  label: length
-}))), /*#__PURE__*/React.createElement(_JSXStyle, {
-  id: "1934482915",
-  dynamic: [spacers.dp12]
-}, [`div.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;min-height:32px;margin-right:${spacers.dp12};-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}`]));
+const PageSizeSelect = _ref => {
+  let {
+    dataTest,
+    disabled,
+    pageSizeSelectText,
+    pageSize,
+    pageSizes,
+    onChange
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-test": "".concat(dataTest, "-pagesize"),
+    className: _JSXStyle.dynamic([["1934482915", [spacers.dp12]]])
+  }, /*#__PURE__*/React.createElement(SingleSelect, {
+    dense: true,
+    disabled: disabled,
+    selected: pageSize.toString(),
+    onChange: _ref2 => {
+      let {
+        selected
+      } = _ref2;
+      return onChange(parseInt(selected, 10));
+    },
+    className: "select",
+    dataTest: "".concat(dataTest, "-pagesize-select"),
+    prefix: translate(pageSizeSelectText)
+  }, pageSizes.map(length => /*#__PURE__*/React.createElement(SingleSelectOption, {
+    key: length,
+    value: length,
+    label: length
+  }))), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "1934482915",
+    dynamic: [spacers.dp12]
+  }, ["div.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;min-height:32px;margin-right:".concat(spacers.dp12, ";-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}")]));
+};
 
 PageSizeSelect.propTypes = {
   dataTest: PropTypes.string.isRequired,
   pageSize: PropTypes.number.isRequired,
   pageSizeSelectText: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
   pageSizes: PropTypes.arrayOf(PropTypes.string).isRequired,
-  onChange: PropTypes.func.isRequired
+  onChange: PropTypes.func.isRequired,
+  disabled: PropTypes.bool
 };
 export { PageSizeSelect };

package/build/es/page-summary.js

@@ -1,5 +1,6 @@
 import _JSXStyle from "styled-jsx/style";
 import { colors, spacers } from '@dhis2/ui-constants';
+import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 
@@ -11,15 +12,17 @@ const translate = (prop, interpolationObject) => {
   return prop;
 };
 
-const PageSummary = ({
-  dataTest,
-  firstItem,
-  lastItem,
-  page,
-  pageCount,
-  pageSummaryText,
-  total
-}) => {
+const PageSummary = _ref => {
+  let {
+    dataTest,
+    firstItem,
+    inactive,
+    lastItem,
+    page,
+    pageCount,
+    pageSummaryText,
+    total
+  } = _ref;
   const summary = translate(pageSummaryText, {
     firstItem,
     lastItem,
@@ -28,14 +31,16 @@ const PageSummary = ({
     total
   });
   return /*#__PURE__*/React.createElement("div", {
-    "data-test": `${dataTest}-summary`,
-    className: _JSXStyle.dynamic([["3931741314", [spacers.dp12, colors.grey700]]])
+    "data-test": "".concat(dataTest, "-summary"),
+    className: _JSXStyle.dynamic([["1022808428", [spacers.dp12, colors.grey700, colors.grey500]]])
   }, /*#__PURE__*/React.createElement("span", {
-    className: _JSXStyle.dynamic([["3931741314", [spacers.dp12, colors.grey700]]])
+    className: _JSXStyle.dynamic([["1022808428", [spacers.dp12, colors.grey700, colors.grey500]]]) + " " + (cx({
+      inactive
+    }) || "")
   }, summary), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "3931741314",
-    dynamic: [spacers.dp12, colors.grey700]
-  }, [`div.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;min-height:32px;margin-right:${spacers.dp12};}`, `span.__jsx-style-dynamic-selector{color:${colors.grey700};font-size:14px;}`]));
+    id: "1022808428",
+    dynamic: [spacers.dp12, colors.grey700, colors.grey500]
+  }, ["div.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;min-height:32px;margin-right:".concat(spacers.dp12, ";}"), "span.__jsx-style-dynamic-selector{color:".concat(colors.grey700, ";font-size:14px;}"), "span.inactive.__jsx-style-dynamic-selector{color:".concat(colors.grey500, ";}")]));
 };
 
 PageSummary.propTypes = {
@@ -43,6 +48,7 @@ PageSummary.propTypes = {
   page: PropTypes.number.isRequired,
   pageSummaryText: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
   firstItem: PropTypes.number,
+  inactive: PropTypes.bool,
   lastItem: PropTypes.number,
   pageCount: PropTypes.number,
   total: PropTypes.number

package/build/es/pagination.js

@@ -12,27 +12,29 @@ import { PageSizeSelect } from './page-size-select.js';
 import { PageSummary } from './page-summary.js';
 const MAX_PAGE_COUNT = 2000;
 
-const Pagination = ({
-  className,
-  dataTest,
-  hidePageSelect,
-  hidePageSizeSelect,
-  hidePageSummary,
-  isLastPage,
-  nextPageText,
-  onPageChange,
-  onPageSizeChange,
-  page,
-  pageCount,
-  pageLength,
-  pageSelectText,
-  pageSize,
-  pageSizes,
-  pageSizeSelectText,
-  pageSummaryText,
-  previousPageText,
-  total
-}) => {
+const Pagination = _ref => {
+  let {
+    className,
+    dataTest,
+    disabled,
+    hidePageSelect,
+    hidePageSizeSelect,
+    hidePageSummary,
+    isLastPage,
+    nextPageText,
+    onPageChange,
+    onPageSizeChange,
+    page,
+    pageCount,
+    pageLength,
+    pageSelectText,
+    pageSize,
+    pageSizes,
+    pageSizeSelectText,
+    pageSummaryText,
+    previousPageText,
+    total
+  } = _ref;
   const {
     firstItem,
     lastItem
@@ -51,12 +53,14 @@ const Pagination = ({
     className: "jsx-3647884394" + " " + "spacer"
   }) : /*#__PURE__*/React.createElement(PageSizeSelect, {
     dataTest: dataTest,
+    disabled: disabled,
     pageSize: pageSize,
     pageSizes: pageSizes,
     onChange: onPageSizeChange,
     pageSizeSelectText: pageSizeSelectText
   }), !hidePageSummary && /*#__PURE__*/React.createElement(PageSummary, {
     dataTest: dataTest,
+    inactive: disabled,
     firstItem: firstItem,
     lastItem: lastItem,
     page: page,
@@ -67,17 +71,19 @@ const Pagination = ({
     className: "jsx-3647884394" + " " + "page-navigation"
   }, showPageSelect && /*#__PURE__*/React.createElement(PageSelect, {
     dataTest: dataTest,
+    disabled: disabled,
     pageSelectText: pageSelectText,
     page: page,
     pageCount: pageCount,
     onChange: onPageChange
   }), /*#__PURE__*/React.createElement(PageControls, {
     dataTest: dataTest,
-    isLastPage: isLastPage || page === pageCount,
     nextPageText: nextPageText,
     page: page,
     previousPageText: previousPageText,
-    onClick: onPageChange
+    onClick: onPageChange,
+    isNextDisabled: disabled || isLastPage || page === pageCount,
+    isPreviousDisabled: disabled || page === 1
   })), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "3647884394"
   }, [".container.jsx-3647884394{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;}", ".spacer.jsx-3647884394{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".page-navigation.jsx-3647884394{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;min-height:32px;}"]));
@@ -97,6 +103,7 @@ Pagination.propTypes = {
   pageSize: PropTypes.number.isRequired,
   className: PropTypes.string,
   dataTest: PropTypes.string,
+  disabled: PropTypes.bool,
   hidePageSelect: PropTypes.bool,
   hidePageSizeSelect: PropTypes.bool,
   hidePageSummary: PropTypes.bool,

package/build/es/pagination.stories.js

@@ -3,28 +3,18 @@ import React from 'react';
 import * as pagers from './__fixtures__/index.js';
 import { Pagination } from './pagination.js';
 const subtitle = 'Allows navigation through data displayed over several pages';
-const description = `
-Pagination allows data to be split in pages. Paging large amounts of data avoids overwhelming users and should always be used wherever a lot of data is displayed. Pagination controls allow a user to browse through a set of data or navigate to a specific page depending on the type of pagination used.
-
-**Do not rely on pagination for navigating datasets. A user should be able to search within, sort and filter datasets too, rather than needing to click through many pages looking for the right data item.**
-
-\`\`\`js
-import { Pagination } from '@dhis2/ui'
-\`\`\`
-
-_**Note**: Dropdown menus may not display properly on this page. View these demos in the 'Canvas' tab._
-`;
+const description = "\nPagination allows data to be split in pages. Paging large amounts of data avoids overwhelming users and should always be used wherever a lot of data is displayed. Pagination controls allow a user to browse through a set of data or navigate to a specific page depending on the type of pagination used.\n\n**Do not rely on pagination for navigating datasets. A user should be able to search within, sort and filter datasets too, rather than needing to click through many pages looking for the right data item.**\n\n```js\nimport { Pagination } from '@dhis2/ui'\n```\n\n_**Note**: Dropdown menus may not display properly on this page. View these demos in the 'Canvas' tab._\n";
 
 const logOnPageChange = page => {
-  console.log(`Now navigate to page ${page}...`);
+  console.log("Now navigate to page ".concat(page, "..."));
 };
 
 const logOnPageSizeChange = pageSize => {
-  console.log(`Now change page size to ${pageSize}...`);
+  console.log("Now change page size to ".concat(pageSize, "..."));
 };
 
 export default {
-  title: 'Navigation/Pagination',
+  title: 'Pagination',
   component: Pagination,
   parameters: {
     componentSubtitle: subtitle,
@@ -46,6 +36,10 @@ const Template = args => /*#__PURE__*/React.createElement(Pagination, args);
 export const Default = Template.bind({});
 Default.args = { ...pagers.atTenthPage
 };
+export const Disabled = Template.bind({});
+Disabled.args = { ...pagers.atTenthPage,
+  disabled: true
+};
 export const PagerAtFirstPage = Template.bind({});
 PagerAtFirstPage.args = { ...pagers.atFirstPage
 };

package/package.json

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