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