azure-devops-ui
Version:
React components for building web UI in Azure DevOps
1 lines • 5.46 kB
JavaScript
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";var ColumnDragDropBehavior=function(){function t(t){var o=this;this.initialize=function(t,e,n){o.dragDroppableUI=e,o.eventDispatch=n,o.eventDispatch.addEventListener("pointerdown",o.onPointerDown),o.eventDispatch.addEventListener("dragstart",o.onDragStart),o.eventDispatch.addEventListener("dragend",o.onDragEnd),o.eventDispatch.addEventListener("dragenter",o.onDragEnter),o.eventDispatch.addEventListener("dragexit",o.onDragExit),o.eventDispatch.addEventListener("dragover",o.onDragOver),o.eventDispatch.addEventListener("drop",o.onDrop),o.indicatorName="drop-indicator"},this.onDragEnd=function(t){var e=eventIsOnHeader(t);e&&0<=e&&o.options.onDragEnd&&o.options.onDragEnd(t),o.dragDroppableUI.removeOverlay("drag-source-item"),o.dragImageData=void 0},this.onDragStart=function(t){var e;t.detail.dataTransfer&&!t.defaultPrevented&&null!==(e=eventIsOnHeader(t))&&0<=e&&(o.options.onDragStart&&o.options.onDragStart(t),t.detail.dataTransfer.effectAllowed!==DragDropEffect.none)&&(o.dragDroppableUI.addOverlay("drag-source-item",-1,o.renderDragSourceItemOverlay,0,e),void 0===o.dragImageData)&&(o.dragImageData={image:o.options.renderDragImage(t)})},this.onPointerDown=function(t){0===t.button&&o.beginDrag(t)},this.renderDragSourceItemOverlay=function(t){return React.createElement(React.Fragment,null,React.createElement("div",{className:"bolt-list-drag-source-item flex-grow"}),o.operation&&o.dragImageData&&React.createElement(DragImage,{operation:o.operation},o.dragImageData.image))},this.setDragImage=function(t,e,n){o.dragImageData={image:t,xOffset:e,yOffset:n}},this.onDragEnter=function(t){o.handlesType(t)&&(o.options.onDragEnter?o.options.onDragEnter(t):t.detail.dataTransfer.dropEffect=DragDropEffect.move)},this.onDragExit=function(t){o.handlesType(t)&&(o.options.onDragExit&&o.options.onDragExit(t),o.dragDroppableUI.removeOverlay(o.indicatorName))},this.onDragOver=function(t){var e,n,r;o.handlesType(t)&&(e=o.calculateIndex(t),n=t.detail.dataTransfer.secondaryData.index,r=t.detail.dataTransfer.secondaryData.sourceId,0<=e&&(e!==n||r!==o.options.id)&&o.options.columns[e].id!==ColumnFillId?o.options.onDragOver?o.options.onDragOver(t,{index:o.listIndicatorPosition===ListDropIndicatorPosition.right?e+1:e}):t.detail.dataTransfer.dropEffect=DragDropEffect.move:t.detail.dataTransfer.dropEffect=DragDropEffect.none,t.detail.dataTransfer.dropEffect===DragDropEffect.none?o.dragDroppableUI.removeOverlay(o.indicatorName):o.dragDroppableUI.addOverlay(o.indicatorName,-1,o.renderDropIndicator,0,e))},this.onDrop=function(t){var e,n,r;o.handlesType(t)&&(e=o.calculateIndex(t),n=t.detail.dataTransfer.secondaryData.index,r=t.detail.dataTransfer.secondaryData.sourceId,0<=e&&(e!==n||r!==o.options.id)&&o.options.onDrop&&(t.persist(),o.options.onDrop(t,{index:o.listIndicatorPosition===ListDropIndicatorPosition.right?e+1:e})),o.dragDroppableUI.removeOverlay(o.indicatorName))},this.renderDropIndicator=function(t){t=o.listIndicatorPosition===ListDropIndicatorPosition.right?t.rowElement.offsetWidth:0;return React.createElement(ListDropIndicator,{position:o.listIndicatorPosition,xOffset:t-3,lineOffset:t})},this.options=t,this.contextMenuIndex=t.columns.findIndex(function(t){return"_more"===t.id})}return 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("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)},t.prototype.updateBehaviorOptions=function(t){this.options=t},t.prototype.beginDrag=function(t){var e,n=eventIsOnHeader(t);null!==n&&null!=(e=this.options)&&e.columns&&0<=n&&(e=this.options.columns[n],this.operation=beginDragOperation(t,{data:e,dropEffect:DragDropEffect.none,secondaryData:{index:n,sourceId:this.options.id},setDragImage:this.setDragImage,type:this.options.type}))},t.prototype.handlesType=function(t){t=(null==(t=t.detail.dataTransfer)?void 0:t.type)||"";return-1!==this.options.allowedTypes.indexOf(t)},t.prototype.calculateIndex=function(t){var e,n=cellFromEvent(t),r=n.cellIndex;return n.cellElement&&t.detail.dataTransfer.secondaryData&&(e=t.detail.dataTransfer.secondaryData.index,t=t.detail.nativeEvent,n=n.cellElement.getBoundingClientRect(),t=(t=getPointByEventType(t))?t.x<n.width/2+n.left:r<e,r<e?(this.listIndicatorPosition=ListDropIndicatorPosition.left,t||r++,r===this.contextMenuIndex&&r--):e<r&&(this.listIndicatorPosition=ListDropIndicatorPosition.right,t&&r--,r+1<this.options.columns.length)&&r+1==this.contextMenuIndex&&r++),r},t}();function eventIsOnHeader(t){t=cellFromEvent(t);return-1===t.rowIndex?t.cellIndex:null}export{ColumnDragDropBehavior};