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, ListItem, ListItemIcon, Collapse } from "@material-ui/core";
   7 import { StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core/styles';
   8 import { ReactElement } from "react";
   9 import CircularProgress from '@material-ui/core/CircularProgress';
  10 import * as classnames from "classnames";
  11
  12 import { ArvadosTheme } from '../../common/custom-theme';
  13 import { SidePanelRightArrowIcon } from '../icon/icon';
  14
  15 type CssRules = 'list' | 'active' | 'loader' | 'toggableIconContainer' | 'iconClose' | 'iconOpen' | 'toggableIcon';
  16
  17 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  18     list: {
  19         padding: '3px 0px'
  20     },
  21     loader: {
  22         position: 'absolute',
  23         transform: 'translate(0px)',
  24         top: '3px'
  25     },
  26     toggableIconContainer: {
  27         color: theme.palette.grey["700"],
  28         height: '14px',
  29         position: 'absolute'
  30     },
  31     toggableIcon: {
  32         fontSize: '14px'
  33     },
  34     active: {
  35         color: theme.palette.primary.main,
  36     },
  37     iconClose: {
  38         transition: 'all 0.1s ease',
  39     },
  40     iconOpen: {
  41         transition: 'all 0.1s ease',
  42         transform: 'rotate(90deg)',
  43     }
  44 });
  45
  46 export enum TreeItemStatus {
  47     INITIAL,
  48     PENDING,
  49     LOADED
  50 }
  51
  52 export interface TreeItem<T> {
  53     data: T;
  54     id: string;
  55     open: boolean;
  56     active: boolean;
  57     status: TreeItemStatus;
  58     toggled?: boolean;
  59     items?: Array<TreeItem<T>>;
  60 }
  61
  62 interface TreeProps<T> {
  63     items?: Array<TreeItem<T>>;
  64     render: (item: TreeItem<T>, level?: number) => ReactElement<{}>;
  65     toggleItemOpen: (id: string, status: TreeItemStatus) => void;
  66     toggleItemActive: (id: string, status: TreeItemStatus) => void;
  67     level?: number;
  68     onContextMenu: (event: React.MouseEvent<HTMLElement>, item: TreeItem<T>) => void;
  69 }
  70
  71 export const Tree = withStyles(styles)(
  72     class Component<T> extends React.Component<TreeProps<T> & WithStyles<CssRules>, {}> {
  73         render(): ReactElement<any> {
  74             const level = this.props.level ? this.props.level : 0;
  75             const { classes, render, toggleItemOpen, items, toggleItemActive, onContextMenu } = this.props;
  76             const { list, loader, toggableIconContainer } = classes;
  77             return <List component="div" className={list}>
  78                 {items && items.map((it: TreeItem<T>, idx: number) =>
  79                     <div key={`item/${level}/${idx}`}>
  80                         <ListItem button className={list} style={{ paddingLeft: (level + 1) * 20 }}
  81                             onClick={() => toggleItemActive(it.id, it.status)}
  82                             onContextMenu={this.handleRowContextMenu(it)}>
  83                             {it.status === TreeItemStatus.PENDING ?
  84                                 <CircularProgress size={10} className={loader} /> : null}
  85                             <i onClick={() => this.props.toggleItemOpen(it.id, it.status)}
  86                                 className={toggableIconContainer}>
  87                                 <ListItemIcon className={this.getToggableIconClassNames(it.open, it.active)}>
  88                                     {it.toggled && it.items && it.items.length === 0 ? <span /> : <SidePanelRightArrowIcon />}
  89                                 </ListItemIcon>
  90                             </i>
  91                             {render(it, level)}
  92                         </ListItem>
  93                         {it.items && it.items.length > 0 &&
  94                             <Collapse in={it.open} timeout="auto" unmountOnExit>
  95                                 <Tree
  96                                     items={it.items}
  97                                     render={render}
  98                                     toggleItemOpen={toggleItemOpen}
  99                                     toggleItemActive={toggleItemActive}
 100                                     level={level + 1}
 101                                     onContextMenu={onContextMenu} />
 102                             </Collapse>}
 103                     </div>)}
 104             </List>;
 105         }
 106
 107         getToggableIconClassNames = (isOpen?: boolean, isActive?: boolean) => {
 108             const { iconOpen, iconClose, active, toggableIcon } = this.props.classes;
 109             return classnames(toggableIcon, {
 110                 [iconOpen]: isOpen,
 111                 [iconClose]: !isOpen,
 112                 [active]: isActive
 113             });
 114         }
 115
 116         handleRowContextMenu = (item: TreeItem<T>) =>
 117             (event: React.MouseEvent<HTMLElement>) =>
 118                 this.props.onContextMenu(event, item)
 119     }
 120 );