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