refactored NameManager logic for new design
This commit is contained in:
francisco aloi
committed by
Nicolás Hatcher Andrés
Nicolás Hatcher Andrés
parent
832ca02e16
commit
75e04696b5
171
webapp/src/components/NameManager/NameManagerDialog.tsx
Normal file
171
webapp/src/components/NameManager/NameManagerDialog.tsx
Normal file
@@ -0,0 +1,171 @@
|
|||||||
|
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;
|
||||||
217
webapp/src/components/NameManager/NamedRange.tsx
Normal file
217
webapp/src/components/NameManager/NamedRange.tsx
Normal file
@@ -0,0 +1,217 @@
|
|||||||
|
import type { Model, WorksheetProperties } from "@ironcalc/wasm";
|
||||||
|
import {
|
||||||
|
Box,
|
||||||
|
Divider,
|
||||||
|
IconButton,
|
||||||
|
MenuItem,
|
||||||
|
TextField,
|
||||||
|
styled,
|
||||||
|
} from "@mui/material";
|
||||||
|
import { t } from "i18next";
|
||||||
|
import { Check, PencilLine, Trash2, X } from "lucide-react";
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
|
|
||||||
|
interface NamedRangeProperties {
|
||||||
|
model: Model;
|
||||||
|
worksheets: WorksheetProperties[];
|
||||||
|
name?: string;
|
||||||
|
scope?: number;
|
||||||
|
formula: string;
|
||||||
|
onDelete?: () => void;
|
||||||
|
toggleShowNewName?: () => void;
|
||||||
|
toggleOptions: () => void;
|
||||||
|
showOptions?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
function NamedRange({
|
||||||
|
model,
|
||||||
|
worksheets,
|
||||||
|
name,
|
||||||
|
scope,
|
||||||
|
formula,
|
||||||
|
onDelete,
|
||||||
|
toggleShowNewName,
|
||||||
|
toggleOptions,
|
||||||
|
showOptions,
|
||||||
|
}: NamedRangeProperties) {
|
||||||
|
const [newName, setNewName] = useState(name || "");
|
||||||
|
const [newScope, setNewScope] = useState(scope);
|
||||||
|
const [newFormula, setNewFormula] = useState(formula);
|
||||||
|
const [readOnly, setReadOnly] = useState(true);
|
||||||
|
const [showEditDelete, setShowEditDelete] = useState(false);
|
||||||
|
|
||||||
|
// todo: add error messages for validations
|
||||||
|
const [nameError, setNameError] = useState(false);
|
||||||
|
const [formulaError, setFormulaError] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
// set state for new name
|
||||||
|
const definedNamesModel = model.getDefinedNameList();
|
||||||
|
if (!definedNamesModel.find((n) => n.name === newName)) {
|
||||||
|
setReadOnly(false);
|
||||||
|
setShowEditDelete(true);
|
||||||
|
}
|
||||||
|
}, [newName, model]);
|
||||||
|
|
||||||
|
const handleSaveUpdate = () => {
|
||||||
|
const definedNamesModel = model.getDefinedNameList();
|
||||||
|
|
||||||
|
if (definedNamesModel.find((n) => n.name === name)) {
|
||||||
|
// update name
|
||||||
|
try {
|
||||||
|
model.updateDefinedName(
|
||||||
|
name || "",
|
||||||
|
scope,
|
||||||
|
newName,
|
||||||
|
newScope,
|
||||||
|
newFormula,
|
||||||
|
);
|
||||||
|
} catch (error) {
|
||||||
|
console.log("DefinedName update failed", error);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// create name
|
||||||
|
try {
|
||||||
|
model.newDefinedName(newName, newScope, newFormula);
|
||||||
|
} catch (error) {
|
||||||
|
console.log("DefinedName save failed", error);
|
||||||
|
}
|
||||||
|
setReadOnly(true);
|
||||||
|
}
|
||||||
|
setShowEditDelete(false);
|
||||||
|
toggleOptions();
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCancel = () => {
|
||||||
|
setReadOnly(true);
|
||||||
|
setShowEditDelete(false);
|
||||||
|
toggleOptions();
|
||||||
|
setNewName(name || "");
|
||||||
|
setNewScope(scope);
|
||||||
|
|
||||||
|
// if it's newName remove it from modal
|
||||||
|
toggleShowNewName?.();
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleEdit = () => {
|
||||||
|
setReadOnly(false);
|
||||||
|
setShowEditDelete(true);
|
||||||
|
toggleOptions();
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDelete = () => {
|
||||||
|
try {
|
||||||
|
model.deleteDefinedName(newName, newScope);
|
||||||
|
} catch (error) {
|
||||||
|
console.log("DefinedName delete failed", error);
|
||||||
|
}
|
||||||
|
onDelete?.(); // refresh modal
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<StyledBox>
|
||||||
|
<StyledTextField
|
||||||
|
id="name"
|
||||||
|
variant="outlined"
|
||||||
|
size="small"
|
||||||
|
margin="none"
|
||||||
|
fullWidth
|
||||||
|
InputProps={{ readOnly: readOnly }}
|
||||||
|
error={nameError}
|
||||||
|
value={newName}
|
||||||
|
onChange={(event) => setNewName(event.target.value)}
|
||||||
|
onKeyDown={(event) => {
|
||||||
|
event.stopPropagation();
|
||||||
|
}}
|
||||||
|
onClick={(event) => event.stopPropagation()}
|
||||||
|
/>
|
||||||
|
<StyledTextField
|
||||||
|
id="scope"
|
||||||
|
variant="outlined"
|
||||||
|
select
|
||||||
|
size="small"
|
||||||
|
margin="none"
|
||||||
|
fullWidth
|
||||||
|
InputProps={{ readOnly: readOnly }}
|
||||||
|
value={newScope ?? "global"}
|
||||||
|
onChange={(event) => {
|
||||||
|
event.target.value === "global"
|
||||||
|
? setNewScope(undefined)
|
||||||
|
: setNewScope(+event.target.value);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<MenuItem value={"global"}>
|
||||||
|
{t("name_manager_dialog.workbook")}
|
||||||
|
</MenuItem>
|
||||||
|
{worksheets.map((option, index) => (
|
||||||
|
<MenuItem key={option.name} value={index}>
|
||||||
|
{option.name}
|
||||||
|
</MenuItem>
|
||||||
|
))}
|
||||||
|
</StyledTextField>
|
||||||
|
<StyledTextField
|
||||||
|
id="formula"
|
||||||
|
variant="outlined"
|
||||||
|
size="small"
|
||||||
|
margin="none"
|
||||||
|
fullWidth
|
||||||
|
InputProps={{ readOnly: readOnly }}
|
||||||
|
error={formulaError}
|
||||||
|
value={newFormula}
|
||||||
|
onChange={(event) => setNewFormula(event.target.value)}
|
||||||
|
onKeyDown={(event) => {
|
||||||
|
event.stopPropagation();
|
||||||
|
}}
|
||||||
|
onClick={(event) => event.stopPropagation()}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{showEditDelete ? (
|
||||||
|
// save cancel
|
||||||
|
<>
|
||||||
|
<IconButton onClick={handleSaveUpdate}>
|
||||||
|
<Check size={12} />
|
||||||
|
</IconButton>
|
||||||
|
<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>
|
||||||
|
<Divider />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const StyledBox = styled(Box)`
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
width: 577px;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const StyledTextField = styled(TextField)(() => ({
|
||||||
|
"& .MuiInputBase-root": {
|
||||||
|
height: "28px",
|
||||||
|
margin: 0,
|
||||||
|
},
|
||||||
|
}));
|
||||||
|
|
||||||
|
const StyledIconButton = styled(IconButton)(({ theme }) => ({
|
||||||
|
color: theme.palette.error.main,
|
||||||
|
"&.Mui-disabled": {
|
||||||
|
opacity: 0.6,
|
||||||
|
color: theme.palette.error.light,
|
||||||
|
},
|
||||||
|
}));
|
||||||
|
|
||||||
|
export default NamedRange;
|
||||||
@@ -1,224 +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, Check, X } from "lucide-react";
|
|
||||||
import { useEffect, useState } from "react";
|
|
||||||
import NamedRange from "./NamedRange";
|
|
||||||
import { getFullRangeToString } from "./util";
|
|
||||||
|
|
||||||
type NameManagerDialogProperties = {
|
|
||||||
onClose: () => void;
|
|
||||||
open: boolean;
|
|
||||||
model: Model;
|
|
||||||
};
|
|
||||||
|
|
||||||
function NameManagerDialog(props: NameManagerDialogProperties) {
|
|
||||||
const [definedNamesLocal, setDefinedNamesLocal] = useState<DefinedName[]>();
|
|
||||||
const [definedName, setDefinedName] = useState<DefinedName>({
|
|
||||||
name: "",
|
|
||||||
scope: undefined,
|
|
||||||
formula: "",
|
|
||||||
});
|
|
||||||
|
|
||||||
// render definedNames from model
|
|
||||||
useEffect(() => {
|
|
||||||
if (props.open) {
|
|
||||||
const definedNamesModel = props.model.getDefinedNameList();
|
|
||||||
setDefinedNamesLocal(definedNamesModel);
|
|
||||||
}
|
|
||||||
}, [props.open]);
|
|
||||||
|
|
||||||
const handleSave = () => {
|
|
||||||
try {
|
|
||||||
console.log("SAVE", definedName);
|
|
||||||
|
|
||||||
props.model.newDefinedName(
|
|
||||||
definedName.name,
|
|
||||||
definedName.scope,
|
|
||||||
definedName.formula,
|
|
||||||
);
|
|
||||||
} catch (error) {
|
|
||||||
console.log("DefinedName save failed", error);
|
|
||||||
}
|
|
||||||
props.onClose();
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleChange = (
|
|
||||||
field: keyof DefinedName,
|
|
||||||
value: string | number | undefined,
|
|
||||||
) => {
|
|
||||||
console.log("CHANGE", field, value);
|
|
||||||
|
|
||||||
setDefinedName((prev: DefinedName) => ({
|
|
||||||
...prev,
|
|
||||||
[field]: value,
|
|
||||||
}));
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleDelete = (name: string, scope: number | undefined) => {
|
|
||||||
try {
|
|
||||||
props.model.deleteDefinedName(name, scope);
|
|
||||||
} catch (error) {
|
|
||||||
console.log("DefinedName delete failed", error);
|
|
||||||
}
|
|
||||||
// re-render modal
|
|
||||||
setDefinedNamesLocal(props.model.getDefinedNameList());
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleUpdate = (
|
|
||||||
name: string,
|
|
||||||
scope: number | undefined,
|
|
||||||
newName: string,
|
|
||||||
newScope: number | undefined,
|
|
||||||
newFormula: string,
|
|
||||||
) => {
|
|
||||||
try {
|
|
||||||
// what about partial update?
|
|
||||||
props.model.updateDefinedName(name, scope, newName, newScope, newFormula);
|
|
||||||
} catch (error) {
|
|
||||||
console.log("DefinedName update failed", error);
|
|
||||||
}
|
|
||||||
// re-render modal
|
|
||||||
setDefinedNamesLocal(props.model.getDefinedNameList());
|
|
||||||
};
|
|
||||||
|
|
||||||
const formatFormula = (): string => {
|
|
||||||
const worksheets = props.model.getWorksheetsProperties();
|
|
||||||
const selectedView = props.model.getSelectedView();
|
|
||||||
|
|
||||||
return getFullRangeToString(selectedView, worksheets);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<StyledDialog
|
|
||||||
open={props.open}
|
|
||||||
onClose={props.onClose}
|
|
||||||
maxWidth={false}
|
|
||||||
scroll="paper"
|
|
||||||
>
|
|
||||||
<StyledDialogTitle>
|
|
||||||
{t("name_manager_dialog.title")}
|
|
||||||
<IconButton onClick={() => props.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={props.model}
|
|
||||||
worksheets={props.model.getWorksheetsProperties()}
|
|
||||||
name={definedName.name}
|
|
||||||
scope={definedName.scope}
|
|
||||||
formula={definedName.formula}
|
|
||||||
key={definedName.name}
|
|
||||||
onChange={handleChange}
|
|
||||||
onDelete={handleDelete}
|
|
||||||
canEdit={false}
|
|
||||||
canDelete={true}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
<NamedRange
|
|
||||||
model={props.model}
|
|
||||||
worksheets={props.model.getWorksheetsProperties()}
|
|
||||||
formula={formatFormula()}
|
|
||||||
onChange={handleChange}
|
|
||||||
canEdit={true}
|
|
||||||
canDelete={false}
|
|
||||||
/>
|
|
||||||
</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>
|
|
||||||
<Box display="flex" gap="8px" width={"155px"}>
|
|
||||||
{/* change hover color? */}
|
|
||||||
<Button
|
|
||||||
onClick={() => props.onClose()}
|
|
||||||
variant="contained"
|
|
||||||
disableElevation
|
|
||||||
color="info"
|
|
||||||
sx={{
|
|
||||||
bgcolor: (theme): string => theme.palette.grey["200"],
|
|
||||||
color: (theme): string => theme.palette.grey["700"],
|
|
||||||
textTransform: "none",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{t("name_manager_dialog.cancel")}
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
onClick={handleSave}
|
|
||||||
variant="contained"
|
|
||||||
disableElevation
|
|
||||||
sx={{ textTransform: "none" }}
|
|
||||||
startIcon={<Check size={16} />}
|
|
||||||
// disabled={} // disable when error
|
|
||||||
>
|
|
||||||
{t("name_manager_dialog.save")}
|
|
||||||
</Button>
|
|
||||||
</Box>
|
|
||||||
</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;
|
|
||||||
@@ -1,158 +0,0 @@
|
|||||||
import type { DefinedName, Model, WorksheetProperties } from "@ironcalc/wasm";
|
|
||||||
import {
|
|
||||||
Box,
|
|
||||||
Divider,
|
|
||||||
IconButton,
|
|
||||||
MenuItem,
|
|
||||||
TextField,
|
|
||||||
styled,
|
|
||||||
} from "@mui/material";
|
|
||||||
import { t } from "i18next";
|
|
||||||
import { Trash2 } from "lucide-react";
|
|
||||||
import { useEffect, useState } from "react";
|
|
||||||
|
|
||||||
type NamedRangeProperties = {
|
|
||||||
model: Model;
|
|
||||||
worksheets: WorksheetProperties[];
|
|
||||||
name?: string;
|
|
||||||
scope?: number;
|
|
||||||
formula: string;
|
|
||||||
canEdit: boolean;
|
|
||||||
canDelete: boolean;
|
|
||||||
onChange: (
|
|
||||||
field: keyof DefinedName,
|
|
||||||
value: string | number | undefined,
|
|
||||||
) => void;
|
|
||||||
onDelete?: (name: string, scope: number | undefined) => void;
|
|
||||||
onUpdate?: (
|
|
||||||
name: string,
|
|
||||||
scope: number | undefined,
|
|
||||||
newName: string,
|
|
||||||
newScope: number | undefined,
|
|
||||||
newFormula: string,
|
|
||||||
) => void;
|
|
||||||
};
|
|
||||||
|
|
||||||
function NamedRange(props: NamedRangeProperties) {
|
|
||||||
const [name, setName] = useState(props.name || "");
|
|
||||||
const [scope, setScope] = useState(props.scope);
|
|
||||||
const [formula, setFormula] = useState(props.formula);
|
|
||||||
const [nameError, setNameError] = useState(false);
|
|
||||||
const [formulaError, setFormulaError] = useState(false);
|
|
||||||
|
|
||||||
const handleChange = (
|
|
||||||
field: keyof DefinedName,
|
|
||||||
value: string | number | undefined,
|
|
||||||
) => {
|
|
||||||
if (field === "name") {
|
|
||||||
setName(value as string);
|
|
||||||
props.onChange("name", value);
|
|
||||||
}
|
|
||||||
if (field === "scope") {
|
|
||||||
setScope(value as number | undefined);
|
|
||||||
props.onChange("scope", value);
|
|
||||||
}
|
|
||||||
if (field === "formula") {
|
|
||||||
setFormula(value as string);
|
|
||||||
props.onChange("formula", value);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
// send initial formula value to parent
|
|
||||||
handleChange("formula", formula);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const handleDelete = () => {
|
|
||||||
props.onDelete?.(name, scope);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<StyledBox>
|
|
||||||
<StyledTextField
|
|
||||||
id="name"
|
|
||||||
variant="outlined"
|
|
||||||
size="small"
|
|
||||||
margin="none"
|
|
||||||
fullWidth
|
|
||||||
InputProps={{ readOnly: !props.canEdit }}
|
|
||||||
error={nameError}
|
|
||||||
value={name}
|
|
||||||
onChange={(event) => handleChange("name", event.target.value)}
|
|
||||||
onKeyDown={(event) => {
|
|
||||||
event.stopPropagation();
|
|
||||||
}}
|
|
||||||
onClick={(event) => event.stopPropagation()}
|
|
||||||
/>
|
|
||||||
<StyledTextField
|
|
||||||
id="scope"
|
|
||||||
variant="outlined"
|
|
||||||
select
|
|
||||||
size="small"
|
|
||||||
margin="none"
|
|
||||||
fullWidth
|
|
||||||
InputProps={{ readOnly: !props.canEdit }}
|
|
||||||
value={scope ?? "global"}
|
|
||||||
onChange={(event) =>
|
|
||||||
handleChange(
|
|
||||||
"scope",
|
|
||||||
event.target.value === "global" ? undefined : event.target.value,
|
|
||||||
)
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<MenuItem value={"global"}>
|
|
||||||
{t("name_manager_dialog.workbook")}
|
|
||||||
</MenuItem>
|
|
||||||
{props.worksheets.map((option, index) => (
|
|
||||||
<MenuItem key={option.name} value={index}>
|
|
||||||
{option.name}
|
|
||||||
</MenuItem>
|
|
||||||
))}
|
|
||||||
</StyledTextField>
|
|
||||||
<StyledTextField
|
|
||||||
id="formula"
|
|
||||||
variant="outlined"
|
|
||||||
size="small"
|
|
||||||
margin="none"
|
|
||||||
fullWidth
|
|
||||||
InputProps={{ readOnly: !props.canEdit }}
|
|
||||||
error={formulaError}
|
|
||||||
value={formula}
|
|
||||||
onChange={(event) => handleChange("formula", event.target.value)}
|
|
||||||
onKeyDown={(event) => {
|
|
||||||
event.stopPropagation();
|
|
||||||
}}
|
|
||||||
onClick={(event) => event.stopPropagation()}
|
|
||||||
/>
|
|
||||||
<StyledIconButton onClick={handleDelete} disabled={!props.canDelete}>
|
|
||||||
<Trash2 size={12} />
|
|
||||||
</StyledIconButton>
|
|
||||||
</StyledBox>
|
|
||||||
<Divider />
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const StyledBox = styled(Box)`
|
|
||||||
display: flex;
|
|
||||||
gap: 12px;
|
|
||||||
width: 577px;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const StyledTextField = styled(TextField)(() => ({
|
|
||||||
"& .MuiInputBase-root": {
|
|
||||||
height: "28px",
|
|
||||||
margin: 0,
|
|
||||||
},
|
|
||||||
}));
|
|
||||||
|
|
||||||
const StyledIconButton = styled(IconButton)(({ theme }) => ({
|
|
||||||
color: theme.palette.error.main,
|
|
||||||
"&.Mui-disabled": {
|
|
||||||
opacity: 0.6,
|
|
||||||
color: theme.palette.error.light,
|
|
||||||
},
|
|
||||||
}));
|
|
||||||
|
|
||||||
export default NamedRange;
|
|
||||||
@@ -36,7 +36,7 @@ import {
|
|||||||
DecimalPlacesIncreaseIcon,
|
DecimalPlacesIncreaseIcon,
|
||||||
} from "../icons";
|
} from "../icons";
|
||||||
import { theme } from "../theme";
|
import { theme } from "../theme";
|
||||||
import NameManagerDialog from "./NameManagerDialog";
|
import NameManagerDialog from "./NameManager/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";
|
||||||
|
|||||||
@@ -81,8 +81,7 @@
|
|||||||
"range": "Scope",
|
"range": "Scope",
|
||||||
"scope": "Range",
|
"scope": "Range",
|
||||||
"help": "Learn more about Named Ranges",
|
"help": "Learn more about Named Ranges",
|
||||||
"save": "Save",
|
"new": "Add new",
|
||||||
"cancel": "Cancel",
|
|
||||||
"workbook": "Workbook (Global)"
|
"workbook": "Workbook (Global)"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user