sirtimbly/IronCalc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update: show tab menu on right click

Browse Source
This commit is contained in:
Daniel
2025-11-18 00:26:56 +01:00
committed by Nicolás Hatcher Andrés
parent 41c8d88b80
commit 6b60b339d6
1 changed files with 20 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
webapp/IronCalc/src/components/SheetTabBar/SheetTab.tsx
View File

@@ -31,17 +31,23 @@ interface SheetTabProps {
function SheetTab(props: SheetTabProps) { function SheetTab(props: SheetTabProps) {
const { name, color, selected, workbookState, onSelected } = props; const { name, color, selected, workbookState, onSelected } = props;
const [anchorEl, setAnchorEl] = useState<null | HTMLButtonElement>(null); const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
const [colorPickerOpen, setColorPickerOpen] = useState(false); const [colorPickerOpen, setColorPickerOpen] = useState(false);
const colorButton = useRef<HTMLDivElement>(null); const colorButton = useRef<HTMLDivElement>(null);
const open = Boolean(anchorEl); const open = Boolean(anchorEl);
const { t } = useTranslation(); const { t } = useTranslation();
const handleOpen = (event: React.MouseEvent<HTMLButtonElement>) => { const handleOpen = (event: React.MouseEvent<HTMLElement>) => {
setAnchorEl(event.currentTarget); setAnchorEl(event.currentTarget);
}; };
const handleClose = () => { const handleClose = () => {
setAnchorEl(null); setAnchorEl(null);
}; };
const handleContextMenu = (event: React.MouseEvent<HTMLDivElement>) => {
event.preventDefault();
event.stopPropagation();
onSelected();
setAnchorEl(event.currentTarget);
};
const [renameDialogOpen, setRenameDialogOpen] = useState(false); const [renameDialogOpen, setRenameDialogOpen] = useState(false);
const handleCloseRenameDialog = () => { const handleCloseRenameDialog = () => {
setRenameDialogOpen(false); setRenameDialogOpen(false);
@@ -70,6 +76,7 @@ function SheetTab(props: SheetTabProps) {
event.stopPropagation(); event.stopPropagation();
event.preventDefault(); event.preventDefault();
}} }}
onContextMenu={handleContextMenu}
onPointerDown={(event: React.PointerEvent) => { onPointerDown={(event: React.PointerEvent) => {
// If it is in browse mode stop he event // If it is in browse mode stop he event
const cell = workbookState.getEditingCell(); const cell = workbookState.getEditingCell();
@@ -81,7 +88,7 @@ function SheetTab(props: SheetTabProps) {
ref={colorButton} ref={colorButton}
> >
<Name onDoubleClick={handleOpenRenameDialog}>{name}</Name> <Name onDoubleClick={handleOpenRenameDialog}>{name}</Name>
<StyledButton onClick={handleOpen}> <StyledButton onClick={handleOpen} disableRipple={true} $active={open}>
<ChevronDown /> <ChevronDown />
</StyledButton> </StyledButton>
</TabWrapper> </TabWrapper>
@@ -221,26 +228,25 @@ const TabWrapper = styled("div")<{ $color: string; $selected: boolean }>`
props.$selected ? `${theme.palette.grey[50]}80` : "transparent"}; props.$selected ? `${theme.palette.grey[50]}80` : "transparent"};
`; `;
const StyledButton = styled(Button)` const StyledButton = styled(Button)<{ $active?: boolean }>`
width: 15px; width: 16px;
height: 24px; height: 16px;
min-width: 0px; min-width: 0px;
padding: 0px; padding: 0px;
color: inherit; color: inherit;
font-weight: inherit; font-weight: inherit;
border-radius: 4px;
background-color: ${(props) =>
props.$active ? `${theme.palette.grey[300]}` : "transparent"};
&:hover { &:hover {
background-color: transparent; background-color: ${theme.palette.grey[200]};
} }
&:active { &:active {
background-color: transparent; background-color: ${theme.palette.grey[300]};
} }
svg { svg {
width: 15px; width: 14px;
height: 15px; height: 14px;
transition: transform 0.2s;
}
&:hover svg {
transform: translateY(2px);
} }
`; `;