phx-react
Version:
PHX REACT
54 lines • 3.82 kB
JavaScript
;
exports.__esModule = true;
var tslib_1 = require("tslib");
var free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
var react_fontawesome_1 = require("@fortawesome/react-fontawesome");
var react_1 = tslib_1.__importDefault(require("react"));
function classNames() {
var classes = [];
for (var _i = 0; _i < arguments.length; _i++) {
classes[_i] = arguments[_i];
}
return classes.filter(Boolean).join(' ');
}
var Pagination = function (_a) {
var currentPage = _a.currentPage, handleChangePage = _a.handleChangePage, totalPages = _a.totalPages, pagination = _a.pagination, rowQuantity = _a.rowQuantity, count = _a.count;
var pages = [];
for (var i = 1; i <= totalPages; i++) {
pages.push(i);
}
var handleClickPage = function (page) {
handleChangePage(page);
};
var disableNextPage = currentPage === totalPages;
var disablePrevPage = currentPage === 1;
var PreviousPage = function () { return (react_1["default"].createElement("a", { "aria-hidden": true, className: classNames('relative inline-flex bg-[#ebebeb] rounded-tl-lg pb-1 pt-0.5 rounded-bl-lg items-center px-3 text-gray-900 focus:z-20 focus:outline-offset-0 min-h-[1.75rem]', !disablePrevPage ? 'hover:bg-[#d4d4d4]' : '', !disablePrevPage
? 'active:bg-[#ccc] active:shadow-[0rem_0.125rem_0.1rem_0rem_#0004_inset] active:pt-[0.2rem] active:pb-[0.2rem]'
: '', !disablePrevPage ? 'cursor-pointer' : ''), onClick: function () { return handleClickPage(currentPage - 1); } },
react_1["default"].createElement("p", null,
react_1["default"].createElement("span", { className: 'sr-only' }, "Previous"),
react_1["default"].createElement(react_fontawesome_1.FontAwesomeIcon, { className: classNames('w-2.5 h-3', disablePrevPage ? 'text-gray-300' : 'text-gray-900'), icon: free_solid_svg_icons_1.faAngleLeft })))); };
var NextPage = function () { return (react_1["default"].createElement("a", { "aria-hidden": true, className: classNames('relative inline-flex rounded-tr-lg bg-[#ebebeb] pb-1 pt-0.5 rounded-br-lg items-center rounded-r-md px-3 text-gray-900 focus:z-20 focus:outline-offset-0 min-h-[1.75rem]', !disableNextPage ? 'hover:bg-[#d4d4d4]' : '', !disableNextPage
? 'active:bg-[#ccc] active:shadow-[0rem_0.125rem_0.1rem_0rem_#0004_inset] active:pt-[0.01rem] active:pb-[0.03rem]'
: '', !disableNextPage ? 'cursor-pointer' : ''), onClick: function () { return handleClickPage(currentPage + 1); } },
react_1["default"].createElement("p", null,
react_1["default"].createElement("span", { className: 'sr-only' }, "Next"),
react_1["default"].createElement(react_fontawesome_1.FontAwesomeIcon, { className: classNames('w-2.5 h-3', disableNextPage ? 'text-gray-300' : 'text-gray-900'), icon: free_solid_svg_icons_1.faAngleRight })))); };
var startIndex = pagination * rowQuantity + 1;
var endIndex = pagination * rowQuantity + rowQuantity;
return (react_1["default"].createElement("div", { className: 'flex items-center gap-x-3' },
react_1["default"].createElement("p", { className: 'hidden text-xs sm:block' },
"Hi\u1EC3n th\u1ECB ",
startIndex,
" - ",
endIndex >= count ? count : endIndex,
" tr\u00EAn ",
count,
" b\u1EA3n ghi"),
react_1["default"].createElement("div", { className: 'isolate inline-flex -space-x-px rounded-md bg-white shadow-sm' },
react_1["default"].createElement("div", { className: 'mr-1' },
react_1["default"].createElement(PreviousPage, null)),
react_1["default"].createElement(NextPage, null))));
};
exports["default"] = Pagination;
//# sourceMappingURL=Pagination.js.map