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, Theme } from "@material-ui/core/styles";
  10 import Tabs from '@material-ui/core/Tabs';
  11 import Tab from '@material-ui/core/Tab';
  12 import Typography from '@material-ui/core/Typography';
  13
  14 function TabContainer(props: any) {
  15         return (
  16                 <Typography component="div" style={{ padding: 8 * 3 }}>
  17                         {props.children}
  18                 </Typography>
  19         );
  20 }
  21
  22 export interface DetailsPanelProps {
  23     toggleDrawer: (isOpened: boolean) => void;
  24     isOpened: boolean;
  25 }
  26
  27 class DetailsPanel extends React.Component<DetailsPanelProps & WithStyles<CssRules>, {}> {
  28         state = {
  29                 value: 0,
  30         };
  31
  32         handleChange = (event: any, value: boolean) => {
  33                 this.setState({ value });
  34         }
  35
  36         render() {
  37                 const { classes, toggleDrawer, isOpened } = this.props;
  38                 const { value } = this.state;
  39         return (
  40             <div className={classes.container}>
  41                                 <Drawer variant="persistent" anchor="right" open={isOpened} onClose={() => toggleDrawer(false)}
  42                     classes={{
  43                         paper: classes.drawerPaper
  44                     }}>
  45                                         <h2 className={classes.title}>Tutorial pipeline</h2>
  46                                         <IconButton color="inherit" onClick={() => toggleDrawer(false)}>
  47                                                 <CloseIcon />
  48                                         </IconButton>
  49                                         <Tabs value={value} onChange={this.handleChange}
  50                                                 classes={{ root: classes.tabsRoot, indicator: classes.tabsIndicator }}>
  51                                                 <Tab
  52                                                         disableRipple
  53                                                         classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
  54                                                         label="Details" />
  55                                                 <Tab
  56                                                         disableRipple
  57                                                         classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
  58                                                         label="Activity" />
  59                                         </Tabs>
  60                                         {value === 0 && <TabContainer>
  61                                                 Item One
  62                                         </TabContainer>}
  63                                         {value === 1 && <TabContainer>
  64                                                 Item Two
  65                                         </TabContainer>}
  66                 </Drawer>
  67             </div>
  68         );
  69     }
  70
  71 }
  72
  73 type CssRules = 'drawerPaper' | 'container' | 'title' | 'tabsRoot' | 'tabsIndicator' | 'tabRoot' | 'tabSelected';
  74
  75 const drawerWidth = 320;
  76 const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
  77         container: {
  78                 position: 'relative',
  79                 height: 'auto'
  80         },
  81     drawerPaper: {
  82         position: 'relative',
  83         width: drawerWidth
  84         },
  85         title: {
  86                 padding: '10px 0px',
  87                 fontSize: '20px',
  88                 fontWeight: 400,
  89                 fontStyle: 'normal'
  90         },
  91         tabsRoot: {
  92                 borderBottom: '1px solid transparent',
  93         },
  94         tabsIndicator: {
  95                 backgroundColor: 'rgb(106, 27, 154)',
  96         },
  97         tabRoot: {
  98                 fontSize: '13px',
  99                 fontWeight: 400,
 100                 color: '#333333',
 101                 '&$tabSelected': {
 102                         fontWeight: 700,
 103                         color: 'rgb(106, 27, 154)'
 104                 },
 105         },
 106         tabSelected: {}
 107 });
 108
 109 export default withStyles(styles)(DetailsPanel);