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