@progress/kendo-react-grid
Version:
React Data Grid (Table) provides 100+ ready-to-use data grid features. KendoReact Grid package
113 lines (112 loc) • 5.66 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 h from "react";
import { getIndex as a } from "@progress/kendo-react-data-tools";
class g {
constructor(r, n, i) {
this.refDragElementClue = h.createRef(), this.refDropElementClue = h.createRef(), this.columns = [], this.reorderable = !1, this.groupable = !1, this.startColumn = -1, this.startGroup = -1, this.currentColumn = -1, this.currentGroup = -1, this.groupPanelDivElement = null, this.refGroupPanelDiv = (t) => {
this.groupPanelDivElement = t && t.children ? t.children[0] : t;
}, this.pressHandler = (t, e) => {
const u = this.getColumnIndex(t, e);
if (this.startGroup = this.getGroupIndex(t), u >= 0) {
const s = this.columns[u];
(s.reorderable && this.reorderable || s.groupable && this.groupable) && (this.startColumn = u);
}
}, this.dragHandler = (t, e) => {
var l, o;
if (t.isTouch || t.originalEvent.preventDefault(), t.originalEvent.stopPropagation(), this.startColumn === -1 && this.startGroup === -1)
return;
this.currentColumn = this.getColumnIndex(t, e), this.currentGroup = this.isTargetGroupingContainer(t) ? this.getCurrentGroupsLength : this.getGroupIndex(t);
const u = !this.isValid();
u && (this.currentColumn = -1, this.currentGroup = -1);
let s = null;
this.currentColumn >= 0 ? s = e.children[this.columns[this.currentColumn].index] : this.isTargetGroupingContainer(t) ? s = this.getEventTarget(t) : s = (o = (l = this.groupPanelDivElement) == null ? void 0 : l.children[this.currentGroup]) != null ? o : null, this.updateDragElementClue(t, e, s, u), this.updateDropElementClue(t, e, s, u);
}, this.releaseHandler = (t) => {
const e = this.startColumn, u = this.currentColumn, s = this.startGroup, l = this.currentGroup;
t.originalEvent.preventDefault(), this.dropElementClue && this.dropElementClue.setState({ visible: !1 }), this.dragElementClue && this.dragElementClue.setState({ visible: !1 });
const o = this.isValid();
this.startColumn = this.startGroup = this.currentColumn = this.currentGroup = -1, o && (e >= 0 && u >= 0 ? this.columnReorder(e, u, t.originalEvent) : s >= 0 && l >= 0 ? this.groupReorder(s, l, t.originalEvent) : e >= 0 && l >= 0 && this.columnToGroup(e, l, t.originalEvent));
}, this.columnReorder = r, this.groupReorder = n, this.columnToGroup = i;
}
get dragClueRef() {
return this.refDragElementClue;
}
get dropClueRef() {
return this.refDropElementClue;
}
get getCurrentGroupsLength() {
const r = this.groupPanelDivElement && this.groupPanelDivElement.children;
return r && r.length || 0;
}
get dragElementClue() {
return this.refDragElementClue.current;
}
get dropElementClue() {
return this.refDropElementClue.current;
}
getColumnIndex(r, n) {
if (!n || n.parentElement === this.groupPanelDivElement)
return -1;
const i = a(r, n);
if (i === -1)
return -1;
for (let t = 0; t < n.parentNode.children.length; t++)
if (n.parentNode.children[t] === n)
return this.columns.findIndex((e) => e.index === i && e.depth === t);
return -1;
}
getEventTarget(r) {
var t, e;
const n = r.originalEvent, i = (t = n.target) == null ? void 0 : t.ownerDocument;
return (e = i == null ? void 0 : i.elementFromPoint(n.clientX, n.clientY)) != null ? e : null;
}
isTargetGroupingContainer(r) {
var i, t;
const n = this.getEventTarget(r);
return (t = (i = n == null ? void 0 : n.classList) == null ? void 0 : i.contains("k-grouping-drop-container")) != null ? t : !1;
}
getGroupIndex(r) {
return a(r, this.groupPanelDivElement);
}
isValid() {
return this.startGroup >= 0 ? this.currentGroup >= 0 && this.currentGroup !== this.startGroup : this.startColumn === -1 ? !1 : this.currentGroup >= 0 ? this.columns[this.startColumn].groupable === !0 && this.groupable === !0 : this.reorderable === !0 && this.currentColumn >= 0 && this.currentColumn !== this.startColumn && this.columns[this.startColumn].reorderable === !0 && this.columns[this.currentColumn].parentIndex === this.columns[this.startColumn].parentIndex;
}
updateDragElementClue(r, n, i, t) {
if (!this.dragElementClue)
return;
const e = this.startColumn >= 0 ? n.children[this.columns[this.startColumn].index].innerText : n.innerText;
this.dragElementClue.setState({
visible: !0,
top: r.pageY + 10,
left: r.pageX,
innerText: e,
status: t || !i ? "k-i-cancel" : "k-i-plus"
});
}
updateDropElementClue(r, n, i, t) {
if (!this.dropElementClue)
return;
if (t || !i) {
this.dropElementClue.setState({ visible: !1 });
return;
}
const e = i.getBoundingClientRect(), s = (i.closest(".k-grouping-header") || i).getBoundingClientRect();
let l = e.left + r.pageX - r.clientX - 6;
!this.isTargetGroupingContainer(r) && (this.currentColumn > this.startColumn || this.currentGroup > this.startGroup && this.startGroup !== -1) && this.dir !== "rtl" && (l += e.width);
const o = s.top + r.pageY - r.clientY;
this.dropElementClue.setState({
visible: !0,
top: o,
left: l,
height: this.currentColumn >= 0 ? n.clientHeight : s.height
});
}
}
export {
g as CommonDragLogic
};