56 lines
2.3 KiB
JavaScript
56 lines
2.3 KiB
JavaScript
import React from "react";
|
||
import "../../Style/common.css"; // Общие стили для табов
|
||
|
||
const Tabs = ({ tabs, activeTab, onTabClick, onCloseTab }) => {
|
||
const handleMouseDown = (e, id) => {
|
||
// Проверяем, была ли нажата средняя кнопка мыши (button === 1)
|
||
if (e.button === 1) {
|
||
e.preventDefault(); // Предотвращаем стандартное поведение (например, прокрутку)
|
||
onCloseTab(id); // Закрываем вкладку
|
||
}
|
||
};
|
||
|
||
|
||
return (
|
||
<div className="tabs">
|
||
{/* Всегда отображаемые вкладки */}
|
||
<div
|
||
className={`tab ${activeTab === "Главная" ? "active" : ""}`}
|
||
onClick={() => onTabClick("Главная")}
|
||
onMouseDown={(e) => handleMouseDown(e, "Главная")} // Добавляем обработчик для СКМ
|
||
>
|
||
<span>Главная</span>
|
||
</div>
|
||
<div
|
||
className={`tab ${activeTab === "Визуализация" ? "active" : ""}`}
|
||
onClick={() => onTabClick("Визуализация")}
|
||
onMouseDown={(e) => handleMouseDown(e, "Визуализация")} // Добавляем обработчик для СКМ
|
||
>
|
||
<span>Визуализация</span>
|
||
</div>
|
||
|
||
{/* Динамически добавляемые вкладки */}
|
||
{tabs.map((tab) => (
|
||
<div
|
||
key={tab.id}
|
||
className={`tab ${activeTab === tab.id ? "active" : ""}`}
|
||
onClick={() => onTabClick(tab.id)}
|
||
onMouseDown={(e) => handleMouseDown(e, tab.id)} // Добавляем обработчик для СКМ
|
||
>
|
||
<span>{tab.title}</span>
|
||
<button
|
||
className="close-tab"
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
onCloseTab(tab.id);
|
||
}}
|
||
>
|
||
×
|
||
</button>
|
||
</div>
|
||
))}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default Tabs; |