azure-devops-ui
Version:
React components for building web UI in Azure DevOps
1 lines • 2.95 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";var ListDragDropBehavior=function(){function e(e){var r=this;this.initialize=function(e,t,o){r.eventDispatch=o,r.itemProvider=e.itemProvider,r.eventDispatch.addEventListener("keydown",r.onKeyDown),r.dragBehavior.initialize(e,t,o),r.dropBehavior.initialize(e,t,o)},this.onDragRowKeyDown=function(e){e.which===KeyCode.escape?r.endDrag(e):e.which===KeyCode.space?r.endDrag(e,!0):e.which===KeyCode.downArrow?(r.focusIndex=Math.min(r.focusIndex+1,r.itemProvider.length),r.fireRowDragEvents(e)):e.which===KeyCode.upArrow&&(r.focusIndex=Math.max(r.focusIndex-1,0),r.fireRowDragEvents(e)),e.preventDefault()},this.onKeyDown=function(e){var t,o;e.defaultPrevented||e.which!==KeyCode.space||"INPUT"===e.target.tagName||(t=cellFromEvent(e).rowIndex,r.focusIndex=t,o=r.itemProvider.value[t],r.dataTransfer={data:o,dropEffect:DragDropEffect.none,secondaryData:{index:t,sourceId:r.options.id},setDragImage:noop,type:r.options.type},dispatchCustomDragEvent("dragstart",e.target,e.nativeEvent,r.dataTransfer),r.dataTransfer.effectAllowed!==DragDropEffect.none&&(r.dragItemRowElement=e.target,r.dragItemRowElement.addEventListener("keydown",r.onDragRowKeyDown)))},this.options=e,this.dragBehavior=new ListDragSourceBehavior(e),this.dropBehavior=new ListDropTargetBehavior(e)}return e.prototype.componentDidUpdate=function(e){this.itemProvider=e.itemProvider,this.dragBehavior.componentDidUpdate(e),this.dropBehavior.componentDidUpdate(e)},e.prototype.componentWillUnmount=function(){var e;null!=(e=this.eventDispatch)&&e.removeEventListener("keydown",this.onKeyDown),this.dragItemRowElement&&this.dragItemRowElement.removeEventListener("keydown",this.onDragRowKeyDown),this.dragBehavior.componentWillUnmount(),this.dropBehavior.componentWillUnmount()},e.prototype.dispatchEventAtIndex=function(e,t,o,r){for(var i=t;i&&!i.classList.contains("bolt-list");)i=i.parentElement;i&&(t=i.querySelector("[data-row-index='"+r+"']"))&&dispatchCustomDragEvent(e,t,o,this.dataTransfer)},e.prototype.endDrag=function(e,t){void 0===t&&(t=!1),dispatchCustomDragEvent("dragend",e.target,e,this.dataTransfer),t?this.dispatchEventAtIndex("drop",e.target,e,this.focusIndex):this.dispatchEventAtIndex("dragexit",e.target,e,this.focusIndex),this.dragItemRowElement&&(this.dragItemRowElement.removeEventListener("keydown",this.onDragRowKeyDown),this.dragItemRowElement=void 0)},e.prototype.fireRowDragEvents=function(e){this.dispatchEventAtIndex("dragenter",e.target,e,this.focusIndex),this.dispatchEventAtIndex("dragover",e.target,e,this.focusIndex)},e}();export{ListDragDropBehavior};