1 // Copyright (C) The Arvados Authors. All rights reserved.
3 // SPDX-License-Identifier: AGPL-3.0
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';
14 function TabContainer(props: any) {
16 <Typography component="div" style={{ padding: 8 * 3 }}>
22 export interface DetailsPanelProps {
23 toggleDrawer: (isOpened: boolean) => void;
27 class DetailsPanel extends React.Component<DetailsPanelProps & WithStyles<CssRules>, {}> {
32 handleChange = (event: any, value: boolean) => {
33 this.setState({ value });
37 const { classes, toggleDrawer, isOpened } = this.props;
38 const { value } = this.state;
40 <div className={classes.container}>
41 <Drawer variant="persistent" anchor="right" open={isOpened} onClose={() => toggleDrawer(false)}
43 paper: classes.drawerPaper
45 <h2 className={classes.title}>Tutorial pipeline</h2>
46 <IconButton color="inherit" onClick={() => toggleDrawer(false)}>
49 <Tabs value={value} onChange={this.handleChange}
50 classes={{ root: classes.tabsRoot, indicator: classes.tabsIndicator }}>
53 classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
57 classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
60 {value === 0 && <TabContainer>
63 {value === 1 && <TabContainer>
73 type CssRules = 'drawerPaper' | 'container' | 'title' | 'tabsRoot' | 'tabsIndicator' | 'tabRoot' | 'tabSelected';
75 const drawerWidth = 320;
76 const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
92 borderBottom: '1px solid transparent',
95 backgroundColor: 'rgb(106, 27, 154)',
103 color: 'rgb(106, 27, 154)'
109 export default withStyles(styles)(DetailsPanel);