@dhis2-ui/pagination 8.2.0 → 8.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/build/cjs/__fixtures__/index.js +1 -1
  2. package/build/cjs/get-default-page-summary-text.js +9 -7
  3. package/build/cjs/get-item-range.js +8 -7
  4. package/build/cjs/page-controls.js +32 -29
  5. package/build/cjs/page-select.js +34 -28
  6. package/build/cjs/page-size-select.js +34 -28
  7. package/build/cjs/page-summary.js +13 -12
  8. package/build/cjs/pagination.js +23 -22
  9. package/build/cjs/pagination.stories.js +5 -15
  10. package/build/es/get-default-page-summary-text.js +9 -7
  11. package/build/es/get-item-range.js +8 -7
  12. package/build/es/page-controls.js +32 -29
  13. package/build/es/page-select.js +34 -28
  14. package/build/es/page-size-select.js +34 -28
  15. package/build/es/page-summary.js +13 -12
  16. package/build/es/pagination.js +23 -22
  17. package/build/es/pagination.stories.js +4 -14
  18. package/package.json +5 -5
package/build/cjs/__fixtures__/index.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.noTotalAtLastPage = exports.noTotal = exports.atPageBeforeLast = exports.atLastPage = exports.atTenthPage = exports.atSecondPage = exports.atFirstPage = void 0;
6
+ exports.noTotalAtLastPage = exports.noTotal = exports.atTenthPage = exports.atSecondPage = exports.atPageBeforeLast = exports.atLastPage = exports.atFirstPage = void 0;
7
7
  const atFirstPage = {
8
8
  page: 1,
9
9
  pageCount: 21,
package/build/cjs/get-default-page-summary-text.js CHANGED
@@ -11,13 +11,15 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
11
11
 
12
12
  const isValidNumber = input => typeof input === 'number' && !isNaN(input);
13
13
 
14
- const getDefaultPageSummaryText = ({
15
- firstItem,
16
- lastItem,
17
- page,
18
- pageCount,
19
- total
20
- }) => {
14
+ const getDefaultPageSummaryText = _ref => {
15
+ let {
16
+ firstItem,
17
+ lastItem,
18
+ page,
19
+ pageCount,
20
+ total
21
+ } = _ref;
22
+
21
23
  if (isValidNumber(total) && isValidNumber(lastItem)) {
22
24
  return _index.default.t('Page {{page}} of {{pageCount}}, items {{firstItem}}-{{lastItem}} of {{total}}', {
23
25
  page,
package/build/cjs/get-item-range.js CHANGED
@@ -5,13 +5,14 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.getItemRange = void 0;
7
7
 
8
- const getItemRange = ({
9
- isLastPage,
10
- page,
11
- pageLength,
12
- pageSize,
13
- total
14
- }) => {
8
+ const getItemRange = _ref => {
9
+ let {
10
+ isLastPage,
11
+ page,
12
+ pageLength,
13
+ pageSize,
14
+ total
15
+ } = _ref;
15
16
  // page is 1-based
16
17
  let firstItem = (page - 1) * pageSize + 1;
17
18
  let lastItem = firstItem + pageSize - 1;
package/build/cjs/page-controls.js CHANGED
@@ -27,35 +27,38 @@ const translate = (prop, interpolationObject) => {
27
27
  return prop;
28
28
  };
29
29
 
30
- const PageControls = ({
31
- dataTest,
32
- isNextDisabled,
33
- isPreviousDisabled,
34
- nextPageText,
35
- page,
36
- previousPageText,
37
- onClick
38
- }) => /*#__PURE__*/_react.default.createElement("div", {
39
- "data-test": `${dataTest}-pagecontrols`,
40
- className: _style.default.dynamic([["2407365506", [_uiConstants.spacers.dp4]]])
41
- }, /*#__PURE__*/_react.default.createElement(_button.Button, {
42
- secondary: true,
43
- className: "button-previous",
44
- small: true,
45
- disabled: isPreviousDisabled,
46
- onClick: () => onClick(page - 1),
47
- dataTest: `${dataTest}-page-previous`
48
- }, /*#__PURE__*/_react.default.createElement(_uiIcons.IconChevronLeft16, null), translate(previousPageText)), /*#__PURE__*/_react.default.createElement(_button.Button, {
49
- secondary: true,
50
- className: "button-next",
51
- small: true,
52
- disabled: isNextDisabled,
53
- onClick: () => onClick(page + 1),
54
- dataTest: `${dataTest}-page-next`
55
- }, translate(nextPageText), /*#__PURE__*/_react.default.createElement(_uiIcons.IconChevronRight16, null)), /*#__PURE__*/_react.default.createElement(_style.default, {
56
- id: "2407365506",
57
- dynamic: [_uiConstants.spacers.dp4]
58
- }, ["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:${_uiConstants.spacers.dp4};}`]));
30
+ const PageControls = _ref => {
31
+ let {
32
+ dataTest,
33
+ isNextDisabled,
34
+ isPreviousDisabled,
35
+ nextPageText,
36
+ page,
37
+ previousPageText,
38
+ onClick
39
+ } = _ref;
40
+ return /*#__PURE__*/_react.default.createElement("div", {
41
+ "data-test": "".concat(dataTest, "-pagecontrols"),
42
+ className: _style.default.dynamic([["2407365506", [_uiConstants.spacers.dp4]]])
43
+ }, /*#__PURE__*/_react.default.createElement(_button.Button, {
44
+ secondary: true,
45
+ className: "button-previous",
46
+ small: true,
47
+ disabled: isPreviousDisabled,
48
+ onClick: () => onClick(page - 1),
49
+ dataTest: "".concat(dataTest, "-page-previous")
50
+ }, /*#__PURE__*/_react.default.createElement(_uiIcons.IconChevronLeft16, null), translate(previousPageText)), /*#__PURE__*/_react.default.createElement(_button.Button, {
51
+ secondary: true,
52
+ className: "button-next",
53
+ small: true,
54
+ disabled: isNextDisabled,
55
+ onClick: () => onClick(page + 1),
56
+ dataTest: "".concat(dataTest, "-page-next")
57
+ }, translate(nextPageText), /*#__PURE__*/_react.default.createElement(_uiIcons.IconChevronRight16, null)), /*#__PURE__*/_react.default.createElement(_style.default, {
58
+ id: "2407365506",
59
+ dynamic: [_uiConstants.spacers.dp4]
60
+ }, ["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(_uiConstants.spacers.dp4, ";}")]));
61
+ };
59
62
 
60
63
  exports.PageControls = PageControls;
61
64
  PageControls.propTypes = {
package/build/cjs/page-select.js CHANGED
@@ -32,34 +32,40 @@ const createAvailablePages = length => Array.from({
32
32
 
33
33
  exports.createAvailablePages = createAvailablePages;
34
34
 
35
- const PageSelect = ({
36
- dataTest,
37
- disabled,
38
- pageSelectText,
39
- onChange,
40
- page,
41
- pageCount
42
- }) => /*#__PURE__*/_react.default.createElement("div", {
43
- "data-test": `${dataTest}-gotopage`,
44
- className: _style.default.dynamic([["485717002", [_uiConstants.spacers.dp12]]])
45
- }, /*#__PURE__*/_react.default.createElement(_select.SingleSelect, {
46
- dense: true,
47
- disabled: disabled,
48
- selected: page.toString(),
49
- onChange: ({
50
- selected
51
- }) => onChange(parseInt(selected, 10)),
52
- className: "select",
53
- dataTest: `${dataTest}-page-select`,
54
- prefix: translate(pageSelectText)
55
- }, createAvailablePages(pageCount).map(availablePage => /*#__PURE__*/_react.default.createElement(_select.SingleSelectOption, {
56
- key: availablePage,
57
- value: availablePage,
58
- label: availablePage
59
- }))), /*#__PURE__*/_react.default.createElement(_style.default, {
60
- id: "485717002",
61
- dynamic: [_uiConstants.spacers.dp12]
62
- }, [`div.__jsx-style-dynamic-selector{margin-right:${_uiConstants.spacers.dp12};}`]));
35
+ const PageSelect = _ref => {
36
+ let {
37
+ dataTest,
38
+ disabled,
39
+ pageSelectText,
40
+ onChange,
41
+ page,
42
+ pageCount
43
+ } = _ref;
44
+ return /*#__PURE__*/_react.default.createElement("div", {
45
+ "data-test": "".concat(dataTest, "-gotopage"),
46
+ className: _style.default.dynamic([["485717002", [_uiConstants.spacers.dp12]]])
47
+ }, /*#__PURE__*/_react.default.createElement(_select.SingleSelect, {
48
+ dense: true,
49
+ disabled: disabled,
50
+ selected: page.toString(),
51
+ onChange: _ref2 => {
52
+ let {
53
+ selected
54
+ } = _ref2;
55
+ return onChange(parseInt(selected, 10));
56
+ },
57
+ className: "select",
58
+ dataTest: "".concat(dataTest, "-page-select"),
59
+ prefix: translate(pageSelectText)
60
+ }, createAvailablePages(pageCount).map(availablePage => /*#__PURE__*/_react.default.createElement(_select.SingleSelectOption, {
61
+ key: availablePage,
62
+ value: availablePage,
63
+ label: availablePage
64
+ }))), /*#__PURE__*/_react.default.createElement(_style.default, {
65
+ id: "485717002",
66
+ dynamic: [_uiConstants.spacers.dp12]
67
+ }, ["div.__jsx-style-dynamic-selector{margin-right:".concat(_uiConstants.spacers.dp12, ";}")]));
68
+ };
63
69
 
64
70
  exports.PageSelect = PageSelect;
65
71
  PageSelect.propTypes = {
package/build/cjs/page-size-select.js CHANGED
@@ -26,34 +26,40 @@ const translate = (prop, interpolationObject) => {
26
26
  return prop;
27
27
  };
28
28
 
29
- const PageSizeSelect = ({
30
- dataTest,
31
- disabled,
32
- pageSizeSelectText,
33
- pageSize,
34
- pageSizes,
35
- onChange
36
- }) => /*#__PURE__*/_react.default.createElement("div", {
37
- "data-test": `${dataTest}-pagesize`,
38
- className: _style.default.dynamic([["1934482915", [_uiConstants.spacers.dp12]]])
39
- }, /*#__PURE__*/_react.default.createElement(_select.SingleSelect, {
40
- dense: true,
41
- disabled: disabled,
42
- selected: pageSize.toString(),
43
- onChange: ({
44
- selected
45
- }) => onChange(parseInt(selected, 10)),
46
- className: "select",
47
- dataTest: `${dataTest}-pagesize-select`,
48
- prefix: translate(pageSizeSelectText)
49
- }, pageSizes.map(length => /*#__PURE__*/_react.default.createElement(_select.SingleSelectOption, {
50
- key: length,
51
- value: length,
52
- label: length
53
- }))), /*#__PURE__*/_react.default.createElement(_style.default, {
54
- id: "1934482915",
55
- dynamic: [_uiConstants.spacers.dp12]
56
- }, [`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:${_uiConstants.spacers.dp12};-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}`]));
29
+ const PageSizeSelect = _ref => {
30
+ let {
31
+ dataTest,
32
+ disabled,
33
+ pageSizeSelectText,
34
+ pageSize,
35
+ pageSizes,
36
+ onChange
37
+ } = _ref;
38
+ return /*#__PURE__*/_react.default.createElement("div", {
39
+ "data-test": "".concat(dataTest, "-pagesize"),
40
+ className: _style.default.dynamic([["1934482915", [_uiConstants.spacers.dp12]]])
41
+ }, /*#__PURE__*/_react.default.createElement(_select.SingleSelect, {
42
+ dense: true,
43
+ disabled: disabled,
44
+ selected: pageSize.toString(),
45
+ onChange: _ref2 => {
46
+ let {
47
+ selected
48
+ } = _ref2;
49
+ return onChange(parseInt(selected, 10));
50
+ },
51
+ className: "select",
52
+ dataTest: "".concat(dataTest, "-pagesize-select"),
53
+ prefix: translate(pageSizeSelectText)
54
+ }, pageSizes.map(length => /*#__PURE__*/_react.default.createElement(_select.SingleSelectOption, {
55
+ key: length,
56
+ value: length,
57
+ label: length
58
+ }))), /*#__PURE__*/_react.default.createElement(_style.default, {
59
+ id: "1934482915",
60
+ dynamic: [_uiConstants.spacers.dp12]
61
+ }, ["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(_uiConstants.spacers.dp12, ";-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}")]));
62
+ };
57
63
 
58
64
  exports.PageSizeSelect = PageSizeSelect;
59
65
  PageSizeSelect.propTypes = {
package/build/cjs/page-summary.js CHANGED
@@ -25,16 +25,17 @@ const translate = (prop, interpolationObject) => {
25
25
  return prop;
26
26
  };
27
27
 
28
- const PageSummary = ({
29
- dataTest,
30
- firstItem,
31
- inactive,
32
- lastItem,
33
- page,
34
- pageCount,
35
- pageSummaryText,
36
- total
37
- }) => {
28
+ const PageSummary = _ref => {
29
+ let {
30
+ dataTest,
31
+ firstItem,
32
+ inactive,
33
+ lastItem,
34
+ page,
35
+ pageCount,
36
+ pageSummaryText,
37
+ total
38
+ } = _ref;
38
39
  const summary = translate(pageSummaryText, {
39
40
  firstItem,
40
41
  lastItem,
@@ -43,7 +44,7 @@ const PageSummary = ({
43
44
  total
44
45
  });
45
46
  return /*#__PURE__*/_react.default.createElement("div", {
46
- "data-test": `${dataTest}-summary`,
47
+ "data-test": "".concat(dataTest, "-summary"),
47
48
  className: _style.default.dynamic([["1022808428", [_uiConstants.spacers.dp12, _uiConstants.colors.grey700, _uiConstants.colors.grey500]]])
48
49
  }, /*#__PURE__*/_react.default.createElement("span", {
49
50
  className: _style.default.dynamic([["1022808428", [_uiConstants.spacers.dp12, _uiConstants.colors.grey700, _uiConstants.colors.grey500]]]) + " " + ((0, _classnames.default)({
@@ -52,7 +53,7 @@ const PageSummary = ({
52
53
  }, summary), /*#__PURE__*/_react.default.createElement(_style.default, {
53
54
  id: "1022808428",
54
55
  dynamic: [_uiConstants.spacers.dp12, _uiConstants.colors.grey700, _uiConstants.colors.grey500]
55
- }, [`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:${_uiConstants.spacers.dp12};}`, `span.__jsx-style-dynamic-selector{color:${_uiConstants.colors.grey700};font-size:14px;}`, `span.inactive.__jsx-style-dynamic-selector{color:${_uiConstants.colors.grey500};}`]));
56
+ }, ["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(_uiConstants.spacers.dp12, ";}"), "span.__jsx-style-dynamic-selector{color:".concat(_uiConstants.colors.grey700, ";font-size:14px;}"), "span.inactive.__jsx-style-dynamic-selector{color:".concat(_uiConstants.colors.grey500, ";}")]));
56
57
  };
57
58
 
58
59
  exports.PageSummary = PageSummary;
package/build/cjs/pagination.js CHANGED
@@ -33,28 +33,29 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
33
33
 
34
34
  const MAX_PAGE_COUNT = 2000;
35
35
 
36
- const Pagination = ({
37
- className,
38
- dataTest,
39
- disabled,
40
- hidePageSelect,
41
- hidePageSizeSelect,
42
- hidePageSummary,
43
- isLastPage,
44
- nextPageText,
45
- onPageChange,
46
- onPageSizeChange,
47
- page,
48
- pageCount,
49
- pageLength,
50
- pageSelectText,
51
- pageSize,
52
- pageSizes,
53
- pageSizeSelectText,
54
- pageSummaryText,
55
- previousPageText,
56
- total
57
- }) => {
36
+ const Pagination = _ref => {
37
+ let {
38
+ className,
39
+ dataTest,
40
+ disabled,
41
+ hidePageSelect,
42
+ hidePageSizeSelect,
43
+ hidePageSummary,
44
+ isLastPage,
45
+ nextPageText,
46
+ onPageChange,
47
+ onPageSizeChange,
48
+ page,
49
+ pageCount,
50
+ pageLength,
51
+ pageSelectText,
52
+ pageSize,
53
+ pageSizes,
54
+ pageSizeSelectText,
55
+ pageSummaryText,
56
+ previousPageText,
57
+ total
58
+ } = _ref;
58
59
  const {
59
60
  firstItem,
60
61
  lastItem
package/build/cjs/pagination.stories.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.WithoutAnySelect = exports.WithCustomPageSummary = exports.WithoutPageSummary = exports.WithoutGoToPageSelect = exports.WithoutPageSizeSelect = exports.NoTotalAtLastPageWithoutPageLength = exports.NoTotalAtLastPage = exports.NoTotal = exports.PagerAtLastPage = exports.PagerAtFirstPage = exports.Disabled = exports.Default = exports.default = void 0;
6
+ exports.default = exports.WithoutPageSummary = exports.WithoutPageSizeSelect = exports.WithoutGoToPageSelect = exports.WithoutAnySelect = exports.WithCustomPageSummary = exports.PagerAtLastPage = exports.PagerAtFirstPage = exports.NoTotalAtLastPageWithoutPageLength = exports.NoTotalAtLastPage = exports.NoTotal = exports.Disabled = exports.Default = void 0;
7
7
 
8
8
  var _d2I18n = _interopRequireDefault(require("@dhis2/d2-i18n"));
9
9
 
@@ -20,28 +20,18 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
20
20
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
21
21
 
22
22
  const subtitle = 'Allows navigation through data displayed over several pages';
23
- const description = `
24
- 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.
25
-
26
- **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.**
27
-
28
- \`\`\`js
29
- import { Pagination } from '@dhis2/ui'
30
- \`\`\`
31
-
32
- _**Note**: Dropdown menus may not display properly on this page. View these demos in the 'Canvas' tab._
33
- `;
23
+ 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";
34
24
 
35
25
  const logOnPageChange = page => {
36
- console.log(`Now navigate to page ${page}...`);
26
+ console.log("Now navigate to page ".concat(page, "..."));
37
27
  };
38
28
 
39
29
  const logOnPageSizeChange = pageSize => {
40
- console.log(`Now change page size to ${pageSize}...`);
30
+ console.log("Now change page size to ".concat(pageSize, "..."));
41
31
  };
42
32
 
43
33
  var _default = {
44
- title: 'Navigation/Pagination',
34
+ title: 'Pagination',
45
35
  component: _pagination.Pagination,
46
36
  parameters: {
47
37
  componentSubtitle: subtitle,
package/build/es/get-default-page-summary-text.js CHANGED
@@ -2,13 +2,15 @@ import i18n from './locales/index.js';
2
2
 
3
3
  const isValidNumber = input => typeof input === 'number' && !isNaN(input);
4
4
 
5
- export const getDefaultPageSummaryText = ({
6
- firstItem,
7
- lastItem,
8
- page,
9
- pageCount,
10
- total
11
- }) => {
5
+ export const getDefaultPageSummaryText = _ref => {
6
+ let {
7
+ firstItem,
8
+ lastItem,
9
+ page,
10
+ pageCount,
11
+ total
12
+ } = _ref;
13
+
12
14
  if (isValidNumber(total) && isValidNumber(lastItem)) {
13
15
  return i18n.t('Page {{page}} of {{pageCount}}, items {{firstItem}}-{{lastItem}} of {{total}}', {
14
16
  page,
package/build/es/get-item-range.js CHANGED
@@ -1,10 +1,11 @@
1
- export const getItemRange = ({
2
- isLastPage,
3
- page,
4
- pageLength,
5
- pageSize,
6
- total
7
- }) => {
1
+ export const getItemRange = _ref => {
2
+ let {
3
+ isLastPage,
4
+ page,
5
+ pageLength,
6
+ pageSize,
7
+ total
8
+ } = _ref;
8
9
  // page is 1-based
9
10
  let firstItem = (page - 1) * pageSize + 1;
10
11
  let lastItem = firstItem + pageSize - 1;
package/build/es/page-controls.js CHANGED
@@ -13,35 +13,38 @@ const translate = (prop, interpolationObject) => {
13
13
  return prop;
14
14
  };
15
15
 
16
- const PageControls = ({
17
- dataTest,
18
- isNextDisabled,
19
- isPreviousDisabled,
20
- nextPageText,
21
- page,
22
- previousPageText,
23
- onClick
24
- }) => /*#__PURE__*/React.createElement("div", {
25
- "data-test": `${dataTest}-pagecontrols`,
26
- className: _JSXStyle.dynamic([["2407365506", [spacers.dp4]]])
27
- }, /*#__PURE__*/React.createElement(Button, {
28
- secondary: true,
29
- className: "button-previous",
30
- small: true,
31
- disabled: isPreviousDisabled,
32
- onClick: () => onClick(page - 1),
33
- dataTest: `${dataTest}-page-previous`
34
- }, /*#__PURE__*/React.createElement(IconChevronLeft16, null), translate(previousPageText)), /*#__PURE__*/React.createElement(Button, {
35
- secondary: true,
36
- className: "button-next",
37
- small: true,
38
- disabled: isNextDisabled,
39
- onClick: () => onClick(page + 1),
40
- dataTest: `${dataTest}-page-next`
41
- }, translate(nextPageText), /*#__PURE__*/React.createElement(IconChevronRight16, null)), /*#__PURE__*/React.createElement(_JSXStyle, {
42
- id: "2407365506",
43
- dynamic: [spacers.dp4]
44
- }, ["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};}`]));
16
+ const PageControls = _ref => {
17
+ let {
18
+ dataTest,
19
+ isNextDisabled,
20
+ isPreviousDisabled,
21
+ nextPageText,
22
+ page,
23
+ previousPageText,
24
+ onClick
25
+ } = _ref;
26
+ return /*#__PURE__*/React.createElement("div", {
27
+ "data-test": "".concat(dataTest, "-pagecontrols"),
28
+ className: _JSXStyle.dynamic([["2407365506", [spacers.dp4]]])
29
+ }, /*#__PURE__*/React.createElement(Button, {
30
+ secondary: true,
31
+ className: "button-previous",
32
+ small: true,
33
+ disabled: isPreviousDisabled,
34
+ onClick: () => onClick(page - 1),
35
+ dataTest: "".concat(dataTest, "-page-previous")
36
+ }, /*#__PURE__*/React.createElement(IconChevronLeft16, null), translate(previousPageText)), /*#__PURE__*/React.createElement(Button, {
37
+ secondary: true,
38
+ className: "button-next",
39
+ small: true,
40
+ disabled: isNextDisabled,
41
+ onClick: () => onClick(page + 1),
42
+ dataTest: "".concat(dataTest, "-page-next")
43
+ }, translate(nextPageText), /*#__PURE__*/React.createElement(IconChevronRight16, null)), /*#__PURE__*/React.createElement(_JSXStyle, {
44
+ id: "2407365506",
45
+ dynamic: [spacers.dp4]
46
+ }, ["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, ";}")]));
47
+ };
45
48
 
46
49
  PageControls.propTypes = {
47
50
  dataTest: PropTypes.string.isRequired,
package/build/es/page-select.js CHANGED
@@ -16,34 +16,40 @@ const createAvailablePages = length => Array.from({
16
16
  length
17
17
  }, (_x, i) => (i + 1).toString());
18
18
 
19
- const PageSelect = ({
20
- dataTest,
21
- disabled,
22
- pageSelectText,
23
- onChange,
24
- page,
25
- pageCount
26
- }) => /*#__PURE__*/React.createElement("div", {
27
- "data-test": `${dataTest}-gotopage`,
28
- className: _JSXStyle.dynamic([["485717002", [spacers.dp12]]])
29
- }, /*#__PURE__*/React.createElement(SingleSelect, {
30
- dense: true,
31
- disabled: disabled,
32
- selected: page.toString(),
33
- onChange: ({
34
- selected
35
- }) => onChange(parseInt(selected, 10)),
36
- className: "select",
37
- dataTest: `${dataTest}-page-select`,
38
- prefix: translate(pageSelectText)
39
- }, createAvailablePages(pageCount).map(availablePage => /*#__PURE__*/React.createElement(SingleSelectOption, {
40
- key: availablePage,
41
- value: availablePage,
42
- label: availablePage
43
- }))), /*#__PURE__*/React.createElement(_JSXStyle, {
44
- id: "485717002",
45
- dynamic: [spacers.dp12]
46
- }, [`div.__jsx-style-dynamic-selector{margin-right:${spacers.dp12};}`]));
19
+ const PageSelect = _ref => {
20
+ let {
21
+ dataTest,
22
+ disabled,
23
+ pageSelectText,
24
+ onChange,
25
+ page,
26
+ pageCount
27
+ } = _ref;
28
+ return /*#__PURE__*/React.createElement("div", {
29
+ "data-test": "".concat(dataTest, "-gotopage"),
30
+ className: _JSXStyle.dynamic([["485717002", [spacers.dp12]]])
31
+ }, /*#__PURE__*/React.createElement(SingleSelect, {
32
+ dense: true,
33
+ disabled: disabled,
34
+ selected: page.toString(),
35
+ onChange: _ref2 => {
36
+ let {
37
+ selected
38
+ } = _ref2;
39
+ return onChange(parseInt(selected, 10));
40
+ },
41
+ className: "select",
42
+ dataTest: "".concat(dataTest, "-page-select"),
43
+ prefix: translate(pageSelectText)
44
+ }, createAvailablePages(pageCount).map(availablePage => /*#__PURE__*/React.createElement(SingleSelectOption, {
45
+ key: availablePage,
46
+ value: availablePage,
47
+ label: availablePage
48
+ }))), /*#__PURE__*/React.createElement(_JSXStyle, {
49
+ id: "485717002",
50
+ dynamic: [spacers.dp12]
51
+ }, ["div.__jsx-style-dynamic-selector{margin-right:".concat(spacers.dp12, ";}")]));
52
+ };
47
53
 
48
54
  PageSelect.propTypes = {
49
55
  dataTest: PropTypes.string.isRequired,
package/build/es/page-size-select.js CHANGED
@@ -12,34 +12,40 @@ const translate = (prop, interpolationObject) => {
12
12
  return prop;
13
13
  };
14
14
 
15
- const PageSizeSelect = ({
16
- dataTest,
17
- disabled,
18
- pageSizeSelectText,
19
- pageSize,
20
- pageSizes,
21
- onChange
22
- }) => /*#__PURE__*/React.createElement("div", {
23
- "data-test": `${dataTest}-pagesize`,
24
- className: _JSXStyle.dynamic([["1934482915", [spacers.dp12]]])
25
- }, /*#__PURE__*/React.createElement(SingleSelect, {
26
- dense: true,
27
- disabled: disabled,
28
- selected: pageSize.toString(),
29
- onChange: ({
30
- selected
31
- }) => onChange(parseInt(selected, 10)),
32
- className: "select",
33
- dataTest: `${dataTest}-pagesize-select`,
34
- prefix: translate(pageSizeSelectText)
35
- }, pageSizes.map(length => /*#__PURE__*/React.createElement(SingleSelectOption, {
36
- key: length,
37
- value: length,
38
- label: length
39
- }))), /*#__PURE__*/React.createElement(_JSXStyle, {
40
- id: "1934482915",
41
- dynamic: [spacers.dp12]
42
- }, [`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;}`]));
15
+ const PageSizeSelect = _ref => {
16
+ let {
17
+ dataTest,
18
+ disabled,
19
+ pageSizeSelectText,
20
+ pageSize,
21
+ pageSizes,
22
+ onChange
23
+ } = _ref;
24
+ return /*#__PURE__*/React.createElement("div", {
25
+ "data-test": "".concat(dataTest, "-pagesize"),
26
+ className: _JSXStyle.dynamic([["1934482915", [spacers.dp12]]])
27
+ }, /*#__PURE__*/React.createElement(SingleSelect, {
28
+ dense: true,
29
+ disabled: disabled,
30
+ selected: pageSize.toString(),
31
+ onChange: _ref2 => {
32
+ let {
33
+ selected
34
+ } = _ref2;
35
+ return onChange(parseInt(selected, 10));
36
+ },
37
+ className: "select",
38
+ dataTest: "".concat(dataTest, "-pagesize-select"),
39
+ prefix: translate(pageSizeSelectText)
40
+ }, pageSizes.map(length => /*#__PURE__*/React.createElement(SingleSelectOption, {
41
+ key: length,
42
+ value: length,
43
+ label: length
44
+ }))), /*#__PURE__*/React.createElement(_JSXStyle, {
45
+ id: "1934482915",
46
+ dynamic: [spacers.dp12]
47
+ }, ["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;}")]));
48
+ };
43
49
 
44
50
  PageSizeSelect.propTypes = {
45
51
  dataTest: PropTypes.string.isRequired,
package/build/es/page-summary.js CHANGED
@@ -12,16 +12,17 @@ const translate = (prop, interpolationObject) => {
12
12
  return prop;
13
13
  };
14
14
 
15
- const PageSummary = ({
16
- dataTest,
17
- firstItem,
18
- inactive,
19
- lastItem,
20
- page,
21
- pageCount,
22
- pageSummaryText,
23
- total
24
- }) => {
15
+ const PageSummary = _ref => {
16
+ let {
17
+ dataTest,
18
+ firstItem,
19
+ inactive,
20
+ lastItem,
21
+ page,
22
+ pageCount,
23
+ pageSummaryText,
24
+ total
25
+ } = _ref;
25
26
  const summary = translate(pageSummaryText, {
26
27
  firstItem,
27
28
  lastItem,
@@ -30,7 +31,7 @@ const PageSummary = ({
30
31
  total
31
32
  });
32
33
  return /*#__PURE__*/React.createElement("div", {
33
- "data-test": `${dataTest}-summary`,
34
+ "data-test": "".concat(dataTest, "-summary"),
34
35
  className: _JSXStyle.dynamic([["1022808428", [spacers.dp12, colors.grey700, colors.grey500]]])
35
36
  }, /*#__PURE__*/React.createElement("span", {
36
37
  className: _JSXStyle.dynamic([["1022808428", [spacers.dp12, colors.grey700, colors.grey500]]]) + " " + (cx({
@@ -39,7 +40,7 @@ const PageSummary = ({
39
40
  }, summary), /*#__PURE__*/React.createElement(_JSXStyle, {
40
41
  id: "1022808428",
41
42
  dynamic: [spacers.dp12, colors.grey700, colors.grey500]
42
- }, [`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;}`, `span.inactive.__jsx-style-dynamic-selector{color:${colors.grey500};}`]));
43
+ }, ["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, ";}")]));
43
44
  };
44
45
 
45
46
  PageSummary.propTypes = {
package/build/es/pagination.js CHANGED
@@ -12,28 +12,29 @@ import { PageSizeSelect } from './page-size-select.js';
12
12
  import { PageSummary } from './page-summary.js';
13
13
  const MAX_PAGE_COUNT = 2000;
14
14
 
15
- const Pagination = ({
16
- className,
17
- dataTest,
18
- disabled,
19
- hidePageSelect,
20
- hidePageSizeSelect,
21
- hidePageSummary,
22
- isLastPage,
23
- nextPageText,
24
- onPageChange,
25
- onPageSizeChange,
26
- page,
27
- pageCount,
28
- pageLength,
29
- pageSelectText,
30
- pageSize,
31
- pageSizes,
32
- pageSizeSelectText,
33
- pageSummaryText,
34
- previousPageText,
35
- total
36
- }) => {
15
+ const Pagination = _ref => {
16
+ let {
17
+ className,
18
+ dataTest,
19
+ disabled,
20
+ hidePageSelect,
21
+ hidePageSizeSelect,
22
+ hidePageSummary,
23
+ isLastPage,
24
+ nextPageText,
25
+ onPageChange,
26
+ onPageSizeChange,
27
+ page,
28
+ pageCount,
29
+ pageLength,
30
+ pageSelectText,
31
+ pageSize,
32
+ pageSizes,
33
+ pageSizeSelectText,
34
+ pageSummaryText,
35
+ previousPageText,
36
+ total
37
+ } = _ref;
37
38
  const {
38
39
  firstItem,
39
40
  lastItem
package/build/es/pagination.stories.js CHANGED
@@ -3,28 +3,18 @@ import React from 'react';
3
3
  import * as pagers from './__fixtures__/index.js';
4
4
  import { Pagination } from './pagination.js';
5
5
  const subtitle = 'Allows navigation through data displayed over several pages';
6
- const description = `
7
- 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.
8
-
9
- **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.**
10
-
11
- \`\`\`js
12
- import { Pagination } from '@dhis2/ui'
13
- \`\`\`
14
-
15
- _**Note**: Dropdown menus may not display properly on this page. View these demos in the 'Canvas' tab._
16
- `;
6
+ 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";
17
7
 
18
8
  const logOnPageChange = page => {
19
- console.log(`Now navigate to page ${page}...`);
9
+ console.log("Now navigate to page ".concat(page, "..."));
20
10
  };
21
11
 
22
12
  const logOnPageSizeChange = pageSize => {
23
- console.log(`Now change page size to ${pageSize}...`);
13
+ console.log("Now change page size to ".concat(pageSize, "..."));
24
14
  };
25
15
 
26
16
  export default {
27
- title: 'Navigation/Pagination',
17
+ title: 'Pagination',
28
18
  component: Pagination,
29
19
  parameters: {
30
20
  componentSubtitle: subtitle,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dhis2-ui/pagination",
3
- "version": "8.2.0",
3
+ "version": "8.2.1",
4
4
  "description": "UI Pagination",
5
5
  "repository": {
6
6
  "type": "git",
@@ -33,10 +33,10 @@
33
33
  },
34
34
  "dependencies": {
35
35
  "@dhis2/prop-types": "^3.0.0-beta.1",
36
- "@dhis2-ui/button": "8.2.0",
37
- "@dhis2-ui/select": "8.2.0",
38
- "@dhis2/ui-constants": "8.2.0",
39
- "@dhis2/ui-icons": "8.2.0",
36
+ "@dhis2-ui/button": "8.2.1",
37
+ "@dhis2-ui/select": "8.2.1",
38
+ "@dhis2/ui-constants": "8.2.1",
39
+ "@dhis2/ui-icons": "8.2.1",
40
40
  "classnames": "^2.3.1",
41
41
  "prop-types": "^15.7.2"
42
42
  },