react-use-paginator
Version:
A simple yet configurable react hook for pagination. Functionally developed with hooks.
103 lines (85 loc) • 3.01 kB
JavaScript
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var React = require('react');
var React__default = _interopDefault(React);
function _extends() {
_extends = Object.assign || function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
return _extends.apply(this, arguments);
}
var chunk = function chunk(arr, size) {
return Array.from({
length: Math.ceil(arr.length / size)
}, function (v, i) {
return arr.slice(i * size, i * size + size);
});
};
var getCircularIndex = function getCircularIndex(nextIndex, arraySize) {
return (nextIndex % arraySize + arraySize) % arraySize;
};
var usePaginator = function usePaginator(_ref) {
var PageComponent = _ref.PageComponent,
_ref$data = _ref.data,
data = _ref$data === void 0 ? [] : _ref$data,
_ref$maxPerPage = _ref.maxPerPage,
maxPerPage = _ref$maxPerPage === void 0 ? 25 : _ref$maxPerPage;
var _useState = React.useState(0),
pageIndex = _useState[0],
setPageIndex = _useState[1];
var pageItems = React.useMemo(function () {
return chunk(data, maxPerPage);
}, [data, maxPerPage]);
var numPages = pageItems.length;
var nextPage = function nextPage() {
return setPageIndex(getCircularIndex(pageIndex + 1, numPages));
};
var prevPage = function prevPage() {
return setPageIndex(getCircularIndex(pageIndex - 1, numPages));
};
var setPageIndexExternal = function setPageIndexExternal(index) {
if (typeof index !== 'number') {
console.error('Cannot set page index to non-numeric value:', index);
return;
}
if (index < 1) {
console.error('Cannot set page index to invalid number. Expecting page index minimum of 1 but got:', index);
return;
}
if (index > numPages) {
console.warn("The page index has been explicitly set to " + index + ". There are only " + numPages + " total pages.");
}
setPageIndex(index - 1);
};
var currentItems = React.useMemo(function () {
return pageItems[pageIndex] || [];
}, [pageItems, pageIndex]);
var pageIndexExternal = pageIndex + 1;
var Component = React.useCallback(function (props) {
return /*#__PURE__*/React__default.createElement(PageComponent, _extends({}, props, {
index: pageIndexExternal,
items: currentItems
}));
}, [pageIndex, PageComponent, currentItems]);
return {
Component: Component,
setPageIndex: setPageIndexExternal,
onNextPage: nextPage,
onPrevPage: prevPage,
pageItems: currentItems,
nextPage: nextPage,
prevPage: prevPage,
currentPage: pageIndexExternal,
hasNextPage: pageIndexExternal < numPages,
totalPages: numPages
};
};
module.exports = usePaginator;
//# sourceMappingURL=index.js.map