From aa4dd598b1f35590996a13f49f0d38c54b5b6710 Mon Sep 17 00:00:00 2001 From: Daniel Gonzalez Albo Date: Mon, 10 Nov 2025 01:02:28 +0100 Subject: [PATCH] chore: remove old name manager --- .../NameManagerDialog/NameManagerDialog.tsx | 329 ------------------ .../NameManagerDialog/NamedRangeActive.tsx | 170 --------- .../NameManagerDialog/NamedRangeInactive.tsx | 93 ----- .../src/components/NameManagerDialog/index.ts | 1 - .../src/components/Toolbar/Toolbar.tsx | 11 - .../src/components/Workbook/Workbook.tsx | 32 -- 6 files changed, 636 deletions(-) delete mode 100644 webapp/IronCalc/src/components/NameManagerDialog/NameManagerDialog.tsx delete mode 100644 webapp/IronCalc/src/components/NameManagerDialog/NamedRangeActive.tsx delete mode 100644 webapp/IronCalc/src/components/NameManagerDialog/NamedRangeInactive.tsx delete mode 100644 webapp/IronCalc/src/components/NameManagerDialog/index.ts diff --git a/webapp/IronCalc/src/components/NameManagerDialog/NameManagerDialog.tsx b/webapp/IronCalc/src/components/NameManagerDialog/NameManagerDialog.tsx deleted file mode 100644 index baa5921..0000000 --- a/webapp/IronCalc/src/components/NameManagerDialog/NameManagerDialog.tsx +++ /dev/null @@ -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 ( - - - {t("name_manager_dialog.title")} - event.key === "Enter" && properties.onClose()} - > - - - - - {(definedNameList.length > 0 || editingNameIndex !== -2) && ( - - {t("name_manager_dialog.name")} - {t("name_manager_dialog.range")} - {t("name_manager_dialog.scope")} - - )} - {definedNameList.length === 0 && editingNameIndex === -2 ? ( - - - - - {t("name_manager_dialog.empty_message1")} -
- {t("name_manager_dialog.empty_message2")} - - ) : ( - - {definedNameList.map((definedName, index) => { - const scopeName = - definedName.scope !== undefined - ? worksheets[definedName.scope].name - : "[global]"; - if (index === editingNameIndex) { - return ( - { - 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 ( - setEditingNameIndex(index)} - onDelete={() => { - deleteDefinedName(definedName.name, definedName.scope); - }} - /> - ); - })} - - )} - {editingNameIndex === -1 && ( - { - 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)} - /> - )} - - - - - - {t("name_manager_dialog.help")} - - - - - - ); -} - -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; diff --git a/webapp/IronCalc/src/components/NameManagerDialog/NamedRangeActive.tsx b/webapp/IronCalc/src/components/NameManagerDialog/NamedRangeActive.tsx deleted file mode 100644 index 6e785de..0000000 --- a/webapp/IronCalc/src/components/NameManagerDialog/NamedRangeActive.tsx +++ /dev/null @@ -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 ( - <> - - setName(event.target.value)} - onKeyDown={(event) => { - event.stopPropagation(); - }} - onClick={(event) => event.stopPropagation()} - /> - { - setScope(event.target.value); - }} - > - - {t("name_manager_dialog.workbook")} - {` ${t("name_manager_dialog.global")}`} - - {worksheets.map((option) => ( - - {option.name} - - ))} - - setFormula(event.target.value)} - onKeyDown={(event) => { - event.stopPropagation(); - }} - onClick={(event) => event.stopPropagation()} - /> - - { - const error = onSave(name, scope, formula); - if (error) { - setFormulaError(true); - } - }} - title={t("name_manager_dialog.apply")} - > - - - - - - - - - - ); -} - -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; diff --git a/webapp/IronCalc/src/components/NameManagerDialog/NamedRangeInactive.tsx b/webapp/IronCalc/src/components/NameManagerDialog/NamedRangeInactive.tsx deleted file mode 100644 index b1f7022..0000000 --- a/webapp/IronCalc/src/components/NameManagerDialog/NamedRangeInactive.tsx +++ /dev/null @@ -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 ( - <> - - {name} - {scopeName} - {formula} - - - - - - - - - - - - ); -} - -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; diff --git a/webapp/IronCalc/src/components/NameManagerDialog/index.ts b/webapp/IronCalc/src/components/NameManagerDialog/index.ts deleted file mode 100644 index f4d8ea2..0000000 --- a/webapp/IronCalc/src/components/NameManagerDialog/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from "./NameManagerDialog"; diff --git a/webapp/IronCalc/src/components/Toolbar/Toolbar.tsx b/webapp/IronCalc/src/components/Toolbar/Toolbar.tsx index e395f7e..f82fc20 100644 --- a/webapp/IronCalc/src/components/Toolbar/Toolbar.tsx +++ b/webapp/IronCalc/src/components/Toolbar/Toolbar.tsx @@ -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} /> - { - setNameManagerDialogOpen(false); - }} - model={properties.nameManagerProperties} - /> {showRightArrow && ( { 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); }}