src/views-components/details-panel/details-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 Drawer from '@material-ui/core/Drawer';
   7 import IconButton from "@material-ui/core/IconButton";
   8 import CloseIcon from '@material-ui/icons/Close';
   9 import FolderIcon from '@material-ui/icons/Folder';
  10 import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles';
  11 import { ArvadosTheme } from '../../common/custom-theme';
  12 import Attribute from '../../components/attribute/attribute';
  13 import Tabs from '@material-ui/core/Tabs';
  14 import Tab from '@material-ui/core/Tab';
  15 import Typography from '@material-ui/core/Typography';
  16 import Grid from '@material-ui/core/Grid';
  17 import * as classnames from "classnames";
  18
  19 export interface DetailsPanelProps {
  20     onCloseDrawer: () => void;
  21     isOpened: boolean;
  22 }
  23
  24 class DetailsPanel extends React.Component<DetailsPanelProps & WithStyles<CssRules>, {}> {
  25         state = {
  26                 tabsValue: 0,
  27         };
  28
  29         handleChange = (event: any, value: boolean) => {
  30                 this.setState({ tabsValue: value });
  31         }
  32
  33     renderTabContainer = (children: React.ReactElement<any>) =>
  34         <Typography className={this.props.classes.tabContainer} component="div">
  35             {children}
  36         </Typography>
  37
  38         render() {
  39         const { classes, onCloseDrawer, isOpened } = this.props;
  40                 const { tabsValue } = this.state;
  41         return (
  42             <div className={classnames([classes.container, { [classes.opened]: isOpened }])}>
  43                 <Drawer variant="permanent" anchor="right" classes={{ paper: classes.drawerPaper }}>
  44                                         <Typography component="div" className={classes.headerContainer}>
  45                                                 <Grid container alignItems='center' justify='space-around'>
  46                             <i className="fas fa-cogs fa-lg" />
  47                                                         <Typography variant="title">
  48                                                                 Tutorial pipeline
  49                                                         </Typography>
  50                             <IconButton color="inherit" onClick={onCloseDrawer}>
  51                                                                 <CloseIcon />
  52                                                         </IconButton>
  53                                                 </Grid>
  54                                         </Typography>
  55                                         <Tabs value={tabsValue} onChange={this.handleChange}>
  56                                                 <Tab disableRipple label="Details" />
  57                                                 <Tab disableRipple label="Activity" />
  58                                         </Tabs>
  59                     {tabsValue === 0 && this.renderTabContainer(
  60                         <Grid container direction="column">
  61                             <Attribute label="Type">Process</Attribute>
  62                             <Attribute label="Size">---</Attribute>
  63                             <Attribute label="Location">
  64                                 <FolderIcon />
  65                                 Projects
  66                             </Attribute>
  67                             <Attribute label="Owner">me</Attribute>
  68                                                 </Grid>
  69                                         )}
  70                     {tabsValue === 1 && this.renderTabContainer(
  71                         <Grid container direction="column">
  72                             <Attribute label="Type">Process</Attribute>
  73                             <Attribute label="Size">---</Attribute>
  74                             <Attribute label="Location">
  75                                 <FolderIcon />
  76                                 Projects
  77                             </Attribute>
  78                             <Attribute label="Owner">me</Attribute>
  79                         </Grid>
  80                                         )}
  81                 </Drawer>
  82             </div>
  83         );
  84     }
  85
  86 }
  87
  88 type CssRules = 'drawerPaper' | 'container' | 'opened' | 'headerContainer' | 'tabContainer';
  89
  90 const drawerWidth = 320;
  91 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  92         container: {
  93         width: 0,
  94                 position: 'relative',
  95         height: 'auto',
  96         transition: 'width 0.5s ease',
  97         '&$opened': {
  98             width: drawerWidth
  99         }
 100     },
 101     opened: {},
 102     drawerPaper: {
 103         position: 'relative',
 104         width: drawerWidth
 105         },
 106         headerContainer: {
 107         color: theme.palette.grey["600"],
 108         margin: `${theme.spacing.unit}px 0`,
 109         '& .fa-cogs': {
 110             fontSize: "24px"
 111         }
 112         },
 113         tabContainer: {
 114                 padding: theme.spacing.unit * 3
 115         }
 116 });
 117
 118 export default withStyles(styles)(DetailsPanel);