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 { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles';
   9 import { ArvadosTheme } from '../../common/custom-theme';
  10 import Attribute from '../../components/attribute/attribute';
  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 import EmptyState from '../../components/empty-state/empty-state';
  17 import IconBase, { IconTypes } from '../../components/icon/icon';
  18
  19 export interface DetailsPanelDataProps {
  20     onCloseDrawer: () => void;
  21     isOpened: boolean;
  22     renderHeader?: React.ComponentType<{}>;
  23     renderDetails?: React.ComponentType<{}>;
  24     renderActivity?: React.ComponentType<{}>;
  25 }
  26
  27 type DetailsPanelProps = DetailsPanelDataProps & WithStyles<CssRules>;
  28
  29 class DetailsPanel extends React.Component<DetailsPanelProps, {}> {
  30         state = {
  31         tabsValue: 0
  32         };
  33
  34         handleChange = (event: any, value: boolean) => {
  35                 this.setState({ tabsValue: value });
  36         }
  37
  38     renderTabContainer = (children: React.ReactElement<any>) =>
  39         <Typography className={this.props.classes.tabContainer} component="div">
  40             {children}
  41         </Typography>
  42
  43         render() {
  44         const { classes, onCloseDrawer, isOpened, renderHeader, renderDetails, renderActivity } = this.props;
  45         const { tabsValue } = this.state;
  46         return (
  47             <Typography component="div" className={classnames([classes.container, { [classes.opened]: isOpened }])}>
  48                 <Drawer variant="permanent" anchor="right" classes={{ paper: classes.drawerPaper }}>
  49                                         <Typography component="div" className={classes.headerContainer}>
  50                                                 <Grid container alignItems='center' justify='space-around'>
  51                             {renderHeader}
  52                             {/* TODO: renderHeader */}
  53                             <IconBase icon={IconTypes.PROCESS} />
  54                                                         <Typography variant="title">
  55                                                                 Tutorial pipeline
  56                                                         </Typography>
  57                             {/* End */}
  58                             <IconButton color="inherit" onClick={onCloseDrawer}>
  59                                 <IconBase icon={IconTypes.CLOSE} />
  60                                                         </IconButton>
  61                                                 </Grid>
  62                                         </Typography>
  63                                         <Tabs value={tabsValue} onChange={this.handleChange}>
  64                                                 <Tab disableRipple label="Details" />
  65                                                 <Tab disableRipple label="Activity" />
  66                                         </Tabs>
  67                     {tabsValue === 0 && this.renderTabContainer(
  68                         <Grid container direction="column">
  69                             {renderDetails}
  70                             <EmptyState icon={IconTypes.ANNOUNCEMENT}
  71                                 message='Select a file or folder to view its details.' />
  72                             <Attribute label='Type' value='Process' />
  73                             <Attribute label='Size' value='---' />
  74                             <Attribute label="Location">
  75                                 <IconBase icon={IconTypes.FOLDER} />
  76                                 Projects
  77                             </Attribute>
  78                             <Attribute label='Outputs' link='http://www.google.pl' value='New output as link' />
  79                             <Attribute label='Owner' value='me' />
  80                                                 </Grid>
  81                                         )}
  82                     {tabsValue === 1 && this.renderTabContainer(
  83                         <Grid container direction="column">
  84                             {renderActivity}
  85                             <EmptyState icon={IconTypes.ANNOUNCEMENT} message='Select a file or folder to view its details.' />
  86                         </Grid>
  87                                         )}
  88                 </Drawer>
  89             </Typography>
  90         );
  91     }
  92
  93 }
  94
  95 type CssRules = 'drawerPaper' | 'container' | 'opened' | 'headerContainer' | 'tabContainer';
  96
  97 const drawerWidth = 320;
  98 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  99         container: {
 100         width: 0,
 101                 position: 'relative',
 102         height: 'auto',
 103         transition: 'width 0.5s ease',
 104         '&$opened': {
 105             width: drawerWidth
 106         }
 107     },
 108     opened: {},
 109     drawerPaper: {
 110         position: 'relative',
 111         width: drawerWidth
 112         },
 113         headerContainer: {
 114         color: theme.palette.grey["600"],
 115         margin: `${theme.spacing.unit}px 0`,
 116         '& .fa-cogs': {
 117             fontSize: "24px",
 118             color: theme.customs.colors.green700
 119         }
 120         },
 121         tabContainer: {
 122                 padding: theme.spacing.unit * 3
 123         }
 124 });
 125
 126 export default withStyles(styles)(DetailsPanel);