@commercetools-uikit/pagination 16.0.0 → 16.1.0
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.
|
@@ -67,11 +67,9 @@ const normalizePageValue = (value, totalPages) => {
|
|
|
67
67
|
if (value < 1) {
|
|
68
68
|
return 1;
|
|
69
69
|
}
|
|
70
|
-
|
|
71
70
|
if (value > totalPages) {
|
|
72
71
|
return totalPages;
|
|
73
72
|
}
|
|
74
|
-
|
|
75
73
|
return value;
|
|
76
74
|
};
|
|
77
75
|
|
|
@@ -99,19 +97,14 @@ var messages$2 = reactIntl.defineMessages({
|
|
|
99
97
|
});
|
|
100
98
|
|
|
101
99
|
function ownKeys$1(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
102
|
-
|
|
103
100
|
function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$1(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$1(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
|
|
104
|
-
|
|
105
101
|
const PageNavigator = props => {
|
|
106
102
|
const intl = reactIntl.useIntl();
|
|
107
|
-
|
|
108
103
|
const _useTheme = designSystem.useTheme(),
|
|
109
|
-
|
|
110
|
-
|
|
104
|
+
themedValue = _useTheme.themedValue;
|
|
111
105
|
const _useState = react.useState(uniqueId__default["default"]('page-number-')),
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
106
|
+
_useState2 = _slicedToArray(_useState, 1),
|
|
107
|
+
pageNumberInputId = _useState2[0];
|
|
115
108
|
const TotalPagesCountComponent = themedValue(Text__default["default"].Body, Label__default["default"]);
|
|
116
109
|
const paginationForm = formik.useFormik({
|
|
117
110
|
initialValues: {
|
|
@@ -121,9 +114,7 @@ const PageNavigator = props => {
|
|
|
121
114
|
validateOnBlur: true,
|
|
122
115
|
validateOnChange: true,
|
|
123
116
|
validateOnMount: true,
|
|
124
|
-
onSubmit: (values
|
|
125
|
-
/**, helpers */
|
|
126
|
-
) => {
|
|
117
|
+
onSubmit: (values /**, helpers */) => {
|
|
127
118
|
const nextNormalizedValue = Number(normalizePageValue(values.page, props.totalPages));
|
|
128
119
|
props.onPageChange(nextNormalizedValue);
|
|
129
120
|
},
|
|
@@ -133,18 +124,16 @@ const PageNavigator = props => {
|
|
|
133
124
|
page: true
|
|
134
125
|
};
|
|
135
126
|
}
|
|
136
|
-
|
|
137
127
|
return {};
|
|
138
128
|
}
|
|
139
129
|
});
|
|
140
130
|
const page = props.page,
|
|
141
|
-
|
|
131
|
+
totalPages = props.totalPages;
|
|
142
132
|
const isDisabled = totalPages === 0;
|
|
143
133
|
const isPreviousDisabled = page <= 1;
|
|
144
134
|
const isNextDisabled = page >= totalPages;
|
|
145
135
|
const handlePrevPageChange = react.useCallback(() => {
|
|
146
136
|
const previousPage = _valuesInstanceProperty__default["default"](paginationForm).page - 1;
|
|
147
|
-
|
|
148
137
|
if (previousPage >= 1) {
|
|
149
138
|
paginationForm.setFieldValue('page', previousPage, true);
|
|
150
139
|
paginationForm.submitForm();
|
|
@@ -152,7 +141,6 @@ const PageNavigator = props => {
|
|
|
152
141
|
}, [paginationForm]);
|
|
153
142
|
const handleNextPageChange = react.useCallback(() => {
|
|
154
143
|
const nextPage = _valuesInstanceProperty__default["default"](paginationForm).page + 1;
|
|
155
|
-
|
|
156
144
|
if (nextPage <= totalPages) {
|
|
157
145
|
paginationForm.setFieldValue('page', nextPage, true);
|
|
158
146
|
paginationForm.submitForm();
|
|
@@ -199,7 +187,6 @@ const PageNavigator = props => {
|
|
|
199
187
|
})
|
|
200
188
|
});
|
|
201
189
|
};
|
|
202
|
-
|
|
203
190
|
PageNavigator.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
204
191
|
totalPages: _pt__default["default"].number.isRequired,
|
|
205
192
|
page: _pt__default["default"].number.isRequired,
|
|
@@ -218,39 +205,28 @@ const messages = reactIntl.defineMessages({
|
|
|
218
205
|
var messages$1 = messages;
|
|
219
206
|
|
|
220
207
|
function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
221
|
-
|
|
222
208
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
|
|
223
|
-
|
|
224
209
|
const mapRangeToListOfOptions = perPageRange => {
|
|
225
210
|
switch (perPageRange) {
|
|
226
211
|
case 's':
|
|
227
212
|
return [20, 50];
|
|
228
|
-
|
|
229
213
|
case 'm':
|
|
230
214
|
return [20, 50, 100];
|
|
231
|
-
|
|
232
215
|
case 'l':
|
|
233
216
|
return [200, 500];
|
|
234
|
-
|
|
235
217
|
default:
|
|
236
218
|
throw new Error("Invalid page range \"".concat(perPageRange, "\", expected one of \"s,m,l\"."));
|
|
237
219
|
}
|
|
238
220
|
};
|
|
239
|
-
|
|
240
221
|
const PageSizeSelector = props => {
|
|
241
222
|
var _context;
|
|
242
|
-
|
|
243
223
|
const _useTheme = designSystem.useTheme(),
|
|
244
|
-
|
|
245
|
-
|
|
224
|
+
themedValue = _useTheme.themedValue;
|
|
246
225
|
const _useState = react.useState(uniqueId__default["default"]('per-page-selector-')),
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
226
|
+
_useState2 = _slicedToArray(_useState, 1),
|
|
227
|
+
perPageSelectorId = _useState2[0];
|
|
250
228
|
const options = mapRangeToListOfOptions(props.perPageRange);
|
|
251
|
-
|
|
252
229
|
const hasValidPerPageOption = _includesInstanceProperty__default["default"](options).call(options, props.perPage);
|
|
253
|
-
|
|
254
230
|
process.env.NODE_ENV !== "production" ? utils.warning(hasValidPerPageOption, _concatInstanceProperty__default["default"](_context = "@commercetools-uikit/pagination: invalid page size ".concat(props.perPage, ". It must be one of the values of the selected range in \"")).call(_context, options.toString(), "\".")) : void 0;
|
|
255
231
|
const onPerPageChange = props.onPerPageChange;
|
|
256
232
|
const handleSelectPerPage = react.useCallback(event => {
|
|
@@ -280,7 +256,6 @@ const PageSizeSelector = props => {
|
|
|
280
256
|
})]
|
|
281
257
|
});
|
|
282
258
|
};
|
|
283
|
-
|
|
284
259
|
PageSizeSelector.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
285
260
|
perPage: _pt__default["default"].number.isRequired,
|
|
286
261
|
perPageRange: _pt__default["default"].oneOf(['s', 'm', 'l']).isRequired,
|
|
@@ -296,7 +271,6 @@ PageSizeSelector.defaultProps = defaultProps$1;
|
|
|
296
271
|
var PageSizeSelector$1 = PageSizeSelector;
|
|
297
272
|
|
|
298
273
|
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)."; }
|
|
299
|
-
|
|
300
274
|
var _ref = process.env.NODE_ENV === "production" ? {
|
|
301
275
|
name: "15sp3y3",
|
|
302
276
|
styles: "flex-grow:2"
|
|
@@ -306,7 +280,6 @@ var _ref = process.env.NODE_ENV === "production" ? {
|
|
|
306
280
|
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInBhZ2luYXRpb24udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXNEZ0IiLCJmaWxlIjoicGFnaW5hdGlvbi50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgU3BhY2luZ3MgZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvc3BhY2luZ3MnO1xuaW1wb3J0IFBhZ2VOYXZpZ2F0b3IgZnJvbSAnLi9wYWdlLW5hdmlnYXRvcic7XG5pbXBvcnQgUGFnZVNpemVTZWxlY3RvciwgeyB0eXBlIFRQYWdlUmFuZ2VTaXplIH0gZnJvbSAnLi9wYWdlLXNpemUtc2VsZWN0b3InO1xuXG5leHBvcnQgdHlwZSBUUGFnaW5hdGlvblByb3BzID0ge1xuICAvKipcbiAgICogVG90YWwgbnVtYmVyIG9mIGl0ZW1zIGFjcm9zcyBhbGwgcGFnZXNcbiAgICovXG4gIHRvdGFsSXRlbXM6IG51bWJlcjtcblxuICAvKipcbiAgICogVGhlIGN1cnJlbnQgcGFnZVxuICAgKi9cbiAgcGFnZTogbnVtYmVyO1xuXG4gIC8qKlxuICAgKiBBIGNhbGxiYWNrIGZ1bmN0aW9uLCBjYWxsZWQgd2hlbiB0aGUgcGFnZSBpcyBjaGFuZ2VkLlxuICAgKi9cbiAgb25QYWdlQ2hhbmdlOiAobmV3UGFnZTogbnVtYmVyKSA9PiB2b2lkO1xuXG4gIC8qKlxuICAgKiBOdW1iZXIgb2YgaXRlbXMgcGVyIHBhZ2UsIGFjY29yZGluZyB0byB0aGUgcHJlLWRlZmluZWQgcmFuZ2UgdmFsdWVzLlxuICAgKi9cbiAgcGVyUGFnZTogbnVtYmVyO1xuXG4gIC8qKlxuICAgKiBSYW5nZSBvZiBpdGVtcyBwZXIgcGFnZS5cbiAgICogPGJyLz5cbiAgICogYHM6IDIwLDUwYFxuICAgKiA8YnIvPlxuICAgKiBgbTogMjAsNTAsMTAwYFxuICAgKiA8YnIvPlxuICAgKiBgbDogMjAwLDUwMGBcbiAgICovXG4gIHBlclBhZ2VSYW5nZTogVFBhZ2VSYW5nZVNpemU7XG5cbiAgLyoqXG4gICAqIEEgY2FsbGJhY2sgZnVuY3Rpb24sIGNhbGxlZCB3aGVuIGBwZXJQYWdlYCBpcyBjaGFuZ2VkLlxuICAgKi9cbiAgb25QZXJQYWdlQ2hhbmdlOiAobmV3UGVyUGFnZTogbnVtYmVyKSA9PiB2b2lkO1xufTtcblxuY29uc3QgUGFnaW5hdGlvbiA9IChwcm9wczogVFBhZ2luYXRpb25Qcm9wcykgPT4ge1xuICBjb25zdCB0b3RhbFBhZ2VzID0gTWF0aC5jZWlsKHByb3BzLnRvdGFsSXRlbXMgLyBwcm9wcy5wZXJQYWdlKTtcblxuICBjb25zdCBwYWdlSXRlbXMgPVxuICAgIHByb3BzLnBhZ2UgPT09IHRvdGFsUGFnZXNcbiAgICAgID8gcHJvcHMudG90YWxJdGVtcyAtIHByb3BzLnBlclBhZ2UgKiAocHJvcHMucGFnZSAtIDEpXG4gICAgICA6IHByb3BzLnBlclBhZ2U7XG5cbiAgcmV0dXJuIChcbiAgICA8U3BhY2luZ3MuSW5saW5lIGp1c3RpZnlDb250ZW50PVwic3BhY2UtYmV0d2VlblwiPlxuICAgICAgPGRpdlxuICAgICAgICBjc3M9e2Nzc2BcbiAgICAgICAgICBmbGV4LWdyb3c6IDI7XG4gICAgICAgIGB9XG4gICAgICA+XG4gICAgICAgIDxQYWdlU2l6ZVNlbGVjdG9yXG4gICAgICAgICAgcGFnZUl0ZW1zPXtwYWdlSXRlbXN9XG4gICAgICAgICAgcGVyUGFnZT17cHJvcHMucGVyUGFnZX1cbiAgICAgICAgICBwZXJQYWdlUmFuZ2U9e3Byb3BzLnBlclBhZ2VSYW5nZX1cbiAgICAgICAgICBvblBlclBhZ2VDaGFuZ2U9e3Byb3BzLm9uUGVyUGFnZUNoYW5nZX1cbiAgICAgICAgLz5cbiAgICAgIDwvZGl2PlxuICAgICAgPFBhZ2VOYXZpZ2F0b3JcbiAgICAgICAgdG90YWxQYWdlcz17dG90YWxQYWdlc31cbiAgICAgICAgcGFnZT17cHJvcHMucGFnZX1cbiAgICAgICAgb25QYWdlQ2hhbmdlPXtwcm9wcy5vblBhZ2VDaGFuZ2V9XG4gICAgICAvPlxuICAgIDwvU3BhY2luZ3MuSW5saW5lPlxuICApO1xufTtcblxuUGFnaW5hdGlvbi5kaXNwbGF5TmFtZSA9ICdQYWdpbmF0aW9uJztcblxuY29uc3QgZGVmYXVsdFByb3BzOiBQaWNrPFRQYWdpbmF0aW9uUHJvcHMsICdwZXJQYWdlJyB8ICdwZXJQYWdlUmFuZ2UnPiA9IHtcbiAgcGVyUGFnZTogMjAsXG4gIHBlclBhZ2VSYW5nZTogJ3MnLFxufTtcblBhZ2luYXRpb24uZGVmYXVsdFByb3BzID0gZGVmYXVsdFByb3BzO1xuXG5leHBvcnQgdHlwZSB7IFRQYWdlUmFuZ2VTaXplIH07XG5cbmV4cG9ydCBkZWZhdWx0IFBhZ2luYXRpb247XG4iXX0= */",
|
|
307
281
|
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
|
|
308
282
|
};
|
|
309
|
-
|
|
310
283
|
const Pagination = props => {
|
|
311
284
|
const totalPages = Math.ceil(props.totalItems / props.perPage);
|
|
312
285
|
const pageItems = props.page === totalPages ? props.totalItems - props.perPage * (props.page - 1) : props.perPage;
|
|
@@ -327,7 +300,6 @@ const Pagination = props => {
|
|
|
327
300
|
})]
|
|
328
301
|
});
|
|
329
302
|
};
|
|
330
|
-
|
|
331
303
|
Pagination.displayName = 'Pagination';
|
|
332
304
|
const defaultProps = {
|
|
333
305
|
perPage: 20,
|
|
@@ -337,7 +309,7 @@ Pagination.defaultProps = defaultProps;
|
|
|
337
309
|
var Pagination$1 = Pagination;
|
|
338
310
|
|
|
339
311
|
// NOTE: This string will be replaced on build time with the package version.
|
|
340
|
-
var version = "16.
|
|
312
|
+
var version = "16.1.0";
|
|
341
313
|
|
|
342
314
|
exports.PageNavigator = PageNavigator$1;
|
|
343
315
|
exports.PageSizeSelector = PageSizeSelector$1;
|
|
@@ -65,11 +65,9 @@ const normalizePageValue = (value, totalPages) => {
|
|
|
65
65
|
if (value < 1) {
|
|
66
66
|
return 1;
|
|
67
67
|
}
|
|
68
|
-
|
|
69
68
|
if (value > totalPages) {
|
|
70
69
|
return totalPages;
|
|
71
70
|
}
|
|
72
|
-
|
|
73
71
|
return value;
|
|
74
72
|
};
|
|
75
73
|
|
|
@@ -97,19 +95,14 @@ var messages$2 = reactIntl.defineMessages({
|
|
|
97
95
|
});
|
|
98
96
|
|
|
99
97
|
function ownKeys$1(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
100
|
-
|
|
101
98
|
function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$1(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$1(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
|
|
102
|
-
|
|
103
99
|
const PageNavigator = props => {
|
|
104
100
|
const intl = reactIntl.useIntl();
|
|
105
|
-
|
|
106
101
|
const _useTheme = designSystem.useTheme(),
|
|
107
|
-
|
|
108
|
-
|
|
102
|
+
themedValue = _useTheme.themedValue;
|
|
109
103
|
const _useState = react.useState(uniqueId__default["default"]('page-number-')),
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
104
|
+
_useState2 = _slicedToArray(_useState, 1),
|
|
105
|
+
pageNumberInputId = _useState2[0];
|
|
113
106
|
const TotalPagesCountComponent = themedValue(Text__default["default"].Body, Label__default["default"]);
|
|
114
107
|
const paginationForm = formik.useFormik({
|
|
115
108
|
initialValues: {
|
|
@@ -119,9 +112,7 @@ const PageNavigator = props => {
|
|
|
119
112
|
validateOnBlur: true,
|
|
120
113
|
validateOnChange: true,
|
|
121
114
|
validateOnMount: true,
|
|
122
|
-
onSubmit: (values
|
|
123
|
-
/**, helpers */
|
|
124
|
-
) => {
|
|
115
|
+
onSubmit: (values /**, helpers */) => {
|
|
125
116
|
const nextNormalizedValue = Number(normalizePageValue(values.page, props.totalPages));
|
|
126
117
|
props.onPageChange(nextNormalizedValue);
|
|
127
118
|
},
|
|
@@ -131,18 +122,16 @@ const PageNavigator = props => {
|
|
|
131
122
|
page: true
|
|
132
123
|
};
|
|
133
124
|
}
|
|
134
|
-
|
|
135
125
|
return {};
|
|
136
126
|
}
|
|
137
127
|
});
|
|
138
128
|
const page = props.page,
|
|
139
|
-
|
|
129
|
+
totalPages = props.totalPages;
|
|
140
130
|
const isDisabled = totalPages === 0;
|
|
141
131
|
const isPreviousDisabled = page <= 1;
|
|
142
132
|
const isNextDisabled = page >= totalPages;
|
|
143
133
|
const handlePrevPageChange = react.useCallback(() => {
|
|
144
134
|
const previousPage = _valuesInstanceProperty__default["default"](paginationForm).page - 1;
|
|
145
|
-
|
|
146
135
|
if (previousPage >= 1) {
|
|
147
136
|
paginationForm.setFieldValue('page', previousPage, true);
|
|
148
137
|
paginationForm.submitForm();
|
|
@@ -150,7 +139,6 @@ const PageNavigator = props => {
|
|
|
150
139
|
}, [paginationForm]);
|
|
151
140
|
const handleNextPageChange = react.useCallback(() => {
|
|
152
141
|
const nextPage = _valuesInstanceProperty__default["default"](paginationForm).page + 1;
|
|
153
|
-
|
|
154
142
|
if (nextPage <= totalPages) {
|
|
155
143
|
paginationForm.setFieldValue('page', nextPage, true);
|
|
156
144
|
paginationForm.submitForm();
|
|
@@ -197,7 +185,6 @@ const PageNavigator = props => {
|
|
|
197
185
|
})
|
|
198
186
|
});
|
|
199
187
|
};
|
|
200
|
-
|
|
201
188
|
PageNavigator.propTypes = {};
|
|
202
189
|
PageNavigator.displayName = 'PageNavigator';
|
|
203
190
|
var PageNavigator$1 = PageNavigator;
|
|
@@ -212,36 +199,26 @@ const messages = reactIntl.defineMessages({
|
|
|
212
199
|
var messages$1 = messages;
|
|
213
200
|
|
|
214
201
|
function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
215
|
-
|
|
216
202
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
|
|
217
|
-
|
|
218
203
|
const mapRangeToListOfOptions = perPageRange => {
|
|
219
204
|
switch (perPageRange) {
|
|
220
205
|
case 's':
|
|
221
206
|
return [20, 50];
|
|
222
|
-
|
|
223
207
|
case 'm':
|
|
224
208
|
return [20, 50, 100];
|
|
225
|
-
|
|
226
209
|
case 'l':
|
|
227
210
|
return [200, 500];
|
|
228
|
-
|
|
229
211
|
default:
|
|
230
212
|
throw new Error("Invalid page range \"".concat(perPageRange, "\", expected one of \"s,m,l\"."));
|
|
231
213
|
}
|
|
232
214
|
};
|
|
233
|
-
|
|
234
215
|
const PageSizeSelector = props => {
|
|
235
|
-
|
|
236
216
|
const _useTheme = designSystem.useTheme(),
|
|
237
|
-
|
|
238
|
-
|
|
217
|
+
themedValue = _useTheme.themedValue;
|
|
239
218
|
const _useState = react.useState(uniqueId__default["default"]('per-page-selector-')),
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
219
|
+
_useState2 = _slicedToArray(_useState, 1),
|
|
220
|
+
perPageSelectorId = _useState2[0];
|
|
243
221
|
const options = mapRangeToListOfOptions(props.perPageRange);
|
|
244
|
-
|
|
245
222
|
_includesInstanceProperty__default["default"](options).call(options, props.perPage);
|
|
246
223
|
const onPerPageChange = props.onPerPageChange;
|
|
247
224
|
const handleSelectPerPage = react.useCallback(event => {
|
|
@@ -271,7 +248,6 @@ const PageSizeSelector = props => {
|
|
|
271
248
|
})]
|
|
272
249
|
});
|
|
273
250
|
};
|
|
274
|
-
|
|
275
251
|
PageSizeSelector.propTypes = {};
|
|
276
252
|
PageSizeSelector.displayName = 'PageSizeSelector';
|
|
277
253
|
const defaultProps$1 = {
|
|
@@ -285,7 +261,6 @@ var _ref = {
|
|
|
285
261
|
name: "15sp3y3",
|
|
286
262
|
styles: "flex-grow:2"
|
|
287
263
|
} ;
|
|
288
|
-
|
|
289
264
|
const Pagination = props => {
|
|
290
265
|
const totalPages = Math.ceil(props.totalItems / props.perPage);
|
|
291
266
|
const pageItems = props.page === totalPages ? props.totalItems - props.perPage * (props.page - 1) : props.perPage;
|
|
@@ -306,7 +281,6 @@ const Pagination = props => {
|
|
|
306
281
|
})]
|
|
307
282
|
});
|
|
308
283
|
};
|
|
309
|
-
|
|
310
284
|
Pagination.displayName = 'Pagination';
|
|
311
285
|
const defaultProps = {
|
|
312
286
|
perPage: 20,
|
|
@@ -316,7 +290,7 @@ Pagination.defaultProps = defaultProps;
|
|
|
316
290
|
var Pagination$1 = Pagination;
|
|
317
291
|
|
|
318
292
|
// NOTE: This string will be replaced on build time with the package version.
|
|
319
|
-
var version = "16.
|
|
293
|
+
var version = "16.1.0";
|
|
320
294
|
|
|
321
295
|
exports.PageNavigator = PageNavigator$1;
|
|
322
296
|
exports.PageSizeSelector = PageSizeSelector$1;
|
|
@@ -39,11 +39,9 @@ const normalizePageValue = (value, totalPages) => {
|
|
|
39
39
|
if (value < 1) {
|
|
40
40
|
return 1;
|
|
41
41
|
}
|
|
42
|
-
|
|
43
42
|
if (value > totalPages) {
|
|
44
43
|
return totalPages;
|
|
45
44
|
}
|
|
46
|
-
|
|
47
45
|
return value;
|
|
48
46
|
};
|
|
49
47
|
|
|
@@ -71,19 +69,14 @@ var messages$2 = defineMessages({
|
|
|
71
69
|
});
|
|
72
70
|
|
|
73
71
|
function ownKeys$1(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
74
|
-
|
|
75
72
|
function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys$1(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys$1(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
76
|
-
|
|
77
73
|
const PageNavigator = props => {
|
|
78
74
|
const intl = useIntl();
|
|
79
|
-
|
|
80
75
|
const _useTheme = useTheme(),
|
|
81
|
-
|
|
82
|
-
|
|
76
|
+
themedValue = _useTheme.themedValue;
|
|
83
77
|
const _useState = useState(uniqueId('page-number-')),
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
78
|
+
_useState2 = _slicedToArray(_useState, 1),
|
|
79
|
+
pageNumberInputId = _useState2[0];
|
|
87
80
|
const TotalPagesCountComponent = themedValue(Text.Body, Label);
|
|
88
81
|
const paginationForm = useFormik({
|
|
89
82
|
initialValues: {
|
|
@@ -93,9 +86,7 @@ const PageNavigator = props => {
|
|
|
93
86
|
validateOnBlur: true,
|
|
94
87
|
validateOnChange: true,
|
|
95
88
|
validateOnMount: true,
|
|
96
|
-
onSubmit: (values
|
|
97
|
-
/**, helpers */
|
|
98
|
-
) => {
|
|
89
|
+
onSubmit: (values /**, helpers */) => {
|
|
99
90
|
const nextNormalizedValue = Number(normalizePageValue(values.page, props.totalPages));
|
|
100
91
|
props.onPageChange(nextNormalizedValue);
|
|
101
92
|
},
|
|
@@ -105,18 +96,16 @@ const PageNavigator = props => {
|
|
|
105
96
|
page: true
|
|
106
97
|
};
|
|
107
98
|
}
|
|
108
|
-
|
|
109
99
|
return {};
|
|
110
100
|
}
|
|
111
101
|
});
|
|
112
102
|
const page = props.page,
|
|
113
|
-
|
|
103
|
+
totalPages = props.totalPages;
|
|
114
104
|
const isDisabled = totalPages === 0;
|
|
115
105
|
const isPreviousDisabled = page <= 1;
|
|
116
106
|
const isNextDisabled = page >= totalPages;
|
|
117
107
|
const handlePrevPageChange = useCallback(() => {
|
|
118
108
|
const previousPage = _valuesInstanceProperty(paginationForm).page - 1;
|
|
119
|
-
|
|
120
109
|
if (previousPage >= 1) {
|
|
121
110
|
paginationForm.setFieldValue('page', previousPage, true);
|
|
122
111
|
paginationForm.submitForm();
|
|
@@ -124,7 +113,6 @@ const PageNavigator = props => {
|
|
|
124
113
|
}, [paginationForm]);
|
|
125
114
|
const handleNextPageChange = useCallback(() => {
|
|
126
115
|
const nextPage = _valuesInstanceProperty(paginationForm).page + 1;
|
|
127
|
-
|
|
128
116
|
if (nextPage <= totalPages) {
|
|
129
117
|
paginationForm.setFieldValue('page', nextPage, true);
|
|
130
118
|
paginationForm.submitForm();
|
|
@@ -171,7 +159,6 @@ const PageNavigator = props => {
|
|
|
171
159
|
})
|
|
172
160
|
});
|
|
173
161
|
};
|
|
174
|
-
|
|
175
162
|
PageNavigator.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
176
163
|
totalPages: _pt.number.isRequired,
|
|
177
164
|
page: _pt.number.isRequired,
|
|
@@ -190,39 +177,28 @@ const messages = defineMessages({
|
|
|
190
177
|
var messages$1 = messages;
|
|
191
178
|
|
|
192
179
|
function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
193
|
-
|
|
194
180
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
195
|
-
|
|
196
181
|
const mapRangeToListOfOptions = perPageRange => {
|
|
197
182
|
switch (perPageRange) {
|
|
198
183
|
case 's':
|
|
199
184
|
return [20, 50];
|
|
200
|
-
|
|
201
185
|
case 'm':
|
|
202
186
|
return [20, 50, 100];
|
|
203
|
-
|
|
204
187
|
case 'l':
|
|
205
188
|
return [200, 500];
|
|
206
|
-
|
|
207
189
|
default:
|
|
208
190
|
throw new Error("Invalid page range \"".concat(perPageRange, "\", expected one of \"s,m,l\"."));
|
|
209
191
|
}
|
|
210
192
|
};
|
|
211
|
-
|
|
212
193
|
const PageSizeSelector = props => {
|
|
213
194
|
var _context;
|
|
214
|
-
|
|
215
195
|
const _useTheme = useTheme(),
|
|
216
|
-
|
|
217
|
-
|
|
196
|
+
themedValue = _useTheme.themedValue;
|
|
218
197
|
const _useState = useState(uniqueId('per-page-selector-')),
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
198
|
+
_useState2 = _slicedToArray(_useState, 1),
|
|
199
|
+
perPageSelectorId = _useState2[0];
|
|
222
200
|
const options = mapRangeToListOfOptions(props.perPageRange);
|
|
223
|
-
|
|
224
201
|
const hasValidPerPageOption = _includesInstanceProperty(options).call(options, props.perPage);
|
|
225
|
-
|
|
226
202
|
process.env.NODE_ENV !== "production" ? warning(hasValidPerPageOption, _concatInstanceProperty(_context = "@commercetools-uikit/pagination: invalid page size ".concat(props.perPage, ". It must be one of the values of the selected range in \"")).call(_context, options.toString(), "\".")) : void 0;
|
|
227
203
|
const onPerPageChange = props.onPerPageChange;
|
|
228
204
|
const handleSelectPerPage = useCallback(event => {
|
|
@@ -252,7 +228,6 @@ const PageSizeSelector = props => {
|
|
|
252
228
|
})]
|
|
253
229
|
});
|
|
254
230
|
};
|
|
255
|
-
|
|
256
231
|
PageSizeSelector.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
257
232
|
perPage: _pt.number.isRequired,
|
|
258
233
|
perPageRange: _pt.oneOf(['s', 'm', 'l']).isRequired,
|
|
@@ -268,7 +243,6 @@ PageSizeSelector.defaultProps = defaultProps$1;
|
|
|
268
243
|
var PageSizeSelector$1 = PageSizeSelector;
|
|
269
244
|
|
|
270
245
|
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)."; }
|
|
271
|
-
|
|
272
246
|
var _ref = process.env.NODE_ENV === "production" ? {
|
|
273
247
|
name: "15sp3y3",
|
|
274
248
|
styles: "flex-grow:2"
|
|
@@ -278,7 +252,6 @@ var _ref = process.env.NODE_ENV === "production" ? {
|
|
|
278
252
|
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInBhZ2luYXRpb24udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXNEZ0IiLCJmaWxlIjoicGFnaW5hdGlvbi50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgU3BhY2luZ3MgZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvc3BhY2luZ3MnO1xuaW1wb3J0IFBhZ2VOYXZpZ2F0b3IgZnJvbSAnLi9wYWdlLW5hdmlnYXRvcic7XG5pbXBvcnQgUGFnZVNpemVTZWxlY3RvciwgeyB0eXBlIFRQYWdlUmFuZ2VTaXplIH0gZnJvbSAnLi9wYWdlLXNpemUtc2VsZWN0b3InO1xuXG5leHBvcnQgdHlwZSBUUGFnaW5hdGlvblByb3BzID0ge1xuICAvKipcbiAgICogVG90YWwgbnVtYmVyIG9mIGl0ZW1zIGFjcm9zcyBhbGwgcGFnZXNcbiAgICovXG4gIHRvdGFsSXRlbXM6IG51bWJlcjtcblxuICAvKipcbiAgICogVGhlIGN1cnJlbnQgcGFnZVxuICAgKi9cbiAgcGFnZTogbnVtYmVyO1xuXG4gIC8qKlxuICAgKiBBIGNhbGxiYWNrIGZ1bmN0aW9uLCBjYWxsZWQgd2hlbiB0aGUgcGFnZSBpcyBjaGFuZ2VkLlxuICAgKi9cbiAgb25QYWdlQ2hhbmdlOiAobmV3UGFnZTogbnVtYmVyKSA9PiB2b2lkO1xuXG4gIC8qKlxuICAgKiBOdW1iZXIgb2YgaXRlbXMgcGVyIHBhZ2UsIGFjY29yZGluZyB0byB0aGUgcHJlLWRlZmluZWQgcmFuZ2UgdmFsdWVzLlxuICAgKi9cbiAgcGVyUGFnZTogbnVtYmVyO1xuXG4gIC8qKlxuICAgKiBSYW5nZSBvZiBpdGVtcyBwZXIgcGFnZS5cbiAgICogPGJyLz5cbiAgICogYHM6IDIwLDUwYFxuICAgKiA8YnIvPlxuICAgKiBgbTogMjAsNTAsMTAwYFxuICAgKiA8YnIvPlxuICAgKiBgbDogMjAwLDUwMGBcbiAgICovXG4gIHBlclBhZ2VSYW5nZTogVFBhZ2VSYW5nZVNpemU7XG5cbiAgLyoqXG4gICAqIEEgY2FsbGJhY2sgZnVuY3Rpb24sIGNhbGxlZCB3aGVuIGBwZXJQYWdlYCBpcyBjaGFuZ2VkLlxuICAgKi9cbiAgb25QZXJQYWdlQ2hhbmdlOiAobmV3UGVyUGFnZTogbnVtYmVyKSA9PiB2b2lkO1xufTtcblxuY29uc3QgUGFnaW5hdGlvbiA9IChwcm9wczogVFBhZ2luYXRpb25Qcm9wcykgPT4ge1xuICBjb25zdCB0b3RhbFBhZ2VzID0gTWF0aC5jZWlsKHByb3BzLnRvdGFsSXRlbXMgLyBwcm9wcy5wZXJQYWdlKTtcblxuICBjb25zdCBwYWdlSXRlbXMgPVxuICAgIHByb3BzLnBhZ2UgPT09IHRvdGFsUGFnZXNcbiAgICAgID8gcHJvcHMudG90YWxJdGVtcyAtIHByb3BzLnBlclBhZ2UgKiAocHJvcHMucGFnZSAtIDEpXG4gICAgICA6IHByb3BzLnBlclBhZ2U7XG5cbiAgcmV0dXJuIChcbiAgICA8U3BhY2luZ3MuSW5saW5lIGp1c3RpZnlDb250ZW50PVwic3BhY2UtYmV0d2VlblwiPlxuICAgICAgPGRpdlxuICAgICAgICBjc3M9e2Nzc2BcbiAgICAgICAgICBmbGV4LWdyb3c6IDI7XG4gICAgICAgIGB9XG4gICAgICA+XG4gICAgICAgIDxQYWdlU2l6ZVNlbGVjdG9yXG4gICAgICAgICAgcGFnZUl0ZW1zPXtwYWdlSXRlbXN9XG4gICAgICAgICAgcGVyUGFnZT17cHJvcHMucGVyUGFnZX1cbiAgICAgICAgICBwZXJQYWdlUmFuZ2U9e3Byb3BzLnBlclBhZ2VSYW5nZX1cbiAgICAgICAgICBvblBlclBhZ2VDaGFuZ2U9e3Byb3BzLm9uUGVyUGFnZUNoYW5nZX1cbiAgICAgICAgLz5cbiAgICAgIDwvZGl2PlxuICAgICAgPFBhZ2VOYXZpZ2F0b3JcbiAgICAgICAgdG90YWxQYWdlcz17dG90YWxQYWdlc31cbiAgICAgICAgcGFnZT17cHJvcHMucGFnZX1cbiAgICAgICAgb25QYWdlQ2hhbmdlPXtwcm9wcy5vblBhZ2VDaGFuZ2V9XG4gICAgICAvPlxuICAgIDwvU3BhY2luZ3MuSW5saW5lPlxuICApO1xufTtcblxuUGFnaW5hdGlvbi5kaXNwbGF5TmFtZSA9ICdQYWdpbmF0aW9uJztcblxuY29uc3QgZGVmYXVsdFByb3BzOiBQaWNrPFRQYWdpbmF0aW9uUHJvcHMsICdwZXJQYWdlJyB8ICdwZXJQYWdlUmFuZ2UnPiA9IHtcbiAgcGVyUGFnZTogMjAsXG4gIHBlclBhZ2VSYW5nZTogJ3MnLFxufTtcblBhZ2luYXRpb24uZGVmYXVsdFByb3BzID0gZGVmYXVsdFByb3BzO1xuXG5leHBvcnQgdHlwZSB7IFRQYWdlUmFuZ2VTaXplIH07XG5cbmV4cG9ydCBkZWZhdWx0IFBhZ2luYXRpb247XG4iXX0= */",
|
|
279
253
|
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
|
|
280
254
|
};
|
|
281
|
-
|
|
282
255
|
const Pagination = props => {
|
|
283
256
|
const totalPages = Math.ceil(props.totalItems / props.perPage);
|
|
284
257
|
const pageItems = props.page === totalPages ? props.totalItems - props.perPage * (props.page - 1) : props.perPage;
|
|
@@ -299,7 +272,6 @@ const Pagination = props => {
|
|
|
299
272
|
})]
|
|
300
273
|
});
|
|
301
274
|
};
|
|
302
|
-
|
|
303
275
|
Pagination.displayName = 'Pagination';
|
|
304
276
|
const defaultProps = {
|
|
305
277
|
perPage: 20,
|
|
@@ -309,6 +281,6 @@ Pagination.defaultProps = defaultProps;
|
|
|
309
281
|
var Pagination$1 = Pagination;
|
|
310
282
|
|
|
311
283
|
// NOTE: This string will be replaced on build time with the package version.
|
|
312
|
-
var version = "16.
|
|
284
|
+
var version = "16.1.0";
|
|
313
285
|
|
|
314
286
|
export { PageNavigator$1 as PageNavigator, PageSizeSelector$1 as PageSizeSelector, Pagination$1 as Pagination, version };
|
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": "16.
|
|
4
|
+
"version": "16.1.0",
|
|
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.20.13",
|
|
23
23
|
"@babel/runtime-corejs3": "^7.20.13",
|
|
24
|
-
"@commercetools-uikit/constraints": "16.
|
|
25
|
-
"@commercetools-uikit/design-system": "16.
|
|
26
|
-
"@commercetools-uikit/icons": "16.
|
|
27
|
-
"@commercetools-uikit/label": "16.
|
|
28
|
-
"@commercetools-uikit/number-input": "16.
|
|
29
|
-
"@commercetools-uikit/secondary-icon-button": "16.
|
|
30
|
-
"@commercetools-uikit/select-input": "16.
|
|
31
|
-
"@commercetools-uikit/spacings": "16.
|
|
32
|
-
"@commercetools-uikit/text": "16.
|
|
33
|
-
"@commercetools-uikit/utils": "16.
|
|
24
|
+
"@commercetools-uikit/constraints": "16.1.0",
|
|
25
|
+
"@commercetools-uikit/design-system": "16.1.0",
|
|
26
|
+
"@commercetools-uikit/icons": "16.1.0",
|
|
27
|
+
"@commercetools-uikit/label": "16.1.0",
|
|
28
|
+
"@commercetools-uikit/number-input": "16.1.0",
|
|
29
|
+
"@commercetools-uikit/secondary-icon-button": "16.1.0",
|
|
30
|
+
"@commercetools-uikit/select-input": "16.1.0",
|
|
31
|
+
"@commercetools-uikit/spacings": "16.1.0",
|
|
32
|
+
"@commercetools-uikit/text": "16.1.0",
|
|
33
|
+
"@commercetools-uikit/utils": "16.1.0",
|
|
34
34
|
"@emotion/react": "^11.10.5",
|
|
35
35
|
"@emotion/styled": "^11.10.5",
|
|
36
36
|
"formik": "^2.2.9",
|