When importing external nodes, enable only specific nodes

[developergunny]

When bringing and dropping external nodes, I want to allow only specific nodes.

I want to disable a specific node, is there a way?

external nodes

1. external node1
2. external node2
3. external node3

current tree

root (candrop disabled)
subroot1 (this node)
item1
subroot2 (candrop disabled)
item1

The way i am currently using

 onDrop={(newTree, { dragSource, monitor, dropTarget }) => {
    const itemType = monitor.getItemType();

    if (itemType === NativeTypes.TEXT) {
        const nodeJson = monitor.getItem().text;

        const node = JSON.parse(nodeJson);
        const nodeType = node.type;
        const nodeData = node.data;

         const { type, originalId } = dropTarget;

          if (type === nodeType) {
              ...
              return;
          }
          .....
       return;
       }
       ...
}}

[minop1205]

@developergunny Thank you.
I found that the canDrop API is not evaluated when dropping an external node.
This is not expected behavior and will be fixed.

[developergunny]

@developergunny Thank you. I found that the canDrop API is not evaluated when dropping an external node. This is not expected behavior and will be fixed.

Thank you for your efforts. Please let me know when that issue is fixed.

[minop1205]

@developergunny

I just published an alpha version of v3.4.1.
You can install it like below.

npm install @minoru/react-dnd-treeview@alpha

In this version, it is possible to evaluate the dropability of external nodes using canDrop API.

Here is a sample
https://codesandbox.io/s/issue188-kkwznd

Please give it a try. If there are no problems, I will make an official release.

[developergunny]

@developergunny

I just published an alpha version of v3.4.1. You can install it like below.

npm install @minoru/react-dnd-treeview@alpha

In this version, it is possible to evaluate the dropability of external nodes using canDrop API.

Here is a sample https://codesandbox.io/s/issue188-kkwznd

Please give it a try. If there are no problems, I will make an official release.

@minop1205

Thank you This works very well!

I just have one question.

I would like to allow "canDrop" depending on the state of an external node.
However, the information of the external node cannot be obtained before the state is dropped.

Do you have any solution? If not, I'll try another method.

The way i thought

canDrop={(tree, options) => {
       const { dragSourceId, dropTargetId, dragSource, dropTarget } = options;
       
       // But this warning message is displayed
       // "Browser doesn't allow reading "text" until the drop event."
       const externalType = dragSource.text;

       if (dragSourceId === undefined && externalType === dropTarget.type)  {
            return true;
       }
}}

I know that the drag and drop library has prevented it due to security concerns.

Just wonder if there is any way.

You don't have to answer if this isn't the right way or if it's not worth answering. Thank you.

[minop1205]

@developergunny
As you mentioned, the dataTransfer object cannot be accessed during a drag operation for the following reasons

https://stackoverflow.com/questions/40940288/drag-datatransfer-data-unavailable-in-ondragover-event

Therefore, if you want to determine whether or not a drop is possible depending on the state of an external node, you need to devise a way to useState or useRef in addition to the canDrop API.

In the following sample, the drop is controlled by the ID of the external node, but it is possible to get the expected behavior by storing the state of the external node somewhere and using it in canDrop.

https://codesandbox.io/s/issue188-kkwznd?file=/src/App.tsx

[developergunny]

@minop1205

This is perfect!

Thank you!

[minop1205]

Merged: #190

[minop1205]

The corresponding version of this Issue has been released as v3.4.2.