azure-devops-ui/Components/List/ListDropTargetBehavior.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{getPointByEventType}from"../../Util";import{DragDropEffect}from"../../Utilities/DragDrop";import{cellFromEvent}from"./List";import{ListDropIndicator}from"./ListDropIndicator";import{ListDropIndicatorPosition}from"./ListDropIndicator.Props";class ListDropTargetBehavior{constructor(t){this.initialize=(t,i,o)=>{this.dragDroppableUI=i,this.eventDispatch=o,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.itemProvider=t.itemProvider,this.indicatorName=this.options.isTree?"tree-drop-indicator":"drop-indicator"},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=o=>{if(this.handlesType(o)){let t=this.calculateIndex(o);var r=o.detail.dataTransfer.secondaryData.index,e=o.detail.dataTransfer.secondaryData.sourceId;let i;0<=t&&(t!==r||e!==this.options.id||this.options.isTree)?this.options.onDragOver?"number"==typeof(i=this.options.onDragOver(o,{index:this.listIndicatorPosition===ListDropIndicatorPosition.bottom?t+1:t}))&&(t=i):o.detail.dataTransfer.dropEffect=DragDropEffect.move:o.detail.dataTransfer.dropEffect=DragDropEffect.none,o.detail.dataTransfer.dropEffect===DragDropEffect.none?this.dragDroppableUI.removeOverlay(this.indicatorName):("number"==typeof i&&(this.listIndicatorPosition=ListDropIndicatorPosition.bottom),this.dragDroppableUI.addOverlay(this.indicatorName,t,this.renderDropIndicator))}},this.onDrop=t=>{var i,o,r;this.handlesType(t)&&(i=this.calculateIndex(t),o=t.detail.dataTransfer.secondaryData.index,r=t.detail.dataTransfer.secondaryData.sourceId,0<=i&&(i!==o||r!==this.options.id)&&this.options.onDrop&&this.options.onDrop(t,{index:this.listIndicatorPosition===ListDropIndicatorPosition.bottom?i+1:i}),this.dragDroppableUI.removeOverlay(this.indicatorName))},this.renderDropIndicator=t=>this.options.isTree?React.createElement("div",{className:"bolt-list-tree-drop-target flex-grow"}):React.createElement(ListDropIndicator,{position:this.listIndicatorPosition}),this.options=t}componentDidUpdate(t){this.itemProvider=t.itemProvider}componentWillUnmount(){var t;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)}showIndicator(t,i){i&&(this.listIndicatorPosition=i),this.dragDroppableUI.addOverlay(this.indicatorName,t,this.renderDropIndicator)}hideIndicator(){this.dragDroppableUI.removeOverlay(this.indicatorName)}setListIndicatorPosition(t){this.listIndicatorPosition=t}calculateIndex(t){var i,o,r=cellFromEvent(t);let e=r.rowIndex;return this.options.isTree||r.rowElement&&t.detail.dataTransfer.secondaryData&&(i=t.detail.dataTransfer.secondaryData.index,o=t.detail.dataTransfer.secondaryData.sourceId,t=t.detail.nativeEvent,r=r.rowElement.getBoundingClientRect(),t=(t=getPointByEventType(t))?t.y<r.height/2+r.top:e<i,this.options.id!==o?(this.listIndicatorPosition=ListDropIndicatorPosition.top,t||e++,e>=this.itemProvider.length&&(this.listIndicatorPosition=ListDropIndicatorPosition.bottom,e--)):e<i?(this.listIndicatorPosition=ListDropIndicatorPosition.top,t||e++):e>i&&(this.listIndicatorPosition=ListDropIndicatorPosition.bottom,t)&&e--),e}handlesType(t){t=(null==(t=t.detail.dataTransfer)?void 0:t.type)||"";return-1!==this.options.allowedTypes.indexOf(t)}}export{ListDropTargetBehavior};