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