- getInactiveItems(items).map((item, index) => (
- <React.Fragment key={index}>
- <Button
- color="inherit"
- className={classes.inactiveItem}
- onClick={() => onClick(item)}
- >
- {item.label}
- </Button>
- <ChevronRightIcon color="inherit" className={classes.inactiveItem} />
- </React.Fragment>
- ))
- }
- {
- getActiveItem(items).map((item, index) => (
- <Button
- color="inherit"
- key={index}
- onClick={() => onClick(item)}
- >
- {item.label}
- </Button>
- ))
+ items.map((item, index) => {
+ const isLastItem = index === items.length - 1;
+ return (
+ <React.Fragment key={index}>
+ <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} />
+ }
+ </React.Fragment>
+ );
+ })