import { withStyles } from '@material-ui/core';
export interface Breadcrumb {
- label: string
+ label: string;
}
-interface BreadcrumbsDataProps {
- items: Breadcrumb[]
+interface BreadcrumbsProps {
+ items: Breadcrumb[];
+ onClick: (breadcrumb: Breadcrumb) => void;
}
-interface BreadcrumbsActionProps {
- onClick: (breadcrumb: Breadcrumb) => any
-}
-
-type BreadcrumbsProps = BreadcrumbsDataProps & BreadcrumbsActionProps & WithStyles<CssRules>;
-
-class Breadcrumbs extends React.Component<BreadcrumbsProps> {
-
- render() {
- const { classes, onClick } = this.props;
- return <Grid container alignItems="center">
- {
- this.getInactiveItems().map((item, index) => (
+const Breadcrumbs: React.SFC<BreadcrumbsProps & WithStyles<CssRules>> = ({ classes, onClick, items }) => {
+ return <Grid container alignItems="center">
+ {
+ items.map((item, index) => {
+ const isLastItem = index === items.length - 1;
+ return (
<React.Fragment key={index}>
<Button
color="inherit"
- className={classes.inactiveItem}
+ className={isLastItem ? classes.currentItem : classes.item}
onClick={() => onClick(item)}
>
{item.label}
</Button>
- <ChevronRightIcon color="inherit" className={classes.inactiveItem} />
+ {
+ !isLastItem && <ChevronRightIcon color="inherit" className={classes.item} />
+ }
</React.Fragment>
- ))
- }
- {
- this.getActiveItem().map((item, index) => (
- <Button
- color="inherit"
- key={index}
- onClick={() => onClick(item)}
- >
- {item.label}
- </Button>
- ))
- }
- </Grid>
- }
-
- getInactiveItems = () => {
- return this.props.items.slice(0, -1)
- }
-
- getActiveItem = () => {
- return this.props.items.slice(-1)
- }
-
-}
+ );
+ })
+ }
+ </Grid>;
+};
-type CssRules = 'inactiveItem'
+type CssRules = "item" | "currentItem";
const styles: StyleRulesCallback<CssRules> = theme => {
- const { unit } = theme.spacing
+ const { unit } = theme.spacing;
return {
- inactiveItem: {
+ item: {
opacity: 0.6
+ },
+ currentItem: {
+ opacity: 1
}
- }
-}
+ };
+};
-export default withStyles(styles)(Breadcrumbs)
+export default withStyles(styles)(Breadcrumbs);