@commercetools-uikit/pagination 13.0.1 → 13.0.2
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.
- package/README.md +22 -8
- package/dist/commercetools-uikit-pagination.cjs.d.ts +1 -0
- package/dist/commercetools-uikit-pagination.cjs.dev.js +28 -66
- package/dist/commercetools-uikit-pagination.cjs.prod.js +19 -15
- package/dist/commercetools-uikit-pagination.esm.js +27 -65
- package/dist/declarations/src/index.d.ts +4 -0
- package/dist/declarations/src/page-navigator/index.d.ts +1 -0
- package/dist/declarations/src/page-navigator/messages.d.ts +23 -0
- package/dist/declarations/src/page-navigator/page-navigator.d.ts +10 -0
- package/dist/declarations/src/page-navigator/utils.d.ts +2 -0
- package/dist/declarations/src/page-size-selector/index.d.ts +1 -0
- package/dist/declarations/src/page-size-selector/messages.d.ts +8 -0
- package/dist/declarations/src/page-size-selector/page-size-selector.d.ts +13 -0
- package/dist/declarations/src/pagination.d.ts +16 -0
- package/dist/declarations/src/version.d.ts +2 -0
- package/package.json +10 -10
package/README.md
CHANGED
|
@@ -49,11 +49,25 @@ export default Example;
|
|
|
49
49
|
|
|
50
50
|
## Properties
|
|
51
51
|
|
|
52
|
-
| Props | Type
|
|
53
|
-
| ----------------- |
|
|
54
|
-
| `totalItems` | `number`
|
|
55
|
-
| `page` | `number`
|
|
56
|
-
| `onPageChange` | `
|
|
57
|
-
| `perPage` | `number`
|
|
58
|
-
| `perPageRange` | `
|
|
59
|
-
| `onPerPageChange` | `
|
|
52
|
+
| Props | Type | Required | Default | Description |
|
|
53
|
+
| ----------------- | ----------------------------------------------------------- | :------: | ------- | --------------------------------------------------------------------------------------------------------- |
|
|
54
|
+
| `totalItems` | `number` | ✅ | | Total number of items across all pages |
|
|
55
|
+
| `page` | `number` | ✅ | | The current page |
|
|
56
|
+
| `onPageChange` | `Function`<br/>[See signature.](#signature-onPageChange) | ✅ | | A callback function, called when the page is changed. |
|
|
57
|
+
| `perPage` | `number` | | `20` | Number of items per page, according to the pre-defined range values. |
|
|
58
|
+
| `perPageRange` | `TPageRangeSize` | | `'s'` | Range of items per page.
<br/>
`s: 20,50`
<br/>
`m: 20,50,100`
<br/>
`l: 200,500` |
|
|
59
|
+
| `onPerPageChange` | `Function`<br/>[See signature.](#signature-onPerPageChange) | ✅ | | A callback function, called when `perPage` is changed. |
|
|
60
|
+
|
|
61
|
+
## Signatures
|
|
62
|
+
|
|
63
|
+
### Signature `onPageChange`
|
|
64
|
+
|
|
65
|
+
```ts
|
|
66
|
+
(newPage: number) => void
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
### Signature `onPerPageChange`
|
|
70
|
+
|
|
71
|
+
```ts
|
|
72
|
+
(newPerPage: number) => void
|
|
73
|
+
```
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./declarations/src/index";
|
|
@@ -2,12 +2,12 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var PropTypes = require('prop-types');
|
|
6
5
|
require('@emotion/react');
|
|
7
6
|
var Spacings = require('@commercetools-uikit/spacings');
|
|
8
7
|
var jsxRuntime = require('@emotion/react/jsx-runtime');
|
|
9
8
|
var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
|
|
10
9
|
var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
|
|
10
|
+
var _pt = require('prop-types');
|
|
11
11
|
var _includesInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/includes');
|
|
12
12
|
var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
|
|
13
13
|
var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
|
|
@@ -35,8 +35,8 @@ var Text = require('@commercetools-uikit/text');
|
|
|
35
35
|
|
|
36
36
|
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
|
|
37
37
|
|
|
38
|
-
var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
|
|
39
38
|
var Spacings__default = /*#__PURE__*/_interopDefault(Spacings);
|
|
39
|
+
var _pt__default = /*#__PURE__*/_interopDefault(_pt);
|
|
40
40
|
var _includesInstanceProperty__default = /*#__PURE__*/_interopDefault(_includesInstanceProperty);
|
|
41
41
|
var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
|
|
42
42
|
var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
|
|
@@ -139,15 +139,19 @@ var PageNavigator = function PageNavigator(props) {
|
|
|
139
139
|
var isNextDisabled = page >= totalPages;
|
|
140
140
|
var handlePrevPageChange = react.useCallback(function () {
|
|
141
141
|
var previousPage = _valuesInstanceProperty__default["default"](paginationForm).page - 1;
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
142
|
+
|
|
143
|
+
if (previousPage >= 1) {
|
|
144
|
+
paginationForm.setFieldValue('page', previousPage, true);
|
|
145
|
+
paginationForm.submitForm();
|
|
146
|
+
}
|
|
145
147
|
}, [paginationForm]);
|
|
146
148
|
var handleNextPageChange = react.useCallback(function () {
|
|
147
149
|
var nextPage = _valuesInstanceProperty__default["default"](paginationForm).page + 1;
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
150
|
+
|
|
151
|
+
if (nextPage <= totalPages) {
|
|
152
|
+
paginationForm.setFieldValue('page', nextPage, true);
|
|
153
|
+
paginationForm.submitForm();
|
|
154
|
+
}
|
|
151
155
|
}, [paginationForm, totalPages]);
|
|
152
156
|
return jsxRuntime.jsx("form", {
|
|
153
157
|
onSubmit: paginationForm.handleSubmit,
|
|
@@ -170,10 +174,9 @@ var PageNavigator = function PageNavigator(props) {
|
|
|
170
174
|
min: 1,
|
|
171
175
|
max: totalPages,
|
|
172
176
|
onBlur: paginationForm.handleBlur,
|
|
173
|
-
onFocus: paginationForm.handleFocus,
|
|
174
177
|
onChange: paginationForm.handleChange,
|
|
175
178
|
isDisabled: isDisabled,
|
|
176
|
-
hasWarning: paginationForm.errors.page,
|
|
179
|
+
hasWarning: Boolean(paginationForm.errors.page),
|
|
177
180
|
horizontalConstraint: 2
|
|
178
181
|
})
|
|
179
182
|
}), jsxRuntime.jsx(Text__default["default"].Body, {
|
|
@@ -192,12 +195,12 @@ var PageNavigator = function PageNavigator(props) {
|
|
|
192
195
|
});
|
|
193
196
|
};
|
|
194
197
|
|
|
195
|
-
PageNavigator.displayName = 'PageNavigator';
|
|
196
198
|
PageNavigator.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
197
|
-
totalPages:
|
|
198
|
-
page:
|
|
199
|
-
onPageChange:
|
|
199
|
+
totalPages: _pt__default["default"].number.isRequired,
|
|
200
|
+
page: _pt__default["default"].number.isRequired,
|
|
201
|
+
onPageChange: _pt__default["default"].func.isRequired
|
|
200
202
|
} : {};
|
|
203
|
+
PageNavigator.displayName = 'PageNavigator';
|
|
201
204
|
var PageNavigator$1 = PageNavigator;
|
|
202
205
|
|
|
203
206
|
var messages = reactIntl.defineMessages({
|
|
@@ -272,17 +275,18 @@ var PageSizeSelector = function PageSizeSelector(props) {
|
|
|
272
275
|
});
|
|
273
276
|
};
|
|
274
277
|
|
|
275
|
-
PageSizeSelector.displayName = 'PageSizeSelector';
|
|
276
278
|
PageSizeSelector.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
277
|
-
perPage:
|
|
278
|
-
perPageRange:
|
|
279
|
-
onPerPageChange:
|
|
280
|
-
pageItems:
|
|
279
|
+
perPage: _pt__default["default"].number.isRequired,
|
|
280
|
+
perPageRange: _pt__default["default"].oneOf(['s', 'm', 'l']).isRequired,
|
|
281
|
+
onPerPageChange: _pt__default["default"].func.isRequired,
|
|
282
|
+
pageItems: _pt__default["default"].number.isRequired
|
|
281
283
|
} : {};
|
|
282
|
-
PageSizeSelector.
|
|
284
|
+
PageSizeSelector.displayName = 'PageSizeSelector';
|
|
285
|
+
var defaultProps$1 = {
|
|
283
286
|
perPage: 20,
|
|
284
287
|
perPageRange: 's'
|
|
285
288
|
};
|
|
289
|
+
PageSizeSelector.defaultProps = defaultProps$1;
|
|
286
290
|
var PageSizeSelector$1 = PageSizeSelector;
|
|
287
291
|
|
|
288
292
|
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
|
|
@@ -293,7 +297,7 @@ var _ref = process.env.NODE_ENV === "production" ? {
|
|
|
293
297
|
} : {
|
|
294
298
|
name: "mvvfm1-Pagination",
|
|
295
299
|
styles: "flex-grow:2;label:Pagination;",
|
|
296
|
-
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
300
|
+
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInBhZ2luYXRpb24udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXNEZ0IiLCJmaWxlIjoicGFnaW5hdGlvbi50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgU3BhY2luZ3MgZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvc3BhY2luZ3MnO1xuaW1wb3J0IFBhZ2VOYXZpZ2F0b3IgZnJvbSAnLi9wYWdlLW5hdmlnYXRvcic7XG5pbXBvcnQgUGFnZVNpemVTZWxlY3RvciwgeyB0eXBlIFRQYWdlUmFuZ2VTaXplIH0gZnJvbSAnLi9wYWdlLXNpemUtc2VsZWN0b3InO1xuXG50eXBlIFRQYWdpbmF0aW9uUHJvcHMgPSB7XG4gIC8qKlxuICAgKiBUb3RhbCBudW1iZXIgb2YgaXRlbXMgYWNyb3NzIGFsbCBwYWdlc1xuICAgKi9cbiAgdG90YWxJdGVtczogbnVtYmVyO1xuXG4gIC8qKlxuICAgKiBUaGUgY3VycmVudCBwYWdlXG4gICAqL1xuICBwYWdlOiBudW1iZXI7XG5cbiAgLyoqXG4gICAqIEEgY2FsbGJhY2sgZnVuY3Rpb24sIGNhbGxlZCB3aGVuIHRoZSBwYWdlIGlzIGNoYW5nZWQuXG4gICAqL1xuICBvblBhZ2VDaGFuZ2U6IChuZXdQYWdlOiBudW1iZXIpID0+IHZvaWQ7XG5cbiAgLyoqXG4gICAqIE51bWJlciBvZiBpdGVtcyBwZXIgcGFnZSwgYWNjb3JkaW5nIHRvIHRoZSBwcmUtZGVmaW5lZCByYW5nZSB2YWx1ZXMuXG4gICAqL1xuICBwZXJQYWdlOiBudW1iZXI7XG5cbiAgLyoqXG4gICAqIFJhbmdlIG9mIGl0ZW1zIHBlciBwYWdlLlxuICAgKiA8YnIvPlxuICAgKiBgczogMjAsNTBgXG4gICAqIDxici8+XG4gICAqIGBtOiAyMCw1MCwxMDBgXG4gICAqIDxici8+XG4gICAqIGBsOiAyMDAsNTAwYFxuICAgKi9cbiAgcGVyUGFnZVJhbmdlOiBUUGFnZVJhbmdlU2l6ZTtcblxuICAvKipcbiAgICogQSBjYWxsYmFjayBmdW5jdGlvbiwgY2FsbGVkIHdoZW4gYHBlclBhZ2VgIGlzIGNoYW5nZWQuXG4gICAqL1xuICBvblBlclBhZ2VDaGFuZ2U6IChuZXdQZXJQYWdlOiBudW1iZXIpID0+IHZvaWQ7XG59O1xuXG5jb25zdCBQYWdpbmF0aW9uID0gKHByb3BzOiBUUGFnaW5hdGlvblByb3BzKSA9PiB7XG4gIGNvbnN0IHRvdGFsUGFnZXMgPSBNYXRoLmNlaWwocHJvcHMudG90YWxJdGVtcyAvIHByb3BzLnBlclBhZ2UpO1xuXG4gIGNvbnN0IHBhZ2VJdGVtcyA9XG4gICAgcHJvcHMucGFnZSA9PT0gdG90YWxQYWdlc1xuICAgICAgPyBwcm9wcy50b3RhbEl0ZW1zIC0gcHJvcHMucGVyUGFnZSAqIChwcm9wcy5wYWdlIC0gMSlcbiAgICAgIDogcHJvcHMucGVyUGFnZTtcblxuICByZXR1cm4gKFxuICAgIDxTcGFjaW5ncy5JbmxpbmUganVzdGlmeUNvbnRlbnQ9XCJzcGFjZS1iZXR3ZWVuXCI+XG4gICAgICA8ZGl2XG4gICAgICAgIGNzcz17Y3NzYFxuICAgICAgICAgIGZsZXgtZ3JvdzogMjtcbiAgICAgICAgYH1cbiAgICAgID5cbiAgICAgICAgPFBhZ2VTaXplU2VsZWN0b3JcbiAgICAgICAgICBwYWdlSXRlbXM9e3BhZ2VJdGVtc31cbiAgICAgICAgICBwZXJQYWdlPXtwcm9wcy5wZXJQYWdlfVxuICAgICAgICAgIHBlclBhZ2VSYW5nZT17cHJvcHMucGVyUGFnZVJhbmdlfVxuICAgICAgICAgIG9uUGVyUGFnZUNoYW5nZT17cHJvcHMub25QZXJQYWdlQ2hhbmdlfVxuICAgICAgICAvPlxuICAgICAgPC9kaXY+XG4gICAgICA8UGFnZU5hdmlnYXRvclxuICAgICAgICB0b3RhbFBhZ2VzPXt0b3RhbFBhZ2VzfVxuICAgICAgICBwYWdlPXtwcm9wcy5wYWdlfVxuICAgICAgICBvblBhZ2VDaGFuZ2U9e3Byb3BzLm9uUGFnZUNoYW5nZX1cbiAgICAgIC8+XG4gICAgPC9TcGFjaW5ncy5JbmxpbmU+XG4gICk7XG59O1xuXG5QYWdpbmF0aW9uLmRpc3BsYXlOYW1lID0gJ1BhZ2luYXRpb24nO1xuXG5jb25zdCBkZWZhdWx0UHJvcHM6IFBpY2s8VFBhZ2luYXRpb25Qcm9wcywgJ3BlclBhZ2UnIHwgJ3BlclBhZ2VSYW5nZSc+ID0ge1xuICBwZXJQYWdlOiAyMCxcbiAgcGVyUGFnZVJhbmdlOiAncycsXG59O1xuUGFnaW5hdGlvbi5kZWZhdWx0UHJvcHMgPSBkZWZhdWx0UHJvcHM7XG5cbmV4cG9ydCB0eXBlIHsgVFBhZ2VSYW5nZVNpemUgfTtcblxuZXhwb3J0IGRlZmF1bHQgUGFnaW5hdGlvbjtcbiJdfQ== */",
|
|
297
301
|
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
|
|
298
302
|
};
|
|
299
303
|
|
|
@@ -319,57 +323,15 @@ var Pagination = function Pagination(props) {
|
|
|
319
323
|
};
|
|
320
324
|
|
|
321
325
|
Pagination.displayName = 'Pagination';
|
|
322
|
-
|
|
323
|
-
/**
|
|
324
|
-
* Total number of items across all pages
|
|
325
|
-
*/
|
|
326
|
-
totalItems: PropTypes__default["default"].number.isRequired,
|
|
327
|
-
|
|
328
|
-
/**
|
|
329
|
-
* The current page
|
|
330
|
-
*/
|
|
331
|
-
page: PropTypes__default["default"].number.isRequired,
|
|
332
|
-
|
|
333
|
-
/**
|
|
334
|
-
* A callback function, called when the page is changed.
|
|
335
|
-
* <br/>
|
|
336
|
-
* Signature: `(page: number) => void`
|
|
337
|
-
* <br/>
|
|
338
|
-
* Signature: `(page: number) => void`
|
|
339
|
-
*/
|
|
340
|
-
onPageChange: PropTypes__default["default"].func.isRequired,
|
|
341
|
-
|
|
342
|
-
/**
|
|
343
|
-
* Number of items per page, according to the pre-defined range values.
|
|
344
|
-
*/
|
|
345
|
-
perPage: PropTypes__default["default"].number,
|
|
346
|
-
|
|
347
|
-
/**
|
|
348
|
-
* Range of items per page.
|
|
349
|
-
* <br/>
|
|
350
|
-
* `s: 20,50`
|
|
351
|
-
* <br/>
|
|
352
|
-
* `m: 20,50,100`
|
|
353
|
-
* <br/>
|
|
354
|
-
* `l: 200,500`
|
|
355
|
-
*/
|
|
356
|
-
perPageRange: PropTypes__default["default"].oneOf(['s', 'm', 'l']),
|
|
357
|
-
|
|
358
|
-
/**
|
|
359
|
-
* A callback function, called when `perPage` is changed.
|
|
360
|
-
* <br/>
|
|
361
|
-
* Signature: `(nextPerPage: number) => void`
|
|
362
|
-
*/
|
|
363
|
-
onPerPageChange: PropTypes__default["default"].func.isRequired
|
|
364
|
-
} : {};
|
|
365
|
-
Pagination.defaultProps = {
|
|
326
|
+
var defaultProps = {
|
|
366
327
|
perPage: 20,
|
|
367
328
|
perPageRange: 's'
|
|
368
329
|
};
|
|
330
|
+
Pagination.defaultProps = defaultProps;
|
|
369
331
|
var Pagination$1 = Pagination;
|
|
370
332
|
|
|
371
333
|
// NOTE: This string will be replaced on build time with the package version.
|
|
372
|
-
var version = "13.0.
|
|
334
|
+
var version = "13.0.2";
|
|
373
335
|
|
|
374
336
|
exports.PageNavigator = PageNavigator$1;
|
|
375
337
|
exports.PageSizeSelector = PageSizeSelector$1;
|
|
@@ -2,12 +2,12 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
require('prop-types');
|
|
6
5
|
require('@emotion/react');
|
|
7
6
|
var Spacings = require('@commercetools-uikit/spacings');
|
|
8
7
|
var jsxRuntime = require('@emotion/react/jsx-runtime');
|
|
9
8
|
var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
|
|
10
9
|
var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
|
|
10
|
+
require('prop-types');
|
|
11
11
|
var _includesInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/includes');
|
|
12
12
|
require('@babel/runtime-corejs3/core-js-stable/instance/concat');
|
|
13
13
|
var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
|
|
@@ -137,15 +137,19 @@ var PageNavigator = function PageNavigator(props) {
|
|
|
137
137
|
var isNextDisabled = page >= totalPages;
|
|
138
138
|
var handlePrevPageChange = react.useCallback(function () {
|
|
139
139
|
var previousPage = _valuesInstanceProperty__default["default"](paginationForm).page - 1;
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
140
|
+
|
|
141
|
+
if (previousPage >= 1) {
|
|
142
|
+
paginationForm.setFieldValue('page', previousPage, true);
|
|
143
|
+
paginationForm.submitForm();
|
|
144
|
+
}
|
|
143
145
|
}, [paginationForm]);
|
|
144
146
|
var handleNextPageChange = react.useCallback(function () {
|
|
145
147
|
var nextPage = _valuesInstanceProperty__default["default"](paginationForm).page + 1;
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
148
|
+
|
|
149
|
+
if (nextPage <= totalPages) {
|
|
150
|
+
paginationForm.setFieldValue('page', nextPage, true);
|
|
151
|
+
paginationForm.submitForm();
|
|
152
|
+
}
|
|
149
153
|
}, [paginationForm, totalPages]);
|
|
150
154
|
return jsxRuntime.jsx("form", {
|
|
151
155
|
onSubmit: paginationForm.handleSubmit,
|
|
@@ -168,10 +172,9 @@ var PageNavigator = function PageNavigator(props) {
|
|
|
168
172
|
min: 1,
|
|
169
173
|
max: totalPages,
|
|
170
174
|
onBlur: paginationForm.handleBlur,
|
|
171
|
-
onFocus: paginationForm.handleFocus,
|
|
172
175
|
onChange: paginationForm.handleChange,
|
|
173
176
|
isDisabled: isDisabled,
|
|
174
|
-
hasWarning: paginationForm.errors.page,
|
|
177
|
+
hasWarning: Boolean(paginationForm.errors.page),
|
|
175
178
|
horizontalConstraint: 2
|
|
176
179
|
})
|
|
177
180
|
}), jsxRuntime.jsx(Text__default["default"].Body, {
|
|
@@ -190,8 +193,8 @@ var PageNavigator = function PageNavigator(props) {
|
|
|
190
193
|
});
|
|
191
194
|
};
|
|
192
195
|
|
|
193
|
-
PageNavigator.displayName = 'PageNavigator';
|
|
194
196
|
PageNavigator.propTypes = {};
|
|
197
|
+
PageNavigator.displayName = 'PageNavigator';
|
|
195
198
|
var PageNavigator$1 = PageNavigator;
|
|
196
199
|
|
|
197
200
|
var messages = reactIntl.defineMessages({
|
|
@@ -263,12 +266,13 @@ var PageSizeSelector = function PageSizeSelector(props) {
|
|
|
263
266
|
});
|
|
264
267
|
};
|
|
265
268
|
|
|
266
|
-
PageSizeSelector.displayName = 'PageSizeSelector';
|
|
267
269
|
PageSizeSelector.propTypes = {};
|
|
268
|
-
PageSizeSelector.
|
|
270
|
+
PageSizeSelector.displayName = 'PageSizeSelector';
|
|
271
|
+
var defaultProps$1 = {
|
|
269
272
|
perPage: 20,
|
|
270
273
|
perPageRange: 's'
|
|
271
274
|
};
|
|
275
|
+
PageSizeSelector.defaultProps = defaultProps$1;
|
|
272
276
|
var PageSizeSelector$1 = PageSizeSelector;
|
|
273
277
|
|
|
274
278
|
var _ref = {
|
|
@@ -298,15 +302,15 @@ var Pagination = function Pagination(props) {
|
|
|
298
302
|
};
|
|
299
303
|
|
|
300
304
|
Pagination.displayName = 'Pagination';
|
|
301
|
-
|
|
302
|
-
Pagination.defaultProps = {
|
|
305
|
+
var defaultProps = {
|
|
303
306
|
perPage: 20,
|
|
304
307
|
perPageRange: 's'
|
|
305
308
|
};
|
|
309
|
+
Pagination.defaultProps = defaultProps;
|
|
306
310
|
var Pagination$1 = Pagination;
|
|
307
311
|
|
|
308
312
|
// NOTE: This string will be replaced on build time with the package version.
|
|
309
|
-
var version = "13.0.
|
|
313
|
+
var version = "13.0.2";
|
|
310
314
|
|
|
311
315
|
exports.PageNavigator = PageNavigator$1;
|
|
312
316
|
exports.PageSizeSelector = PageSizeSelector$1;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import PropTypes from 'prop-types';
|
|
2
1
|
import '@emotion/react';
|
|
3
2
|
import Spacings from '@commercetools-uikit/spacings';
|
|
4
3
|
import { jsx, jsxs } from '@emotion/react/jsx-runtime';
|
|
5
4
|
import _defineProperty from '@babel/runtime-corejs3/helpers/esm/defineProperty';
|
|
6
5
|
import _slicedToArray from '@babel/runtime-corejs3/helpers/esm/slicedToArray';
|
|
6
|
+
import _pt from 'prop-types';
|
|
7
7
|
import _includesInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/includes';
|
|
8
8
|
import _concatInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/concat';
|
|
9
9
|
import _mapInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/map';
|
|
@@ -111,15 +111,19 @@ var PageNavigator = function PageNavigator(props) {
|
|
|
111
111
|
var isNextDisabled = page >= totalPages;
|
|
112
112
|
var handlePrevPageChange = useCallback(function () {
|
|
113
113
|
var previousPage = _valuesInstanceProperty(paginationForm).page - 1;
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
114
|
+
|
|
115
|
+
if (previousPage >= 1) {
|
|
116
|
+
paginationForm.setFieldValue('page', previousPage, true);
|
|
117
|
+
paginationForm.submitForm();
|
|
118
|
+
}
|
|
117
119
|
}, [paginationForm]);
|
|
118
120
|
var handleNextPageChange = useCallback(function () {
|
|
119
121
|
var nextPage = _valuesInstanceProperty(paginationForm).page + 1;
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
122
|
+
|
|
123
|
+
if (nextPage <= totalPages) {
|
|
124
|
+
paginationForm.setFieldValue('page', nextPage, true);
|
|
125
|
+
paginationForm.submitForm();
|
|
126
|
+
}
|
|
123
127
|
}, [paginationForm, totalPages]);
|
|
124
128
|
return jsx("form", {
|
|
125
129
|
onSubmit: paginationForm.handleSubmit,
|
|
@@ -142,10 +146,9 @@ var PageNavigator = function PageNavigator(props) {
|
|
|
142
146
|
min: 1,
|
|
143
147
|
max: totalPages,
|
|
144
148
|
onBlur: paginationForm.handleBlur,
|
|
145
|
-
onFocus: paginationForm.handleFocus,
|
|
146
149
|
onChange: paginationForm.handleChange,
|
|
147
150
|
isDisabled: isDisabled,
|
|
148
|
-
hasWarning: paginationForm.errors.page,
|
|
151
|
+
hasWarning: Boolean(paginationForm.errors.page),
|
|
149
152
|
horizontalConstraint: 2
|
|
150
153
|
})
|
|
151
154
|
}), jsx(Text.Body, {
|
|
@@ -164,12 +167,12 @@ var PageNavigator = function PageNavigator(props) {
|
|
|
164
167
|
});
|
|
165
168
|
};
|
|
166
169
|
|
|
167
|
-
PageNavigator.displayName = 'PageNavigator';
|
|
168
170
|
PageNavigator.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
169
|
-
totalPages:
|
|
170
|
-
page:
|
|
171
|
-
onPageChange:
|
|
171
|
+
totalPages: _pt.number.isRequired,
|
|
172
|
+
page: _pt.number.isRequired,
|
|
173
|
+
onPageChange: _pt.func.isRequired
|
|
172
174
|
} : {};
|
|
175
|
+
PageNavigator.displayName = 'PageNavigator';
|
|
173
176
|
var PageNavigator$1 = PageNavigator;
|
|
174
177
|
|
|
175
178
|
var messages = defineMessages({
|
|
@@ -244,17 +247,18 @@ var PageSizeSelector = function PageSizeSelector(props) {
|
|
|
244
247
|
});
|
|
245
248
|
};
|
|
246
249
|
|
|
247
|
-
PageSizeSelector.displayName = 'PageSizeSelector';
|
|
248
250
|
PageSizeSelector.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
249
|
-
perPage:
|
|
250
|
-
perPageRange:
|
|
251
|
-
onPerPageChange:
|
|
252
|
-
pageItems:
|
|
251
|
+
perPage: _pt.number.isRequired,
|
|
252
|
+
perPageRange: _pt.oneOf(['s', 'm', 'l']).isRequired,
|
|
253
|
+
onPerPageChange: _pt.func.isRequired,
|
|
254
|
+
pageItems: _pt.number.isRequired
|
|
253
255
|
} : {};
|
|
254
|
-
PageSizeSelector.
|
|
256
|
+
PageSizeSelector.displayName = 'PageSizeSelector';
|
|
257
|
+
var defaultProps$1 = {
|
|
255
258
|
perPage: 20,
|
|
256
259
|
perPageRange: 's'
|
|
257
260
|
};
|
|
261
|
+
PageSizeSelector.defaultProps = defaultProps$1;
|
|
258
262
|
var PageSizeSelector$1 = PageSizeSelector;
|
|
259
263
|
|
|
260
264
|
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
|
|
@@ -265,7 +269,7 @@ var _ref = process.env.NODE_ENV === "production" ? {
|
|
|
265
269
|
} : {
|
|
266
270
|
name: "mvvfm1-Pagination",
|
|
267
271
|
styles: "flex-grow:2;label:Pagination;",
|
|
268
|
-
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
272
|
+
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInBhZ2luYXRpb24udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXNEZ0IiLCJmaWxlIjoicGFnaW5hdGlvbi50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgU3BhY2luZ3MgZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvc3BhY2luZ3MnO1xuaW1wb3J0IFBhZ2VOYXZpZ2F0b3IgZnJvbSAnLi9wYWdlLW5hdmlnYXRvcic7XG5pbXBvcnQgUGFnZVNpemVTZWxlY3RvciwgeyB0eXBlIFRQYWdlUmFuZ2VTaXplIH0gZnJvbSAnLi9wYWdlLXNpemUtc2VsZWN0b3InO1xuXG50eXBlIFRQYWdpbmF0aW9uUHJvcHMgPSB7XG4gIC8qKlxuICAgKiBUb3RhbCBudW1iZXIgb2YgaXRlbXMgYWNyb3NzIGFsbCBwYWdlc1xuICAgKi9cbiAgdG90YWxJdGVtczogbnVtYmVyO1xuXG4gIC8qKlxuICAgKiBUaGUgY3VycmVudCBwYWdlXG4gICAqL1xuICBwYWdlOiBudW1iZXI7XG5cbiAgLyoqXG4gICAqIEEgY2FsbGJhY2sgZnVuY3Rpb24sIGNhbGxlZCB3aGVuIHRoZSBwYWdlIGlzIGNoYW5nZWQuXG4gICAqL1xuICBvblBhZ2VDaGFuZ2U6IChuZXdQYWdlOiBudW1iZXIpID0+IHZvaWQ7XG5cbiAgLyoqXG4gICAqIE51bWJlciBvZiBpdGVtcyBwZXIgcGFnZSwgYWNjb3JkaW5nIHRvIHRoZSBwcmUtZGVmaW5lZCByYW5nZSB2YWx1ZXMuXG4gICAqL1xuICBwZXJQYWdlOiBudW1iZXI7XG5cbiAgLyoqXG4gICAqIFJhbmdlIG9mIGl0ZW1zIHBlciBwYWdlLlxuICAgKiA8YnIvPlxuICAgKiBgczogMjAsNTBgXG4gICAqIDxici8+XG4gICAqIGBtOiAyMCw1MCwxMDBgXG4gICAqIDxici8+XG4gICAqIGBsOiAyMDAsNTAwYFxuICAgKi9cbiAgcGVyUGFnZVJhbmdlOiBUUGFnZVJhbmdlU2l6ZTtcblxuICAvKipcbiAgICogQSBjYWxsYmFjayBmdW5jdGlvbiwgY2FsbGVkIHdoZW4gYHBlclBhZ2VgIGlzIGNoYW5nZWQuXG4gICAqL1xuICBvblBlclBhZ2VDaGFuZ2U6IChuZXdQZXJQYWdlOiBudW1iZXIpID0+IHZvaWQ7XG59O1xuXG5jb25zdCBQYWdpbmF0aW9uID0gKHByb3BzOiBUUGFnaW5hdGlvblByb3BzKSA9PiB7XG4gIGNvbnN0IHRvdGFsUGFnZXMgPSBNYXRoLmNlaWwocHJvcHMudG90YWxJdGVtcyAvIHByb3BzLnBlclBhZ2UpO1xuXG4gIGNvbnN0IHBhZ2VJdGVtcyA9XG4gICAgcHJvcHMucGFnZSA9PT0gdG90YWxQYWdlc1xuICAgICAgPyBwcm9wcy50b3RhbEl0ZW1zIC0gcHJvcHMucGVyUGFnZSAqIChwcm9wcy5wYWdlIC0gMSlcbiAgICAgIDogcHJvcHMucGVyUGFnZTtcblxuICByZXR1cm4gKFxuICAgIDxTcGFjaW5ncy5JbmxpbmUganVzdGlmeUNvbnRlbnQ9XCJzcGFjZS1iZXR3ZWVuXCI+XG4gICAgICA8ZGl2XG4gICAgICAgIGNzcz17Y3NzYFxuICAgICAgICAgIGZsZXgtZ3JvdzogMjtcbiAgICAgICAgYH1cbiAgICAgID5cbiAgICAgICAgPFBhZ2VTaXplU2VsZWN0b3JcbiAgICAgICAgICBwYWdlSXRlbXM9e3BhZ2VJdGVtc31cbiAgICAgICAgICBwZXJQYWdlPXtwcm9wcy5wZXJQYWdlfVxuICAgICAgICAgIHBlclBhZ2VSYW5nZT17cHJvcHMucGVyUGFnZVJhbmdlfVxuICAgICAgICAgIG9uUGVyUGFnZUNoYW5nZT17cHJvcHMub25QZXJQYWdlQ2hhbmdlfVxuICAgICAgICAvPlxuICAgICAgPC9kaXY+XG4gICAgICA8UGFnZU5hdmlnYXRvclxuICAgICAgICB0b3RhbFBhZ2VzPXt0b3RhbFBhZ2VzfVxuICAgICAgICBwYWdlPXtwcm9wcy5wYWdlfVxuICAgICAgICBvblBhZ2VDaGFuZ2U9e3Byb3BzLm9uUGFnZUNoYW5nZX1cbiAgICAgIC8+XG4gICAgPC9TcGFjaW5ncy5JbmxpbmU+XG4gICk7XG59O1xuXG5QYWdpbmF0aW9uLmRpc3BsYXlOYW1lID0gJ1BhZ2luYXRpb24nO1xuXG5jb25zdCBkZWZhdWx0UHJvcHM6IFBpY2s8VFBhZ2luYXRpb25Qcm9wcywgJ3BlclBhZ2UnIHwgJ3BlclBhZ2VSYW5nZSc+ID0ge1xuICBwZXJQYWdlOiAyMCxcbiAgcGVyUGFnZVJhbmdlOiAncycsXG59O1xuUGFnaW5hdGlvbi5kZWZhdWx0UHJvcHMgPSBkZWZhdWx0UHJvcHM7XG5cbmV4cG9ydCB0eXBlIHsgVFBhZ2VSYW5nZVNpemUgfTtcblxuZXhwb3J0IGRlZmF1bHQgUGFnaW5hdGlvbjtcbiJdfQ== */",
|
|
269
273
|
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
|
|
270
274
|
};
|
|
271
275
|
|
|
@@ -291,56 +295,14 @@ var Pagination = function Pagination(props) {
|
|
|
291
295
|
};
|
|
292
296
|
|
|
293
297
|
Pagination.displayName = 'Pagination';
|
|
294
|
-
|
|
295
|
-
/**
|
|
296
|
-
* Total number of items across all pages
|
|
297
|
-
*/
|
|
298
|
-
totalItems: PropTypes.number.isRequired,
|
|
299
|
-
|
|
300
|
-
/**
|
|
301
|
-
* The current page
|
|
302
|
-
*/
|
|
303
|
-
page: PropTypes.number.isRequired,
|
|
304
|
-
|
|
305
|
-
/**
|
|
306
|
-
* A callback function, called when the page is changed.
|
|
307
|
-
* <br/>
|
|
308
|
-
* Signature: `(page: number) => void`
|
|
309
|
-
* <br/>
|
|
310
|
-
* Signature: `(page: number) => void`
|
|
311
|
-
*/
|
|
312
|
-
onPageChange: PropTypes.func.isRequired,
|
|
313
|
-
|
|
314
|
-
/**
|
|
315
|
-
* Number of items per page, according to the pre-defined range values.
|
|
316
|
-
*/
|
|
317
|
-
perPage: PropTypes.number,
|
|
318
|
-
|
|
319
|
-
/**
|
|
320
|
-
* Range of items per page.
|
|
321
|
-
* <br/>
|
|
322
|
-
* `s: 20,50`
|
|
323
|
-
* <br/>
|
|
324
|
-
* `m: 20,50,100`
|
|
325
|
-
* <br/>
|
|
326
|
-
* `l: 200,500`
|
|
327
|
-
*/
|
|
328
|
-
perPageRange: PropTypes.oneOf(['s', 'm', 'l']),
|
|
329
|
-
|
|
330
|
-
/**
|
|
331
|
-
* A callback function, called when `perPage` is changed.
|
|
332
|
-
* <br/>
|
|
333
|
-
* Signature: `(nextPerPage: number) => void`
|
|
334
|
-
*/
|
|
335
|
-
onPerPageChange: PropTypes.func.isRequired
|
|
336
|
-
} : {};
|
|
337
|
-
Pagination.defaultProps = {
|
|
298
|
+
var defaultProps = {
|
|
338
299
|
perPage: 20,
|
|
339
300
|
perPageRange: 's'
|
|
340
301
|
};
|
|
302
|
+
Pagination.defaultProps = defaultProps;
|
|
341
303
|
var Pagination$1 = Pagination;
|
|
342
304
|
|
|
343
305
|
// NOTE: This string will be replaced on build time with the package version.
|
|
344
|
-
var version = "13.0.
|
|
306
|
+
var version = "13.0.2";
|
|
345
307
|
|
|
346
308
|
export { PageNavigator$1 as PageNavigator, PageSizeSelector$1 as PageSizeSelector, Pagination$1 as Pagination, version };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from './page-navigator';
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
declare const _default: {
|
|
2
|
+
page: {
|
|
3
|
+
id: string;
|
|
4
|
+
description: string;
|
|
5
|
+
defaultMessage: string;
|
|
6
|
+
};
|
|
7
|
+
pageCount: {
|
|
8
|
+
id: string;
|
|
9
|
+
description: string;
|
|
10
|
+
defaultMessage: string;
|
|
11
|
+
};
|
|
12
|
+
previousPageLabel: {
|
|
13
|
+
id: string;
|
|
14
|
+
description: string;
|
|
15
|
+
defaultMessage: string;
|
|
16
|
+
};
|
|
17
|
+
nextPageLabel: {
|
|
18
|
+
id: string;
|
|
19
|
+
description: string;
|
|
20
|
+
defaultMessage: string;
|
|
21
|
+
};
|
|
22
|
+
};
|
|
23
|
+
export default _default;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
declare type TPageNavigatorProps = {
|
|
2
|
+
totalPages: number;
|
|
3
|
+
page: number;
|
|
4
|
+
onPageChange: (newPerPage: number) => void;
|
|
5
|
+
};
|
|
6
|
+
declare const PageNavigator: {
|
|
7
|
+
(props: TPageNavigatorProps): import("@emotion/react/jsx-runtime").JSX.Element;
|
|
8
|
+
displayName: string;
|
|
9
|
+
};
|
|
10
|
+
export default PageNavigator;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default, type TPageRangeSize } from './page-size-selector';
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
export declare type TPageRangeSize = 's' | 'm' | 'l';
|
|
2
|
+
declare type TPageSizeSelectorProps = {
|
|
3
|
+
perPage: number;
|
|
4
|
+
perPageRange: TPageRangeSize;
|
|
5
|
+
onPerPageChange: (value: number) => void;
|
|
6
|
+
pageItems: number;
|
|
7
|
+
};
|
|
8
|
+
declare const PageSizeSelector: {
|
|
9
|
+
(props: TPageSizeSelectorProps): import("@emotion/react/jsx-runtime").JSX.Element;
|
|
10
|
+
displayName: string;
|
|
11
|
+
defaultProps: Pick<TPageSizeSelectorProps, "perPage" | "perPageRange">;
|
|
12
|
+
};
|
|
13
|
+
export default PageSizeSelector;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { type TPageRangeSize } from './page-size-selector';
|
|
2
|
+
declare type TPaginationProps = {
|
|
3
|
+
totalItems: number;
|
|
4
|
+
page: number;
|
|
5
|
+
onPageChange: (newPage: number) => void;
|
|
6
|
+
perPage: number;
|
|
7
|
+
perPageRange: TPageRangeSize;
|
|
8
|
+
onPerPageChange: (newPerPage: number) => void;
|
|
9
|
+
};
|
|
10
|
+
declare const Pagination: {
|
|
11
|
+
(props: TPaginationProps): import("@emotion/react/jsx-runtime").JSX.Element;
|
|
12
|
+
displayName: string;
|
|
13
|
+
defaultProps: Pick<TPaginationProps, "perPage" | "perPageRange">;
|
|
14
|
+
};
|
|
15
|
+
export type { TPageRangeSize };
|
|
16
|
+
export default Pagination;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@commercetools-uikit/pagination",
|
|
3
3
|
"description": "Components for navigating through pages of items",
|
|
4
|
-
"version": "13.0.
|
|
4
|
+
"version": "13.0.2",
|
|
5
5
|
"bugs": "https://github.com/commercetools/ui-kit/issues",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -21,16 +21,16 @@
|
|
|
21
21
|
"dependencies": {
|
|
22
22
|
"@babel/runtime": "7.17.2",
|
|
23
23
|
"@babel/runtime-corejs3": "7.17.2",
|
|
24
|
-
"@commercetools-uikit/constraints": "13.0.
|
|
24
|
+
"@commercetools-uikit/constraints": "13.0.2",
|
|
25
25
|
"@commercetools-uikit/design-system": "13.0.0",
|
|
26
|
-
"@commercetools-uikit/icons": "13.0.
|
|
27
|
-
"@commercetools-uikit/label": "13.0.
|
|
28
|
-
"@commercetools-uikit/number-input": "13.0.
|
|
29
|
-
"@commercetools-uikit/secondary-icon-button": "13.0.
|
|
30
|
-
"@commercetools-uikit/select-input": "13.0.
|
|
31
|
-
"@commercetools-uikit/spacings": "13.0.
|
|
32
|
-
"@commercetools-uikit/text": "13.0.
|
|
33
|
-
"@commercetools-uikit/utils": "
|
|
26
|
+
"@commercetools-uikit/icons": "13.0.2",
|
|
27
|
+
"@commercetools-uikit/label": "13.0.2",
|
|
28
|
+
"@commercetools-uikit/number-input": "13.0.2",
|
|
29
|
+
"@commercetools-uikit/secondary-icon-button": "13.0.2",
|
|
30
|
+
"@commercetools-uikit/select-input": "13.0.2",
|
|
31
|
+
"@commercetools-uikit/spacings": "13.0.2",
|
|
32
|
+
"@commercetools-uikit/text": "13.0.2",
|
|
33
|
+
"@commercetools-uikit/utils": "13.0.2",
|
|
34
34
|
"@emotion/react": "^11.4.0",
|
|
35
35
|
"@emotion/styled": "^11.3.0",
|
|
36
36
|
"formik": "^2.2.9",
|