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     active: boolean;
  16     items?: Array<TreeItem<T>>;
  17 }
  18
  19 interface TreeProps<T> {
  20     items?: Array<TreeItem<T>>;
  21     render: (item: TreeItem<T>) => ReactElement<{}>;
  22     toggleItem: (id: string) => any;
  23     level?: number;
  24 }
  25
  26 function colorArrows(open: boolean, color: string){
  27     return <i style={{marginRight: '10px', minWidth: '10px', color}} className={open ? "fas fa-caret-down" : "fas fa-caret-right"} />
  28 }
  29
  30 class Tree<T> extends React.Component<TreeProps<T>, {}> {
  31     render(): ReactElement<any> {
  32         const level = this.props.level ? this.props.level : 0;
  33         return <List component="div" style={{paddingBottom: '3px', paddingTop: '3px'}}>
  34             {this.props.items && this.props.items.map((it: TreeItem<T>, idx: number) =>
  35              <div key={`item/${level}/${idx}`}>
  36                 <ListItem button onClick={() => this.props.toggleItem(it.id)} style={{paddingLeft: (level + 1) * 15, paddingBottom: '3px', paddingTop: '3px'}}>
  37                     {it.active ? colorArrows(it.open, "#4285F6") : colorArrows(it.open, "#333")}
  38                     {this.props.render(it)}
  39                 </ListItem>
  40                 {it.items && it.items.length > 0 &&
  41                 <Collapse in={it.open} timeout="auto" unmountOnExit>
  42                     <Tree items={it.items}
  43                         render={this.props.render}
  44                         toggleItem={this.props.toggleItem}
  45                         level={level + 1}/>
  46                 </Collapse>}
  47              </div>)}
  48         </List>
  49     }
  50 }
  51
  52 export default Tree;