@progress/kendo-react-treelist/rows/TreeListDraggableRow.js

React TreeList enables the display of self-referencing tabular data. KendoReact TreeList package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("react"),v=require("react-dom"),i=require("@progress/kendo-react-common"),D=require("./TreeListRow.js"),c=require("@progress/kendo-svg-icons");function d(e){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:()=>e[t]})}}return r.default=e,Object.freeze(r)}const a=d(f),b=d(v),w=e=>e.visible&&i.canUseDOM?b.createPortal(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"}},a.createElement(i.IconWrap,{className:i.classNames("k-drag-status"),name:e.allowDrop?"plus":"cancel",icon:e.allowDrop?c.plusIcon:c.cancelIcon}),e.text),document.body):null;function O(e,r,t){if(!e.originalEvent)return-1;const n=u(e,"tr",t);if(n){const o=r?r.childNodes:[];for(let s=0;s<o.length;s++)if(o[s]===n)return s}return-1}function u(e,r,t){const n=t?t.elementFromPoint(e.clientX,e.clientY):null;return r&&n?n.closest(r):null}const R="k-grid k-grid-md",g={visible:!1,top:0,left:0,text:"",allowDrop:!1};class E extends a.Component{constructor(){super(...arguments),this.state={clueProps:{...g}},this.draggable=a.createRef(),this.dragged=null,this.draggedOver=null,this.onPress=()=>this.dragged=this.props.level,this.onDrag=r=>{if(!i.canUseDOM)return;const t=this.draggable.current&&this.draggable.current.element,n=t?t.ownerDocument:document;if(!n)return;const o=r.event,s=this.dragged;if(t&&s){!o.isTouch&&o.type!=="scroll"&&o.originalEvent.preventDefault();const l=this.props.levels[O(o,t.parentNode,n)];this.draggedOver=l;const p=l?!s.every((h,m)=>h===l[m]):!!u(o,R,n);this.setState({clueProps:{visible:!0,top:o.pageY+10,left:o.pageX,text:t.innerText,allowDrop:p}}),this.props.onDrag&&this.props.onDrag.call(void 0,{nativeEvent:o.originalEvent,dragged:s,draggedOver:l,draggedItem:this.props.dataItem})}},this.onRelease=r=>{const t=r.event;if(this.dragged){const n=[...this.dragged],o=this.draggedOver&&[...this.draggedOver],s=this.state.clueProps.allowDrop;this.dragged=null,this.draggedOver=null,this.setState({clueProps:{...g}});const l=this.props.dataItem;s&&this.props.onDrop&&this.props.onDrop.call(void 0,{nativeEvent:t.originalEvent,dragged:n,draggedOver:o,draggedItem:l})}}}render(){const{clueProps:r}=this.state;return a.createElement(a.Fragment,null,a.createElement(i.Draggable,{ref:this.draggable,onPress:this.onPress,onDrag:this.onDrag,onRelease:this.onRelease},a.createElement(D.TreeListRow,{...this.props})),a.createElement(w,{...r}))}}exports.TreeListDraggableRow=E;