src/components/side-panel/side-panel.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 { ReactElement } from 'react';
   7 import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles';
   8 import { ArvadosTheme } from '../../common/custom-theme';
   9 import { List, ListItem, ListItemText, ListItemIcon, Collapse, Typography } from "@material-ui/core";
  10 import { SidePanelRightArrowIcon, IconType } from '../icon/icon';
  11 import * as classnames from "classnames";
  12
  13 export interface SidePanelItem {
  14     id: string;
  15     name: string;
  16     icon: IconType;
  17     active?: boolean;
  18     open?: boolean;
  19     margin?: boolean;
  20     openAble?: boolean;
  21 }
  22
  23 interface SidePanelProps {
  24     toggleOpen: (id: string) => void;
  25     toggleActive: (id: string) => void;
  26     sidePanelItems: SidePanelItem[];
  27     onContextMenu: (event: React.MouseEvent<HTMLElement>, item: SidePanelItem) => void;
  28 }
  29
  30 class SidePanel extends React.Component<SidePanelProps & WithStyles<CssRules>> {
  31     render(): ReactElement<any> {
  32         const { classes, toggleOpen, toggleActive, sidePanelItems, children } = this.props;
  33         const { listItemText, leftSidePanelContainer, row, list, icon, projectIconMargin, active, iconArrowContainer } = classes;
  34         return (
  35             <div className={leftSidePanelContainer}>
  36                 <List>
  37                     {sidePanelItems.map(it => (
  38                         <span key={it.name}>
  39                             <ListItem button className={list} onClick={() => toggleActive(it.id)} onContextMenu={this.handleRowContextMenu(it)}>
  40                                 <span className={row}>
  41                                     {it.openAble ? (
  42                                         <i onClick={() => toggleOpen(it.id)} className={iconArrowContainer}>
  43                                             <SidePanelRightArrowIcon className={this.getIconClassNames(it.open, it.active)} />
  44                                         </i>
  45                                     ) : null}
  46                                     <ListItemIcon className={it.active ? active : ''}>
  47                                         {<it.icon className={`${icon} ${it.margin ? projectIconMargin : ''}`} />}
  48                                     </ListItemIcon>
  49                                     <ListItemText className={listItemText}
  50                                         primary={renderListItemText(it.name, active, it.active)} />
  51                                 </span>
  52                             </ListItem>
  53                             {it.openAble ? (
  54                                 <Collapse in={it.open} timeout="auto" unmountOnExit>
  55                                     {children}
  56                                 </Collapse>
  57                             ) : null}
  58                         </span>
  59                     ))}
  60                 </List>
  61             </div>
  62         );
  63     }
  64
  65     getIconClassNames = (itemOpen ?: boolean, itemActive ?: boolean) => {
  66         const { classes } = this.props;
  67         return classnames(classes.iconArrow, {
  68             [classes.iconOpen]: itemOpen,
  69             [classes.iconClose]: !itemOpen,
  70             [classes.active]: itemActive
  71         });
  72     }
  73
  74     handleRowContextMenu = (item: SidePanelItem) =>
  75         (event: React.MouseEvent<HTMLElement>) =>
  76             item.openAble ? this.props.onContextMenu(event, item) : null
  77
  78 }
  79
  80 const renderListItemText = (itemName: string, active: string, itemActive?: boolean) =>
  81     <Typography className={itemActive ? active : ''}>{itemName}</Typography>;
  82
  83 type CssRules = 'active' | 'listItemText' | 'row' | 'leftSidePanelContainer' | 'list' | 'icon' |
  84     'projectIconMargin' | 'iconClose' | 'iconOpen' | 'iconArrowContainer' | 'iconArrow';
  85
  86 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  87     active: {
  88         color: theme.palette.primary.main,
  89     },
  90     listItemText: {
  91         padding: '0px',
  92     },
  93     row: {
  94         display: 'flex',
  95         alignItems: 'center',
  96     },
  97     iconArrowContainer: {
  98         color: theme.palette.grey["700"],
  99         height: '14px',
 100         position: 'absolute'
 101     },
 102     iconArrow: {
 103         fontSize: '14px'
 104     },
 105     iconClose: {
 106         transition: 'all 0.1s ease',
 107     },
 108     iconOpen: {
 109         transition: 'all 0.1s ease',
 110         transform: 'rotate(90deg)',
 111     },
 112     leftSidePanelContainer: {
 113         overflowY: 'auto',
 114         minWidth: '240px',
 115         whiteSpace: 'nowrap',
 116         marginTop: '52px',
 117         display: 'flex',
 118         flexGrow: 1,
 119     },
 120     list: {
 121         padding: '5px 0px 5px 14px',
 122         minWidth: '240px',
 123     },
 124     icon: {
 125         fontSize: '20px'
 126     },
 127     projectIconMargin: {
 128         marginLeft: '17px',
 129     }
 130 });
 131
 132 export default withStyles(styles)(SidePanel);