You can't directly add an external node as a child node inside the tree

[paulvanlerberghe]

Hi, thank you for the fork !

In the story external-node, when you drag and drop "Baby Rabbit" into the tree, you can't place it directly as a child to "Mama Rabbit", "Papa Rabbit". It doesn't work, it can only be placed as a same level node.

• You have either to drag and drop in the tree first before moving it again as a child.
• Or having a expanded parent node with already a child inside.

The original library story example doesn't seems to behaves like that, you can place it as a child directly, you can compare. :)

Anyone have an idea why it might happens ? I'll try to look into the code today.

Thanks again.

[paulvanlerberghe]

Hi, a small update, i found a solution:
It seems in the dnd-manager, on the method hover, component parameter is always at null.

After few research on react-dnd github, I found this :

component: When specified, it is the instance of your component. Use it to access the underlying DOM node for position or size measurements, or to call setState, and other component methods. It is purposefully missing from canDrop because the instance may not be available by the time it is called. If you want this method to depend on the component's state, consider lifting the state to the parent component, so that you can just use props. Generally your code will be cleaner if you rely on props instead whenever possible. Do note this is always null when hovering stateless components.
react-dnd/react-dnd#1320 (comment)

A quick solution I found was to change TreeNode from being a function component to being a class.
Such as :

class TreeNode extends Component {
  render() {
    let props = this.props
    props = { ...defaultProps, ...props }
...

Once it's done I had to add a ref on the first div to access dom node in dnd-manager :

        ref={(node) => (this.node = node)}>

And modify dnd-manager to access node via component because getDecoratedComponentInstance doesn't work anymore once it's a class :

      //const rawComponent = component.getDecoratedComponentInstance()
      const relativePosition = component.node.getBoundingClientRect()

After that, the story seems to work as the original one. Also other stories seems to work as usual.

@nosferatu500 , what do you think ? I'm not quite versed into Github, do you need a PR ?