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{Observer}from"../Observer";import{Portal}from"../Portal";import{css,getPointByEventType,Pointer}from"../Util";import{distance}from"./Position";!function(e){e.none="none",e.move="move",e.copy="copy"}(DragDropEffect=DragDropEffect||{});var DragDropEffect,DragDropManager=function(){function e(){var o=this;this.onEventCaptured=function(e){var t,r,n=e.type;"pointermove"===n?o.dragInProgress?(r=o.getTargetFromEvent(e))&&(t=getPointByEventType(e),o.operation.x.value=t.x,o.operation.y.value=t.y,dispatchCustomDragEvent("dragover",r,e,o.dataTransfer),e.preventDefault()):o.potentialDragInProgress&&(t=getPointByEventType(e),distance(o.initialCoordinates,t)>o.minimumPixelsForDrag)&&(dispatchCustomDragEvent("dragstart",o.dragSourceElement,e,o.dataTransfer),o.dataTransfer.effectAllowed===DragDropEffect.none?(o.potentialDragInProgress=!1,o.endDrag()):o.dragInProgress=!0,e.preventDefault()):"pointerup"===n&&(o.dragInProgress&&(r=o.getTargetFromEvent(e),dispatchCustomDragEvent("dragend",o.dragSourceElement,e,o.dataTransfer),r)&&o.dataTransfer.dropEffect!==DragDropEffect.none&&dispatchCustomDragEvent("drop",r,e,o.dataTransfer),o.endDrag())},this.onPointerLeave=function(e){o.dataTransfer.dropEffect=DragDropEffect.none},this.onPointerOut=function(e){e.target&&(o.dataTransfer.dropEffect=DragDropEffect.none,dispatchCustomDragEvent("dragexit",e.target,e,o.dataTransfer))},this.onPointerOver=function(e){e.target&&(o.dataTransfer.dropEffect=DragDropEffect.none,dispatchCustomDragEvent("dragenter",e.target,e,o.dataTransfer))}}return e.prototype.beginDragOperation=function(e,t,r){return void 0===r&&(r=4),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={x:new ObservableValue(void 0),y:new ObservableValue(void 0)}),this.operation},Object.defineProperty(e.prototype,"isDragInProgress",{get:function(){return this.dragInProgress},enumerable:!1,configurable:!0}),e.prototype.endDrag=function(){document.body.removeEventListener("pointerout",this.onPointerOut),document.body.removeEventListener("pointerover",this.onPointerOver),document.body.removeEventListener("pointerleave",this.onPointerLeave),this.dragInProgress=!1},e.prototype.getTargetFromEvent=function(e){return e.target},e.prototype.startDrag=function(e,t,r){this.potentialDragInProgress=!0,this.dragSourceElement=e.target,this.minimumPixelsForDrag=t,this.dataTransfer=r},e}(),dragDropManager=new DragDropManager;function beginDragOperation(e,t,r){return dragDropManager.beginDragOperation(e,t,r)}function dispatchCustomDragEvent(e,t,r,n){e=new CustomEvent(e,{bubbles:!0,detail:{dataTransfer:n,nativeEvent:r}});return t.dispatchEvent(e),e}function getDragInProgress(){return dragDropManager.isDragInProgress}var DragImage=function(t){var r=t.className,e=t.operation,n=t.xOffset,o=void 0===n?5:n,n=t.yOffset,a=void 0===n?5:n;return React.createElement(Portal,{className:"bolt-drag-image-portal"},React.createElement(Observer,{x:e.x,y:e.y},function(e){return void 0!==e.x&&void 0!==e.y?React.createElement("div",{className:css(r,"bolt-drag-image depth-16 absolute flex-row flex-center scroll-hidden justify-center"),style:{left:e.x+o+"px",top:e.y+a+"px"}},t.children):null}))};export{DragDropEffect,beginDragOperation,dispatchCustomDragEvent,getDragInProgress,DragImage};