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">
  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) * 30}}>
  32                     {this.props.render(it.data)}
  33                 </ListItem>
  34                 {it.items && it.items.length > 0 &&
  35                 <Collapse in={it.open} timeout="auto" unmountOnExit>
  36                     <Tree items={it.items}
  37                         render={this.props.render}
  38                         toggleItem={this.props.toggleItem}
  39                         level={level + 1}/>
  40                 </Collapse>}
  41              </div>)}
  42         </List>
  43     }
  44 }
  45
  46 export default Tree;