@progress/kendo-react-grid/components/GridDraggableRowsContainer.js

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