fix: fixes bug where cannot expand when dropping on empty children

[AssisrMatheus]

Usually items starts without children, so the collapse arrow is not displayed as expected. But when dragging into one of those items, adding children to them, the hasChildren flag is not updated, so the arrow still doesn't show up, even thought the item now have children. And then you cannot expand to see its children

[lukasbach]

Hi @AssisrMatheus, thanks for your contribution! Can you please explain which issue you are facing?

The prop hasChildren denotes whether an item should behave like a container that has children, i.e. can expand/collapse and take items. So if this is false for an item, it should never be able to expand, even if the user attempts to drop items onto it. So if you have an item that should be able to accept children and that should be able to expand or collapse, it should have hasChildren set to true beforehand. Yes, this is not a super intuitively named variable, I might change it in the future, but don't want to for now since it would change the public interface.

[madhums]

So if you have an item that should be able to accept children and that should be able to expand or collapse, it should have hasChildren set to true beforehand

Ah this is not very clear!

💡 Perhaps you can introduce another variable canHaveChildren - which is more representative of changes the tree would go through over time. hasChildren is only representative of current state (not of future).

[madhums]

Also, it seems like when you provide hasChildren, the items get an icon - as if they can be expanded. For this it's better to check for children.length > 0 and keep hasChildren (or canHaveChildren) for whether they can have children (on drop functionality)

[madhums]

It can be fixed if you implement your own data provider, for exmaple:

const dataProvider = new StaticTreeDataProvider(dataUsageTree, (item, data) => ({ ...item, data }));
dataProvider.onChangeItemChildren = function (itemId, newChildren) {
  this.data.items[itemId].hasChildren = newChildren.length > 0;
  this.data.items[itemId].children = newChildren;
  this.onDidChangeTreeDataEmitter.emit([itemId]);
};

return (
  <div>
    <UncontrolledTreeEnvironment
      dataProvider={dataProvider}
      canDragAndDrop={true}
      canReorderItems={true}
      canDropOnItemWithChildren={true}
      canDropOnItemWithoutChildren={true}
      viewState={{}}>
      ...
    </UncontrolledTreeEnvironment>
  </div>
)