@commercetools-uikit/pagination
Version:
Components for navigating through pages of items
299 lines (286 loc) • 17.5 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
require('@emotion/react');
var Spacings = require('@commercetools-uikit/spacings');
var jsxRuntime = require('@emotion/react/jsx-runtime');
var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
var _includesInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/includes');
var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
var _Object$getOwnPropertyDescriptor = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor');
var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
var react = require('react');
var uniqueId = require('lodash/uniqueId');
var SelectInput = require('@commercetools-uikit/select-input');
var Constraints = require('@commercetools-uikit/constraints');
var utils = require('@commercetools-uikit/utils');
var Label = require('@commercetools-uikit/label');
var reactIntl = require('react-intl');
var _valuesInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/values');
var formik = require('formik');
var icons = require('@commercetools-uikit/icons');
var NumberInput = require('@commercetools-uikit/number-input');
var SecondaryIconButton = require('@commercetools-uikit/secondary-icon-button');
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
var Spacings__default = /*#__PURE__*/_interopDefault(Spacings);
var _includesInstanceProperty__default = /*#__PURE__*/_interopDefault(_includesInstanceProperty);
var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
var _Object$getOwnPropertyDescriptor__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptor);
var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachInstanceProperty);
var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
var uniqueId__default = /*#__PURE__*/_interopDefault(uniqueId);
var SelectInput__default = /*#__PURE__*/_interopDefault(SelectInput);
var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
var Label__default = /*#__PURE__*/_interopDefault(Label);
var _valuesInstanceProperty__default = /*#__PURE__*/_interopDefault(_valuesInstanceProperty);
var NumberInput__default = /*#__PURE__*/_interopDefault(NumberInput);
var SecondaryIconButton__default = /*#__PURE__*/_interopDefault(SecondaryIconButton);
const isValid = (page, totalPages) => {
if (page > totalPages) return false;
if (page <= 0) return false;
return true;
};
const normalizePageValue = (value, totalPages) => {
if (value < 1) {
return 1;
}
if (value > totalPages) {
return totalPages;
}
return value;
};
var messages$2 = reactIntl.defineMessages({
page: {
id: 'UIKit.Pagination.PageNavigator.page',
description: 'Label for page',
defaultMessage: 'Page'
},
pageCount: {
id: 'UIKit.Pagination.PageNavigator.pageCount',
description: 'Label for total pages',
defaultMessage: 'of {count}'
},
previousPageLabel: {
id: 'UIKit.Pagination.PageNavigator.previousPageLabel',
description: 'Label for previous page button',
defaultMessage: 'Previous page'
},
nextPageLabel: {
id: 'UIKit.Pagination.PageNavigator.nextPageLabel',
description: 'Label for next page button',
defaultMessage: 'Next page'
}
});
function ownKeys$1(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$1(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$1(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
const PageNavigator = props => {
const intl = reactIntl.useIntl();
const _useState = react.useState(uniqueId__default["default"]('page-number-')),
_useState2 = _slicedToArray(_useState, 1),
pageNumberInputId = _useState2[0];
const paginationForm = formik.useFormik({
initialValues: {
page: props.page
},
enableReinitialize: true,
validateOnBlur: true,
validateOnChange: true,
validateOnMount: true,
onSubmit: (values /**, helpers */) => {
const nextNormalizedValue = Number(normalizePageValue(values.page, props.totalPages));
props.onPageChange(nextNormalizedValue);
},
validate: values => {
if (!isValid(values.page, props.totalPages)) {
return {
page: true
};
}
return {};
}
});
const page = props.page,
totalPages = props.totalPages;
const isDisabled = totalPages === 0;
const isPreviousDisabled = page <= 1;
const isNextDisabled = page >= totalPages;
const handlePrevPageChange = react.useCallback(() => {
const previousPage = _valuesInstanceProperty__default["default"](paginationForm).page - 1;
if (previousPage >= 1) {
paginationForm.setFieldValue('page', previousPage, true);
paginationForm.submitForm();
}
}, [paginationForm]);
const handleNextPageChange = react.useCallback(() => {
const nextPage = _valuesInstanceProperty__default["default"](paginationForm).page + 1;
if (nextPage <= totalPages) {
paginationForm.setFieldValue('page', nextPage, true);
paginationForm.submitForm();
}
}, [paginationForm, totalPages]);
return jsxRuntime.jsx("form", {
onSubmit: paginationForm.handleSubmit,
children: jsxRuntime.jsxs(Spacings__default["default"].Inline, {
alignItems: "center",
scale: "s",
children: [jsxRuntime.jsx(SecondaryIconButton__default["default"], {
label: intl.formatMessage(messages$2.previousPageLabel),
onClick: handlePrevPageChange,
isDisabled: isPreviousDisabled || isDisabled,
icon: jsxRuntime.jsx(icons.AngleLeftIcon, {})
}), jsxRuntime.jsx(Label__default["default"], {
htmlFor: pageNumberInputId,
intlMessage: messages$2.page
}), jsxRuntime.jsx("div", {
children: jsxRuntime.jsx(NumberInput__default["default"], {
name: "page",
id: pageNumberInputId,
value: _valuesInstanceProperty__default["default"](paginationForm).page,
min: 1,
max: totalPages,
onBlur: paginationForm.handleBlur,
onChange: paginationForm.handleChange,
isDisabled: isDisabled,
hasWarning: Boolean(paginationForm.errors.page),
horizontalConstraint: 2
})
}), jsxRuntime.jsx(Label__default["default"], {
intlMessage: _objectSpread$1(_objectSpread$1({}, messages$2.pageCount), {}, {
values: {
count: props.totalPages
}
})
}), jsxRuntime.jsx(SecondaryIconButton__default["default"], {
label: intl.formatMessage(messages$2.nextPageLabel),
onClick: handleNextPageChange,
isDisabled: isNextDisabled || isDisabled,
icon: jsxRuntime.jsx(icons.AngleRightIcon, {})
})]
})
});
};
PageNavigator.displayName = 'PageNavigator';
var PageNavigator$1 = PageNavigator;
const messages = reactIntl.defineMessages({
pageSize: {
id: 'UIKit.Pagination.PageSizeSelector.pageSize',
description: 'How many items are per page',
defaultMessage: 'Items per page ({count} items)'
}
});
var messages$1 = messages;
const _excluded$1 = ["perPage", "perPageRange"];
function ownKeys(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
const mapRangeToListOfOptions = perPageRange => {
switch (perPageRange) {
case 'xs':
return [5, 10, 15, 20];
case 's':
return [20, 50];
case 'm':
return [20, 50, 100];
case 'l':
return [200, 500];
default:
throw new Error(`Invalid page range "${perPageRange}", expected one of "xs,s,m,l".`);
}
};
const PageSizeSelector = _ref => {
let _ref$perPage = _ref.perPage,
perPage = _ref$perPage === void 0 ? 20 : _ref$perPage,
_ref$perPageRange = _ref.perPageRange,
perPageRange = _ref$perPageRange === void 0 ? 's' : _ref$perPageRange,
props = _objectWithoutProperties(_ref, _excluded$1);
const _useState = react.useState(uniqueId__default["default"]('per-page-selector-')),
_useState2 = _slicedToArray(_useState, 1),
perPageSelectorId = _useState2[0];
const options = mapRangeToListOfOptions(perPageRange);
const hasValidPerPageOption = _includesInstanceProperty__default["default"](options).call(options, perPage);
process.env.NODE_ENV !== "production" ? utils.warning(hasValidPerPageOption, `@commercetools-uikit/pagination: invalid page size ${perPage}. It must be one of the values of the selected range in "${options.toString()}".`) : void 0;
const onPerPageChange = props.onPerPageChange;
const handleSelectPerPage = react.useCallback(event => {
onPerPageChange(Number(event.target.value));
}, [onPerPageChange]);
return jsxRuntime.jsxs(Spacings__default["default"].Inline, {
alignItems: "center",
children: [jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
max: "auto",
children: jsxRuntime.jsx(SelectInput__default["default"], {
id: perPageSelectorId,
isSearchable: false,
name: "per-page-selector",
value: perPage.toString(),
options: _mapInstanceProperty__default["default"](options).call(options, option => ({
value: option.toString(),
label: option.toString()
})),
onChange: handleSelectPerPage
})
}), jsxRuntime.jsx(Label__default["default"], {
htmlFor: perPageSelectorId,
intlMessage: _objectSpread(_objectSpread({}, messages$1.pageSize), {}, {
values: {
count: props.pageItems
}
})
})]
});
};
PageSizeSelector.displayName = 'PageSizeSelector';
var PageSizeSelector$1 = PageSizeSelector;
const _excluded = ["perPage", "perPageRange"];
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)."; }
var _ref = process.env.NODE_ENV === "production" ? {
name: "15sp3y3",
styles: "flex-grow:2"
} : {
name: "mvvfm1-Pagination",
styles: "flex-grow:2;label:Pagination;/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInBhZ2luYXRpb24udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTREZ0IiLCJmaWxlIjoicGFnaW5hdGlvbi50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgU3BhY2luZ3MgZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvc3BhY2luZ3MnO1xuaW1wb3J0IFBhZ2VOYXZpZ2F0b3IgZnJvbSAnLi9wYWdlLW5hdmlnYXRvcic7XG5pbXBvcnQgUGFnZVNpemVTZWxlY3RvciwgeyB0eXBlIFRQYWdlUmFuZ2VTaXplIH0gZnJvbSAnLi9wYWdlLXNpemUtc2VsZWN0b3InO1xuXG5leHBvcnQgdHlwZSBUUGFnaW5hdGlvblByb3BzID0ge1xuICAvKipcbiAgICogVG90YWwgbnVtYmVyIG9mIGl0ZW1zIGFjcm9zcyBhbGwgcGFnZXNcbiAgICovXG4gIHRvdGFsSXRlbXM6IG51bWJlcjtcblxuICAvKipcbiAgICogVGhlIGN1cnJlbnQgcGFnZVxuICAgKi9cbiAgcGFnZTogbnVtYmVyO1xuXG4gIC8qKlxuICAgKiBBIGNhbGxiYWNrIGZ1bmN0aW9uLCBjYWxsZWQgd2hlbiB0aGUgcGFnZSBpcyBjaGFuZ2VkLlxuICAgKi9cbiAgb25QYWdlQ2hhbmdlOiAobmV3UGFnZTogbnVtYmVyKSA9PiB2b2lkO1xuXG4gIC8qKlxuICAgKiBOdW1iZXIgb2YgaXRlbXMgcGVyIHBhZ2UsIGFjY29yZGluZyB0byB0aGUgcHJlLWRlZmluZWQgcmFuZ2UgdmFsdWVzLlxuICAgKi9cbiAgcGVyUGFnZT86IG51bWJlcjtcblxuICAvKipcbiAgICogUmFuZ2Ugb2YgaXRlbXMgcGVyIHBhZ2UuXG4gICAqIDxici8+XG4gICAqIGB4czogNSwxMCwxNSwyMGBcbiAgICogPGJyLz5cbiAgICogYHM6IDIwLDUwYFxuICAgKiA8YnIvPlxuICAgKiBgbTogMjAsNTAsMTAwYFxuICAgKiA8YnIvPlxuICAgKiBgbDogMjAwLDUwMGBcbiAgICovXG4gIHBlclBhZ2VSYW5nZT86IFRQYWdlUmFuZ2VTaXplO1xuXG4gIC8qKlxuICAgKiBBIGNhbGxiYWNrIGZ1bmN0aW9uLCBjYWxsZWQgd2hlbiBgcGVyUGFnZWAgaXMgY2hhbmdlZC5cbiAgICovXG4gIG9uUGVyUGFnZUNoYW5nZTogKG5ld1BlclBhZ2U6IG51bWJlcikgPT4gdm9pZDtcbn07XG5cbmNvbnN0IFBhZ2luYXRpb24gPSAoe1xuICBwZXJQYWdlID0gMjAsXG4gIHBlclBhZ2VSYW5nZSA9ICdzJyxcbiAgLi4ucHJvcHNcbn06IFRQYWdpbmF0aW9uUHJvcHMpID0+IHtcbiAgY29uc3QgdG90YWxQYWdlcyA9IE1hdGguY2VpbChwcm9wcy50b3RhbEl0ZW1zIC8gcGVyUGFnZSk7XG5cbiAgY29uc3QgcGFnZUl0ZW1zID1cbiAgICBwcm9wcy5wYWdlID09PSB0b3RhbFBhZ2VzXG4gICAgICA/IHByb3BzLnRvdGFsSXRlbXMgLSBwZXJQYWdlICogKHByb3BzLnBhZ2UgLSAxKVxuICAgICAgOiBwZXJQYWdlO1xuXG4gIHJldHVybiAoXG4gICAgPFNwYWNpbmdzLklubGluZSBqdXN0aWZ5Q29udGVudD1cInNwYWNlLWJldHdlZW5cIj5cbiAgICAgIDxkaXZcbiAgICAgICAgY3NzPXtjc3NgXG4gICAgICAgICAgZmxleC1ncm93OiAyO1xuICAgICAgICBgfVxuICAgICAgPlxuICAgICAgICA8UGFnZVNpemVTZWxlY3RvclxuICAgICAgICAgIHBhZ2VJdGVtcz17cGFnZUl0ZW1zfVxuICAgICAgICAgIHBlclBhZ2U9e3BlclBhZ2V9XG4gICAgICAgICAgcGVyUGFnZVJhbmdlPXtwZXJQYWdlUmFuZ2V9XG4gICAgICAgICAgb25QZXJQYWdlQ2hhbmdlPXtwcm9wcy5vblBlclBhZ2VDaGFuZ2V9XG4gICAgICAgIC8+XG4gICAgICA8L2Rpdj5cbiAgICAgIDxQYWdlTmF2aWdhdG9yXG4gICAgICAgIHRvdGFsUGFnZXM9e3RvdGFsUGFnZXN9XG4gICAgICAgIHBhZ2U9e3Byb3BzLnBhZ2V9XG4gICAgICAgIG9uUGFnZUNoYW5nZT17cHJvcHMub25QYWdlQ2hhbmdlfVxuICAgICAgLz5cbiAgICA8L1NwYWNpbmdzLklubGluZT5cbiAgKTtcbn07XG5cblBhZ2luYXRpb24uZGlzcGxheU5hbWUgPSAnUGFnaW5hdGlvbic7XG5cbmV4cG9ydCB0eXBlIHsgVFBhZ2VSYW5nZVNpemUgfTtcblxuZXhwb3J0IGRlZmF1bHQgUGFnaW5hdGlvbjtcbiJdfQ== */",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
const Pagination = _ref2 => {
let _ref2$perPage = _ref2.perPage,
perPage = _ref2$perPage === void 0 ? 20 : _ref2$perPage,
_ref2$perPageRange = _ref2.perPageRange,
perPageRange = _ref2$perPageRange === void 0 ? 's' : _ref2$perPageRange,
props = _objectWithoutProperties(_ref2, _excluded);
const totalPages = Math.ceil(props.totalItems / perPage);
const pageItems = props.page === totalPages ? props.totalItems - perPage * (props.page - 1) : perPage;
return jsxRuntime.jsxs(Spacings__default["default"].Inline, {
justifyContent: "space-between",
children: [jsxRuntime.jsx("div", {
css: _ref,
children: jsxRuntime.jsx(PageSizeSelector$1, {
pageItems: pageItems,
perPage: perPage,
perPageRange: perPageRange,
onPerPageChange: props.onPerPageChange
})
}), jsxRuntime.jsx(PageNavigator$1, {
totalPages: totalPages,
page: props.page,
onPageChange: props.onPageChange
})]
});
};
Pagination.displayName = 'Pagination';
var Pagination$1 = Pagination;
// NOTE: This string will be replaced on build time with the package version.
var version = "20.1.0";
exports.PageNavigator = PageNavigator$1;
exports.PageSizeSelector = PageSizeSelector$1;
exports.Pagination = Pagination$1;
exports.version = version;