ra-core
Version:
Core components of react-admin, a frontend Framework for building admin applications on top of REST services, using ES6, React
37 lines • 2.16 kB
JavaScript
import * as React from 'react';
import { Translate } from "../i18n/Translate.js";
import { useTranslate } from "../i18n/useTranslate.js";
import { useListContext } from "../controller/list/useListContext.js";
export var Pagination = function () {
var _a = useListContext(), page = _a.page, perPage = _a.perPage, total = _a.total, setPage = _a.setPage;
var translate = useTranslate();
if (total === undefined) {
return null;
}
var nbPages = Math.ceil(total / perPage) || 1;
return (React.createElement("div", { style: { display: 'flex', justifyContent: 'space-between' } },
React.createElement("div", null,
React.createElement(Translate, { i18nKey: "ra.navigation.page_range_info", options: {
offsetBegin: (page - 1) * perPage + 1,
offsetEnd: Math.min(page * perPage, total),
total: total,
} }, "".concat((page - 1) * perPage + 1, "-").concat(Math.min(page * perPage, total), " of ").concat(total))),
React.createElement("div", { style: {
display: 'flex',
gap: '0',
alignItems: 'center',
justifyContent: 'end',
} },
page > 1 && (React.createElement("button", { onClick: function () { return setPage(page - 1); }, type: "button" },
React.createElement(Translate, { i18nKey: "ra.navigation.previous" }, "Previous"))),
Array.from({ length: nbPages }, function (_, i) { return i + 1; }).map(function (p) { return (React.createElement("button", { key: p, onClick: function () {
setPage(p);
}, style: {
fontWeight: p === page ? 'bold' : 'normal',
}, "aria-label": translate('ra.navigation.page', {
page: p,
}), type: "button" }, p)); }),
page < nbPages && (React.createElement("button", { onClick: function () { return setPage(page + 1); }, type: "button" },
React.createElement(Translate, { i18nKey: "ra.navigation.next" }, "Next"))))));
};
//# sourceMappingURL=Pagination.js.map