azure-devops-ui/Utilities/DragDrop.min.js

React components for building web UI in Azure DevOps

import*as React from"react";import{ObservableValue}from"../Core/Observable";import{Portal}from"../Portal";import{css,getPointByEventType,Pointer}from"../Util";import{distance}from"./Position";var DragDropEffect;!function(e){e.none="none",e.move="move",e.copy="copy"}(DragDropEffect=DragDropEffect||{});class DragDropManager{constructor(){this.onEventCaptured=e=>{var t,r,a=e["type"];"pointermove"===a?this.dragInProgress?(r=this.getTargetFromEvent(e))&&(t=getPointByEventType(e),this.operation&&(this.operation.value={x:t.x,y:t.y}),dispatchCustomDragEvent("dragover",r,e,this.dataTransfer),e.preventDefault()):this.potentialDragInProgress&&(t=getPointByEventType(e),distance(this.initialCoordinates,t)>this.minimumPixelsForDrag)&&(dispatchCustomDragEvent("dragstart",this.dragSourceElement,e,this.dataTransfer),this.dataTransfer.effectAllowed===DragDropEffect.none?(this.potentialDragInProgress=!1,this.endDrag()):(this.dragInProgress=!0,this.operation&&(this.operation.value={x:t.x,y:t.y})),e.preventDefault()):"pointerup"===a&&(this.dragInProgress&&(r=this.getTargetFromEvent(e),dispatchCustomDragEvent("dragend",this.dragSourceElement,e,this.dataTransfer),r)&&this.dataTransfer.dropEffect!==DragDropEffect.none&&dispatchCustomDragEvent("drop",r,e,this.dataTransfer),this.endDrag())},this.onPointerLeave=e=>{this.dataTransfer.dropEffect=DragDropEffect.none},this.onPointerOut=e=>{e.target&&(this.dataTransfer.dropEffect=DragDropEffect.none,dispatchCustomDragEvent("dragexit",e.target,e,this.dataTransfer))},this.onPointerOver=e=>{e.target&&(this.dataTransfer.dropEffect=DragDropEffect.none,dispatchCustomDragEvent("dragenter",e.target,e,this.dataTransfer))}}beginDragOperation(e,t,r=4){return this.operation=void 0,this.dragInProgress||"pointerdown"===e.type&&(this.startDrag(e,r,t),this.initialCoordinates={x:e.clientX,y:e.clientY},Pointer.setCapture(this.onEventCaptured),document.body.addEventListener("pointerout",this.onPointerOut,!0),document.body.addEventListener("pointerover",this.onPointerOver,!0),document.body.addEventListener("pointerleave",this.onPointerLeave),this.operation=new ObservableValue({x:void 0,y:void 0})),this.operation}get isDragInProgress(){return this.dragInProgress}endDrag(){document.body.removeEventListener("pointerout",this.onPointerOut),document.body.removeEventListener("pointerover",this.onPointerOver),document.body.removeEventListener("pointerleave",this.onPointerLeave),this.dragInProgress=!1}getTargetFromEvent(e){return e.target}startDrag(e,t,r){this.potentialDragInProgress=!0,this.dragSourceElement=e.target,this.minimumPixelsForDrag=t,this.dataTransfer=r}}const dragDropManager=new DragDropManager;function beginDragOperation(e,t,r){return dragDropManager.beginDragOperation(e,t,r)}function dispatchCustomDragEvent(e,t,r,a){e=new CustomEvent(e,{bubbles:!0,detail:{dataTransfer:a,nativeEvent:r}});return t.dispatchEvent(e),e}function getDragInProgress(){return dragDropManager.isDragInProgress}const DragImage=React.memo(e=>{const{className:t,operation:r,xOffset:a=5,yOffset:n=5}=e,o=React.useRef(null),s=React.useRef(0),i=()=>{cancelAnimationFrame(s.current),s.current=requestAnimationFrame(()=>{var e,t;null!=(e=o.current)&&e.style&&r.value&&r.value.x&&r.value.y&&(e=r.value.x+a,t=r.value.y+n,o.current.style.transform=`translate3d(${e}px, ${t}px, 0)`)})};return React.useEffect(()=>(r.subscribe(i),()=>{r.unsubscribe(i)}),[]),React.createElement(React.Fragment,null,React.createElement(Portal,{className:"bolt-drag-image-portal"},React.createElement("div",{className:css(t,"bolt-drag-image depth-16 absolute flex-row flex-center scroll-hidden justify-center"),ref:o},e.children)))});export{DragDropEffect,beginDragOperation,dispatchCustomDragEvent,getDragInProgress,DragImage};