95 lines
4.8 KiB
JavaScript
95 lines
4.8 KiB
JavaScript
import { Button, ButtonGroup } from "@mui/joy";
|
||
import PropTypes from "prop-types";
|
||
|
||
function TabList({ terminals, activeTab, setActiveTab, closeTab, toggleSplit, splitTabIds, theme }) {
|
||
const isSplitScreenActive = splitTabIds.length > 0;
|
||
|
||
return (
|
||
<div className="inline-flex items-center h-full px-[0.5rem]">
|
||
{terminals.map((terminal, index) => {
|
||
const isActive = terminal.id === activeTab;
|
||
const isSplit = splitTabIds.includes(terminal.id);
|
||
|
||
// Disable split screen button for the active tab (before and after splitting)
|
||
const isSplitButtonDisabled = isActive && !isSplitScreenActive || splitTabIds.length >= 3 && !isSplit;
|
||
|
||
return (
|
||
<div key={terminal.id} className={index < terminals.length - 1 ? "mr-[0.5rem]" : ""}>
|
||
<ButtonGroup>
|
||
{/* Set active tab button */}
|
||
<Button
|
||
onClick={() => setActiveTab(terminal.id)}
|
||
disabled={isSplit} // Disabled for split screen tabs
|
||
sx={{
|
||
backgroundColor:
|
||
isActive ? theme.palette.neutral[500] : theme.palette.neutral[800],
|
||
color: theme.palette.text.primary,
|
||
"&:hover": { backgroundColor: theme.palette.neutral[300] },
|
||
":disabled": { backgroundColor: theme.palette.neutral[800] },
|
||
borderTopLeftRadius: "4px",
|
||
borderBottomLeftRadius: "4px",
|
||
height: "40px",
|
||
whiteSpace: "nowrap",
|
||
overflow: "hidden",
|
||
textOverflow: "ellipsis",
|
||
}}
|
||
>
|
||
{terminal.title}
|
||
</Button>
|
||
{/* Split screen button */}
|
||
<Button
|
||
onClick={() => toggleSplit(terminal.id)}
|
||
disabled={isSplitButtonDisabled || isActive} // Disable for the active tab (before and after split)
|
||
sx={{
|
||
backgroundColor: isSplit
|
||
? theme.palette.neutral[500] // Split tabs get color 700
|
||
: theme.palette.neutral[700], // Active tab has disabled color
|
||
color: theme.palette.text.primary,
|
||
":disabled": { backgroundColor: theme.palette.neutral[800] },
|
||
"&:hover": { backgroundColor: theme.palette.neutral[300] },
|
||
borderTopRightRadius: "4px",
|
||
borderBottomRightRadius: "4px",
|
||
height: "40px",
|
||
fontSize: "1rem",
|
||
cursor: isSplitButtonDisabled ? "not-allowed" : "pointer",
|
||
}}
|
||
>
|
||
/
|
||
</Button>
|
||
{/* Close tab button */}
|
||
<Button
|
||
onClick={() => closeTab(terminal.id)}
|
||
disabled={isSplitScreenActive && isActive || isSplit}
|
||
sx={{
|
||
backgroundColor: theme.palette.neutral[700],
|
||
color: theme.palette.text.primary,
|
||
"&:hover": { backgroundColor: theme.palette.neutral[300] },
|
||
":disabled": { backgroundColor: theme.palette.neutral[800] },
|
||
borderTopRightRadius: "4px",
|
||
borderBottomRightRadius: "4px",
|
||
height: "40px",
|
||
fontSize: "1rem",
|
||
}}
|
||
>
|
||
×
|
||
</Button>
|
||
</ButtonGroup>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
TabList.propTypes = {
|
||
terminals: PropTypes.array.isRequired,
|
||
activeTab: PropTypes.any,
|
||
setActiveTab: PropTypes.func.isRequired,
|
||
closeTab: PropTypes.func.isRequired,
|
||
toggleSplit: PropTypes.func.isRequired,
|
||
splitTabIds: PropTypes.array.isRequired,
|
||
theme: PropTypes.object.isRequired,
|
||
};
|
||
|
||
export default TabList;
|