Controlled Environment - Expand/Collapse All, Drag and Drop

[natetewelde]

I was previously using an uncontrolled environment to accomplish about 90% of what I needed until I ran across loading data from a DB. I then decided to make the switch over to a controlled environment and found that the data updated the tree correctly with the fetched items. Now I'm struggling to find any documentation surrounding how to utilize drag and drop as well as DOM manipulation with a controlled environment. Everything I've seen so far has just been around uncontrolled environments.

[kyh]

here's a simple implementation that mimics the UncontrolledTreeEnvironment:

const onDrop = (items: TreeItem<TreeItemData>[], target: DraggingPosition) => {
    if (target.targetType === "between-items") {
      setData((prevData) => {
        if (!prevData) return prevData;
        const parentNode = prevData[target.parentItem];
        const insertIndex = target.childIndex;
        const itemIds = items.map((item) => item.index);

        // Remove the items from their previous parent
        Object.values(prevData).forEach((item) => {
          if (item.children) {
            item.children = item.children.filter((child) => !itemIds.includes(child));
          }
        });

        // Add the items to the new parent at the new position
        const newData = {
          ...prevData,
          [parentNode.index]: {
            ...parentNode,
            children: [
              ...(parentNode.children ?? []).slice(0, insertIndex),
              ...itemIds,
              ...(parentNode.children ?? []).slice(insertIndex),
            ],
          },
        };

        return newData;
      });
    }
    if (target.targetType === "item") {
      setData((prevData) => {
        if (!prevData) return prevData;
        const parentNode = prevData[target.targetItem];
        const itemIds = items.map((item) => item.index);

        // Remove the items from their previous parent
        Object.values(prevData).forEach((item) => {
          if (item.children) {
            item.children = item.children.filter((child) => !itemIds.includes(child));
          }
        });

        // Add the items to the new parent
        const newData = {
          ...prevData,
          [parentNode.index]: {
            ...parentNode,
            children: [...(parentNode.children ?? []), ...itemIds],
          },
        };

        return newData;
      });
    }
  };