103 lines
2.3 KiB
TypeScript
103 lines
2.3 KiB
TypeScript
import { styled } from "@mui/material";
|
|
import Menu from "@mui/material/Menu";
|
|
import MenuItem from "@mui/material/MenuItem";
|
|
import { Check } from "lucide-react";
|
|
import type { SheetOptions } from "./types";
|
|
|
|
function isWhiteColor(color: string): boolean {
|
|
return ["#FFF", "#FFFFFF"].includes(color);
|
|
}
|
|
|
|
interface SheetListMenuProps {
|
|
open: boolean;
|
|
onClose: () => void;
|
|
anchorEl: HTMLButtonElement | null;
|
|
onSheetSelected: (index: number) => void;
|
|
sheetOptionsList: SheetOptions[];
|
|
selectedIndex: number;
|
|
}
|
|
|
|
const SheetListMenu = (properties: SheetListMenuProps) => {
|
|
const {
|
|
open,
|
|
onClose,
|
|
anchorEl,
|
|
onSheetSelected,
|
|
sheetOptionsList,
|
|
selectedIndex,
|
|
} = properties;
|
|
|
|
const hasColors = sheetOptionsList.some((tab) => !isWhiteColor(tab.color));
|
|
|
|
return (
|
|
<StyledMenu
|
|
open={open}
|
|
onClose={onClose}
|
|
anchorEl={anchorEl}
|
|
anchorOrigin={{
|
|
vertical: "top",
|
|
horizontal: "left",
|
|
}}
|
|
transformOrigin={{
|
|
vertical: "bottom",
|
|
horizontal: 6,
|
|
}}
|
|
>
|
|
{sheetOptionsList.map((tab, index) => (
|
|
<StyledMenuItem
|
|
key={tab.sheetId}
|
|
onClick={() => onSheetSelected(index)}
|
|
>
|
|
{index === selectedIndex ? (
|
|
<Check
|
|
style={{ width: "16px", height: "16px", marginRight: "8px" }}
|
|
/>
|
|
) : (
|
|
<div
|
|
style={{ width: "16px", height: "16px", marginRight: "8px" }}
|
|
/>
|
|
)}
|
|
{hasColors && <ItemColor style={{ backgroundColor: tab.color }} />}
|
|
<ItemName
|
|
style={{
|
|
fontWeight: index === selectedIndex ? "bold" : "normal",
|
|
color: tab.state === "visible" ? "#333" : "#888",
|
|
}}
|
|
>
|
|
{tab.name}
|
|
</ItemName>
|
|
</StyledMenuItem>
|
|
))}
|
|
</StyledMenu>
|
|
);
|
|
};
|
|
|
|
const StyledMenu = styled(Menu)({
|
|
"& .MuiPaper-root": {
|
|
borderRadius: 8,
|
|
padding: 4,
|
|
},
|
|
"& .MuiList-padding": {
|
|
padding: 0,
|
|
},
|
|
});
|
|
|
|
const StyledMenuItem = styled(MenuItem)({
|
|
padding: 8,
|
|
borderRadius: 4,
|
|
});
|
|
|
|
const ItemColor = styled("div")`
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 4px;
|
|
margin-right: 8px;
|
|
`;
|
|
|
|
const ItemName = styled("div")`
|
|
font-size: 12px;
|
|
color: #333;
|
|
`;
|
|
|
|
export default SheetListMenu;
|