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