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 } 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">
  21         {
  22             items.map((item, index) => {
  23                 const isLastItem = index === items.length - 1;
  24                 return (
  25                     <React.Fragment key={index}>
  26                         <Button
  27                             color="inherit"
  28                             className={isLastItem ? classes.currentItem : classes.item}
  29                             onClick={() => onClick(item)}
  30                         >
  31                             {item.label}
  32                         </Button>
  33                         {
  34                             !isLastItem && <ChevronRightIcon color="inherit" className={classes.item} />
  35                         }
  36                     </React.Fragment>
  37                 );
  38             })
  39         }
  40     </Grid>;
  41 };
  42
  43 type CssRules = "item" | "currentItem";
  44
  45 const styles: StyleRulesCallback<CssRules> = theme => {
  46     const { unit } = theme.spacing;
  47     return {
  48         item: {
  49             opacity: 0.6
  50         },
  51         currentItem: {
  52             opacity: 1
  53         }
  54     };
  55 };
  56
  57 export default withStyles(styles)(Breadcrumbs);
  58