azure-devops-ui/Components/Table/ColumnDragDropBehavior.min.js

React components for building web UI in Azure DevOps

import"../../CommonImports";import"../../Core/core.css";import"./Table.css";import*as React from"react";import{ListDropIndicatorPosition}from"../../Components/List/ListDropIndicator.Props";import{cellFromEvent}from"../../List";import{getPointByEventType}from"../../Util";import{beginDragOperation,DragDropEffect,DragImage}from"../../Utilities/DragDrop";import{ListDropIndicator}from"../List/ListDropIndicator";import{ColumnFillId}from"./Table";class ColumnDragDropBehavior{constructor(t){this.initialize=(t,e,i)=>{this.dragDroppableUI=e,this.eventDispatch=i,this.eventDispatch.addEventListener("pointerdown",this.onPointerDown),this.eventDispatch.addEventListener("dragstart",this.onDragStart),this.eventDispatch.addEventListener("dragend",this.onDragEnd),this.eventDispatch.addEventListener("dragenter",this.onDragEnter),this.eventDispatch.addEventListener("dragexit",this.onDragExit),this.eventDispatch.addEventListener("dragover",this.onDragOver),this.eventDispatch.addEventListener("drop",this.onDrop),this.indicatorName="drop-indicator"},this.onDragEnd=t=>{var e=eventIsOnHeader(t);e&&0<=e&&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&&!t.defaultPrevented&&null!==(e=eventIsOnHeader(t))&&0<=e&&(this.options.onDragStart&&this.options.onDragStart(t),t.detail.dataTransfer.effectAllowed!==DragDropEffect.none)&&(this.dragDroppableUI.addOverlay("drag-source-item",-1,this.renderDragSourceItemOverlay,0,e),void 0===this.dragImageData)&&(this.dragImageData={image:this.options.renderDragImage(t)})},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,i)=>{this.dragImageData={image:t,xOffset:e,yOffset:i}},this.onDragEnter=t=>{this.handlesType(t)&&(this.options.onDragEnter?this.options.onDragEnter(t):t.detail.dataTransfer.dropEffect=DragDropEffect.move)},this.onDragExit=t=>{this.handlesType(t)&&(this.options.onDragExit&&this.options.onDragExit(t),this.dragDroppableUI.removeOverlay(this.indicatorName))},this.onDragOver=t=>{var e,i,r;this.handlesType(t)&&(e=this.calculateIndex(t),i=t.detail.dataTransfer.secondaryData.index,r=t.detail.dataTransfer.secondaryData.sourceId,0<=e&&(e!==i||r!==this.options.id)&&this.options.columns[e].id!==ColumnFillId?this.options.onDragOver?this.options.onDragOver(t,{index:this.listIndicatorPosition===ListDropIndicatorPosition.right?e+1:e}):t.detail.dataTransfer.dropEffect=DragDropEffect.move:t.detail.dataTransfer.dropEffect=DragDropEffect.none,t.detail.dataTransfer.dropEffect===DragDropEffect.none?this.dragDroppableUI.removeOverlay(this.indicatorName):this.dragDroppableUI.addOverlay(this.indicatorName,-1,this.renderDropIndicator,0,e))},this.onDrop=t=>{var e,i,r;this.handlesType(t)&&(e=this.calculateIndex(t),i=t.detail.dataTransfer.secondaryData.index,r=t.detail.dataTransfer.secondaryData.sourceId,0<=e&&(e!==i||r!==this.options.id)&&this.options.onDrop&&(t.persist(),this.options.onDrop(t,{index:this.listIndicatorPosition===ListDropIndicatorPosition.right?e+1:e})),this.dragDroppableUI.removeOverlay(this.indicatorName))},this.renderDropIndicator=t=>{t=this.listIndicatorPosition===ListDropIndicatorPosition.right?t.rowElement.offsetWidth:0;return React.createElement(ListDropIndicator,{position:this.listIndicatorPosition,xOffset:t-3,lineOffset:t})},this.options=t,this.contextMenuIndex=t.columns.findIndex(t=>"_more"===t.id)}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("dragenter",this.onDragEnter),null!=(t=this.eventDispatch)&&t.removeEventListener("dragexit",this.onDragExit),null!=(t=this.eventDispatch)&&t.removeEventListener("dragover",this.onDragOver),null!=(t=this.eventDispatch)&&t.removeEventListener("drop",this.onDrop)}updateBehaviorOptions(t){this.options=t}beginDrag(t){var e,i=eventIsOnHeader(t);null!==i&&null!=(e=this.options)&&e.columns&&0<=i&&(e=this.options.columns[i],this.operation=beginDragOperation(t,{data:e,dropEffect:DragDropEffect.none,secondaryData:{index:i,sourceId:this.options.id},setDragImage:this.setDragImage,type:this.options.type}))}handlesType(t){t=(null==(t=t.detail.dataTransfer)?void 0:t.type)||"";return-1!==this.options.allowedTypes.indexOf(t)}calculateIndex(t){var e,i=cellFromEvent(t);let r=i.cellIndex;return i.cellElement&&t.detail.dataTransfer.secondaryData&&(e=t.detail.dataTransfer.secondaryData.index,t=t.detail.nativeEvent,i=i.cellElement.getBoundingClientRect(),t=(t=getPointByEventType(t))?t.x<i.width/2+i.left:r<e,r<e?(this.listIndicatorPosition=ListDropIndicatorPosition.left,t||r++,r===this.contextMenuIndex&&r--):r>e&&(this.listIndicatorPosition=ListDropIndicatorPosition.right,t&&r--,r+1<this.options.columns.length)&&r+1==this.contextMenuIndex&&r++),r}}function eventIsOnHeader(t){t=cellFromEvent(t);return-1===t.rowIndex?t.cellIndex:null}export{ColumnDragDropBehavior};