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

fix: copilot and nicos comments

Browse Source
This commit is contained in:
Daniel Gonzalez Albo
2025-11-11 23:24:22 +01:00
committed by Nicolás Hatcher Andrés
parent ef6849e822
commit b2744efeb5
5 changed files with 82 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
webapp/IronCalc/src/components/RightDrawer/NamedRanges/EditNamedRange.tsx
View File

@@ -12,7 +12,6 @@ import {
import { t } from "i18next";
import { Check, Tag } from "lucide-react";
import { useEffect, useState } from "react";
import type React from "react";
import { theme } from "../../../theme";
import { Footer, NewButton } from "./NamedRanges";
@@ -26,27 +25,22 @@ interface EditNamedRangeProps {
name: string;
scope: string;
formula: string;
onSave: (
name: string,
scope: string,
formula: string,
) => SaveError | undefined;
onSave: (name: string, scope: string, formula: string) => SaveError;
onCancel: () => void;
definedNameList?: DefinedName[];
editingDefinedName?: DefinedName | null;
definedNameList: DefinedName[];
editingDefinedName: DefinedName | null;
}
const EditNamedRange: React.FC<EditNamedRangeProps> = ({
function EditNamedRange({
worksheets,
name: initialName,
scope: initialScope,
formula: initialFormula,
onSave,
onCancel,
definedNameList = [],
editingDefinedName = null,
}) => {
// Generate default name if empty
definedNameList,
editingDefinedName,
}: EditNamedRangeProps) {
const getDefaultName = () => {
if (initialName) return initialName;
let counter = 1;
@@ -253,14 +247,12 @@ const EditNamedRange: React.FC<EditNamedRangeProps> = ({
startIcon={<Check size={16} />}
onClick={() => {
const error = onSave(name.trim(), scope, formula);
if (error) {
if (error.nameError) {
setNameError(error.nameError);
}
if (error.formulaError) {
setFormulaError(error.formulaError);
}
}
}}
>
{t("name_manager_dialog.apply")}
@@ -268,7 +260,7 @@ const EditNamedRange: React.FC<EditNamedRangeProps> = ({
</Footer>
</Container>
);
};
}
const Container = styled("div")({
height: "100%",

53
webapp/IronCalc/src/components/RightDrawer/NamedRanges/NamedRanges.tsx
View File

@@ -25,21 +25,21 @@ interface NamedRangesProps {
worksheets?: WorksheetProperties[];
updateDefinedName?: (
name: string,
scope: number | undefined,
scope: number | null,
newName: string,
newScope: number | undefined,
newScope: number | null,
newFormula: string,
) => void;
newDefinedName?: (
name: string,
scope: number | undefined,
scope: number | null,
formula: string,
) => void;
deleteDefinedName?: (name: string, scope: number | undefined) => void;
deleteDefinedName?: (name: string, scope: number | null) => void;
selectedArea?: () => string;
}
const NamedRanges: React.FC<NamedRangesProps> = ({
function NamedRanges({
title,
onClose,
definedNameList = [],
@@ -48,7 +48,7 @@ const NamedRanges: React.FC<NamedRangesProps> = ({
newDefinedName,
deleteDefinedName,
selectedArea,
}) => {
}: NamedRangesProps) {
const [editingDefinedName, setEditingDefinedName] =
useState<DefinedName | null>(null);
const [isCreatingNew, setIsCreatingNew] = useState(false);
@@ -72,35 +72,37 @@ const NamedRanges: React.FC<NamedRangesProps> = ({
name: string,
scope: string,
formula: string,
): SaveError | undefined => {
): SaveError => {
if (isCreatingNew) {
if (!newDefinedName) return undefined;
if (!newDefinedName) return {};
const scope_index = worksheets.findIndex((s) => s.name === scope);
const newScope = scope_index >= 0 ? scope_index : undefined;
const newScope = scope_index >= 0 ? scope_index : null;
try {
newDefinedName(name, newScope, formula);
setIsCreatingNew(false);
return undefined;
return {};
} catch (e) {
// Since name validation is done client-side, errors from model are formula errors
return { formulaError: `${e}` };
}
} else {
if (!editingDefinedName || !updateDefinedName) return undefined;
if (!editingDefinedName || !updateDefinedName) return {};
const scope_index = worksheets.findIndex((s) => s.name === scope);
const newScope = scope_index >= 0 ? scope_index : undefined;
const newScope = scope_index >= 0 ? scope_index : null;
try {
updateDefinedName(
editingDefinedName.name,
editingDefinedName.scope,
editingDefinedName.scope !== undefined
? editingDefinedName.scope
: null,
name,
newScope,
formula,
);
setEditingDefinedName(null);
return undefined;
return {};
} catch (e) {
// Since name validation is done client-side, errors from model are formula errors
return { formulaError: `${e}` };
@@ -140,7 +142,7 @@ const NamedRanges: React.FC<NamedRangesProps> = ({
handleCancel();
}
}}
aria-label="Back to list"
aria-label={t("name_manager_dialog.back")}
tabIndex={0}
>
<ArrowLeft />
@@ -170,7 +172,7 @@ const NamedRanges: React.FC<NamedRangesProps> = ({
onClose();
}
}}
aria-label="Close drawer"
aria-label={t("right_drawer.close")}
tabIndex={0}
>
<X />
@@ -223,7 +225,7 @@ const NamedRanges: React.FC<NamedRangesProps> = ({
onClose();
}
}}
aria-label="Close drawer"
aria-label={t("right_drawer.close")}
tabIndex={0}
>
<X />
@@ -257,6 +259,13 @@ const NamedRanges: React.FC<NamedRangesProps> = ({
key={`${definedName.name}-${definedName.scope}`}
tabIndex={0}
$isSelected={isSelected}
onClick={() => handleListItemClick(definedName)}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
handleListItemClick(definedName);
}
}}
>
<ListItemText>
<NameText>{definedName.name}</NameText>
@@ -291,7 +300,9 @@ const NamedRanges: React.FC<NamedRangesProps> = ({
if (deleteDefinedName) {
deleteDefinedName(
definedName.name,
definedName.scope,
definedName.scope !== undefined
? definedName.scope
: null,
);
}
}}
@@ -302,7 +313,9 @@ const NamedRanges: React.FC<NamedRangesProps> = ({
if (deleteDefinedName) {
deleteDefinedName(
definedName.name,
definedName.scope,
definedName.scope !== undefined
? definedName.scope
: null,
);
}
}
@@ -340,7 +353,7 @@ const NamedRanges: React.FC<NamedRangesProps> = ({
</Footer>
</Container>
);
};
}
const Container = styled("div")({
height: "100%",

46
webapp/IronCalc/src/components/RightDrawer/RightDrawer.tsx
View File

@@ -1,7 +1,8 @@
import type { DefinedName, WorksheetProperties } from "@ironcalc/wasm";
import { styled } from "@mui/material/styles";
import type { MouseEvent as ReactMouseEvent, ReactNode } from "react";
import type { MouseEvent as ReactMouseEvent } from "react";
import { useCallback, useEffect, useRef, useState } from "react";
import { useTranslation } from "react-i18next";
import { theme } from "../../theme";
import { TOOLBAR_HEIGHT } from "../constants";
import NamedRanges from "./NamedRanges/NamedRanges";
@@ -13,38 +14,29 @@ const MAX_DRAWER_WIDTH = 500;
interface RightDrawerProps {
isOpen: boolean;
onClose: () => void;
width?: number;
onWidthChange?: (width: number) => void;
children?: ReactNode;
showCloseButton?: boolean;
backgroundColor?: string;
title?: string;
definedNameList?: DefinedName[];
worksheets?: WorksheetProperties[];
updateDefinedName?: (
width: number;
onWidthChange: (width: number) => void;
title: string;
definedNameList: DefinedName[];
worksheets: WorksheetProperties[];
updateDefinedName: (
name: string,
scope: number | undefined,
scope: number | null,
newName: string,
newScope: number | undefined,
newScope: number | null,
newFormula: string,
) => void;
newDefinedName?: (
name: string,
scope: number | undefined,
formula: string,
) => void;
deleteDefinedName?: (name: string, scope: number | undefined) => void;
selectedArea?: () => string;
newDefinedName: (name: string, scope: number | null, formula: string) => void;
deleteDefinedName: (name: string, scope: number | null) => void;
selectedArea: () => string;
}
const RightDrawer = ({
isOpen,
onClose,
width = DEFAULT_DRAWER_WIDTH,
width,
onWidthChange,
children,
showCloseButton = true,
title = "Named Ranges",
title,
definedNameList,
worksheets,
updateDefinedName,
@@ -52,6 +44,7 @@ const RightDrawer = ({
deleteDefinedName,
selectedArea,
}: RightDrawerProps) => {
const { t } = useTranslation();
const [drawerWidth, setDrawerWidth] = useState(width);
const [isResizing, setIsResizing] = useState(false);
const resizeHandleRef = useRef<HTMLDivElement>(null);
@@ -80,7 +73,7 @@ const RightDrawer = ({
Math.min(MAX_DRAWER_WIDTH, newWidth),
);
setDrawerWidth(clampedWidth);
onWidthChange?.(clampedWidth);
onWidthChange(clampedWidth);
};
const handleMouseUp = () => {
@@ -108,14 +101,13 @@ const RightDrawer = ({
ref={resizeHandleRef}
onMouseDown={handleMouseDown}
$isResizing={isResizing}
aria-label="Resize drawer"
aria-label={t("right_drawer.resize_drawer")}
/>
{children}
<Divider />
<DrawerContent>
<NamedRanges
title={title}
onClose={showCloseButton ? onClose : undefined}
onClose={onClose}
definedNameList={definedNameList}
worksheets={worksheets}
updateDefinedName={updateDefinedName}

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

@@ -5,6 +5,7 @@ import type {
WorksheetProperties,
} from "@ironcalc/wasm";
import { styled } from "@mui/material/styles";
import { t } from "i18next";
import { useCallback, useEffect, useRef, useState } from "react";
import FormulaBar from "../FormulaBar/FormulaBar";
import RightDrawer, { DEFAULT_DRAWER_WIDTH } from "../RightDrawer/RightDrawer";
@@ -742,28 +743,35 @@ const Workbook = (props: { model: Model; workbookState: WorkbookState }) => {
onClose={() => setDrawerOpen(false)}
width={drawerWidth}
onWidthChange={setDrawerWidth}
title={t("name_manager_dialog.title")}
definedNameList={model.getDefinedNameList()}
worksheets={worksheets}
updateDefinedName={(
name: string,
scope: number | undefined,
scope: number | null,
newName: string,
newScope: number | undefined,
newScope: number | null,
newFormula: string,
) => {
model.updateDefinedName(name, scope, newName, newScope, newFormula);
model.updateDefinedName(
name,
scope ?? undefined,
newName,
newScope ?? undefined,
newFormula,
);
setRedrawId((id) => id + 1);
}}
newDefinedName={(
name: string,
scope: number | undefined,
scope: number | null,
formula: string,
) => {
model.newDefinedName(name, scope, formula);
model.newDefinedName(name, scope ?? undefined, formula);
setRedrawId((id) => id + 1);
}}
deleteDefinedName={(name: string, scope: number | undefined) => {
model.deleteDefinedName(name, scope);
deleteDefinedName={(name: string, scope: number | null) => {
model.deleteDefinedName(name, scope ?? undefined);
setRedrawId((id) => id + 1);
}}
selectedArea={() => {

3
webapp/IronCalc/src/locale/en_us.json
View File

@@ -162,6 +162,7 @@
"custom": "Custom"
},
"right_drawer": {
"close": "Close"
"close": "Close",
"resize_drawer": "Resize drawer"
}
}