azure-devops-ui/Components/List/ListDragSourceBehavior.min.js

React components for building web UI in Azure DevOps

import"../../CommonImports";import"../../Core/core.css";import"./DropdownList.css";import"./List.css";import"./ListDropIndicator.css";import*as React from"react";import{beginDragOperation,DragDropEffect,DragImage}from"../../Utilities/DragDrop";import{cellFromEvent}from"./List";var ListDragSourceBehavior=function(){function t(t){var s=this;this.initialize=function(t,e,r){s.dragDroppableUI=e,s.eventDispatch=r,s.eventDispatch.addEventListener("pointerdown",s.onPointerDown),s.eventDispatch.addEventListener("dragstart",s.onDragStart),s.eventDispatch.addEventListener("dragend",s.onDragEnd),s.eventDispatch.addEventListener("dragover",s.onDragging),s.itemProvider=t.itemProvider},this.onDragging=function(t){s.options.onDragging?s.options.onDragging(t):s.onDraggingDefault()},this.onDraggingDefault=function(){var t,e,r,o,n,a,i=null==(i=null==(i=s.dragDroppableUI)?void 0:i.currentElement)?void 0:i.current;i&&(o=(t=i.getBoundingClientRect()).top,t=t.bottom,e=.05*i.offsetHeight,r=null==(r=null==(r=s.operation)?void 0:r.y)?void 0:r.value)&&(o=r<o+e,n=0<i.scrollTop,a=i.scrollTop+i.offsetHeight<i.scrollHeight,t-e<r&&a?i.scrollTo({top:i.scrollTop+20}):o&&n&&i.scrollTo({top:i.scrollTop-20}))},this.onDragEnd=function(t){0<=cellFromEvent(t).rowIndex&&s.options.onDragEnd&&s.options.onDragEnd(t),s.dragDroppableUI.removeOverlay("drag-source-item"),s.dragImageData=void 0},this.onDragStart=function(t){var e;t.detail.dataTransfer?0<=(e=cellFromEvent(t).rowIndex)&&(s.options.onDragStart&&s.options.onDragStart(t),t.detail.dataTransfer.effectAllowed!==DragDropEffect.none)&&(s.dragDroppableUI.addOverlay("drag-source-item",e,s.renderDragSourceItemOverlay),void 0===s.dragImageData)&&(s.dragImageData={image:s.options.renderDragImage(t)}):(t.stopPropagation(),t.preventDefault())},this.onPointerDown=function(t){0===t.button&&s.beginDrag(t)},this.renderDragSourceItemOverlay=function(t){return React.createElement(React.Fragment,null,React.createElement("div",{className:"bolt-list-drag-source-item flex-grow"}),s.operation&&s.dragImageData&&React.createElement(DragImage,{operation:s.operation},s.dragImageData.image))},this.setDragImage=function(t,e,r){s.dragImageData={image:t,xOffset:e,yOffset:r}},this.options=t}return t.prototype.componentDidUpdate=function(t){this.itemProvider=t.itemProvider},t.prototype.componentWillUnmount=function(){var t;null!=(t=this.eventDispatch)&&t.removeEventListener("pointerdown",this.onPointerDown),null!=(t=this.eventDispatch)&&t.removeEventListener("dragstart",this.onDragStart),null!=(t=this.eventDispatch)&&t.removeEventListener("dragend",this.onDragEnd),null!=(t=this.eventDispatch)&&t.removeEventListener("dragover",this.onDragging)},t.prototype.beginDrag=function(t){var e,r=cellFromEvent(t).rowIndex;this.itemProvider&&0<=r&&(e=this.itemProvider.value[r],this.operation=beginDragOperation(t,{data:e,dropEffect:DragDropEffect.none,secondaryData:{index:r,sourceId:this.options.id},setDragImage:this.setDragImage,type:this.options.type}))},t}();export{ListDragSourceBehavior};