[TreeView] Add recursive demo

[brad-klosterman]

Recursive TreeView

I would like to implement a recursive tree with drag and drop features.

I have it mostly built and would like someone to check the code.

Here is the recursive part. https://codesandbox.io/s/material-demo-woz8h

I will share the drag and drop part soon.

[oliviertassinari]

@brad-klosterman The recursive would probably make a nice new demo. Do you want to submit a pull request? :).

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import TreeView from "@material-ui/lab/TreeView";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import ChevronRightIcon from "@material-ui/icons/ChevronRight";
import TreeItem from "@material-ui/lab/TreeItem";

import { data } from "./data";

export default function FileSystemNavigator() {
  const classes = useStyles();

  const TreeRender = data => {
    const isChildren = data.children !== null;
    if (isChildren) {
      return (
        <TreeItem key={data.name} nodeId={data.name} label={data.name}>
          {data.children.map((node, idx) => TreeRender(node))}
        </TreeItem>
      );
    }
    return <TreeItem key={data.name} nodeId={data.name} label={data.name} />;
  };

  return (
    <TreeView
      className={classes.root}
      defaultCollapseIcon={<ExpandMoreIcon />}
      defaultExpandIcon={<ChevronRightIcon />}
    >
      {TreeRender(data)}
    </TreeView>
  );
}

const useStyles = makeStyles({
  root: {
    height: 216,
    flexGrow: 1,
    maxWidth: 400
  }
});

[Technologeek]

@oliviertassinari I can take this up and help @brad-klosterman with code review and implementing the additional features as he suggested in the post.

[thclark]

Lovely code, @brad-klosterman - wish I'd come across this before writing my own version yesterday (similar but not quite as elegant).

One review comment - you can make the isChildren test resilient not just to null, but to undefined and other non-useful stuff. Also, I believe children needs to be both an array and non-empty. That can all be tested compactly (per this SO post):

const TreeRender = data => {
  if (!Array.isArray(data.children) || !data.children.length) {
    // children does not exist, isn't an array, or is an array with length 0
    return <TreeItem key={data.name} nodeId={data.name} label={data.name} />;
  }
  // children is legit, return the recursed version
  return (
    <TreeItem key={data.name} nodeId={data.name} label={data.name}>
      {data.children.map((node, idx) => TreeRender(node))}
    </TreeItem>
  );
};

@oliviertassinari let's let brad reply, but if he's not keen / too busy I'll see if I can find a few hours to add this demo to the docs, because this would've saved me quite a bit.

[brad-klosterman]

Thank you for the comments. I have been very busy as I am working on this for my job. For the time being I have built my own version. I can share some of my code and we can rework the MUI demo.
https://codesandbox.io/s/material-demo-woz8h <<< under the TR folder there are parts to my project. The biggest challenge has been updating on the nodes that change.. I haven't found a good solution to selecting and deselecting nodes as each node needs to know which node is selected.

[thclark]

Nice work so far though @brad-klosterman
@oliviertassinari perhaps this should be split into two issues...

• adding recursive demo into the docs (pretty much done, and very commonly needed)
• implementing drag and drop as a separate demo (clearly brad has this on the way)

[brad-klosterman]

Sure thing. When I get some time I will clean up my project for a demo. The reason I shared the TR folder is for insight on the direction I am going. I am aware the code is unorganised as I am trying out a few different techniques. Thank you for the feedback.

[oliviertassinari]

@thclark Thanks for the feedback. I think that we could consider having an out of the box support for rich objects. Alternatively, a demo would be the minimum solution we should provide :).

Regarding the drag and drop, it's a paid feature we are considering make available as part of a Material-UI Enterprise version.

[oliviertassinari]

@Technologeek Did you make progress with the introduction of this demo in the documentation? :)

[captain-yossarian]

@oliviertassinari I can pick it up, if @brad-klosterman, @thclark and @Technologeek don't mind

[thclark]

be my guest @captain-yossarian ;)