119 lines
3.8 KiB
JavaScript
119 lines
3.8 KiB
JavaScript
import React from "react";
|
|
import { Tabs, Tab, Box, styled, Typography } from "@mui/material";
|
|
import CloseIcon from "@mui/icons-material/Close";
|
|
|
|
const StyledTab = styled(Tab)(({ theme }) => ({
|
|
minHeight: 48,
|
|
padding: theme.spacing(1, 2),
|
|
textTransform: 'none',
|
|
'&.Mui-selected': {
|
|
color: theme.palette.primary.main,
|
|
fontWeight: theme.typography.fontWeightMedium,
|
|
},
|
|
'&:focus-visible': {
|
|
outline: `2px solid ${theme.palette.primary.main}`,
|
|
outlineOffset: '-2px',
|
|
},
|
|
}));
|
|
|
|
const TabLabel = ({ title, onClose }) => {
|
|
return (
|
|
<Box sx={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
minWidth: 0 // Для корректного обрезания длинного текста
|
|
}}>
|
|
<Typography
|
|
variant="body2"
|
|
noWrap
|
|
sx={{
|
|
maxWidth: 120,
|
|
textOverflow: 'ellipsis',
|
|
overflow: 'hidden'
|
|
}}
|
|
>
|
|
{title}
|
|
</Typography>
|
|
<CloseIcon
|
|
fontSize="small"
|
|
sx={{
|
|
ml: 1,
|
|
cursor: "pointer",
|
|
flexShrink: 0,
|
|
'&:hover': {
|
|
color: 'error.main'
|
|
}
|
|
}}
|
|
onClick={onClose}
|
|
/>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
const CustomTabs = ({ tabs, activeTab, onTabClick, onCloseTab }) => {
|
|
const handleMouseDown = (e, id) => {
|
|
if (e.button === 1) { // Средняя кнопка мыши
|
|
e.preventDefault();
|
|
onCloseTab(id);
|
|
}
|
|
};
|
|
|
|
const handleChange = (event, newValue) => {
|
|
onTabClick(newValue);
|
|
};
|
|
|
|
// Статические вкладки (сохраняем оригинальные id)
|
|
const staticTabs = [
|
|
{ id: "Главная", title: "Главная" },
|
|
{ id: "Визуализация", title: "Визуализация" }
|
|
];
|
|
|
|
return (
|
|
<Box sx={{
|
|
borderBottom: 1,
|
|
borderColor: 'divider',
|
|
'& .MuiTabs-indicator': {
|
|
backgroundColor: 'primary.main',
|
|
}
|
|
}}>
|
|
<Tabs
|
|
value={activeTab}
|
|
onChange={handleChange}
|
|
variant="scrollable"
|
|
scrollButtons="auto"
|
|
allowScrollButtonsMobile
|
|
aria-label="tabs"
|
|
>
|
|
{/* Статические вкладки */}
|
|
{staticTabs.map(tab => (
|
|
<StyledTab
|
|
key={`static_${tab.id}`} // Добавляем префикс для уникальности
|
|
label={tab.title}
|
|
value={tab.id} // Используем id как value
|
|
onMouseDown={(e) => handleMouseDown(e, tab.id)}
|
|
/>
|
|
))}
|
|
|
|
{/* Динамические вкладки */}
|
|
{tabs.map((tab) => (
|
|
<StyledTab
|
|
key={`dynamic_${tab.id}`} // Добавляем префикс для уникальности
|
|
label={
|
|
<TabLabel
|
|
title={tab.title}
|
|
onClose={(e) => {
|
|
e.stopPropagation();
|
|
onCloseTab(tab.id);
|
|
}}
|
|
/>
|
|
}
|
|
value={tab.id}
|
|
onMouseDown={(e) => handleMouseDown(e, tab.id)}
|
|
/>
|
|
))}
|
|
</Tabs>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default CustomTabs; |