in uui-core/src/services/dnd/DndActor.tsx [204:305]
render() {
const params: DndActorRenderParams = {
isDraggable: !!this.props.srcData,
isDraggedOut: this.state.isDragging,
isDraggedOver: this.context.uuiDnD?.isDragging && this.state.isMouseOver,
isDropAccepted: this.state.isMouseOver && !!this.state.position,
isDragGhost: false,
isDndInProgress: this.state.dndContextState.isDragging,
dragData: this.state.isMouseOver ? this.context.uuiDnD.dragData : null,
eventHandlers: {},
position: this.state.isMouseOver ? this.state.position : null,
classNames: null,
ref: this.dndRef,
};
params.classNames = [
params.isDropAccepted && uuiDndState.dropAccepted, params.isDraggedOut && uuiDndState.draggedOut, params.isDraggable && uuiMarkers.draggable,
].filter(Boolean);
if (!!this.props.srcData) {
params.eventHandlers.onPointerDown = (e: React.PointerEvent<any>) => {
if (isEventTargetInsideDraggable(e, e.currentTarget)) {
return;
}
e.persist();
if (e.button === 0) {
this.setState(() => {
const mouseCoords = this.context.uuiDnD.getMouseCoords();
return {
...initialState,
isMouseDown: true,
pointerX: mouseCoords.mousePageX,
pointerY: mouseCoords.mousePageY,
};
});
if (!isEventTargetInsideInput(e, e.currentTarget)) {
// This prevents text selection start
// dnd don't work without it in ff
e.preventDefault();
e.stopPropagation();
}
}
};
}
if (this.props.canAcceptDrop) {
const pointerLeaveHandler = () => {
if (this.context.uuiDnD.isDragging) {
this.setState((s) => ({ ...s, isMouseOver: false, position: null }));
}
};
const pointerMoveHandler = (e: React.PointerEvent<any>) => {
if (this.context.uuiDnD.isDragging) {
if (isEventTargetInsideDraggable(e, e.currentTarget)) {
return pointerLeaveHandler();
}
releasePointerCaptureOnEventTarget(e); // allows you to trigger pointer events on other nodes
const dropParams = this.getDropParams(e);
const positionOptions = this.props.canAcceptDrop(dropParams);
const position = this.getPosition(dropParams, positionOptions);
this.setState((s) => ({ ...s, isMouseOver: true, position }));
}
};
params.eventHandlers.onTouchStart = (e) => e.preventDefault(); // prevent defaults on ios
params.eventHandlers.onPointerEnter = pointerMoveHandler;
params.eventHandlers.onPointerMove = pointerMoveHandler;
params.eventHandlers.onPointerLeave = pointerLeaveHandler;
}
params.eventHandlers.onPointerUp = (e) => {
if (this.context.uuiDnD.isDragging) {
if (isEventTargetInsideDraggable(e, e.currentTarget)) {
return;
}
e.preventDefault();
if (!!this.state.position) {
this.props.onDrop && this.props.onDrop({
...this.getDropParams(e),
position: this.state.position,
});
}
this.context.uuiDnD.endDrag();
this.setState(() => initialState);
} else {
// TBD: investigate. Should blur inputs, but doesn't work so far.
// if (this.state.pendingMouseDownTarget) {
// $(this.state.pendingMouseDownTarget).trigger("mousedown");
// $(this.state.pendingMouseDownTarget).trigger("mouseup");
// $(this.state.pendingMouseDownTarget).trigger("click");
// this.setState(s => ({ ...s, pendingMouseDownTarget: null }));
// }
}
};
return this.props.render(params);
}