0

I have a json of files and folders to be rendered as a MUI TreeView component. The treeview works perfectly fine. I need to add a filter to this Treeview component. I am new to React and Javascript. Could you please help me out with this?

The JSON structure for the treeview looks something like this:

const treeViewApiData = {
  name: "fl1",
  path: "folder 1",
  children: [
    {
      name: "f1",
      path: "file 1",
      children: [],
      isFile: true,
    },
    {
      name: "f2",
      path: "file 2",
      children: [],
      isFile: true,
    },
    {
      name: "f3",
      path: "file 3",
      children: [],
      isFile: true,
    },
  ],
  isFile: false,
};

The code for my richObjectTreeView.js looks like this:

export default function RichObjectTreeView(props) {
  const dispatch = useDispatch();

  const handleOnItemClick = (event, nodeIds) => {
        // Displays the node clicked onto the dashboard if it is a file.
    }
  };

  const renderTree = (nodes) => {
    if (!nodes || nodes.length === 0) {
      return null;
    }

    return (
      <TreeItem key={nodes.path} nodeId={nodes.path} label={nodes.name}>
        {Array.isArray(nodes.children)
          ? nodes.children.map((node) => renderTree(node))
          : null}
      </TreeItem>
    );
  };

  return props.treeViewApiData ? (
    <TreeView
      aria-label="rich object"
      defaultCollapseIcon={
        <>
          <ExpandMoreIcon />
          <FolderOpenIcon sx={{ marginRight: "12px" }} />
        </>
      }
      defaultExpanded={["root"]}
      defaultExpandIcon={
        <>
          <ChevronRightIcon />
          <FolderIcon sx={{ marginRight: "12px" }} />
        </>
      }
      defaultEndIcon={<ArticleIcon />}
      sx={{ height: 110, flexGrow: 1, maxWidth: 400, overflowY: "auto" }}
      onNodeFocus={handleOnItemClick}
    >
      {renderTree(props.treeViewApiData)}
    </TreeView>
  ) : (
    <CircularProgress sx={{ marginLeft: "100px", marginTop: "100px" }} />
  );
}
Shreyas Kulkarni
  • 47
  • 7
  • I'm sorry, but I don't see a question here. What's not working? – Scott Sauyet Jul 13 '22 at 13:20
  • I need to help integrating a filter for the treeview component I have above. @ScottSauyet – Shreyas Kulkarni Jul 13 '22 at 17:59
  • What kind of filter? Does it run on your input data before you display it? Or is it meant to be part of your rendering logic? Most of all, what have you tried so far? – Scott Sauyet Jul 13 '22 at 18:16
  • By filter I meant something like this - https://codesandbox.io/s/o4ybpz?file=/demo.js. It's supposed to be during rendering. As and when the user types, the matching treeNodes should show. I have tried most of the blogs/posts from google search but none of them seem to be working. @ScottSauyet – Shreyas Kulkarni Jul 13 '22 at 21:22
  • I'm afraid I can't see that (blocked by paranoid employer.) You can [embed a snippet](https://meta.stackoverflow.com/questions/358992) to show more of your code in action. Perhaps that would clear things up. But such a filter should update your underlying model, correct? – Scott Sauyet Jul 14 '22 at 13:09
  • The second snippet in [this answer](https://stackoverflow.com/a/65442868) might give you a start (although it doesn't use React.) – Scott Sauyet Jul 14 '22 at 13:16

0 Answers0