lukasbach / react-complex-tree

Unopinionated Accessible Tree Component with Multi-Select and Drag-And-Drop
https://rct.lukasbach.com
MIT License
953 stars 76 forks source link

Tree fails to render or appear in DOM #407

Open ck-cklinger opened 1 month ago

ck-cklinger commented 1 month ago

Describe the bug

Starting off with this library (this is great by the way, thank you for creating and maintaining this library), so attempting to start pretty basic and then adapt it to my specific needs. I have a component that should hold the tree:

import {
  UncontrolledTreeEnvironment,
  StaticTreeDataProvider,
  Tree,
} from "react-complex-tree";

const CategoryTree = () => {
  const readTemplate = (template: any, data: any = { items: {} }): any => {
    for (const [key, value] of Object.entries(template)) {
      // eslint-disable-next-line no-param-reassign
      data.items[key] = {
        index: key,
        canMove: true,
        isFolder: value !== null,
        children:
          value !== null ? Object.keys(value as Record<string, unknown>) : [],
        // : undefined,
        data: key,
        canRename: true,
      };

      if (value !== null) {
        readTemplate(value, data);
      }
    }
    return data;
  };

  const categoryItems = {
    root: {
      container: {
        item0: null,
        item1: null,
        item2: null,
        item3: {
          inner0: null,
          inner1: null,
          inner2: null,
          inner3: null,
        },
        item4: null,
        item5: null,
      },
    },
  };

  const items = readTemplate(categoryItems);
  console.log(items);

  return (
    <UncontrolledTreeEnvironment
      dataProvider={
        new StaticTreeDataProvider(items, (item, data) => ({
          ...item,
          data,
        }))
      }
      getItemTitle={(item) => item.data}
      viewState={{
        "tree-1": {
          expandedItems: [],
        },
      }}
    >
      <Tree treeId="tree-1" rootItem="root" treeLabel="Test" />
    </UncontrolledTreeEnvironment>
  );
};

export default CategoryTree;

This is basically ripped straight from the docs/example code in the source files, so I would expect it would work.

The issue I'm running into is that the Tree component does not render (I have another parent component that includes <CategoryTree /> as one of its children). There's no error in the console and no flags in my IDE, but it doesn't show up in my browser and I also can't find it in the DOM at all.

Expected behavior

I would expect to see something similar to here: https://rct.lukasbach.com/docs/guides/static-data-provider

Additional context

Currently running in a dev environment using:

Running in Chrome version 127.0.6533.89 on Mac OS Venture (13.0)

I'm happy to provide any other information that may help in figuring this out. I'm probably just doing something dumb and this isn't actually a bug, but I can't be sure of that at the moment.

ck-cklinger commented 1 month ago

With some slight code changes, I now have a version of it working - still not sure why this original code would not render anything though...