@dhis2-ui/pagination 8.14.2 → 8.14.4

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 (5) hide show
  1. package/build/cjs/pagination.js +8 -5
  2. package/build/cjs/pagination.stories.js +24 -1
  3. package/build/es/pagination.js +7 -5
  4. package/build/es/pagination.stories.js +21 -0
  5. package/package.json +5 -5
package/build/cjs/pagination.js CHANGED
@@ -9,6 +9,8 @@ var _style = _interopRequireDefault(require("styled-jsx/style"));
9
9
 
10
10
  var _propTypes = require("@dhis2/prop-types");
11
11
 
12
+ var _uiConstants = require("@dhis2/ui-constants");
13
+
12
14
  var _classnames = _interopRequireDefault(require("classnames"));
13
15
 
14
16
  var _propTypes2 = _interopRequireDefault(require("prop-types"));
@@ -69,9 +71,9 @@ const Pagination = _ref => {
69
71
  const showPageSelect = !hidePageSelect && typeof pageCount === 'number' && pageCount > 1 && pageCount <= MAX_PAGE_COUNT;
70
72
  return /*#__PURE__*/_react.default.createElement("div", {
71
73
  "data-test": dataTest,
72
- className: "jsx-3647884394" + " " + ((0, _classnames.default)('container', className) || "")
74
+ className: _style.default.dynamic([["3796520840", [_uiConstants.spacers.dp4]]]) + " " + ((0, _classnames.default)('container', className) || "")
73
75
  }, hidePageSizeSelect ? /*#__PURE__*/_react.default.createElement("div", {
74
- className: "jsx-3647884394" + " " + "spacer"
76
+ className: _style.default.dynamic([["3796520840", [_uiConstants.spacers.dp4]]]) + " " + "spacer"
75
77
  }) : /*#__PURE__*/_react.default.createElement(_pageSizeSelect.PageSizeSelect, {
76
78
  dataTest: dataTest,
77
79
  disabled: disabled,
@@ -89,7 +91,7 @@ const Pagination = _ref => {
89
91
  pageSummaryText: pageSummaryText,
90
92
  total: total
91
93
  }), /*#__PURE__*/_react.default.createElement("div", {
92
- className: "jsx-3647884394" + " " + "page-navigation"
94
+ className: _style.default.dynamic([["3796520840", [_uiConstants.spacers.dp4]]]) + " " + "page-navigation"
93
95
  }, showPageSelect && /*#__PURE__*/_react.default.createElement(_pageSelect.PageSelect, {
94
96
  dataTest: dataTest,
95
97
  disabled: disabled,
@@ -106,8 +108,9 @@ const Pagination = _ref => {
106
108
  isNextDisabled: disabled || isLastPage || page === pageCount,
107
109
  isPreviousDisabled: disabled || page === 1
108
110
  })), /*#__PURE__*/_react.default.createElement(_style.default, {
109
- id: "3647884394"
110
- }, [".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;}"]));
111
+ id: "3796520840",
112
+ dynamic: [_uiConstants.spacers.dp4]
113
+ }, [".container.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;row-gap:".concat(_uiConstants.spacers.dp4, ";}"), ".spacer.__jsx-style-dynamic-selector{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".page-navigation.__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;}"]));
111
114
  };
112
115
 
113
116
  exports.Pagination = Pagination;
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.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;
6
+ exports.default = exports.WithoutPageSummary = exports.WithoutPageSizeSelect = exports.WithoutGoToPageSelect = exports.WithoutAnySelect = exports.WithCustomPageSummary = exports.PagerAtLastPage = exports.PagerAtFirstPage = exports.NoTotalAtLastPageWithoutPageLength = exports.NoTotalAtLastPage = exports.NoTotal = exports.NarrowWidth = exports.MediumWidth = exports.Disabled = exports.Default = void 0;
7
7
 
8
8
  var _d2I18n = _interopRequireDefault(require("@dhis2/d2-i18n"));
9
9
 
@@ -106,4 +106,27 @@ exports.WithoutAnySelect = WithoutAnySelect;
106
106
  WithoutAnySelect.args = { ...pagers.atTenthPage,
107
107
  ...WithoutGoToPageSelect.args,
108
108
  ...WithoutPageSizeSelect.args
109
+ };
110
+
111
+ const InBox = _ref => {
112
+ let {
113
+ boxWidth,
114
+ ...args
115
+ } = _ref;
116
+ return /*#__PURE__*/_react.default.createElement("div", {
117
+ style: {
118
+ width: boxWidth
119
+ }
120
+ }, /*#__PURE__*/_react.default.createElement(_pagination.Pagination, args));
121
+ };
122
+
123
+ const MediumWidth = InBox.bind({});
124
+ exports.MediumWidth = MediumWidth;
125
+ MediumWidth.args = { ...pagers.atTenthPage,
126
+ boxWidth: 500
127
+ };
128
+ const NarrowWidth = InBox.bind({});
129
+ exports.NarrowWidth = NarrowWidth;
130
+ NarrowWidth.args = { ...pagers.atTenthPage,
131
+ boxWidth: 100
109
132
  };
package/build/es/pagination.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import _JSXStyle from "styled-jsx/style";
2
2
  import { requiredIf } from '@dhis2/prop-types';
3
+ import { spacers } from '@dhis2/ui-constants';
3
4
  import cx from 'classnames';
4
5
  import PropTypes from 'prop-types';
5
6
  import React from 'react';
@@ -48,9 +49,9 @@ const Pagination = _ref => {
48
49
  const showPageSelect = !hidePageSelect && typeof pageCount === 'number' && pageCount > 1 && pageCount <= MAX_PAGE_COUNT;
49
50
  return /*#__PURE__*/React.createElement("div", {
50
51
  "data-test": dataTest,
51
- className: "jsx-3647884394" + " " + (cx('container', className) || "")
52
+ className: _JSXStyle.dynamic([["3796520840", [spacers.dp4]]]) + " " + (cx('container', className) || "")
52
53
  }, hidePageSizeSelect ? /*#__PURE__*/React.createElement("div", {
53
- className: "jsx-3647884394" + " " + "spacer"
54
+ className: _JSXStyle.dynamic([["3796520840", [spacers.dp4]]]) + " " + "spacer"
54
55
  }) : /*#__PURE__*/React.createElement(PageSizeSelect, {
55
56
  dataTest: dataTest,
56
57
  disabled: disabled,
@@ -68,7 +69,7 @@ const Pagination = _ref => {
68
69
  pageSummaryText: pageSummaryText,
69
70
  total: total
70
71
  }), /*#__PURE__*/React.createElement("div", {
71
- className: "jsx-3647884394" + " " + "page-navigation"
72
+ className: _JSXStyle.dynamic([["3796520840", [spacers.dp4]]]) + " " + "page-navigation"
72
73
  }, showPageSelect && /*#__PURE__*/React.createElement(PageSelect, {
73
74
  dataTest: dataTest,
74
75
  disabled: disabled,
@@ -85,8 +86,9 @@ const Pagination = _ref => {
85
86
  isNextDisabled: disabled || isLastPage || page === pageCount,
86
87
  isPreviousDisabled: disabled || page === 1
87
88
  })), /*#__PURE__*/React.createElement(_JSXStyle, {
88
- id: "3647884394"
89
- }, [".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;}"]));
89
+ id: "3796520840",
90
+ dynamic: [spacers.dp4]
91
+ }, [".container.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;row-gap:".concat(spacers.dp4, ";}"), ".spacer.__jsx-style-dynamic-selector{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".page-navigation.__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;}"]));
90
92
  };
91
93
 
92
94
  Pagination.defaultProps = {
package/build/es/pagination.stories.js CHANGED
@@ -76,4 +76,25 @@ export const WithoutAnySelect = Template.bind({});
76
76
  WithoutAnySelect.args = { ...pagers.atTenthPage,
77
77
  ...WithoutGoToPageSelect.args,
78
78
  ...WithoutPageSizeSelect.args
79
+ };
80
+
81
+ const InBox = _ref => {
82
+ let {
83
+ boxWidth,
84
+ ...args
85
+ } = _ref;
86
+ return /*#__PURE__*/React.createElement("div", {
87
+ style: {
88
+ width: boxWidth
89
+ }
90
+ }, /*#__PURE__*/React.createElement(Pagination, args));
91
+ };
92
+
93
+ export const MediumWidth = InBox.bind({});
94
+ MediumWidth.args = { ...pagers.atTenthPage,
95
+ boxWidth: 500
96
+ };
97
+ export const NarrowWidth = InBox.bind({});
98
+ NarrowWidth.args = { ...pagers.atTenthPage,
99
+ boxWidth: 100
79
100
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dhis2-ui/pagination",
3
- "version": "8.14.2",
3
+ "version": "8.14.4",
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.1.2",
36
- "@dhis2-ui/button": "8.14.2",
37
- "@dhis2-ui/select": "8.14.2",
38
- "@dhis2/ui-constants": "8.14.2",
39
- "@dhis2/ui-icons": "8.14.2",
36
+ "@dhis2-ui/button": "8.14.4",
37
+ "@dhis2-ui/select": "8.14.4",
38
+ "@dhis2/ui-constants": "8.14.4",
39
+ "@dhis2/ui-icons": "8.14.4",
40
40
  "classnames": "^2.3.1",
41
41
  "prop-types": "^15.7.2"
42
42
  },