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";const DragAndDropParentAutocrollClassName="dnd-behaviors-parent-autoscroll-enabled";class ListDragSourceBehavior{constructor(t){this._scrollableParent=null,this._isScrollableParentCached=!1,this.initialize=(t,e,r)=>{this.dragDroppableUI=e,this.eventDispatch=r,this.eventDispatch.addEventListener("pointerdown",this.onPointerDown),this.eventDispatch.addEventListener("dragstart",this.onDragStart),this.eventDispatch.addEventListener("dragend",this.onDragEnd),this.eventDispatch.addEventListener("dragover",this.onDragging),this.itemProvider=t.itemProvider,this._scrollableParent=null,this._isScrollableParentCached=!1},this.onDragging=t=>{this.options.onDragging?this.options.onDragging(t):this.onDraggingDefault()},this.onDraggingDefault=()=>{var t,e,r,a,o,i,n=document.body.classList.contains(DragAndDropParentAutocrollClassName)?this.getScrollableContainer():null==(n=null==(n=this.dragDroppableUI)?void 0:n.currentElement)?void 0:n.current;n&&({top:a,bottom:t}=n.getBoundingClientRect(),e=.05*n.offsetHeight,r=null==(r=this.operation)?void 0:r.value.y)&&(a=r<a+e,o=0<n.scrollTop,i=n.scrollTop+n.offsetHeight<n.scrollHeight,t-e<r&&i?n.scrollTo({top:n.scrollTop+20}):a&&o&&n.scrollTo({top:n.scrollTop-20}))},this.onDragEnd=t=>{0<=cellFromEvent(t).rowIndex&&this.options.onDragEnd&&this.options.onDragEnd(t),this.dragDroppableUI.removeOverlay("drag-source-item"),this.dragImageData=void 0},this.onDragStart=t=>{var e;t.detail.dataTransfer?0<=(e=cellFromEvent(t).rowIndex)&&(this.options.onDragStart&&this.options.onDragStart(t),t.detail.dataTransfer.effectAllowed!==DragDropEffect.none)&&(this.dragDroppableUI.addOverlay("drag-source-item",e,this.renderDragSourceItemOverlay),void 0===this.dragImageData)&&(this.dragImageData={image:this.options.renderDragImage(t)}):(t.stopPropagation(),t.preventDefault())},this.onPointerDown=t=>{0===t.button&&this.beginDrag(t)},this.renderDragSourceItemOverlay=t=>React.createElement(React.Fragment,null,React.createElement("div",{className:"bolt-list-drag-source-item flex-grow"}),this.operation&&this.dragImageData&&React.createElement(DragImage,{operation:this.operation},this.dragImageData.image)),this.setDragImage=(t,e,r)=>{this.dragImageData={image:t,xOffset:e,yOffset:r}},this.options=t}componentDidUpdate(t){this.itemProvider=t.itemProvider,this._scrollableParent=null,this._isScrollableParentCached=!1}componentWillUnmount(){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)}beginDrag(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}))}getScrollableContainer(){var t;if(this._isScrollableParentCached)return this._scrollableParent;this._isScrollableParentCached=!0;var e=null==(e=null==(e=this.dragDroppableUI)?void 0:e.currentElement)?void 0:e.current;return e?(this._scrollableParent=this.findScrollableParent(e),null!=(t=this._scrollableParent)?t:e):null}findScrollableParent(t){for(;t;){var e=window.getComputedStyle(t).overflowY;if(("auto"===e||"scroll"===e)&&t.scrollHeight>t.clientHeight)return t;t=t.parentElement}return null}}export{ListDragSourceBehavior};