@progress/kendo-react-grid
Version:
React Data Grid (Table) provides 100+ ready-to-use data grid features. KendoReact Grid package
351 lines (350 loc) • 11.9 kB
JavaScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2026 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
"use client";
import * as x from "react";
function ke(d) {
const u = [], l = [];
for (let e = 0; e < d.length; e++) {
const f = d[e];
if (f.rowType === "groupHeader") {
for (let n = l.length - 1; n >= 0; n--)
if (l[n].level >= f.level) {
const s = l[n];
u.push({
headerIndex: s.headerIndex,
footerIndex: null,
firstChildIndex: s.headerIndex + 1,
lastChildIndex: e - 1,
level: s.level
}), l.splice(n, 1);
}
l.push({ headerIndex: e, level: f.level });
} else if (f.rowType === "groupFooter") {
for (let n = l.length - 1; n >= 0; n--)
if (l[n].level === f.level) {
const s = l[n];
u.push({
headerIndex: s.headerIndex,
footerIndex: e,
firstChildIndex: s.headerIndex + 1,
lastChildIndex: e - 1,
level: f.level
}), l.splice(n, 1);
break;
}
}
}
for (const e of l)
u.push({
headerIndex: e.headerIndex,
footerIndex: null,
firstChildIndex: e.headerIndex + 1,
lastChildIndex: d.length - 1,
level: e.level
});
const p = /* @__PURE__ */ new Map();
for (const e of u)
p.set(e.headerIndex, e);
return p;
}
function Pe(d, u, l, p, e) {
var g;
const f = [], n = e != null ? e : l, s = [];
for (const a of u.values())
if (a.headerIndex < l) {
const y = (g = a.footerIndex) != null ? g : a.lastChildIndex;
y > a.headerIndex && y >= n && s.push(a);
}
const t = /* @__PURE__ */ new Map();
for (const a of s) {
const y = t.get(a.level);
(!y || a.headerIndex > y.headerIndex) && t.set(a.level, a);
}
const c = Array.from(t.keys()).sort((a, y) => a - y);
for (const a of c) {
const y = t.get(a);
f.push({ item: d[y.headerIndex], flatIndex: y.headerIndex });
}
return f;
}
function Ce(d, u, l, p) {
const e = [], f = [];
for (const t of u.values())
t.footerIndex !== null && t.footerIndex > p && t.headerIndex <= p && f.push(t);
const n = /* @__PURE__ */ new Map();
for (const t of f) {
const c = n.get(t.level);
(!c || t.footerIndex < c.footerIndex) && n.set(t.level, t);
}
const s = Array.from(n.keys()).sort((t, c) => c - t);
for (const t of s) {
const c = n.get(t);
e.push({ item: d[c.footerIndex], flatIndex: c.footerIndex });
}
return e;
}
function X(d, u) {
if (d.length !== u.length)
return !0;
for (let l = 0; l < d.length; l++)
if (d[l].flatIndex !== u[l].flatIndex)
return !0;
return !1;
}
function He(d, u) {
const l = d.querySelectorAll("tbody > tr");
let p = 0, e = !1;
for (let f = 0; f < l.length && f < u.length; f++) {
const n = l[f], s = n.offsetHeight || n.getBoundingClientRect().height, t = u[f];
if (t < 0) {
e = !0;
const c = -t, g = Math.max(s - c, 0);
p += g, g <= 0 ? (n.style.display = "none", n.style.transform = "", n.style.clipPath = "") : (n.style.display = "", n.style.transform = `translateY(${t}px)`, n.style.clipPath = `inset(${c}px 0 0 0)`);
} else
p += s, n.style.display = "", n.style.transform = "", n.style.clipPath = "";
}
d.style.height = e ? p + "px" : "";
}
function be(d, u) {
const l = d.querySelectorAll("tbody > tr");
let p = 0, e = !1, f = 0;
const n = [];
for (let s = 0; s < l.length && s < u.length; s++) {
const t = l[s], c = t.offsetHeight || t.getBoundingClientRect().height;
n.push(c);
const g = u[s];
if (g > 0) {
e = !0;
const a = Math.max(c - g, 0);
p += a, f += c - a;
} else
p += c;
}
for (let s = 0; s < l.length && s < u.length; s++) {
const t = l[s], c = u[s], g = n[s];
c > 0 ? Math.max(g - c, 0) <= 0 ? (t.style.display = "", t.style.transform = "", t.style.clipPath = "inset(0 0 100% 0)") : (t.style.display = "", t.style.transform = "", t.style.clipPath = `inset(0 0 ${c}px 0)`) : (t.style.display = "", t.style.transform = e ? `translateY(${-f}px)` : "", t.style.clipPath = "");
}
d.style.height = e ? p + "px" : "";
}
function Fe(d) {
const {
enabled: u,
enabledFooters: l,
flatData: p,
containerRef: e,
tableBodyRef: f,
isGrouped: n,
virtualSkipRef: s,
rowHeight: t,
rowHeightServiceRef: c
} = d, g = u && n, a = !!l && n, y = x.useRef([]), Z = x.useRef([]), v = x.useRef(null), [re, le] = x.useState([]), N = x.useRef([]), _ = x.useRef([]), R = x.useRef(null), [ce, ie] = x.useState([]), ee = x.useRef(!1), te = x.useRef(!1);
x.useLayoutEffect(() => {
ee.current && v.current && Z.current.length > 0 && (He(v.current, Z.current), ee.current = !1), v.current && e.current && (v.current.scrollLeft = e.current.scrollLeft);
}, [re]), x.useLayoutEffect(() => {
te.current && R.current && _.current.length > 0 && (be(R.current, _.current), te.current = !1), R.current && e.current && (R.current.scrollLeft = e.current.scrollLeft);
}, [ce]);
const fe = x.useRef(() => {
});
fe.current = () => {
var me, xe;
if (!g && !a)
return;
const b = p, k = ke(b);
if (k.size === 0)
return;
const O = /* @__PURE__ */ new Map();
if (a)
for (const o of k.values())
o.footerIndex !== null && O.set(o.footerIndex, o);
const F = e.current, q = f.current;
if (!F || !q)
return;
const w = F.scrollTop, $ = F.clientHeight, E = q.children;
if (E.length === 0)
return;
const T = c == null ? void 0 : c.current, Q = t || 36, h = (s == null ? void 0 : s.current) || 0, B = F.getBoundingClientRect(), A = q.getBoundingClientRect().top - B.top + w, P = E.length, Y = new Array(P), U = new Array(P);
for (let o = 0; o < P; o++) {
const r = E[o];
Y[o] = A + r.offsetTop, U[o] = r.offsetHeight;
}
const ne = (o) => {
const r = o - h;
return r >= 0 && r < P ? U[r] : T && o >= 0 && o < b.length ? T.height(o) : Q;
}, ae = (o) => {
const r = o - h;
if (r >= 0 && r < P)
return Y[r];
if (T && o >= 0 && o < b.length)
return T.offset(o);
}, we = (o) => {
let r = 0, i = P;
for (; r < i; ) {
const m = r + i >> 1;
Y[m] < o ? r = m + 1 : i = m;
}
return r;
}, ue = (o) => {
const r = we(o);
return r < P ? h + r : h;
}, de = (o) => {
let r = 0, i = P - 1;
for (; r <= i; ) {
const m = r + i >> 1;
Y[m] + U[m] <= o ? r = m + 1 : i = m - 1;
}
return i >= 0 ? h + i : b.length - 1;
}, he = Math.min(ue(w), b.length - 1);
let z = he;
const ge = (o) => {
const r = o.querySelectorAll("tbody > tr");
for (let i = 0; i < r.length; i++) {
const m = r[i];
m.style.transform = "", m.style.clipPath = "", m.style.display = "";
}
o.style.height = "";
};
if (g && v.current) {
let o = 0, r = [], i = [];
const m = (C) => {
var H;
const M = [];
let I = 0;
for (const L of C) {
const S = ne(L);
let V = 0;
const G = k.get(L);
if (G) {
const W = (H = G.footerIndex) != null ? H : G.lastChildIndex + 1, J = ae(W);
if (J !== void 0) {
const K = I + S, Ie = J - w;
Ie < K && (V = Ie - K);
}
}
M.push(V), I += Math.max(S + V, 0);
}
return { totalHeight: I, offsets: M };
}, j = /* @__PURE__ */ new Set();
for (; ; ) {
z = Math.min(
ue(w + Math.max(o, 0)),
b.length - 1
);
const C = j.has(z);
j.add(z);
const M = Math.min(
de(w + $),
b.length - 1
), I = Pe(
b,
k,
z,
M,
he
), H = m(I.map((S) => S.flatIndex)), L = !X(I, i) && Math.abs(H.totalHeight - o) < 1;
if (i = I, o = H.totalHeight, r = H.offsets, L || C)
break;
}
const oe = i.length > 0, se = y.current, D = X(i, se);
oe ? D ? (y.current = i, Z.current = r, ee.current = !0) : (v.current.style.display = "", He(v.current, r)) : (v.current.style.display = "none", ge(v.current)), D && (le(i), y.current = i);
}
if (a && R.current) {
let o = 0, r = [], i = [];
const m = (C) => {
const M = [];
let I = 0;
for (let H = C.length - 1; H >= 0; H--) {
const L = C[H], S = ne(L);
let V = 0;
const G = O.get(L);
if (G) {
const W = ae(G.headerIndex);
if (W !== void 0) {
const J = W + ne(G.headerIndex), K = w + $ - I - S;
J > K && (V = J - K);
}
}
M[H] = V, I += Math.max(S - V, 0);
}
return { totalHeight: I, offsets: M };
}, j = /* @__PURE__ */ new Set();
for (; ; ) {
const C = Math.min(
de(w + $ - o),
b.length - 1
), M = j.has(C);
j.add(C);
const I = Ce(
b,
k,
z,
C
), H = m(I.map((S) => S.flatIndex)), L = !X(I, i) && Math.abs(H.totalHeight - o) < 1;
if (i = I, o = H.totalHeight, r = H.offsets, L || M)
break;
}
const oe = i.length > 0, se = N.current, D = X(i, se);
oe ? D ? (N.current = i, _.current = r, te.current = !0) : (R.current.style.display = "", be(R.current, r)) : (R.current.style.display = "none", ge(R.current)), D && (ie(i), N.current = i);
}
const ye = ((me = v.current) == null ? void 0 : me.offsetHeight) || 0, pe = ((xe = R.current) == null ? void 0 : xe.offsetHeight) || 0;
F.style.scrollPaddingTop = ye > 0 ? ye + "px" : "", F.style.scrollPaddingBottom = pe > 0 ? pe + "px" : "";
};
const ve = x.useCallback(() => fe.current(), []), Re = x.useCallback(
(b) => {
var Q;
if (!g)
return;
const k = y.current.find(
(h) => {
var B, A;
return ((B = h.item.group) == null ? void 0 : B.field) === b.field && ((A = h.item.group) == null ? void 0 : A.value) === b.value;
}
);
if (!k)
return;
const O = e.current;
if (!O)
return;
let F = 0;
const q = t || 36, w = (Q = v.current) == null ? void 0 : Q.querySelectorAll("tbody > tr"), $ = y.current;
for (let h = 0; h < $.length; h++)
if ($[h].item.level < k.item.level) {
const B = w && h < w.length && w[h].offsetHeight || q;
F += B;
}
const E = c == null ? void 0 : c.current;
let T;
if (E)
T = E.offset(k.flatIndex);
else {
const h = f.current, B = (s == null ? void 0 : s.current) || 0, A = k.flatIndex - B;
if (h && A >= 0 && A < h.children.length) {
const P = h.children[A], Y = O.getBoundingClientRect();
T = h.getBoundingClientRect().top - Y.top + O.scrollTop + P.offsetTop;
}
}
T !== void 0 && (O.scrollTop = T - F);
},
[g, e, t, c, f, s]
);
return x.useEffect(() => {
g || (y.current = [], le([])), a || (N.current = [], ie([])), !g && !a && e.current && (e.current.style.scrollPaddingTop = "", e.current.style.scrollPaddingBottom = "");
}, [g, a, e]), {
stickyHeaderItems: re,
stickyHeaderRef: v,
stickyFooterItems: ce,
stickyFooterRef: R,
scrollToStickyGroup: Re,
update: ve
};
}
export {
ke as buildGroupRangeMap,
Ce as computeStickyFooterItems,
Pe as computeStickyItems,
Fe as useStickyGroups
};