1 // Copyright (C) The Arvados Authors. All rights reserved.
3 // SPDX-License-Identifier: AGPL-3.0
5 import * as React from 'react';
6 import { ReactElement } from 'react';
7 import { StyleRulesCallback, Theme, WithStyles, withStyles } from '@material-ui/core/styles';
8 import List from "@material-ui/core/List/List";
9 import ListItem from "@material-ui/core/ListItem/ListItem";
10 import ListItemText from "@material-ui/core/ListItemText/ListItemText";
11 import ListItemIcon from '@material-ui/core/ListItemIcon';
12 import Collapse from "@material-ui/core/Collapse/Collapse";
14 import { Typography } from '@material-ui/core';
16 export interface SidePanelItem {
26 interface SidePanelProps {
27 toggleOpen: (id: string) => void;
28 toggleActive: (id: string) => void;
29 sidePanelItems: SidePanelItem[];
30 handleCreationDialogOpen: () => void;
31 handleCreationDialogClose: () => void;
34 class SidePanel extends React.Component<SidePanelProps & WithStyles<CssRules>> {
35 render(): ReactElement<any> {
36 const { classes, toggleOpen, toggleActive, sidePanelItems, children } = this.props;
37 const { listItemText, leftSidePanelContainer, row, list, icon, projectIconMargin, active, activeArrow, inactiveArrow, arrowTransition, arrowRotate } = classes;
39 <div className={leftSidePanelContainer}>
41 {sidePanelItems.map(it => (
43 <ListItem button className={list} onClick={() => toggleActive(it.id)}>
44 <span className={row}>
45 {it.openAble ? <i onClick={() => toggleOpen(it.id)} className={`${it.active ? activeArrow : inactiveArrow}
46 ${it.open ? `fas fa-caret-down ${arrowTransition}` : `fas fa-caret-down ${arrowRotate}`}`} /> : null}
47 <ListItemIcon className={it.active ? active : ''}>
48 <i className={`${it.icon} ${icon} ${it.margin ? projectIconMargin : ''}`} />
50 <ListItemText className={listItemText} primary={<Typography className={it.active ? active : ''}>{it.name}</Typography>} />
54 <Collapse in={it.open} timeout="auto" unmountOnExit>
65 type CssRules = 'active' | 'listItemText' | 'row' | 'leftSidePanelContainer' | 'list' | 'icon' | 'projectIconMargin' |
66 'activeArrow' | 'inactiveArrow' | 'arrowRotate' | 'arrowTransition';
68 const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
87 transition: 'all 0.1s ease',
90 transition: 'all 0.1s ease',
91 transform: 'rotate(-90deg)',
93 leftSidePanelContainer: {
102 paddingBottom: '5px',
115 export default withStyles(styles)(SidePanel);