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 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 import { IconType, FreezeIcon } from 'components/icon/icon';
  11 import grey from '@material-ui/core/colors/grey';
  12
  13 export interface Breadcrumb {
  14     label: string;
  15     icon?: IconType;
  16     isFrozen?: boolean;
  17 }
  18
  19 type CssRules = "item" | "currentItem" | "label" | "icon";
  20
  21 const styles: StyleRulesCallback<CssRules> = theme => ({
  22     item: {
  23         opacity: 0.6
  24     },
  25     currentItem: {
  26         opacity: 1
  27     },
  28     label: {
  29         textTransform: "none"
  30     },
  31     icon: {
  32         fontSize: 20,
  33         color: grey["600"],
  34         marginRight: '10px'
  35     },
  36 });
  37
  38 export interface BreadcrumbsProps {
  39     items: Breadcrumb[];
  40     onClick: (breadcrumb: Breadcrumb) => void;
  41     onContextMenu: (event: React.MouseEvent<HTMLElement>, breadcrumb: Breadcrumb) => void;
  42 }
  43
  44 export const Breadcrumbs = withStyles(styles)(
  45     ({ classes, onClick, onContextMenu, items }: BreadcrumbsProps & WithStyles<CssRules>) =>
  46     <Grid container data-cy='breadcrumbs' alignItems="center" wrap="nowrap">
  47     {
  48         items.map((item, index) => {
  49             const isLastItem = index === items.length - 1;
  50             const isFirstItem = index === 0;
  51             const Icon = item.icon || (() => (null));
  52             return (
  53                 <React.Fragment key={index}>
  54                     {isFirstItem ? null : <IllegalNamingWarning name={item.label} />}
  55                     <Tooltip title={item.label}>
  56                         <Button
  57                             data-cy={
  58                                 isFirstItem
  59                                 ? 'breadcrumb-first'
  60                                 : isLastItem
  61                                     ? 'breadcrumb-last'
  62                                     : false}
  63                             color="inherit"
  64                             className={isLastItem ? classes.currentItem : classes.item}
  65                             onClick={() => onClick(item)}
  66                             onContextMenu={event => onContextMenu(event, item)}>
  67                             <Icon className={classes.icon} />
  68                             {
  69                                 item.isFrozen ? <FreezeIcon className={classes.icon} /> : null
  70                             }
  71                             <Typography
  72                                 noWrap
  73                                 color="inherit"
  74                                 className={classes.label}>
  75                                 {item.label}
  76                             </Typography>
  77                         </Button>
  78                     </Tooltip>
  79                     {!isLastItem && <ChevronRightIcon color="inherit" className={classes.item} />}
  80                 </React.Fragment>
  81             );
  82         })
  83     }
  84     </Grid>
  85 );