// SPDX-License-Identifier: AGPL-3.0
import * as React from 'react';
-import { Button, Grid, StyleRulesCallback, WithStyles } from '@material-ui/core';
+import { Button, Grid, StyleRulesCallback, WithStyles, Typography, Tooltip } from '@material-ui/core';
import ChevronRightIcon from '@material-ui/icons/ChevronRight';
import { withStyles } from '@material-ui/core';
}
const Breadcrumbs: React.SFC<BreadcrumbsProps & WithStyles<CssRules>> = ({ classes, onClick, items }) => {
- return <Grid container alignItems="center">
+ return <Grid container alignItems="center" wrap="nowrap">
{
items.map((item, index) => {
const isLastItem = index === items.length - 1;
return (
<React.Fragment key={index}>
- <Button
- color="inherit"
- className={isLastItem ? classes.currentItem : classes.item}
- onClick={() => onClick(item)}
- >
- {item.label}
- </Button>
+ <Tooltip title={item.label}>
+ <Button
+ color="inherit"
+ className={isLastItem ? classes.currentItem : classes.item}
+ onClick={() => onClick(item)}
+ >
+ <Typography
+ noWrap
+ color="inherit"
+ className={classes.label}
+ >
+ {item.label}
+ </Typography>
+ </Button>
+ </Tooltip>
{
!isLastItem && <ChevronRightIcon color="inherit" className={classes.item} />
}
</Grid>;
};
-type CssRules = "item" | "currentItem";
+type CssRules = "item" | "currentItem" | "label";
const styles: StyleRulesCallback<CssRules> = theme => {
const { unit } = theme.spacing;
},
currentItem: {
opacity: 1
+ },
+ label: {
+ textTransform: "none"
}
};
};