@progress/kendo-react-data-tools
Version:
Includes React Pager & React Filter component, an intuitive interface to create complex filter descriptions. KendoReact Data Tools package
80 lines (79 loc) • 2.95 kB
JavaScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
"use client";
import * as t from "react";
import { classNames as C, kendoThemeMaps as A } from "@progress/kendo-react-common";
import { Button as y } from "@progress/kendo-react-buttons";
import { pagerMobileSelect as F, pagerPage as R, pagerMoreButtonLabel as T } from "../messages/index.mjs";
import { useLocalization as $ } from "@progress/kendo-react-intl";
import { getL10NMessage as d, translateMessage as g } from "./utils.mjs";
const P = "...", K = (o) => {
const i = $(), { messagesMap: c, size: r, totalPages: p, type: b, navigatable: k } = o, D = d(F, c), E = d(R, c), N = d(T, c), f = g(i, N), M = (e, l) => {
e.preventDefault(), o.pageChange(l, e);
}, x = (e) => {
e.preventDefault(), o.pageChange(e.target.value, e);
}, h = (e, l) => /* @__PURE__ */ t.createElement(
y,
{
fillMode: "flat",
themeColor: "primary",
size: r,
rounded: null,
role: "button",
"aria-label": l,
onClick: (I) => M(I, e),
tabIndex: k ? -1 : void 0
},
P
), v = (e) => /* @__PURE__ */ t.createElement("option", { value: e }, P);
let n = 1;
const a = o.currentPage, m = o.buttonCount;
if (a > m) {
const e = a % m;
n = e === 0 ? a - m + 1 : a - e + 1;
}
const s = Math.min(n + o.buttonCount - 1, o.totalPages), L = n > 1 && h(n - 1, f), w = s < p && h(s + 1, f), z = n > 1 && v(n - 1), B = s < p && v(s + 1), u = [];
for (let e = n; e <= s; e++)
u.push(e);
const O = u.map((e) => /* @__PURE__ */ t.createElement(
y,
{
className: C({ "k-selected": a === e }),
key: e,
fillMode: "flat",
themeColor: "primary",
size: r,
rounded: null,
role: "button",
"aria-label": g(i, E) + " " + e,
"aria-current": a === e ? !0 : void 0,
onClick: (l) => M(l, e),
tabIndex: k ? -1 : void 0
},
e
)), S = u.map((e) => /* @__PURE__ */ t.createElement("option", { key: e }, e));
return /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(
"select",
{
style: { width: "5em", margin: "0px 1em", display: "inline-flex" },
className: C("k-picker k-dropdown-list k-dropdown k-rounded-md k-picker-solid", {
[`k-picker-${A.sizeMap[r] || r}`]: r,
"k-hidden": b !== "dropdown"
}),
"aria-label": g(i, D),
value: a,
onChange: (e) => x(e)
},
z,
S,
B
), /* @__PURE__ */ t.createElement("div", { className: "k-pager-numbers", style: { display: b === "numbers" ? "" : "none" } }, L, O, w));
};
export {
K as PagerNumericButtons
};