You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
90 lines
2.9 KiB
90 lines
2.9 KiB
import { shallowEqual } from '@react-dnd/shallowequal';
|
|
import wrapConnectorHooks from './wrapConnectorHooks';
|
|
import { isRef } from '../utils/isRef';
|
|
export class TargetConnector {
|
|
constructor(backend) {
|
|
this.hooks = wrapConnectorHooks({
|
|
dropTarget: (node, options) => {
|
|
this.clearDropTarget();
|
|
this.dropTargetOptions = options;
|
|
if (isRef(node)) {
|
|
this.dropTargetRef = node;
|
|
}
|
|
else {
|
|
this.dropTargetNode = node;
|
|
}
|
|
this.reconnect();
|
|
},
|
|
});
|
|
this.handlerId = null;
|
|
// The drop target may either be attached via ref or connect function
|
|
this.dropTargetRef = null;
|
|
this.dropTargetOptionsInternal = null;
|
|
this.lastConnectedHandlerId = null;
|
|
this.lastConnectedDropTarget = null;
|
|
this.lastConnectedDropTargetOptions = null;
|
|
this.backend = backend;
|
|
}
|
|
get connectTarget() {
|
|
return this.dropTarget;
|
|
}
|
|
reconnect() {
|
|
// if nothing has changed then don't resubscribe
|
|
const didChange = this.didHandlerIdChange() ||
|
|
this.didDropTargetChange() ||
|
|
this.didOptionsChange();
|
|
if (didChange) {
|
|
this.disconnectDropTarget();
|
|
}
|
|
const dropTarget = this.dropTarget;
|
|
if (!this.handlerId) {
|
|
return;
|
|
}
|
|
if (!dropTarget) {
|
|
this.lastConnectedDropTarget = dropTarget;
|
|
return;
|
|
}
|
|
if (didChange) {
|
|
this.lastConnectedHandlerId = this.handlerId;
|
|
this.lastConnectedDropTarget = dropTarget;
|
|
this.lastConnectedDropTargetOptions = this.dropTargetOptions;
|
|
this.unsubscribeDropTarget = this.backend.connectDropTarget(this.handlerId, dropTarget, this.dropTargetOptions);
|
|
}
|
|
}
|
|
receiveHandlerId(newHandlerId) {
|
|
if (newHandlerId === this.handlerId) {
|
|
return;
|
|
}
|
|
this.handlerId = newHandlerId;
|
|
this.reconnect();
|
|
}
|
|
get dropTargetOptions() {
|
|
return this.dropTargetOptionsInternal;
|
|
}
|
|
set dropTargetOptions(options) {
|
|
this.dropTargetOptionsInternal = options;
|
|
}
|
|
didHandlerIdChange() {
|
|
return this.lastConnectedHandlerId !== this.handlerId;
|
|
}
|
|
didDropTargetChange() {
|
|
return this.lastConnectedDropTarget !== this.dropTarget;
|
|
}
|
|
didOptionsChange() {
|
|
return !shallowEqual(this.lastConnectedDropTargetOptions, this.dropTargetOptions);
|
|
}
|
|
disconnectDropTarget() {
|
|
if (this.unsubscribeDropTarget) {
|
|
this.unsubscribeDropTarget();
|
|
this.unsubscribeDropTarget = undefined;
|
|
}
|
|
}
|
|
get dropTarget() {
|
|
return (this.dropTargetNode || (this.dropTargetRef && this.dropTargetRef.current));
|
|
}
|
|
clearDropTarget() {
|
|
this.dropTargetRef = null;
|
|
this.dropTargetNode = null;
|
|
}
|
|
}
|