From: Michal Klobukowski Date: Fri, 8 Jun 2018 12:48:34 +0000 (+0200) Subject: Create breadcrumbs component X-Git-Url: https://git.arvados.org/arvados.git/commitdiff_plain/06b26e9f05f048c3ea593a96d2659b6eecf847ea?ds=sidebyside Create breadcrumbs component Feature #13590 Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski --- diff --git a/src/components/main-app-bar/breadcrumbs/breadcrumbs.tsx b/src/components/main-app-bar/breadcrumbs/breadcrumbs.tsx new file mode 100644 index 0000000000..9803683d55 --- /dev/null +++ b/src/components/main-app-bar/breadcrumbs/breadcrumbs.tsx @@ -0,0 +1,58 @@ +// Copyright (C) The Arvados Authors. All rights reserved. +// +// SPDX-License-Identifier: AGPL-3.0 + +import * as React from 'react'; +import { Button, Grid, StyleRulesCallback, WithStyles } from '@material-ui/core'; +import ChevronRightIcon from '@material-ui/icons/ChevronRight'; +import { withStyles } from '@material-ui/core'; + +interface BreadcrumbsDataProps { + items: string[] +} + +type BreadcrumbsProps = BreadcrumbsDataProps & WithStyles; + +class Breadcrumbs extends React.Component { + + render() { + const { classes } = this.props; + return + { + this.getInactiveItems().map((item, index) => ( + + + + + )) + } + { + this.getActiveItem().map((item, index) => ( + + )) + } + + } + + getInactiveItems = () => { + return this.props.items.slice(0, -1) + } + + getActiveItem = () => { + return this.props.items.slice(-1) + } +} + +type CssRules = 'inactiveItem' + +const styles: StyleRulesCallback = theme => { + const { unit } = theme.spacing + return { + inactiveItem: { + opacity: 0.6 + } + } +} + +export default withStyles(styles)(Breadcrumbs) +