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

WIP

Browse Source
This commit is contained in:
Nicolás Hatcher
2024-12-30 11:46:46 +01:00
parent e5265ce3ad
commit ae661f8e93
7 changed files with 285 additions and 245 deletions
Download Patch File Download Diff File Expand all files Collapse all files

171
webapp/src/components/NameManager/NameManagerDialog.tsx
View File

@@ -1,171 +0,0 @@
import type { DefinedName, Model } from "@ironcalc/wasm";
import {
Box,
Button,
Dialog,
DialogActions,
DialogContent,
DialogTitle,
IconButton,
Stack,
styled,
} from "@mui/material";
import { t } from "i18next";
import { BookOpen, Plus, X } from "lucide-react";
import { useEffect, useState } from "react";
import { getFullRangeToString } from "../util";
import NamedRange from "./NamedRange";
interface NameManagerDialogProperties {
onClose: () => void;
open: boolean;
model: Model;
}
function NameManagerDialog({
onClose,
open,
model,
}: NameManagerDialogProperties) {
const [definedNamesLocal, setDefinedNamesLocal] = useState<DefinedName[]>();
const [showNewName, setShowNewName] = useState(false);
const [showOptions, setShowOptions] = useState(true);
useEffect(() => {
// render definedNames from model
if (open) {
const definedNamesModel = model.getDefinedNameList();
setDefinedNamesLocal(definedNamesModel);
}
setShowNewName(false);
setShowOptions(true);
}, [open, model]);
const handleNewName = () => {
setShowNewName(true);
setShowOptions(false);
};
const handleDelete = () => {
// re-render modal
setDefinedNamesLocal(model.getDefinedNameList());
};
const formatFormula = (): string => {
const worksheets = model.getWorksheetsProperties();
const selectedView = model.getSelectedView();
return getFullRangeToString(selectedView, worksheets);
};
const toggleOptions = () => {
setShowOptions(!showOptions);
};
const toggleShowNewName = () => {
setShowNewName(false);
};
return (
<StyledDialog open={open} onClose={onClose} maxWidth={false} scroll="paper">
<StyledDialogTitle>
{t("name_manager_dialog.title")}
<IconButton onClick={() => onClose()}>
<X size={16} />
</IconButton>
</StyledDialogTitle>
<StyledDialogContent dividers>
<StyledRangesHeader>
<Box width="171px">{t("name_manager_dialog.name")}</Box>
<Box width="171px">{t("name_manager_dialog.range")}</Box>
<Box width="171px">{t("name_manager_dialog.scope")}</Box>
</StyledRangesHeader>
{definedNamesLocal?.map((definedName) => (
<NamedRange
model={model}
worksheets={model.getWorksheetsProperties()}
name={definedName.name}
scope={definedName.scope}
formula={definedName.formula}
key={definedName.name}
showOptions={showOptions}
toggleOptions={toggleOptions}
onDelete={handleDelete}
/>
))}
{showNewName && (
<NamedRange
model={model}
worksheets={model.getWorksheetsProperties()}
formula={formatFormula()}
showOptions={showOptions}
toggleOptions={toggleOptions}
toggleShowNewName={toggleShowNewName}
/>
)}
</StyledDialogContent>
<StyledDialogActions>
<Box display="flex" alignItems="center" gap={"8px"}>
<BookOpen color="grey" size={16} />
<span style={{ fontSize: "12px", fontFamily: "Inter" }}>
{t("name_manager_dialog.help")}
</span>
</Box>
<Button
onClick={handleNewName}
variant="contained"
disableElevation
sx={{ textTransform: "none" }}
startIcon={<Plus size={16} />}
disabled={!showOptions} // disable when editing
>
{t("name_manager_dialog.new")}
</Button>
</StyledDialogActions>
</StyledDialog>
);
}
const StyledDialog = styled(Dialog)(() => ({
"& .MuiPaper-root": {
height: "380px",
minWidth: "620px",
},
}));
const StyledDialogTitle = styled(DialogTitle)`
padding: 12px 20px;
font-size: 14px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: space-between;
`;
const StyledDialogContent = styled(DialogContent)`
display: flex;
flex-direction: column;
gap: 12px;
padding: 20px 12px 20px 20px;
`;
const StyledRangesHeader = styled(Stack)(({ theme }) => ({
flexDirection: "row",
gap: "12px",
fontFamily: theme.typography.fontFamily,
fontSize: "12px",
fontWeight: "700",
color: theme.palette.info.main,
}));
const StyledDialogActions = styled(DialogActions)`
padding: 12px 20px;
height: 40px;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 12px;
color: #757575;
`;
export default NameManagerDialog;

178
webapp/src/components/NameManagerDialog/NameManagerDialog.tsx Normal file
View File

@@ -0,0 +1,178 @@
import type { Model } from "@ironcalc/wasm";
import {
Box,
Button,
Dialog,
DialogActions,
DialogContent,
DialogTitle,
IconButton,
Stack,
styled,
} from "@mui/material";
import { t } from "i18next";
import { BookOpen, Plus, X } from "lucide-react";
import { useState } from "react";
import { getFullRangeToString } from "../util";
import NamedRangeActive, { NamedRangeInactive } from "./NamedRange";
interface NameManagerDialogProperties {
onClose: () => void;
open: boolean;
model: Model;
onNamesChanged: () => void;
}
function NameManagerDialog(properties: NameManagerDialogProperties) {
const { onClose, open, model, 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);
const handleNewName = () => {
setEditingNameIndex(-1);
};
const handleDelete = () => {
onNamesChanged();
};
const formatFormula = (): string => {
const worksheets = model.getWorksheetsProperties();
const selectedView = model.getSelectedView();
return getFullRangeToString(selectedView, worksheets);
};
const worksheets = model.getWorksheetsProperties();
const definedNameList = model.getDefinedNameList();
return (
<StyledDialog open={open} onClose={onClose} maxWidth={false} scroll="paper">
<StyledDialogTitle>
{t("name_manager_dialog.title")}
<IconButton onClick={onClose}>
<X size={16} />
</IconButton>
</StyledDialogTitle>
<StyledDialogContent dividers>
<StyledRangesHeader>
<StyledBox>{t("name_manager_dialog.name")}</StyledBox>
<StyledBox>{t("name_manager_dialog.range")}</StyledBox>
<StyledBox>{t("name_manager_dialog.scope")}</StyledBox>
</StyledRangesHeader>
<NameLisWrapper>
{definedNameList.map((definedName, index) => {
if (index === editingNameIndex) {
return (
<NamedRangeActive
model={model}
worksheets={worksheets}
name={definedName.name}
scope={definedName.scope}
formula={definedName.formula}
key={definedName.name}
onSave={onNamesChanged}
onCancel={() => setEditingNameIndex(-2)}
/>
);
}
return (
<NamedRangeInactive
name={definedName.name}
scope={definedName.scope}
formula={definedName.formula}
key={definedName.name}
onEdit={() => setEditingNameIndex(index)}
onDelete={handleDelete}
/>
);
})}
</NameLisWrapper>
{editingNameIndex === -1 && (
<NamedRangeActive
model={model}
worksheets={worksheets}
name={"Name1"}
scope={0}
formula={formatFormula()}
onSave={onNamesChanged}
onCancel={() => setEditingNameIndex(-2)}
/>)
}
</StyledDialogContent>
<StyledDialogActions>
<Box display="flex" alignItems="center" gap={"8px"}>
<BookOpen color="grey" size={16} />
<span style={{ fontSize: "12px", fontFamily: "Inter" }}>
{t("name_manager_dialog.help")}
</span>
</Box>
<Button
onClick={handleNewName}
variant="contained"
disableElevation
sx={{ textTransform: "none" }}
startIcon={<Plus size={16} />}
disabled={editingNameIndex > -2}
>
{t("name_manager_dialog.new")}
</Button>
</StyledDialogActions>
</StyledDialog>
);
}
const NameLisWrapper = styled(Stack)`
overflow-y: auto;
`;
const StyledBox = styled("div")`
width: 171px;
`;
const StyledDialog = styled(Dialog)(() => ({
"& .MuiPaper-root": {
height: "380px",
minWidth: "620px",
},
}));
const StyledDialogTitle = styled(DialogTitle)`
padding: 12px 20px;
font-size: 14px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: space-between;
`;
const StyledDialogContent = styled(DialogContent)`
display: flex;
flex-direction: column;
gap: 12px;
padding: 20px 12px 20px 20px;
`;
const StyledRangesHeader = styled(Box)(({ theme }) => ({
display: "flex",
paddingLeft: "6px",
fontFamily: theme.typography.fontFamily,
fontSize: "12px",
fontWeight: "700",
color: theme.palette.info.main,
}));
const StyledDialogActions = styled(DialogActions)`
padding: 12px 20px;
height: 40px;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 12px;
color: #757575;
`;
export default NameManagerDialog;

135
webapp/src/components/NameManager/NamedRange.tsx → webapp/src/components/NameManagerDialog/NamedRange.tsx
View File

@@ -14,26 +14,44 @@ import { useEffect, useState } from "react";
interface NamedRangeProperties { interface NamedRangeProperties {
model: Model; model: Model;
worksheets: WorksheetProperties[]; worksheets: WorksheetProperties[];
name?: string; name: string;
scope?: number; scope?: number;
formula: string; formula: string;
onDelete?: () => void; onSave: () => void;
toggleShowNewName?: () => void; onCancel: () => void;
toggleOptions: () => void;
showOptions?: boolean;
} }
function NamedRange({ interface NamedRangeInactiveProperties {
model, name: string;
worksheets, scope?: number;
name, formula: string;
scope, onDelete: () => void;
formula, onEdit: () => void;
onDelete, }
toggleShowNewName,
toggleOptions, export function NamedRangeInactive(properties: NamedRangeInactiveProperties) {
showOptions, const { name, scope, formula, onDelete, onEdit } = properties;
}: NamedRangeProperties) { const showOptions = true;
return (
<WrappedLine>
<StyledDiv>{name}</StyledDiv>
<StyledDiv>{scope}</StyledDiv>
<StyledDiv>{formula}</StyledDiv>
<WrappedIcons>
<IconButton onClick={onEdit} disabled={!showOptions}>
<StyledPencilLine size={12} />
</IconButton>
<StyledIconButton onClick={onDelete} disabled={!showOptions}>
<Trash2 size={12} />
</StyledIconButton>
</WrappedIcons>
</WrappedLine>
);
}
function NamedRangeActive(properties: NamedRangeProperties) {
const { model, worksheets, name, scope, formula, onCancel, onSave } =
properties;
const [newName, setNewName] = useState(name || ""); const [newName, setNewName] = useState(name || "");
const [newScope, setNewScope] = useState(scope); const [newScope, setNewScope] = useState(scope);
const [newFormula, setNewFormula] = useState(formula); const [newFormula, setNewFormula] = useState(formula);
@@ -64,7 +82,7 @@ function NamedRange({
scope, scope,
newName, newName,
newScope, newScope,
newFormula, newFormula
); );
} catch (error) { } catch (error) {
console.log("DefinedName update failed", error); console.log("DefinedName update failed", error);
@@ -79,24 +97,18 @@ function NamedRange({
setReadOnly(true); setReadOnly(true);
} }
setShowEditDelete(false); setShowEditDelete(false);
toggleOptions();
}; };
const handleCancel = () => { const handleCancel = () => {
setReadOnly(true); setReadOnly(true);
setShowEditDelete(false); setShowEditDelete(false);
toggleOptions();
setNewName(name || ""); setNewName(name || "");
setNewScope(scope); setNewScope(scope);
// if it's newName remove it from modal
toggleShowNewName?.();
}; };
const handleEdit = () => { const handleEdit = () => {
setReadOnly(false); setReadOnly(false);
setShowEditDelete(true); setShowEditDelete(true);
toggleOptions();
}; };
const handleDelete = () => { const handleDelete = () => {
@@ -105,7 +117,6 @@ function NamedRange({
} catch (error) { } catch (error) {
console.log("DefinedName delete failed", error); console.log("DefinedName delete failed", error);
} }
onDelete?.(); // refresh modal
}; };
return ( return (
@@ -117,7 +128,6 @@ function NamedRange({
size="small" size="small"
margin="none" margin="none"
fullWidth fullWidth
InputProps={{ readOnly: readOnly }}
error={nameError} error={nameError}
value={newName} value={newName}
onChange={(event) => setNewName(event.target.value)} onChange={(event) => setNewName(event.target.value)}
@@ -133,7 +143,6 @@ function NamedRange({
size="small" size="small"
margin="none" margin="none"
fullWidth fullWidth
InputProps={{ readOnly: readOnly }}
value={newScope ?? "global"} value={newScope ?? "global"}
onChange={(event) => { onChange={(event) => {
event.target.value === "global" event.target.value === "global"
@@ -156,7 +165,6 @@ function NamedRange({
size="small" size="small"
margin="none" margin="none"
fullWidth fullWidth
InputProps={{ readOnly: readOnly }}
error={formulaError} error={formulaError}
value={newFormula} value={newFormula}
onChange={(event) => setNewFormula(event.target.value)} onChange={(event) => setNewFormula(event.target.value)}
@@ -165,45 +173,44 @@ function NamedRange({
}} }}
onClick={(event) => event.stopPropagation()} onClick={(event) => event.stopPropagation()}
/> />
<>
{showEditDelete ? ( <IconButton onClick={handleSaveUpdate}>
// save cancel <StyledCheck size={12} />
<> </IconButton>
<IconButton onClick={handleSaveUpdate}> <StyledIconButton onClick={onCancel}>
<Check size={12} /> <X size={12} />
</IconButton> </StyledIconButton>
<StyledIconButton onClick={handleCancel}> </>
<X size={12} />
</StyledIconButton>
</>
) : (
// edit delete
<>
<IconButton onClick={handleEdit} disabled={!showOptions}>
<PencilLine size={12} />
</IconButton>
<StyledIconButton onClick={handleDelete} disabled={!showOptions}>
<Trash2 size={12} />
</StyledIconButton>
</>
)}
</StyledBox> </StyledBox>
<Divider />
</> </>
); );
} }
const StyledBox = styled(Box)` const StyledBox = styled(Box)`
display: flex; display: flex;
gap: 12px; width: 577px;
width: 577px;
`; `;
const StyledPencilLine = styled(PencilLine)(({ theme }) => ({
color: theme.palette.common.black,
}));
const StyledCheck = styled(Check)(({ theme }) => ({
color: theme.palette.success.main,
}));
const StyledTextField = styled(TextField)(() => ({ const StyledTextField = styled(TextField)(() => ({
padding: "0px",
width: "163px",
marginRight: "8px",
"& .MuiInputBase-root": { "& .MuiInputBase-root": {
height: "28px", height: "28px",
margin: 0, margin: 0,
}, },
"& .MuiInputBase-input": {
padding: "6px",
fontSize: "12px",
},
})); }));
const StyledIconButton = styled(IconButton)(({ theme }) => ({ const StyledIconButton = styled(IconButton)(({ theme }) => ({
@@ -214,4 +221,24 @@ const StyledIconButton = styled(IconButton)(({ theme }) => ({
}, },
})); }));
export default NamedRange;
const WrappedLine = styled(Box)({
display: "flex",
paddingLeft: "6px",
height: "28px",
});
const StyledDiv = styled("div")(({ theme }) => ({
fontFamily: theme.typography.fontFamily,
fontSize: "12px",
fontWeight: "400",
color: theme.palette.common.black,
width: "171px",
}));
const WrappedIcons = styled(Box)({
display: "flex",
gap: "0px",
});
export default NamedRangeActive;

1
webapp/src/components/NameManagerDialog/index.tsx Normal file
View File

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

5
webapp/src/components/toolbar.tsx
View File

@@ -36,7 +36,7 @@ import {
DecimalPlacesIncreaseIcon, DecimalPlacesIncreaseIcon,
} from "../icons"; } from "../icons";
import { theme } from "../theme"; import { theme } from "../theme";
import NameManagerDialog from "./NameManager/NameManagerDialog"; import NameManagerDialog from "./NameManagerDialog";
import BorderPicker from "./borderPicker"; import BorderPicker from "./borderPicker";
import ColorPicker from "./colorPicker"; import ColorPicker from "./colorPicker";
import { TOOLBAR_HEIGHT } from "./constants"; import { TOOLBAR_HEIGHT } from "./constants";
@@ -63,7 +63,6 @@ type ToolbarProperties = {
onFillColorPicked: (hex: string) => void; onFillColorPicked: (hex: string) => void;
onNumberFormatPicked: (numberFmt: string) => void; onNumberFormatPicked: (numberFmt: string) => void;
onBorderChanged: (border: BorderOptions) => void; onBorderChanged: (border: BorderOptions) => void;
onNamedRangesUpdate: () => void;
fillColor: string; fillColor: string;
fontColor: string; fontColor: string;
bold: boolean; bold: boolean;
@@ -76,6 +75,7 @@ type ToolbarProperties = {
numFmt: string; numFmt: string;
showGridLines: boolean; showGridLines: boolean;
onToggleShowGridLines: (show: boolean) => void; onToggleShowGridLines: (show: boolean) => void;
onNamesChanged: () => void;
model: Model; model: Model;
}; };
@@ -399,6 +399,7 @@ function Toolbar(properties: ToolbarProperties) {
setNameManagerDialogOpen(false); setNameManagerDialogOpen(false);
}} }}
model={properties.model} model={properties.model}
onNamesChanged={properties.onNamesChanged}
/> />
</ToolbarContainer> </ToolbarContainer>
); );

2
webapp/src/components/util.ts
View File

@@ -68,7 +68,7 @@ export function rangeToStr(
export function getFullRangeToString( export function getFullRangeToString(
selectedView: SelectedView, selectedView: SelectedView,
worksheets: WorksheetProperties[], // solo pasar names worksheets: WorksheetProperties[],
): string { ): string {
// order of values is confusing compared to rangeToStr range type, needs refactoring for consistency // order of values is confusing compared to rangeToStr range type, needs refactoring for consistency
const [rowStart, columnStart, rowEnd, columnEnd] = selectedView.range; const [rowStart, columnStart, rowEnd, columnEnd] = selectedView.range;

38
webapp/src/components/workbook.tsx
View File

@@ -137,16 +137,17 @@ const Workbook = (props: { model: Model; workbookState: WorkbookState }) => {
// FIXME: This is so that the cursor indicates there are styles to be pasted // FIXME: This is so that the cursor indicates there are styles to be pasted
const el = rootRef.current?.getElementsByClassName("sheet-container")[0]; const el = rootRef.current?.getElementsByClassName("sheet-container")[0];
if (el) { if (el) {
(el as HTMLElement).style.cursor = (
`url('data:image/svg+xml;utf8,${encodeURIComponent( el as HTMLElement
ReactDOMServer.renderToString( ).style.cursor = `url('data:image/svg+xml;utf8,${encodeURIComponent(
<PaintRoller ReactDOMServer.renderToString(
width={24} <PaintRoller
height={24} width={24}
style={{ transform: "rotate(-8deg)" }} height={24}
/>, style={{ transform: "rotate(-8deg)" }}
), />
)}'), auto`; )
)}'), auto`;
} }
}; };
@@ -168,12 +169,12 @@ const Workbook = (props: { model: Model; workbookState: WorkbookState }) => {
row, row,
column, column,
row + height, row + height,
column + width, column + width
); );
setRedrawId((id) => id + 1); setRedrawId((id) => id + 1);
}, },
onExpandAreaSelectedKeyboard: ( onExpandAreaSelectedKeyboard: (
key: "ArrowRight" | "ArrowLeft" | "ArrowUp" | "ArrowDown", key: "ArrowRight" | "ArrowLeft" | "ArrowUp" | "ArrowDown"
): void => { ): void => {
model.onExpandSelectedRange(key); model.onExpandSelectedRange(key);
setRedrawId((id) => id + 1); setRedrawId((id) => id + 1);
@@ -327,7 +328,7 @@ const Workbook = (props: { model: Model; workbookState: WorkbookState }) => {
} = model.getSelectedView(); } = model.getSelectedView();
return getCellAddress( return getCellAddress(
{ rowStart, rowEnd, columnStart, columnEnd }, { rowStart, rowEnd, columnStart, columnEnd },
{ row, column }, { row, column }
); );
}, [model]); }, [model]);
@@ -404,7 +405,7 @@ const Workbook = (props: { model: Model; workbookState: WorkbookState }) => {
source.sheet, source.sheet,
source.area, source.area,
data, data,
source.type === "cut", source.type === "cut"
); );
setRedrawId((id) => id + 1); setRedrawId((id) => id + 1);
} else if (mimeType === "text/plain") { } else if (mimeType === "text/plain") {
@@ -435,7 +436,7 @@ const Workbook = (props: { model: Model; workbookState: WorkbookState }) => {
// '2024-10-18T14:07:37.599Z' // '2024-10-18T14:07:37.599Z'
let clipboardId = sessionStorage.getItem( let clipboardId = sessionStorage.getItem(
CLIPBOARD_ID_SESSION_STORAGE_KEY, CLIPBOARD_ID_SESSION_STORAGE_KEY
); );
if (!clipboardId) { if (!clipboardId) {
clipboardId = getNewClipboardId(); clipboardId = getNewClipboardId();
@@ -473,7 +474,7 @@ const Workbook = (props: { model: Model; workbookState: WorkbookState }) => {
// '2024-10-18T14:07:37.599Z' // '2024-10-18T14:07:37.599Z'
let clipboardId = sessionStorage.getItem( let clipboardId = sessionStorage.getItem(
CLIPBOARD_ID_SESSION_STORAGE_KEY, CLIPBOARD_ID_SESSION_STORAGE_KEY
); );
if (!clipboardId) { if (!clipboardId) {
clipboardId = getNewClipboardId(); clipboardId = getNewClipboardId();
@@ -545,7 +546,7 @@ const Workbook = (props: { model: Model; workbookState: WorkbookState }) => {
}; };
model.setAreaWithBorder( model.setAreaWithBorder(
{ sheet, row, column, width, height }, { sheet, row, column, width, height },
borderArea, borderArea
); );
setRedrawId((id) => id + 1); setRedrawId((id) => id + 1);
}} }}
@@ -570,6 +571,9 @@ const Workbook = (props: { model: Model; workbookState: WorkbookState }) => {
setRedrawId((id) => id + 1); setRedrawId((id) => id + 1);
}} }}
model={model} model={model}
onNamesChanged={() => {
setRedrawId((id) => id + 1);
}}
/> />
<FormulaBar <FormulaBar
cellAddress={cellAddress()} cellAddress={cellAddress()}