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