@progress/kendo-react-data-tools
Version:
Includes React Pager & React Filter component, an intuitive interface to create complex filter descriptions. KendoReact Data Tools package
269 lines (268 loc) • 8.35 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 n from "react";
import a from "prop-types";
import { PagerNumericButtons as Le } from "./PagerNumericButtons.mjs";
import { PagerInput as Be } from "./PagerInput.mjs";
import { PagerPageSizes as Oe } from "./PagerPageSizes.mjs";
import { Button as We } from "@progress/kendo-react-buttons";
import { pagerFirstPage as qe, pagerPreviousPage as Ae, pagerNextPage as Fe, pagerLastPage as $e, pagerInfo as He, pagerAriaKeyshortcuts as _e, pagerPage as je, pagerOf as Ge, pagerTotalPages as Ue } from "../messages/index.mjs";
import { useLocalization as Ve, useInternationalization as Je } from "@progress/kendo-react-intl";
import { classNames as Z, kendoThemeMaps as Qe, Keys as c, focusFirstFocusableChild as Xe, enableNavigatableContainer as Ye, disableNavigatableContainer as Ze, keepFocusInContainer as et, TABBABLE_ELEMENTS as tt } from "@progress/kendo-react-common";
import { getL10NMessage as f, translateMessage as T, getFirstButtonProps as st, getPrevButtonProps as at, getNextButtonProps as nt, getLastButtonProps as rt } from "./utils.mjs";
const ee = n.forwardRef((u, te) => {
const {
buttonCount: B = R.buttonCount,
info: se = R.info,
type: ae = R.type,
size: p = R.size,
disabled: C = R.disabled,
total: E,
skip: x,
take: k,
className: ne,
style: re,
pageSizes: O,
pageSizeValue: oe,
previousNext: ie,
responsive: w = R.responsive,
messagesMap: o,
dir: W,
navigatable: h,
adaptive: le,
adaptiveTitle: ce
} = u, l = Ve(), K = Je(), v = n.useRef({ element: null, props: u }), P = n.useRef(null), L = n.useRef(0), q = n.useRef(null), A = n.useRef(null), F = n.useRef(null), $ = n.useRef(null), H = n.useRef(null), ue = n.useRef(null), d = n.useRef([
q,
A,
F,
$,
H
]), z = n.useRef([]), [ot, ge] = n.useReducer((e) => e + 1, 0);
n.useImperativeHandle(
v,
() => ({
get element() {
return fe();
},
props: u
})
), n.useImperativeHandle(te, () => v.current);
const fe = () => P.current;
n.useEffect(() => {
const e = P.current;
if (!e)
return;
_();
const t = window.ResizeObserver, s = t && new t(_);
return s && s.observe(e), () => {
s && s.disconnect();
};
}, []);
const N = W === "rtl", i = Math.floor(x / k) + 1, m = Math.ceil((E || 0) / k), b = (e, t) => {
u.onPageChange && e > 0 && e <= m && u.onPageChange({
target: v.current,
skip: (e - 1) * u.take,
take: u.take,
syntheticEvent: t,
nativeEvent: t.nativeEvent,
targetEvent: t
});
}, de = (e) => {
const t = P.current, s = e.keyCode;
!t || !h || ((s === c.home || e.metaKey && s === c.left) && b(1, e), (s === c.end || e.metaKey && s === c.right) && b(m, e), document.activeElement === t ? (s === c.enter && (Xe(t), Ye(t)), (s === c.left || s === c.up) && b(i - 1, e), (s === c.right || s === c.down) && b(i + 1, e)) : (s === c.esc && (t.focus(), Ze(t)), et(e, t, tt)));
}, _ = () => {
const e = P.current;
if (!e)
return;
let t = 0;
const s = e.clientWidth || 0, y = parseInt(window.getComputedStyle(e).gap || "0", 10), M = Array.from(e.children).reduce((r, g) => (r += Math.ceil(g.clientWidth || 0), r), 0), I = Array.from(e.children).length;
if (t = M + (I - 1) * y, w && t > s) {
const r = [...d.current], g = r.shift();
L.current = t, d.current = r, g && (z.current = [g, ...z.current]);
} else if (w && s > L.current) {
const r = [...z.current], g = r.shift();
z.current = r, g && (d.current = [...d.current, g]), L.current = t;
}
ge();
}, me = (e, t) => {
const s = {
target: v == null ? void 0 : v.current,
syntheticEvent: t.syntheticEvent,
nativeEvent: t.nativeEvent,
targetEvent: t,
...e
};
u.onPageChange && u.onPageChange(s);
}, pe = f(qe, o), be = f(Ae, o), he = f(Fe, o), ve = f($e, o), j = f(He, o), G = f(_e, o), U = f(je, o), V = f(Ge, o), D = f(Ue, o), Re = `${l.toLanguageString(
U.messageKey,
U.defaultMessage
)} ${K.format(l.toLanguageString(D.messageKey, D.defaultMessage), [
i
])} ${l.toLanguageString(V.messageKey, V.defaultMessage)} ${K.format(
l.toLanguageString(D.messageKey, D.defaultMessage),
[m]
)}`, S = (e, t, s, y, M, I) => /* @__PURE__ */ n.createElement(
We,
{
fillMode: "flat",
themeColor: "base",
size: p,
rounded: null,
className: t,
icon: y,
svgIcon: M,
title: s,
role: "button",
"aria-disabled": I,
tabIndex: h ? -1 : void 0,
onClick: (r) => {
r.preventDefault(), b(e, r);
}
}
), Ce = O && /* @__PURE__ */ n.createElement(
Oe,
{
pageChange: me,
pageSize: k,
pageSizes: O,
value: oe,
messagesMap: o,
size: p,
navigatable: h,
pagerSizesRef: H,
pagerSizesTitleRef: $,
visibleElementsRef: d,
adaptive: le,
adaptiveTitle: ce
}
), Pe = se && d.current.length >= 4 && /* @__PURE__ */ n.createElement("span", { className: "k-pager-info", ref: A }, K.format(l.toLanguageString(j.messageKey, j.defaultMessage), [
Math.min(x + 1, E),
Math.min(x + k, E),
E
])), ye = ae === "numeric" && d.current.length === 5 ? /* @__PURE__ */ n.createElement(
Le,
{
buttonCount: B || 0,
totalPages: m,
currentPage: i,
pageChange: b,
messagesMap: o,
size: p,
navigatable: h,
pagerNumericButtonsRef: q
}
) : /* @__PURE__ */ n.createElement(
Be,
{
buttonCount: B || 0,
totalPages: m,
currentPage: i,
pageChange: b,
messagesMap: o,
size: p,
navigatable: h,
pagerInputTitleRef: F,
visibleElementsRef: d
}
);
let J, Q, X, Y;
if (ie) {
const e = T(l, pe), {
rtlClass: t,
rtlIcon: s,
isDisabledClass: y,
isDisabled: M
} = st(N, i, C);
J = S(1, y, e, t, s, M);
const I = T(l, be), {
rtlClass: r,
rtlIcon: g,
isDisabledClass: Me,
isDisabled: Ie
} = at(N, i, C);
Q = S(i - 1, Me, I, r, g, Ie);
const Ee = T(l, he), {
rtlClass: ke,
rtlIcon: ze,
isDisabledClass: Ne,
isDisabled: De
} = nt(N, i, m, C);
X = S(i + 1, Ne, Ee, ke, ze, De);
const Se = T(l, ve), {
rtlClass: Te,
rtlIcon: xe,
isDisabledClass: we,
isDisabled: Ke
} = rt(N, i, m, C);
Y = S(m, we, Se, Te, xe, Ke);
}
return /* @__PURE__ */ n.createElement(
"div",
{
ref: P,
className: Z(
"k-pager",
{
[`k-pager-${Qe.sizeMap[p] || p}`]: p,
"k-pager-responsive": w,
"k-disabled": C
},
ne
),
style: re,
role: "application",
"aria-roledescription": "pager",
dir: W,
"aria-keyshortcuts": l.toLanguageString(
G.messageKey,
G.defaultMessage
),
"aria-label": Re,
tabIndex: h ? 0 : void 0,
onKeyDown: de
},
/* @__PURE__ */ n.createElement("div", { className: Z("k-pager-numbers-wrap"), ref: ue }, J, Q, ye, X, Y),
Ce,
Pe
);
}), R = {
buttonCount: 10,
info: !0,
type: "numeric",
size: "medium",
disabled: !1,
responsive: !0
};
ee.displayName = "Pager";
ee.propTypes = {
className: a.string,
style: a.object,
total: a.number.isRequired,
skip: a.number.isRequired,
take: a.number.isRequired,
buttonCount: a.number,
info: a.bool,
type: a.oneOf(["numeric", "input"]),
pageSizes: a.oneOfType([
a.arrayOf(a.number.isRequired),
a.arrayOf(a.oneOfType([a.number.isRequired, a.string.isRequired]).isRequired)
]),
previousNext: a.bool,
onPageChange: a.func,
messagesMap: a.func,
size: a.oneOf([null, "small", "medium", "large"]),
dir: a.string,
disabled: a.bool,
responsive: a.bool,
adaptive: a.bool,
adaptiveTitle: a.string
};
export {
ee as Pager
};