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

UPDATE: Add move/row column to the UI

Browse Source
This commit is contained in:
Nicolás Hatcher
2025-07-26 11:26:33 +02:00
committed by Nicolás Hatcher Andrés
parent fb7886ca9e
commit b157347e68
2 changed files with 119 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
webapp/IronCalc/src/components/Worksheet/CellContextMenu.tsx
View File

@@ -1,5 +1,7 @@
import { Menu, MenuItem, styled } from "@mui/material"; import { Menu, MenuItem, styled } from "@mui/material";
import { import {
ArrowLeftRight,
ArrowUpDown,
BetweenHorizontalStart, BetweenHorizontalStart,
BetweenVerticalStart, BetweenVerticalStart,
ChevronRight, ChevronRight,
@@ -26,6 +28,10 @@ interface CellContextMenuProps {
onUnfreezeRows: () => void; onUnfreezeRows: () => void;
onDeleteRow: () => void; onDeleteRow: () => void;
onDeleteColumn: () => void; onDeleteColumn: () => void;
onMoveColumnLeft: () => void;
onMoveColumnRight: () => void;
onMoveRowUp: () => void;
onMoveRowDown: () => void;
row: number; row: number;
column: string; column: string;
} }
@@ -46,6 +52,10 @@ const CellContextMenu = (properties: CellContextMenuProps) => {
onUnfreezeRows, onUnfreezeRows,
onDeleteRow, onDeleteRow,
onDeleteColumn, onDeleteColumn,
onMoveColumnLeft,
onMoveColumnRight,
onMoveRowUp,
onMoveRowDown,
row, row,
column, column,
} = properties; } = properties;
@@ -58,6 +68,12 @@ const CellContextMenu = (properties: CellContextMenuProps) => {
const [insertColumnMenuOpen, setInsertColumnMenuOpen] = useState(false); const [insertColumnMenuOpen, setInsertColumnMenuOpen] = useState(false);
const insertColumnRef = useRef(null); const insertColumnRef = useRef(null);
const [moveRowMenuOpen, setMoveRowMenuOpen] = useState(false);
const moveRowRef = useRef(null);
const [moveColumnMenuOpen, setMoveColumnMenuOpen] = useState(false);
const moveColumnRef = useRef(null);
return ( return (
<> <>
<StyledMenu <StyledMenu
@@ -90,6 +106,23 @@ const CellContextMenu = (properties: CellContextMenuProps) => {
<ChevronRightStyled /> <ChevronRightStyled />
</StyledMenuItem> </StyledMenuItem>
<MenuDivider /> <MenuDivider />
<StyledMenuItem
ref={moveRowRef}
onClick={() => setMoveRowMenuOpen(true)}
>
<ArrowUpDownStyled />
<ItemNameStyled>{t("cell_context.move_row")}</ItemNameStyled>
<ChevronRightStyled />
</StyledMenuItem>
<StyledMenuItem
ref={moveColumnRef}
onClick={() => setMoveColumnMenuOpen(true)}
>
<ArrowLeftRightStyled />
<ItemNameStyled>{t("cell_context.move_column")}</ItemNameStyled>
<ChevronRightStyled />
</StyledMenuItem>
<MenuDivider />
<StyledMenuItem ref={freezeRef} onClick={() => setFreezeMenuOpen(true)}> <StyledMenuItem ref={freezeRef} onClick={() => setFreezeMenuOpen(true)}>
<StyledSnowflake /> <StyledSnowflake />
<ItemNameStyled>{t("cell_context.freeze")}</ItemNameStyled> <ItemNameStyled>{t("cell_context.freeze")}</ItemNameStyled>
@@ -165,6 +198,58 @@ const CellContextMenu = (properties: CellContextMenuProps) => {
</ItemNameStyled> </ItemNameStyled>
</StyledMenuItem> </StyledMenuItem>
</StyledMenu> </StyledMenu>
<StyledMenu
open={moveRowMenuOpen}
onClose={() => setMoveRowMenuOpen(false)}
anchorEl={moveRowRef.current}
anchorOrigin={{
vertical: "top",
horizontal: "right",
}}
>
<StyledMenuItem
onClick={() => {
onMoveRowUp();
setMoveRowMenuOpen(false);
}}
>
<ItemNameStyled>{t("cell_context.move_row_up")}</ItemNameStyled>
</StyledMenuItem>
<StyledMenuItem
onClick={() => {
onMoveRowDown();
setMoveRowMenuOpen(false);
}}
>
<ItemNameStyled>{t("cell_context.move_row_down")}</ItemNameStyled>
</StyledMenuItem>
</StyledMenu>
<StyledMenu
open={moveColumnMenuOpen}
onClose={() => setMoveColumnMenuOpen(false)}
anchorEl={moveColumnRef.current}
anchorOrigin={{
vertical: "top",
horizontal: "right",
}}
>
<StyledMenuItem
onClick={() => {
onMoveColumnLeft();
setMoveColumnMenuOpen(false);
}}
>
<ItemNameStyled>{t("cell_context.move_column_left")}</ItemNameStyled>
</StyledMenuItem>
<StyledMenuItem
onClick={() => {
onMoveColumnRight();
setMoveColumnMenuOpen(false);
}}
>
<ItemNameStyled>{t("cell_context.move_column_right")}</ItemNameStyled>
</StyledMenuItem>
</StyledMenu>
<StyledMenu <StyledMenu
open={freezeMenuOpen} open={freezeMenuOpen}
onClose={() => setFreezeMenuOpen(false)} onClose={() => setFreezeMenuOpen(false)}
@@ -230,6 +315,20 @@ const BetweenHorizontalStartStyled = styled(BetweenHorizontalStart)`
padding-right: 10px; padding-right: 10px;
`; `;
const ArrowLeftRightStyled = styled(ArrowLeftRight)`
width: 16px;
height: 16px;
color: ${theme.palette.grey[900]};
padding-right: 10px;
`;
const ArrowUpDownStyled = styled(ArrowUpDown)`
width: 16px;
height: 16px;
color: ${theme.palette.grey[900]};
padding-right: 10px;
`;
const StyledSnowflake = styled(Snowflake)` const StyledSnowflake = styled(Snowflake)`
width: 16px; width: 16px;
height: 16px; height: 16px;

20
webapp/IronCalc/src/components/Worksheet/Worksheet.tsx
View File

@@ -358,6 +358,26 @@ const Worksheet = forwardRef(
model.insertColumns(view.sheet, view.column + 1, 1); model.insertColumns(view.sheet, view.column + 1, 1);
setContextMenuOpen(false); setContextMenuOpen(false);
}} }}
onMoveColumnLeft={(): void => {
const view = model.getSelectedView();
model.moveColumn(view.sheet, view.column, -1);
setContextMenuOpen(false);
}}
onMoveColumnRight={(): void => {
const view = model.getSelectedView();
model.moveColumn(view.sheet, view.column, 1);
setContextMenuOpen(false);
}}
onMoveRowUp={(): void => {
const view = model.getSelectedView();
model.moveRow(view.sheet, view.row, -1);
setContextMenuOpen(false);
}}
onMoveRowDown={(): void => {
const view = model.getSelectedView();
model.moveRow(view.sheet, view.row, 1);
setContextMenuOpen(false);
}}
onFreezeColumns={(): void => { onFreezeColumns={(): void => {
const view = model.getSelectedView(); const view = model.getSelectedView();
model.setFrozenColumnsCount(view.sheet, view.column); model.setFrozenColumnsCount(view.sheet, view.column);