render()

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);
        }