src/components/main-app-bar/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 interface BreadcrumbsDataProps {
  11     items: string[]
  12 }
  13
  14 type BreadcrumbsProps = BreadcrumbsDataProps & WithStyles<CssRules>;
  15
  16 class Breadcrumbs extends React.Component<BreadcrumbsProps> {
  17
  18     render() {
  19         const { classes } = this.props;
  20         return <Grid container alignItems="center">
  21             {
  22                 this.getInactiveItems().map((item, index) => (
  23                     <React.Fragment key={index}>
  24                         <Button color="inherit" className={classes.inactiveItem}>{item}</Button>
  25                         <ChevronRightIcon color="inherit" className={classes.inactiveItem} />
  26                     </React.Fragment>
  27                 ))
  28             }
  29             {
  30                 this.getActiveItem().map((item, index) => (
  31                     <Button key={index} color="inherit">{item}</Button>
  32                 ))
  33             }
  34         </Grid>
  35     }
  36
  37     getInactiveItems = () => {
  38         return this.props.items.slice(0, -1)
  39     }
  40
  41     getActiveItem = () => {
  42         return this.props.items.slice(-1)
  43     }
  44 }
  45
  46 type CssRules = 'inactiveItem'
  47
  48 const styles: StyleRulesCallback<CssRules> = theme => {
  49     const { unit } = theme.spacing
  50     return {
  51         inactiveItem: {
  52             opacity: 0.6
  53         }
  54     }
  55 }
  56
  57 export default withStyles(styles)(Breadcrumbs)
  58