text: import React, { useState, useEffect } from 'react';
  
  import { ITreeNode, Tree, Tooltip, Position, Icon, Intent, Classes, Button } from '@blueprintjs/core';
  
  export class TTree extends React.Component {
      state = { nodes: this.props.contents? this.props.contents :INITIAL_STATE };
  
      handleNodeClick = (nodeData, _nodePath, e) => {
          const originallySelected = nodeData.isSelected;
          if (!e.shiftKey) {
              this.forEachNode(this.state.nodes, n => (n.isSelected = false));
          }
          nodeData.isSelected = originallySelected == null ? true : !originallySelected;
          this.setState(this.state);
          this.props.onClick(nodeData);
      };
  
      handleNodeCollapse = (nodeData) => {
          nodeData.isExpanded = false;
          this.setState(this.state);
      };
  
      handleNodeExpand = (nodeData) => {
          nodeData.isExpanded = true;
          this.setState(this.state);
      };
  
      forEachNode(nodes, callback) {
          if (nodes == null) {
              return;
          }
  
          for (const node of nodes) {
              callback(node);
              if (node.childNodes!=null) this.forEachNode(node.childNodes, callback);
          }
      }
      render() {
          return (
              <Tree
                  contents={this.state.nodes}
                  onNodeClick={this.handleNodeClick}
                  onNodeCollapse={this.handleNodeCollapse}
                  onNodeExpand={this.handleNodeExpand}
              />
          )
      }
  }
  
  
  const INITIAL_STATE = [
      {
          id: 0,
          hasCaret: true,
          icon: "folder-close",
          label: "Folder 0",
          isSelected: false
      },
      {
          id: 1,
          icon: "folder-close",
          isExpanded: true,
          label: (
              <Tooltip content="I'm a folder <3" position={Position.RIGHT}>
                  Folder 1
              </Tooltip>
          ),
          childNodes: [
              {
                  id: 2,
                  icon: "document",
                  label: "Item 0",
                  secondaryLabel: (
                      <div>
                          <Button minimal icon="plus" />
                          <Button minimal icon="minus" />
                      </div>
                  ),
              },
              {
                  id: 3,
                  icon: <Icon icon="tag" intent={Intent.PRIMARY} className={Classes.TREE_NODE_ICON} />,
                  label: "Organic meditation gluten-free, sriracha VHS drinking vinegar beard man.",
              },
              {
                  id: 4,
                  hasCaret: true,
                  icon: "folder-close",
                  label: (
                      <Tooltip content="foo" position={Position.RIGHT}>
                          Folder 2
                      </Tooltip>
                  ),
                  childNodes: [
                      { id: 5, label: "No-Icon Item" },
                      { id: 6, icon: "tag", label: "Item 1" },
                      {
                          id: 7,
                          hasCaret: true,
                          icon: "folder-close",
                          label: "Folder 3",
                          childNodes: [
                              { id: 8, icon: "document", label: "Item 0" },
                              { id: 9, icon: "tag", label: "Item 1" },
                          ],
                      },
                  ],
              },
          ],
      },
      {
          id: 2,
          hasCaret: true,
          icon: "folder-close",
          label: "Super secret files",
          disabled: true,
      },
  ];