diff --git a/webapp/src/components/NameManagerDialog/NameManagerDialog.tsx b/webapp/src/components/NameManagerDialog/NameManagerDialog.tsx index 2edbf1d..16532d8 100644 --- a/webapp/src/components/NameManagerDialog/NameManagerDialog.tsx +++ b/webapp/src/components/NameManagerDialog/NameManagerDialog.tsx @@ -1,4 +1,4 @@ -import type { Model } from "@ironcalc/wasm"; +import type { DefinedName, WorksheetProperties } from "@ironcalc/wasm"; import { Box, Button, @@ -13,58 +13,48 @@ import { import { t } from "i18next"; import { BookOpen, Plus, X } from "lucide-react"; import { useEffect, useState } from "react"; -import { getFullRangeToString } from "../util"; import NamedRangeActive from "./NamedRangeActive"; import NamedRangeInactive from "./NamedRangeInactive"; -interface NameManagerDialogProperties { - open: boolean; - model: Model; - onClose: () => void; - onNamesChanged: () => void; -} - -function NameManagerDialog(properties: NameManagerDialogProperties) { - const { open, model, onClose, onNamesChanged } = properties; - // 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]); - - // Model stuff: - const worksheets = model.getWorksheetsProperties(); - const definedNameList = model.getDefinedNameList(); - const formatFormula = (): string => { - const worksheetNames = worksheets.map((s) => s.name); - const selectedView = model.getSelectedView(); - - return getFullRangeToString(selectedView, worksheetNames); - }; - const newDefinedName = ( +export interface NameManagerProperties { + newDefinedName: ( name: string, scope: number | undefined, - formula: string - ) => { - model.newDefinedName(name, scope, formula); - }; - const updateDefinedName = ( + formula: string, + ) => void; + updateDefinedName: ( name: string, scope: number | undefined, newName: string, newScope: number | undefined, - newFormula: string - ) => { - model.updateDefinedName(name, scope, newName, newScope, newFormula); - }; - const deleteDefinedName = (name: string, scope: number | undefined) => { - model.deleteDefinedName(name, scope); - }; + 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) { @@ -102,10 +92,10 @@ function NameManagerDialog(properties: NameManagerDialogProperties) { onSave={( newName, newScope, - newFormula + newFormula, ): string | undefined => { const scope_index = worksheets.findIndex( - (s) => s.name === newScope + (s) => s.name === newScope, ); const scope = scope_index > 0 ? scope_index : undefined; try { @@ -114,10 +104,9 @@ function NameManagerDialog(properties: NameManagerDialogProperties) { definedName.scope, newName, scope, - newFormula + newFormula, ); setEditingNameIndex(-2); - onNamesChanged(); } catch (e) { return `${e}`; } @@ -136,7 +125,6 @@ function NameManagerDialog(properties: NameManagerDialogProperties) { onEdit={() => setEditingNameIndex(index)} onDelete={() => { deleteDefinedName(definedName.name, definedName.scope); - onNamesChanged(); }} /> ); @@ -146,7 +134,7 @@ function NameManagerDialog(properties: NameManagerDialogProperties) { { const scope_index = worksheets.findIndex((s) => s.name === scope); @@ -154,7 +142,6 @@ function NameManagerDialog(properties: NameManagerDialogProperties) { try { newDefinedName(name, scope_value, formula); setEditingNameIndex(-2); - onNamesChanged(); } catch (e) { return `${e}`; } diff --git a/webapp/src/components/toolbar.tsx b/webapp/src/components/toolbar.tsx index b368302..0611f43 100644 --- a/webapp/src/components/toolbar.tsx +++ b/webapp/src/components/toolbar.tsx @@ -1,7 +1,6 @@ import type { BorderOptions, HorizontalAlignment, - Model, VerticalAlignment, } from "@ironcalc/wasm"; import { styled } from "@mui/material/styles"; @@ -37,6 +36,7 @@ import { } from "../icons"; import { theme } from "../theme"; import NameManagerDialog from "./NameManagerDialog"; +import type { NameManagerProperties } from "./NameManagerDialog/NameManagerDialog"; import BorderPicker from "./borderPicker"; import ColorPicker from "./colorPicker"; import { TOOLBAR_HEIGHT } from "./constants"; @@ -63,7 +63,6 @@ type ToolbarProperties = { onFillColorPicked: (hex: string) => void; onNumberFormatPicked: (numberFmt: string) => void; onBorderChanged: (border: BorderOptions) => void; - onNamesChanged: () => void; fillColor: string; fontColor: string; bold: boolean; @@ -76,7 +75,7 @@ type ToolbarProperties = { numFmt: string; showGridLines: boolean; onToggleShowGridLines: (show: boolean) => void; - model: Model; + nameManagerProperties: NameManagerProperties; }; function Toolbar(properties: ToolbarProperties) { @@ -398,8 +397,7 @@ function Toolbar(properties: ToolbarProperties) { onClose={() => { setNameManagerDialogOpen(false); }} - onNamesChanged={properties.onNamesChanged} - model={properties.model} + model={properties.nameManagerProperties} /> ); diff --git a/webapp/src/components/workbook.tsx b/webapp/src/components/workbook.tsx index 07978d4..3aeef7e 100644 --- a/webapp/src/components/workbook.tsx +++ b/webapp/src/components/workbook.tsx @@ -21,7 +21,11 @@ import { import FormulaBar from "./formulabar"; import Toolbar from "./toolbar"; import useKeyboardNavigation from "./useKeyboardNavigation"; -import { type NavigationKey, getCellAddress } from "./util"; +import { + type NavigationKey, + getCellAddress, + getFullRangeToString, +} from "./util"; import type { WorkbookState } from "./workbookState"; import Worksheet from "./worksheet"; @@ -32,11 +36,13 @@ const Workbook = (props: { model: Model; workbookState: WorkbookState }) => { // Calling `setRedrawId((id) => id + 1);` forces a redraw // This is needed because `model` or `workbookState` can change without React being aware of it const setRedrawId = useState(0)[1]; - const info = model - .getWorksheetsProperties() - .map(({ name, color, sheet_id, state }: WorksheetProperties) => { + + const worksheets = model.getWorksheetsProperties(); + const info = worksheets.map( + ({ name, color, sheet_id, state }: WorksheetProperties) => { return { name, color: color ? color : "#FFF", sheetId: sheet_id, state }; - }); + }, + ); const focusWorkbook = useCallback(() => { if (rootRef.current) { rootRef.current.focus(); @@ -569,8 +575,38 @@ const Workbook = (props: { model: Model; workbookState: WorkbookState }) => { model.setShowGridLines(sheet, show); setRedrawId((id) => id + 1); }} - onNamesChanged={() => setRedrawId((id) => id + 1)} - model={model} + 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(), + }} />