TabStrip.tsx
1.18 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
import { CloseOutlined } from "@ant-design/icons";
import { useAppDispatch, useAppSelector } from "@/store";
import { closeTab, setActiveTab } from "@/store/tabsSlice";
export default function TabStrip() {
const tabs = useAppSelector((s) => s.tabs.tabs);
const activeTabId = useAppSelector((s) => s.tabs.activeTabId);
const dispatch = useAppDispatch();
return (
<div className="tab-strip">
{tabs.map((t) => {
const active = t.id === activeTabId;
return (
<div
key={t.id}
className={`tab-item ${active ? "active" : ""}`}
onClick={() => dispatch(setActiveTab(t.id))}
>
<span style={{ overflow: "hidden", textOverflow: "ellipsis", maxWidth: 220, whiteSpace: "nowrap" }}>
{t.label}
</span>
{t.closable !== false && (
<span
className="close"
onClick={(e) => {
e.stopPropagation();
dispatch(closeTab(t.id));
}}
>
<CloseOutlined style={{ fontSize: 10 }} />
</span>
)}
</div>
);
})}
</div>
);
}