@progress/kendo-react-treelist
Version:
React TreeList enables the display of self-referencing tabular data. KendoReact TreeList package
119 lines (118 loc) • 3.84 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 a from "react";
import * as h from "react-dom";
import { canUseDOM as g, Draggable as m, IconWrap as f, classNames as v } from "@progress/kendo-react-common";
import { TreeListRow as D } from "./TreeListRow.mjs";
import { plusIcon as w, cancelIcon as E } from "@progress/kendo-svg-icons";
const b = (e) => e.visible && g ? h.createPortal(
/* @__PURE__ */ a.createElement(
"div",
{
className: "k-header k-drag-clue",
style: {
display: "block",
position: "absolute",
zIndex: 2e4,
padding: "8px 12px",
top: e.top + "px",
left: e.left + "px"
}
},
/* @__PURE__ */ a.createElement(
f,
{
className: v("k-drag-status"),
name: e.allowDrop ? "plus" : "cancel",
icon: e.allowDrop ? w : E
}
),
e.text
),
document.body
) : null;
function x(e, s, r) {
if (!e.originalEvent)
return -1;
const o = d(e, "tr", r);
if (o) {
const t = s ? s.childNodes : [];
for (let n = 0; n < t.length; n++)
if (t[n] === o)
return n;
}
return -1;
}
function d(e, s, r) {
const o = r ? r.elementFromPoint(e.clientX, e.clientY) : null;
return s && o ? o.closest(s) : null;
}
const P = "k-grid k-grid-md", i = {
visible: !1,
top: 0,
left: 0,
text: "",
allowDrop: !1
};
class k extends a.Component {
constructor() {
super(...arguments), this.state = {
clueProps: { ...i }
}, this.draggable = a.createRef(), this.dragged = null, this.draggedOver = null, this.onPress = () => this.dragged = this.props.level, this.onDrag = (s) => {
if (!g)
return;
const r = this.draggable.current && this.draggable.current.element, o = r ? r.ownerDocument : document;
if (!o)
return;
const t = s.event, n = this.dragged;
if (r && n) {
!t.isTouch && t.type !== "scroll" && t.originalEvent.preventDefault();
const l = this.props.levels[x(t, r.parentNode, o)];
this.draggedOver = l;
const c = l ? !n.every((p, u) => p === l[u]) : !!d(t, P, o);
this.setState({
clueProps: {
visible: !0,
top: t.pageY + 10,
left: t.pageX,
text: r.innerText,
allowDrop: c
}
}), this.props.onDrag && this.props.onDrag.call(void 0, {
nativeEvent: t.originalEvent,
dragged: n,
draggedOver: l,
draggedItem: this.props.dataItem
});
}
}, this.onRelease = (s) => {
const r = s.event;
if (this.dragged) {
const o = [...this.dragged], t = this.draggedOver && [...this.draggedOver], n = this.state.clueProps.allowDrop;
this.dragged = null, this.draggedOver = null, this.setState({ clueProps: { ...i } });
const l = this.props.dataItem;
n && this.props.onDrop && this.props.onDrop.call(void 0, {
nativeEvent: r.originalEvent,
dragged: o,
draggedOver: t,
draggedItem: l
});
}
};
}
/**
* @hidden
*/
render() {
const { clueProps: s } = this.state;
return /* @__PURE__ */ a.createElement(a.Fragment, null, /* @__PURE__ */ a.createElement(m, { ref: this.draggable, onPress: this.onPress, onDrag: this.onDrag, onRelease: this.onRelease }, /* @__PURE__ */ a.createElement(D, { ...this.props })), /* @__PURE__ */ a.createElement(b, { ...s }));
}
}
export {
k as TreeListDraggableRow
};