azure-devops-ui
Version:
React components for building web UI in Azure DevOps
1 lines • 2.96 kB
JavaScript
import"../../CommonImports";import"../../Core/core.css";import"./DropdownList.css";import"./List.css";import"./ListDropIndicator.css";import{KeyCode,noop}from"../../Util";import{dispatchCustomDragEvent,DragDropEffect}from"../../Utilities/DragDrop";import{cellFromEvent}from"./List";import{ListDragSourceBehavior}from"./ListDragSourceBehavior";import{ListDropTargetBehavior}from"./ListDropTargetBehavior";class ListDragDropBehavior{constructor(t,e,i){this.initialize=(t,e,i)=>{this.eventDispatch=i,this.itemProvider=t.itemProvider,this.eventDispatch.addEventListener("keydown",this.onKeyDown),this.dragBehavior.initialize(t,e,i),this.dropBehavior.initialize(t,e,i)},this.onDragRowKeyDown=t=>{t.which===KeyCode.escape?this.endDrag(t):t.which===KeyCode.space?this.endDrag(t,!0):t.which===KeyCode.downArrow?(this.focusIndex=Math.min(this.focusIndex+1,this.itemProvider.length),this.fireRowDragEvents(t)):t.which===KeyCode.upArrow&&(this.focusIndex=Math.max(this.focusIndex-1,0),this.fireRowDragEvents(t)),t.preventDefault()},this.onKeyDown=t=>{var e,i;t.defaultPrevented||t.which!==KeyCode.space||"INPUT"===t.target.tagName||(e=cellFromEvent(t).rowIndex,this.focusIndex=e,i=this.itemProvider.value[e],this.dataTransfer={data:i,dropEffect:DragDropEffect.none,secondaryData:{index:e,sourceId:this.options.id},setDragImage:noop,type:this.options.type},dispatchCustomDragEvent("dragstart",t.target,t.nativeEvent,this.dataTransfer),this.dataTransfer.effectAllowed!==DragDropEffect.none&&(this.dragItemRowElement=t.target,this.dragItemRowElement.addEventListener("keydown",this.onDragRowKeyDown)))},this.options=t,this.dragBehavior=e||new ListDragSourceBehavior(t),this.dropBehavior=i||new ListDropTargetBehavior(t)}componentDidUpdate(t){this.itemProvider=t.itemProvider,this.dragBehavior.componentDidUpdate(t),this.dropBehavior.componentDidUpdate(t)}componentWillUnmount(){var t;null!=(t=this.eventDispatch)&&t.removeEventListener("keydown",this.onKeyDown),this.dragItemRowElement&&this.dragItemRowElement.removeEventListener("keydown",this.onDragRowKeyDown),this.dragBehavior.componentWillUnmount(),this.dropBehavior.componentWillUnmount()}showIndicator(t,e){this.dropBehavior.showIndicator(t,e)}hideIndicator(){this.dropBehavior.hideIndicator()}dispatchEventAtIndex(t,e,i,o){let r=e;for(;r&&!r.classList.contains("bolt-list");)r=r.parentElement;r&&(e=r.querySelector("[data-row-index='"+o+"']"))&&dispatchCustomDragEvent(t,e,i,this.dataTransfer)}endDrag(t,e=!1){dispatchCustomDragEvent("dragend",t.target,t,this.dataTransfer),e?this.dispatchEventAtIndex("drop",t.target,t,this.focusIndex):this.dispatchEventAtIndex("dragexit",t.target,t,this.focusIndex),this.dragItemRowElement&&(this.dragItemRowElement.removeEventListener("keydown",this.onDragRowKeyDown),this.dragItemRowElement=void 0)}fireRowDragEvents(t){this.dispatchEventAtIndex("dragenter",t.target,t,this.focusIndex),this.dispatchEventAtIndex("dragover",t.target,t,this.focusIndex)}}export{ListDragDropBehavior};