analytica-frontend-lib
Version:
Repositório público dos componentes utilizados nas plataformas da Analytica Ensino
153 lines (150 loc) • 6.1 kB
JavaScript
;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/components/Table/TablePagination.tsx
var TablePagination_exports = {};
__export(TablePagination_exports, {
default: () => TablePagination_default
});
module.exports = __toCommonJS(TablePagination_exports);
var import_phosphor_react = require("phosphor-react");
// src/utils/utils.ts
var import_clsx = require("clsx");
var import_tailwind_merge = require("tailwind-merge");
function cn(...inputs) {
return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
}
// src/components/Table/TablePagination.tsx
var import_jsx_runtime = require("react/jsx-runtime");
var TablePagination = ({
totalItems,
currentPage,
totalPages,
itemsPerPage,
itemsPerPageOptions = [10, 20, 50, 100],
onPageChange,
onItemsPerPageChange,
itemLabel = "itens",
className,
...props
}) => {
const startItem = (currentPage - 1) * itemsPerPage + 1;
const handlePrevious = () => {
if (currentPage > 1) {
onPageChange(currentPage - 1);
}
};
const handleNext = () => {
if (currentPage < totalPages) {
onPageChange(currentPage + 1);
}
};
const handleItemsPerPageChange = (e) => {
if (onItemsPerPageChange) {
onItemsPerPageChange(Number(e.target.value));
}
};
const isFirstPage = currentPage === 1;
const isLastPage = currentPage === totalPages;
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
"div",
{
className: cn(
"flex flex-col sm:flex-row items-center gap-3 sm:gap-4 w-full bg-background-50 rounded-xl p-4",
"sm:justify-between",
className
),
...props,
children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "font-normal text-xs leading-[14px] text-text-800", children: [
startItem,
" de ",
totalItems,
" ",
itemLabel
] }),
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-wrap sm:flex-nowrap items-center gap-2 sm:gap-4 justify-center sm:justify-start", children: [
onItemsPerPageChange && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative", children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"select",
{
value: itemsPerPage,
onChange: handleItemsPerPageChange,
className: "w-24 h-9 py-0 px-3 pr-8 bg-background border border-border-300 rounded appearance-none cursor-pointer font-normal text-sm leading-[21px] text-text-900",
"aria-label": "Items por p\xE1gina",
children: itemsPerPageOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("option", { value: option, children: [
option,
" itens"
] }, option))
}
),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_phosphor_react.CaretDown,
{
size: 14,
weight: "regular",
className: "absolute right-3 top-1/2 -translate-y-1/2 text-background-600 pointer-events-none"
}
)
] }),
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "font-normal text-xs leading-[14px] text-text-950", children: [
"P\xE1gina ",
currentPage,
" de ",
totalPages
] }),
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
"button",
{
onClick: handlePrevious,
disabled: isFirstPage,
className: cn(
"flex flex-row justify-center items-center py-2 px-4 gap-2 rounded-3xl transition-all",
isFirstPage ? "opacity-50 cursor-not-allowed" : "hover:bg-primary-950/10 cursor-pointer"
),
"aria-label": "P\xE1gina anterior",
children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_phosphor_react.CaretLeft, { size: 12, weight: "bold", className: "text-primary-950" }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "font-medium text-xs leading-[14px] text-primary-950", children: "Anterior" })
]
}
),
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
"button",
{
onClick: handleNext,
disabled: isLastPage,
className: cn(
"flex flex-row justify-center items-center py-2 px-4 gap-2 rounded-3xl transition-all",
isLastPage ? "opacity-50 cursor-not-allowed" : "hover:bg-primary-950/10 cursor-pointer"
),
"aria-label": "Pr\xF3xima p\xE1gina",
children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "font-medium text-xs leading-[14px] text-primary-950", children: "Pr\xF3xima" }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_phosphor_react.CaretRight, { size: 12, weight: "bold", className: "text-primary-950" })
]
}
)
] })
]
}
);
};
TablePagination.displayName = "TablePagination";
var TablePagination_default = TablePagination;
//# sourceMappingURL=index.js.map