@progress/kendo-react-grid
Version:
React Data Grid (Table) provides 100+ ready-to-use data grid features. KendoReact Grid package
133 lines (132 loc) • 5.04 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 e from "react";
import { GridContext as H } from "../utils/GridContext.mjs";
import { useDraggable as _, classNames as x, SvgIcon as j } from "@progress/kendo-react-common";
import { dropDirection as o, getOffset as A } from "./utils.mjs";
import L from "react-dom";
import { cancelIcon as w, insertMiddleIcon as W } from "@progress/kendo-svg-icons";
import { cloneReactElement as X } from "../utils/index.mjs";
const q = {
zIndex: "19000",
position: "absolute",
display: "none",
visibility: "hidden"
}, J = {
zIndex: "20000",
display: "flex",
position: "fixed",
visibility: "hidden",
pointerEvents: "none"
}, se = (b) => {
const { rowReorderSettings: a, columns: S, unstyled: y } = b, {
rowReorder: T,
reorderRowDragTargetRef: u,
reorderRowDropTargetRef: i,
activeDragRowDataItemRef: d,
tableBodyElementRef: k
} = e.useContext(H), [N, C] = e.useState(!1), [O, P] = e.useState(w), D = e.useRef(null), f = e.useRef(null), c = e.useRef(null), h = e.useRef(null), p = e.useRef(!1), m = e.useRef(null), R = e.useRef(null), E = typeof a == "object" ? a.enabled : a;
e.useEffect(() => {
k.current = D.current;
}, []), _(D, {
onPress: (r) => {
var s;
const t = r.originalEvent.target;
t.closest(".k-drag-cell") && (h.current = r.offsetY, p.current = !0, u.current = t.closest(".k-table-row"), R.current = (s = u.current) == null ? void 0 : s.parentElement);
},
onDragStart: (r) => {
!p.current || !E || !d.current || (u.current && (u.current.style.userSelect = "none"), C(!0));
},
onDrag: (r) => {
if (!p.current && !f.current)
return;
const { clientX: t, clientY: n } = r, s = h.current, g = { x: t, y: n - s };
f.current && (f.current.style.left = `${g.x}px`, f.current.style.top = `${g.y}px`, f.current.style.visibility = "visible"), M(r);
},
onDragEnd: (r) => {
var n;
if (!E || !d.current)
return;
C(!1);
const t = Number((n = i.current) == null ? void 0 : n.getAttribute("absolute-row-index"));
T(r, t, m.current), p.current = !1, R.current = null;
}
});
const M = (r) => {
m.current = V(r), Y();
}, Y = () => {
var s;
if (m.current === o.forbidden || !i.current) {
B();
return;
}
F();
const r = A(i.current);
let t = r.top;
const n = r.left + (((s = c.current) == null ? void 0 : s.offsetWidth) || 0) / 2;
m.current === o.after && (t += i.current.offsetHeight), c.current && (c.current.style.top = `${t}px`, c.current.style.left = `${n}px`, c.current.style.visibility = "visible");
}, B = () => {
c.current && (c.current.style.display = "none");
}, F = () => {
c.current && (c.current.style.display = "");
}, $ = () => {
if (d.current) {
if (a.dragClue) {
if (typeof a.dragClue == "string")
return a.dragClue;
} else {
const r = S.find((n) => !n.hidden && n.columnType === "data");
return d.current[r.field];
}
return a.dragClue(d.current);
}
}, V = (r) => {
var v;
if (i.current === u.current || !i.current)
return o.forbidden;
if (((v = i.current) == null ? void 0 : v.parentElement) !== R.current)
return o.forbidden;
const t = i.current.getBoundingClientRect(), s = t.height / 2, g = r.clientY, I = t.top;
let l = null;
g < I + s ? l = o.before : g >= I + t.height - s && (l = o.after), l === o.before && i.current === u.current.nextElementSibling ? l = o.forbidden : l === o.after && i.current === u.current.previousElementSibling && (l = o.forbidden);
const G = l === o.forbidden ? w : W;
return P(G), l;
}, z = e.useMemo($, [d.current]);
return /* @__PURE__ */ e.createElement(e.Fragment, null, N && L.createPortal(
/* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(
"div",
{
ref: c,
style: q,
className: x(
y.rowReorder({ dropIndicatorMain: !0, dropIndicatorDirection: !0 })
)
},
/* @__PURE__ */ e.createElement("div", { className: "k-drop-hint-start" }),
/* @__PURE__ */ e.createElement("div", { className: "k-drop-hint-line" })
), /* @__PURE__ */ e.createElement(
"div",
{
ref: f,
style: J,
className: x(y.rowReorder({ dragClueMain: !0, dragClueOperation: !0 }))
},
/* @__PURE__ */ e.createElement(j, { className: "k-drag-status", icon: O }),
z
)),
document.body
), X(b.children, {
ref: D
}));
};
export {
se as GridReorderableRowsContainer,
q as dropIndicatorStyles,
J as hintClueStyles
};