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

chore: remove old name manager

Browse Source
This commit is contained in:
Daniel Gonzalez Albo
2025-11-10 01:02:28 +01:00
committed by Nicolás Hatcher Andrés
parent 8b3bd7943e
commit aa4dd598b1
6 changed files with 0 additions and 636 deletions
Download Patch File Download Diff File Expand all files Collapse all files

329
webapp/IronCalc/src/components/NameManagerDialog/NameManagerDialog.tsx
View File

@@ -1,329 +0,0 @@
import type { DefinedName, WorksheetProperties } from "@ironcalc/wasm";
import {
Box,
Button,
Dialog,
DialogActions,
DialogContent,
DialogTitle,
Stack,
styled,
} from "@mui/material";
import { t } from "i18next";
import { BookOpen, PackageOpen, Plus, X } from "lucide-react";
import { useEffect, useState } from "react";
import { theme } from "../../theme";
import NamedRangeActive from "./NamedRangeActive";
import NamedRangeInactive from "./NamedRangeInactive";
export interface NameManagerProperties {
newDefinedName: (
name: string,
scope: number | undefined,
formula: string,
) => void;
updateDefinedName: (
name: string,
scope: number | undefined,
newName: string,
newScope: number | undefined,
newFormula: string,
) => void;
deleteDefinedName: (name: string, scope: number | undefined) => void;
selectedArea: () => string;
worksheets: WorksheetProperties[];
definedNameList: DefinedName[];
}
interface NameManagerDialogProperties {
open: boolean;
onClose: () => void;
model: NameManagerProperties;
}
function NameManagerDialog(properties: NameManagerDialogProperties) {
const { open, model, onClose } = properties;
const {
newDefinedName,
updateDefinedName,
deleteDefinedName,
selectedArea,
worksheets,
definedNameList,
} = model;
// If editingNameIndex is -1, then we are adding a new name
// If editingNameIndex is -2, then we are not editing any name
// If editingNameIndex is a positive number, then we are editing that index
const [editingNameIndex, setEditingNameIndex] = useState(-2);
useEffect(() => {
if (open) {
setEditingNameIndex(-2);
}
}, [open]);
const handleClose = () => {
properties.onClose();
};
return (
<StyledDialog open={open} onClose={onClose} maxWidth={false} scroll="paper">
<StyledDialogTitle>
{t("name_manager_dialog.title")}
<Cross
onClick={handleClose}
title={t("name_manager_dialog.close")}
tabIndex={0}
onKeyDown={(event) => event.key === "Enter" && properties.onClose()}
>
<X />
</Cross>
</StyledDialogTitle>
<StyledDialogContent>
{(definedNameList.length > 0 || editingNameIndex !== -2) && (
<StyledRangesHeader>
<StyledBox>{t("name_manager_dialog.name")}</StyledBox>
<StyledBox>{t("name_manager_dialog.range")}</StyledBox>
<StyledBox>{t("name_manager_dialog.scope")}</StyledBox>
</StyledRangesHeader>
)}
{definedNameList.length === 0 && editingNameIndex === -2 ? (
<EmptyStateMessage>
<IconWrapper>
<PackageOpen />
</IconWrapper>
{t("name_manager_dialog.empty_message1")}
<br />
{t("name_manager_dialog.empty_message2")}
</EmptyStateMessage>
) : (
<NameListWrapper>
{definedNameList.map((definedName, index) => {
const scopeName =
definedName.scope !== undefined
? worksheets[definedName.scope].name
: "[global]";
if (index === editingNameIndex) {
return (
<NamedRangeActive
worksheets={worksheets}
name={definedName.name}
scope={scopeName}
formula={definedName.formula}
key={definedName.name + definedName.scope}
onSave={(
newName,
newScope,
newFormula,
): string | undefined => {
const scope_index = worksheets.findIndex(
(s) => s.name === newScope,
);
const scope = scope_index >= 0 ? scope_index : undefined;
try {
updateDefinedName(
definedName.name,
definedName.scope,
newName,
scope,
newFormula,
);
setEditingNameIndex(-2);
} catch (e) {
return `${e}`;
}
}}
onCancel={() => setEditingNameIndex(-2)}
/>
);
}
return (
<NamedRangeInactive
name={definedName.name}
scope={scopeName}
formula={definedName.formula}
key={definedName.name + definedName.scope}
showOptions={editingNameIndex === -2}
onEdit={() => setEditingNameIndex(index)}
onDelete={() => {
deleteDefinedName(definedName.name, definedName.scope);
}}
/>
);
})}
</NameListWrapper>
)}
{editingNameIndex === -1 && (
<NamedRangeActive
worksheets={worksheets}
name={""}
formula={selectedArea()}
scope={"[global]"}
onSave={(name, scope, formula): string | undefined => {
const scope_index = worksheets.findIndex((s) => s.name === scope);
const scope_value = scope_index > 0 ? scope_index : undefined;
try {
newDefinedName(name, scope_value, formula);
setEditingNameIndex(-2);
} catch (e) {
return `${e}`;
}
}}
onCancel={() => setEditingNameIndex(-2)}
/>
)}
</StyledDialogContent>
<StyledDialogActions>
<Box display="flex" alignItems="center" gap={"8px"}>
<BookOpen color="grey" size={16} />
<UploadFooterLink
href="https://docs.ironcalc.com/web-application/name-manager.html"
target="_blank"
rel="noopener noreferrer"
>
{t("name_manager_dialog.help")}
</UploadFooterLink>
</Box>
<Button
onClick={() => setEditingNameIndex(-1)}
variant="contained"
disableElevation
sx={{ textTransform: "none", minWidth: "fit-content" }}
startIcon={<Plus size={16} />}
disabled={editingNameIndex > -2}
>
{t("name_manager_dialog.new")}
</Button>
</StyledDialogActions>
</StyledDialog>
);
}
const StyledDialog = styled(Dialog)(({ theme }) => ({
"& .MuiPaper-root": {
height: "400px",
minHeight: "200px",
minWidth: "620px",
maxWidth: "620px",
[theme.breakpoints.down("sm")]: {
minWidth: "90%",
},
},
}));
const StyledDialogTitle = styled(DialogTitle)`
display: flex;
align-items: center;
height: 44px;
font-size: 14px;
font-weight: 500;
font-family: Inter;
padding: 0px 12px;
justify-content: space-between;
border-bottom: 1px solid ${theme.palette.grey["300"]};
`;
const Cross = styled("div")`
&:hover {
background-color: ${theme.palette.grey["50"]};
}
display: flex;
border-radius: 4px;
height: 24px;
width: 24px;
cursor: pointer;
align-items: center;
justify-content: center;
svg {
width: 16px;
height: 16px;
stroke-width: 1.5;
}
`;
const NameListWrapper = styled(Stack)`
overflow-y: auto;
`;
const EmptyStateMessage = styled(Box)`
display: flex;
flex-direction: column;
gap: 8px;
align-items: center;
justify-content: center;
text-align: center;
width: 100%;
height: 100%;
font-size: 12px;
color: ${theme.palette.grey["600"]};
font-family: "Inter";
z-index: 0;
margin: auto 0px;
position: relative;
`;
const IconWrapper = styled("div")`
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 4px;
background-color: ${theme.palette.grey["100"]};
color: ${theme.palette.grey["600"]};
svg {
width: 16px;
height: 16px;
stroke-width: 2;
}
`;
const StyledBox = styled(Box)`
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
padding-left: 8px;
`;
const StyledDialogContent = styled(DialogContent)`
display: flex;
flex-direction: column;
padding: 0px;
`;
const StyledRangesHeader = styled(Stack)(({ theme }) => ({
flexDirection: "row",
minHeight: "32px",
padding: "0px 96px 0px 12px",
gap: "12px",
fontFamily: theme.typography.fontFamily,
fontSize: "12px",
fontWeight: "700",
borderBottom: `1px solid ${theme.palette.info.light}`,
backgroundColor: theme.palette.grey["50"],
color: theme.palette.info.main,
}));
const StyledDialogActions = styled(DialogActions)`
padding: 12px;
height: 40px;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 12px;
color: ${theme.palette.grey["600"]};
border-top: 1px solid ${theme.palette.grey["300"]};
`;
const UploadFooterLink = styled("a")`
font-size: 12px;
font-weight: 400;
font-family: "Inter";
color: ${theme.palette.grey["600"]};
text-decoration: none;
&:hover {
text-decoration: underline;
}
`;
export default NameManagerDialog;

170
webapp/IronCalc/src/components/NameManagerDialog/NamedRangeActive.tsx
View File

@@ -1,170 +0,0 @@
import type { WorksheetProperties } from "@ironcalc/wasm";
import {
Box,
Divider,
IconButton,
MenuItem,
TextField,
styled,
} from "@mui/material";
import { t } from "i18next";
import { Check, X } from "lucide-react";
import { useState } from "react";
import { theme } from "../../theme";
interface NamedRangeProperties {
worksheets: WorksheetProperties[];
name: string;
scope: string;
formula: string;
onSave: (name: string, scope: string, formula: string) => string | undefined;
onCancel: () => void;
}
function NamedRangeActive(properties: NamedRangeProperties) {
const { worksheets, onSave, onCancel } = properties;
const [name, setName] = useState(properties.name);
const [scope, setScope] = useState(properties.scope);
const [formula, setFormula] = useState(properties.formula);
const [formulaError, setFormulaError] = useState(false);
return (
<>
<StyledBox>
<StyledTextField
id="name"
variant="outlined"
size="small"
margin="none"
fullWidth
error={formulaError}
value={name}
onChange={(event) => setName(event.target.value)}
onKeyDown={(event) => {
event.stopPropagation();
}}
onClick={(event) => event.stopPropagation()}
/>
<StyledTextField
id="scope"
variant="outlined"
select
size="small"
margin="none"
fullWidth
error={formulaError}
value={scope}
onChange={(event) => {
setScope(event.target.value);
}}
>
<MenuItem value={"[global]"}>
<MenuSpan>{t("name_manager_dialog.workbook")}</MenuSpan>
<MenuSpanGrey>{` ${t("name_manager_dialog.global")}`}</MenuSpanGrey>
</MenuItem>
{worksheets.map((option) => (
<MenuItem key={option.name} value={option.name}>
<MenuSpan>{option.name}</MenuSpan>
</MenuItem>
))}
</StyledTextField>
<StyledTextField
id="formula"
variant="outlined"
size="small"
margin="none"
fullWidth
error={formulaError}
value={formula}
onChange={(event) => setFormula(event.target.value)}
onKeyDown={(event) => {
event.stopPropagation();
}}
onClick={(event) => event.stopPropagation()}
/>
<IconsWrapper>
<StyledIconButton
onClick={() => {
const error = onSave(name, scope, formula);
if (error) {
setFormulaError(true);
}
}}
title={t("name_manager_dialog.apply")}
>
<StyledCheck size={16} />
</StyledIconButton>
<StyledIconButton
onClick={onCancel}
title={t("name_manager_dialog.discard")}
>
<X size={16} />
</StyledIconButton>
</IconsWrapper>
</StyledBox>
<Divider />
</>
);
}
const MenuSpan = styled("span")`
font-size: 12px;
font-family: "Inter";
`;
const MenuSpanGrey = styled("span")`
white-space: pre;
font-size: 12px;
font-family: "Inter";
color: ${theme.palette.grey[400]};
`;
const StyledBox = styled(Box)`
display: flex;
flex-direction: row;
align-items: center;
gap: 12px;
width: auto;
padding: 10px 20px 10px 12px;
box-shadow: 0 -1px 0 ${theme.palette.grey[300]};
@media (max-width: 600px) {
padding: 12px;
}
`;
const StyledTextField = styled(TextField)(() => ({
"& .MuiInputBase-root": {
height: "36px",
width: "100%",
margin: 0,
fontFamily: "Inter",
fontSize: "12px",
},
"& .MuiInputBase-input": {
padding: "8px",
},
}));
const StyledIconButton = styled(IconButton)(({ theme }) => ({
color: theme.palette.error.main,
borderRadius: "8px",
"&:hover": {
backgroundColor: theme.palette.grey["50"],
},
"&.Mui-disabled": {
opacity: 0.6,
color: theme.palette.error.light,
},
}));
const StyledCheck = styled(Check)(({ theme }) => ({
color: theme.palette.success.main,
}));
const IconsWrapper = styled(Box)({
display: "flex",
});
export default NamedRangeActive;

93
webapp/IronCalc/src/components/NameManagerDialog/NamedRangeInactive.tsx
View File

@@ -1,93 +0,0 @@
import { Box, Divider, IconButton, styled } from "@mui/material";
import { t } from "i18next";
import { PencilLine, Trash2 } from "lucide-react";
interface NamedRangeInactiveProperties {
name: string;
scope: string;
formula: string;
onDelete: () => void;
onEdit: () => void;
showOptions: boolean;
}
function NamedRangeInactive(properties: NamedRangeInactiveProperties) {
const { name, scope, formula, onDelete, onEdit, showOptions } = properties;
const scopeName =
scope === "[global]"
? `${t("name_manager_dialog.workbook")} ${t(
"name_manager_dialog.global",
)}`
: scope;
return (
<>
<WrappedLine>
<StyledDiv>{name}</StyledDiv>
<StyledDiv>{scopeName}</StyledDiv>
<StyledDiv>{formula}</StyledDiv>
<IconsWrapper>
<StyledIconButtonBlack
onClick={onEdit}
disabled={!showOptions}
title={t("name_manager_dialog.edit")}
>
<PencilLine size={16} />
</StyledIconButtonBlack>
<StyledIconButtonRed
onClick={onDelete}
disabled={!showOptions}
title={t("name_manager_dialog.delete")}
>
<Trash2 size={16} />
</StyledIconButtonRed>
</IconsWrapper>
</WrappedLine>
<Divider />
</>
);
}
const StyledIconButtonBlack = styled(IconButton)(({ theme }) => ({
color: theme.palette.common.black,
borderRadius: "8px",
"&:hover": {
backgroundColor: theme.palette.grey["50"],
},
}));
const StyledIconButtonRed = styled(IconButton)(({ theme }) => ({
color: theme.palette.error.main,
borderRadius: "8px",
"&:hover": {
backgroundColor: theme.palette.grey["50"],
},
"&.Mui-disabled": {
opacity: 0.6,
color: theme.palette.error.light,
},
}));
const WrappedLine = styled(Box)({
display: "flex",
flexDirection: "row",
alignItems: "center",
gap: "12px",
padding: "12px 20px 12px 12px",
});
const StyledDiv = styled("div")(({ theme }) => ({
fontFamily: theme.typography.fontFamily,
fontSize: "12px",
fontWeight: "400",
color: theme.palette.common.black,
width: "100%",
paddingLeft: "8px",
}));
const IconsWrapper = styled(Box)({
display: "flex",
});
export default NamedRangeInactive;

1
webapp/IronCalc/src/components/NameManagerDialog/index.ts
View File

@@ -1 +0,0 @@
export { default } from "./NameManagerDialog";

11
webapp/IronCalc/src/components/Toolbar/Toolbar.tsx
View File

@@ -51,8 +51,6 @@ import {
decreaseDecimalPlaces,
increaseDecimalPlaces,
} from "../FormatMenu/formatUtil";
import NameManagerDialog from "../NameManagerDialog";
import type { NameManagerProperties } from "../NameManagerDialog/NameManagerDialog";
import { TOOLBAR_HEIGHT } from "../constants";
type ToolbarProperties = {
@@ -89,7 +87,6 @@ type ToolbarProperties = {
numFmt: string;
showGridLines: boolean;
onToggleShowGridLines: (show: boolean) => void;
nameManagerProperties: NameManagerProperties;
openDrawer: () => void;
};
@@ -97,7 +94,6 @@ function Toolbar(properties: ToolbarProperties) {
const [fontColorPickerOpen, setFontColorPickerOpen] = useState(false);
const [fillColorPickerOpen, setFillColorPickerOpen] = useState(false);
const [borderPickerOpen, setBorderPickerOpen] = useState(false);
const [nameManagerDialogOpen, setNameManagerDialogOpen] = useState(false);
const [showLeftArrow, setShowLeftArrow] = useState(false);
const [showRightArrow, setShowRightArrow] = useState(false);
@@ -588,13 +584,6 @@ function Toolbar(properties: ToolbarProperties) {
anchorEl={borderButton}
open={borderPickerOpen}
/>
<NameManagerDialog
open={nameManagerDialogOpen}
onClose={() => {
setNameManagerDialogOpen(false);
}}
model={properties.nameManagerProperties}
/>
</ToolbarContainer>
{showRightArrow && (
<Tooltip

32
webapp/IronCalc/src/components/Workbook/Workbook.tsx
View File

@@ -665,38 +665,6 @@ const Workbook = (props: { model: Model; workbookState: WorkbookState }) => {
model.setShowGridLines(sheet, show);
setRedrawId((id) => id + 1);
}}
nameManagerProperties={{
newDefinedName: (
name: string,
scope: number | undefined,
formula: string,
) => {
model.newDefinedName(name, scope, formula);
setRedrawId((id) => id + 1);
},
updateDefinedName: (
name: string,
scope: number | undefined,
newName: string,
newScope: number | undefined,
newFormula: string,
) => {
model.updateDefinedName(name, scope, newName, newScope, newFormula);
setRedrawId((id) => id + 1);
},
deleteDefinedName: (name: string, scope: number | undefined) => {
model.deleteDefinedName(name, scope);
setRedrawId((id) => id + 1);
},
selectedArea: () => {
const worksheetNames = worksheets.map((s) => s.name);
const selectedView = model.getSelectedView();
return getFullRangeToString(selectedView, worksheetNames);
},
worksheets,
definedNameList: model.getDefinedNameList(),
}}
openDrawer={() => {
setDrawerOpen(true);
}}