src/components/tree/tree.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import * as React from 'react';
   6 import List from "@material-ui/core/List/List";
   7 import ListItem from "@material-ui/core/ListItem/ListItem";
   8 import { ReactElement } from "react";
   9 import Collapse from "@material-ui/core/Collapse/Collapse";
  10
  11 export interface TreeItem<T> {
  12     data: T;
  13     id: string;
  14     open: boolean;
  15     items?: Array<TreeItem<T>>;
  16 }
  17
  18 interface TreeProps<T> {
  19     items?: Array<TreeItem<T>>;
  20     render: (item: T) => ReactElement<{}>;
  21     toggleItem: (id: string) => any;
  22     level?: number;
  23 }
  24
  25 class Tree<T> extends React.Component<TreeProps<T>, {}> {
  26     render(): ReactElement<any> {
  27         const level = this.props.level ? this.props.level : 0;
  28         return <List component="div" style={{paddingBottom: '3px', paddingTop: '3px'}}>
  29             {this.props.items && this.props.items.map((it: TreeItem<T>, idx: number) =>
  30              <div key={`item/${level}/${idx}`}>
  31                 <ListItem button onClick={() => this.props.toggleItem(it.id)} style={{paddingLeft: (level + 1) * 15, paddingBottom: '3px', paddingTop: '3px'}}>
  32                     <i style={{marginRight: "10px"}} className={it.open ? "fas fa-caret-down" : "fas fa-caret-right"} />
  33                     {this.props.render(it.data)}
  34                 </ListItem>
  35                 {it.items && it.items.length > 0 &&
  36                 <Collapse in={it.open} timeout="auto" unmountOnExit>
  37                     <Tree items={it.items}
  38                         render={this.props.render}
  39                         toggleItem={this.props.toggleItem}
  40                         level={level + 1}/>
  41                 </Collapse>}
  42              </div>)}
  43         </List>
  44     }
  45 }
  46
  47 export default Tree;