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