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