src/components/breadcrumbs/breadcrumbs.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 { Button, Grid, StyleRulesCallback, WithStyles, Typography, Tooltip } from '@material-ui/core';
   7 import ChevronRightIcon from '@material-ui/icons/ChevronRight';
   8 import { withStyles } from '@material-ui/core';
   9
  10 export interface Breadcrumb {
  11     label: string;
  12 }
  13
  14 interface BreadcrumbsProps {
  15     items: Breadcrumb[];
  16     onClick: (breadcrumb: Breadcrumb) => void;
  17     onContextMenu: (event: React.MouseEvent<HTMLElement>, breadcrumb: Breadcrumb) => void;
  18 }
  19
  20 const Breadcrumbs: React.SFC<BreadcrumbsProps & WithStyles<CssRules>> = ({ classes, onClick, onContextMenu, items }) => {
  21     return <Grid container alignItems="center" wrap="nowrap">
  22         {
  23             items.map((item, index) => {
  24                 const isLastItem = index === items.length - 1;
  25                 return (
  26                     <React.Fragment key={index}>
  27                         <Tooltip title={item.label}>
  28                             <Button
  29                                 color="inherit"
  30                                 className={isLastItem ? classes.currentItem : classes.item}
  31                                 onClick={() => onClick(item)}
  32                                 onContextMenu={event => onContextMenu(event, item)}>
  33                                 <Typography
  34                                     noWrap
  35                                     color="inherit"
  36                                     className={classes.label}>
  37                                     {item.label}
  38                                 </Typography>
  39                             </Button>
  40                         </Tooltip>
  41                         {!isLastItem && <ChevronRightIcon color="inherit" className={classes.item} />}
  42                     </React.Fragment>
  43                 );
  44             })
  45         }
  46     </Grid>;
  47 };
  48
  49 type CssRules = "item" | "currentItem" | "label";
  50
  51 const styles: StyleRulesCallback<CssRules> = theme => {
  52     return {
  53         item: {
  54             opacity: 0.6
  55         },
  56         currentItem: {
  57             opacity: 1
  58         },
  59         label: {
  60             textTransform: "none"
  61         }
  62     };
  63 };
  64
  65 export default withStyles(styles)(Breadcrumbs);
  66