88 lines
3.0 KiB
JavaScript
88 lines
3.0 KiB
JavaScript
import React from "react";
|
|
import { Tabs, Tab, Box, styled } from "@mui/material";
|
|
import CloseIcon from "@mui/icons-material/Close";
|
|
|
|
const StyledTab = styled(Tab)(({ theme }) => ({
|
|
minHeight: 48,
|
|
'&.Mui-selected': {
|
|
color: theme.palette.primary.main,
|
|
fontWeight: theme.typography.fontWeightMedium,
|
|
},
|
|
'&:focus-visible': {
|
|
outline: `2px solid ${theme.palette.primary.main}`,
|
|
outlineOffset: '-2px',
|
|
},
|
|
}));
|
|
|
|
const CustomTabs = ({ tabs, activeTab, onTabClick, onCloseTab }) => {
|
|
const handleMouseDown = (e, id) => {
|
|
if (e.button === 1) { // Middle mouse button
|
|
e.preventDefault();
|
|
onCloseTab(id);
|
|
}
|
|
};
|
|
|
|
const handleChange = (event, newValue) => {
|
|
onTabClick(newValue);
|
|
};
|
|
|
|
return (
|
|
<Box sx={{
|
|
borderBottom: 1,
|
|
borderColor: 'divider',
|
|
'& .MuiTabs-indicator': {
|
|
backgroundColor: 'primary.main',
|
|
}
|
|
}}>
|
|
<Tabs
|
|
value={activeTab}
|
|
onChange={handleChange}
|
|
variant="scrollable"
|
|
scrollButtons="auto"
|
|
aria-label="tabs"
|
|
>
|
|
{/* Статические вкладки */}
|
|
<StyledTab
|
|
label="Главная"
|
|
value="Главная"
|
|
onMouseDown={(e) => handleMouseDown(e, "Главная")}
|
|
/>
|
|
<StyledTab
|
|
label="Визуализация"
|
|
value="Визуализация"
|
|
onMouseDown={(e) => handleMouseDown(e, "Визуализация")}
|
|
/>
|
|
|
|
{/* Динамические вкладки */}
|
|
{tabs.map((tab) => (
|
|
<StyledTab
|
|
key={tab.id}
|
|
label={
|
|
<Box sx={{ display: "flex", alignItems: "center" }}>
|
|
<span>{tab.title}</span>
|
|
<CloseIcon
|
|
fontSize="small"
|
|
sx={{
|
|
ml: 1,
|
|
cursor: "pointer",
|
|
'&:hover': {
|
|
color: 'error.main'
|
|
}
|
|
}}
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
onCloseTab(tab.id);
|
|
}}
|
|
/>
|
|
</Box>
|
|
}
|
|
value={tab.id}
|
|
onMouseDown={(e) => handleMouseDown(e, tab.id)}
|
|
/>
|
|
))}
|
|
</Tabs>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default CustomTabs; |