vue3-dnd
Version:
Drag and Drop for Vue Composition API
38 lines (37 loc) • 1.64 kB
JavaScript
import { isValidElement, isVueSkipInstance } from "./utils";
function throwIfCompositeComponentElement() {
// Custom components can no longer be wrapped directly in Vue Dnd
throw new Error("Only native element nodes can now be passed to Vue DnD connectors." + "You can either wrap Component into a <div>, or turn it into a " + "drag source or a drop target itself.");
}
function wrapHookToRecognizeElement(hook) {
return function() {
var elementOrNode = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : null, options = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : null;
if (isVueSkipInstance(elementOrNode)) {
throwIfCompositeComponentElement();
}
// When passed a node, call the hook straight away.
if (!isValidElement(elementOrNode)) {
var node = elementOrNode;
hook(node, options);
// return the node so it can be chained (e.g. when within callback refs
// <div ref={node => connectDragSource(connectDropTarget(node))}/>
return node;
}
};
}
export function wrapConnectorHooks(hooks) {
var wrappedHooks = {};
Object.keys(hooks).forEach(function(key) {
var hook = hooks[key];
// ref objects should be passed straight through without wrapping
if (key.endsWith("Ref")) {
wrappedHooks[key] = hooks[key];
} else {
var wrappedHook = wrapHookToRecognizeElement(hook);
wrappedHooks[key] = function() {
return wrappedHook;
};
}
});
return wrappedHooks;
}