46 lines
1.2 KiB
JavaScript
46 lines
1.2 KiB
JavaScript
import React, { useState } from "react";
|
|
import PropTypes from "prop-types";
|
|
import ToggleButton from "@material-ui/lab/ToggleButton";
|
|
import ToggleButtonGroup from "@material-ui/lab/ToggleButtonGroup";
|
|
import { Tooltip } from "@material-ui/core";
|
|
|
|
const NavigationButtons = ({ tabs, onTabChange }) => {
|
|
const [selected, setSelected] = useState(tabs[0].code);
|
|
|
|
const handleTabSelection = (_event, tabCode) => {
|
|
setSelected(tabCode);
|
|
onTabChange && onTabChange(tabCode);
|
|
};
|
|
|
|
return (
|
|
<ToggleButtonGroup
|
|
size="small"
|
|
value={selected}
|
|
exclusive
|
|
onChange={handleTabSelection}
|
|
>
|
|
{tabs.map(tab => (
|
|
<ToggleButton
|
|
key={tab.code}
|
|
value={tab.code}
|
|
aria-label="navigation buttons"
|
|
disabled={selected === tab.code}
|
|
>
|
|
<Tooltip title={tab.tooltip}>
|
|
<tab.icon color="primary" />
|
|
</Tooltip>
|
|
</ToggleButton>
|
|
))}
|
|
</ToggleButtonGroup>
|
|
);
|
|
};
|
|
|
|
NavigationButtons.propTypes = {
|
|
tabs: PropTypes.arrayOf(
|
|
PropTypes.shape({ code: PropTypes.string.isRequired })
|
|
).isRequired,
|
|
onTabChange: PropTypes.func
|
|
};
|
|
|
|
export default NavigationButtons;
|