@progress/kendo-react-grid
Version:
React Data Grid (Table) provides 100+ ready-to-use data grid features. KendoReact Grid package
91 lines (90 loc) • 4.12 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
*-------------------------------------------------------------------------------------------
*/
import * as n from "react";
import { firefox as c, firefoxMaxHeight as f } from "./utils/index.mjs";
class u {
constructor() {
this.table = null, this.tableBody = null, this.container = null, this.scrollHeightContainer = null, this.total = 0, this.scrollableVirtual = !1, this.pageSize = 0, this.PageChange = null, this.fixedScroll = !1, this.tableTransform = "", this.reactVersion = Number.parseFloat(n.version), this.scrollSyncing = !1, this.firstToLoad = 0, this.lastScrollTop = 0, this.firstLoaded = 0, this.lastLoaded = 0, this.scrollHandler = this.scrollHandler.bind(this);
}
reset() {
this.firstToLoad = 0, this.firstLoaded = 0, this.lastLoaded = 0, this.rowHeightService = void 0, !this.fixedScroll && this.container && this.container.scrollTop !== 0 && (this.scrollSyncing = !0, this.container.scrollTop = 0, this.lastScrollTop = 0, this.translate(0, !0));
}
scrollHandler(t) {
if (this.scrollSyncing) {
this.scrollSyncing = !1;
return;
}
if (!this.scrollableVirtual || !this.container || !this.table || !this.rowHeightService || !this.container)
return;
const i = this.container.scrollTop, e = this.lastScrollTop >= i, o = !e;
this.lastScrollTop = i;
const r = this.container.offsetHeight;
let s = this.rowHeightService.index(i);
const a = this.rowHeightService.index(i + r), h = Math.max(s + this.pageSize - this.total, 0);
if (s = Math.max(s - h, 0), o && a >= this.lastLoaded && this.lastLoaded < this.total - 1)
this.firstToLoad = s, this.loadPage(t);
else if (e && s < this.firstToLoad) {
const l = Math.max(Math.floor(this.pageSize * 0.3) - h, 0);
this.firstToLoad = Math.max(s - l, 0), this.loadPage(t);
}
}
update() {
var i;
const t = this.getItemHeights();
if (this.firstLoaded > this.firstToLoad) {
const e = Math.min(this.firstLoaded - this.firstToLoad, this.pageSize), o = this.getTotalHeight(e, t), r = this.getExpectedTotalHeight(e), s = o - r;
s !== 0 && this.adjustScroll(s);
}
(i = this.rowHeightService) == null || i.update(this.firstToLoad, t), this.setScrollHeightContainerHeight(), this.firstLoaded = this.firstToLoad, this.lastLoaded = this.firstLoaded + t.length - 1;
}
loadPage(t) {
this.rowHeightService && (this.translate(this.rowHeightService.offset(this.firstToLoad)), this.changePage(this.firstToLoad, t));
}
translate(t, i) {
this.scrollableVirtual && this.table && (this.reactVersion <= 17 || i ? this.table.style.transform = "translateY(" + t + "px)" : this.tableTransform = "translateY(" + t + "px)");
}
changePage(t, i) {
this.PageChange && this.PageChange(
{
skip: Math.max(0, t),
take: this.pageSize
},
i
);
}
adjustScroll(t) {
this.scrollSyncing = !0, this.container && (this.container.scrollTop += t);
}
setScrollHeightContainerHeight() {
var t;
if (this.scrollableVirtual && this.scrollHeightContainer) {
let i = ((t = this.rowHeightService) == null ? void 0 : t.totalHeight()) || 0;
i = c ? Math.min(f, i) : i, this.scrollHeightContainer.style.height = i + "px";
}
}
getItemHeights() {
const t = [];
return this.tableBody && Array.from(this.tableBody.children).forEach((i) => {
const e = i.getBoundingClientRect().height;
i.classList.contains("k-detail-row") ? t[t.length - 1] += e : t.push(e);
}), t;
}
getTotalHeight(t, i) {
return i.slice(0, t).reduce((e, o) => e + o, 0);
}
getExpectedTotalHeight(t) {
const i = this.rowHeightService;
if (!i)
return 0;
const e = this.firstToLoad + (t - 1);
return i.offset(e) + i.height(e) - i.offset(this.firstToLoad);
}
}
export {
u as VirtualScroll
};