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