chore: remove old name manager
This commit is contained in:
Daniel Gonzalez Albo
committed by
Nicolás Hatcher Andrés
Nicolás Hatcher Andrés
parent
8b3bd7943e
commit
aa4dd598b1
@@ -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 (
|
|
||||||
<StyledDialog open={open} onClose={onClose} maxWidth={false} scroll="paper">
|
|
||||||
<StyledDialogTitle>
|
|
||||||
{t("name_manager_dialog.title")}
|
|
||||||
<Cross
|
|
||||||
onClick={handleClose}
|
|
||||||
title={t("name_manager_dialog.close")}
|
|
||||||
tabIndex={0}
|
|
||||||
onKeyDown={(event) => event.key === "Enter" && properties.onClose()}
|
|
||||||
>
|
|
||||||
<X />
|
|
||||||
</Cross>
|
|
||||||
</StyledDialogTitle>
|
|
||||||
<StyledDialogContent>
|
|
||||||
{(definedNameList.length > 0 || editingNameIndex !== -2) && (
|
|
||||||
<StyledRangesHeader>
|
|
||||||
<StyledBox>{t("name_manager_dialog.name")}</StyledBox>
|
|
||||||
<StyledBox>{t("name_manager_dialog.range")}</StyledBox>
|
|
||||||
<StyledBox>{t("name_manager_dialog.scope")}</StyledBox>
|
|
||||||
</StyledRangesHeader>
|
|
||||||
)}
|
|
||||||
{definedNameList.length === 0 && editingNameIndex === -2 ? (
|
|
||||||
<EmptyStateMessage>
|
|
||||||
<IconWrapper>
|
|
||||||
<PackageOpen />
|
|
||||||
</IconWrapper>
|
|
||||||
{t("name_manager_dialog.empty_message1")}
|
|
||||||
<br />
|
|
||||||
{t("name_manager_dialog.empty_message2")}
|
|
||||||
</EmptyStateMessage>
|
|
||||||
) : (
|
|
||||||
<NameListWrapper>
|
|
||||||
{definedNameList.map((definedName, index) => {
|
|
||||||
const scopeName =
|
|
||||||
definedName.scope !== undefined
|
|
||||||
? worksheets[definedName.scope].name
|
|
||||||
: "[global]";
|
|
||||||
if (index === editingNameIndex) {
|
|
||||||
return (
|
|
||||||
<NamedRangeActive
|
|
||||||
worksheets={worksheets}
|
|
||||||
name={definedName.name}
|
|
||||||
scope={scopeName}
|
|
||||||
formula={definedName.formula}
|
|
||||||
key={definedName.name + definedName.scope}
|
|
||||||
onSave={(
|
|
||||||
newName,
|
|
||||||
newScope,
|
|
||||||
newFormula,
|
|
||||||
): string | undefined => {
|
|
||||||
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 (
|
|
||||||
<NamedRangeInactive
|
|
||||||
name={definedName.name}
|
|
||||||
scope={scopeName}
|
|
||||||
formula={definedName.formula}
|
|
||||||
key={definedName.name + definedName.scope}
|
|
||||||
showOptions={editingNameIndex === -2}
|
|
||||||
onEdit={() => setEditingNameIndex(index)}
|
|
||||||
onDelete={() => {
|
|
||||||
deleteDefinedName(definedName.name, definedName.scope);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</NameListWrapper>
|
|
||||||
)}
|
|
||||||
{editingNameIndex === -1 && (
|
|
||||||
<NamedRangeActive
|
|
||||||
worksheets={worksheets}
|
|
||||||
name={""}
|
|
||||||
formula={selectedArea()}
|
|
||||||
scope={"[global]"}
|
|
||||||
onSave={(name, scope, formula): string | undefined => {
|
|
||||||
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)}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</StyledDialogContent>
|
|
||||||
<StyledDialogActions>
|
|
||||||
<Box display="flex" alignItems="center" gap={"8px"}>
|
|
||||||
<BookOpen color="grey" size={16} />
|
|
||||||
<UploadFooterLink
|
|
||||||
href="https://docs.ironcalc.com/web-application/name-manager.html"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
|
||||||
{t("name_manager_dialog.help")}
|
|
||||||
</UploadFooterLink>
|
|
||||||
</Box>
|
|
||||||
<Button
|
|
||||||
onClick={() => setEditingNameIndex(-1)}
|
|
||||||
variant="contained"
|
|
||||||
disableElevation
|
|
||||||
sx={{ textTransform: "none", minWidth: "fit-content" }}
|
|
||||||
startIcon={<Plus size={16} />}
|
|
||||||
disabled={editingNameIndex > -2}
|
|
||||||
>
|
|
||||||
{t("name_manager_dialog.new")}
|
|
||||||
</Button>
|
|
||||||
</StyledDialogActions>
|
|
||||||
</StyledDialog>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
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;
|
|
||||||
@@ -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 (
|
|
||||||
<>
|
|
||||||
<StyledBox>
|
|
||||||
<StyledTextField
|
|
||||||
id="name"
|
|
||||||
variant="outlined"
|
|
||||||
size="small"
|
|
||||||
margin="none"
|
|
||||||
fullWidth
|
|
||||||
error={formulaError}
|
|
||||||
value={name}
|
|
||||||
onChange={(event) => setName(event.target.value)}
|
|
||||||
onKeyDown={(event) => {
|
|
||||||
event.stopPropagation();
|
|
||||||
}}
|
|
||||||
onClick={(event) => event.stopPropagation()}
|
|
||||||
/>
|
|
||||||
<StyledTextField
|
|
||||||
id="scope"
|
|
||||||
variant="outlined"
|
|
||||||
select
|
|
||||||
size="small"
|
|
||||||
margin="none"
|
|
||||||
fullWidth
|
|
||||||
error={formulaError}
|
|
||||||
value={scope}
|
|
||||||
onChange={(event) => {
|
|
||||||
setScope(event.target.value);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<MenuItem value={"[global]"}>
|
|
||||||
<MenuSpan>{t("name_manager_dialog.workbook")}</MenuSpan>
|
|
||||||
<MenuSpanGrey>{` ${t("name_manager_dialog.global")}`}</MenuSpanGrey>
|
|
||||||
</MenuItem>
|
|
||||||
{worksheets.map((option) => (
|
|
||||||
<MenuItem key={option.name} value={option.name}>
|
|
||||||
<MenuSpan>{option.name}</MenuSpan>
|
|
||||||
</MenuItem>
|
|
||||||
))}
|
|
||||||
</StyledTextField>
|
|
||||||
<StyledTextField
|
|
||||||
id="formula"
|
|
||||||
variant="outlined"
|
|
||||||
size="small"
|
|
||||||
margin="none"
|
|
||||||
fullWidth
|
|
||||||
error={formulaError}
|
|
||||||
value={formula}
|
|
||||||
onChange={(event) => setFormula(event.target.value)}
|
|
||||||
onKeyDown={(event) => {
|
|
||||||
event.stopPropagation();
|
|
||||||
}}
|
|
||||||
onClick={(event) => event.stopPropagation()}
|
|
||||||
/>
|
|
||||||
<IconsWrapper>
|
|
||||||
<StyledIconButton
|
|
||||||
onClick={() => {
|
|
||||||
const error = onSave(name, scope, formula);
|
|
||||||
if (error) {
|
|
||||||
setFormulaError(true);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
title={t("name_manager_dialog.apply")}
|
|
||||||
>
|
|
||||||
<StyledCheck size={16} />
|
|
||||||
</StyledIconButton>
|
|
||||||
<StyledIconButton
|
|
||||||
onClick={onCancel}
|
|
||||||
title={t("name_manager_dialog.discard")}
|
|
||||||
>
|
|
||||||
<X size={16} />
|
|
||||||
</StyledIconButton>
|
|
||||||
</IconsWrapper>
|
|
||||||
</StyledBox>
|
|
||||||
<Divider />
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
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;
|
|
||||||
@@ -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 (
|
|
||||||
<>
|
|
||||||
<WrappedLine>
|
|
||||||
<StyledDiv>{name}</StyledDiv>
|
|
||||||
<StyledDiv>{scopeName}</StyledDiv>
|
|
||||||
<StyledDiv>{formula}</StyledDiv>
|
|
||||||
<IconsWrapper>
|
|
||||||
<StyledIconButtonBlack
|
|
||||||
onClick={onEdit}
|
|
||||||
disabled={!showOptions}
|
|
||||||
title={t("name_manager_dialog.edit")}
|
|
||||||
>
|
|
||||||
<PencilLine size={16} />
|
|
||||||
</StyledIconButtonBlack>
|
|
||||||
<StyledIconButtonRed
|
|
||||||
onClick={onDelete}
|
|
||||||
disabled={!showOptions}
|
|
||||||
title={t("name_manager_dialog.delete")}
|
|
||||||
>
|
|
||||||
<Trash2 size={16} />
|
|
||||||
</StyledIconButtonRed>
|
|
||||||
</IconsWrapper>
|
|
||||||
</WrappedLine>
|
|
||||||
<Divider />
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
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;
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
export { default } from "./NameManagerDialog";
|
|
||||||
@@ -51,8 +51,6 @@ import {
|
|||||||
decreaseDecimalPlaces,
|
decreaseDecimalPlaces,
|
||||||
increaseDecimalPlaces,
|
increaseDecimalPlaces,
|
||||||
} from "../FormatMenu/formatUtil";
|
} from "../FormatMenu/formatUtil";
|
||||||
import NameManagerDialog from "../NameManagerDialog";
|
|
||||||
import type { NameManagerProperties } from "../NameManagerDialog/NameManagerDialog";
|
|
||||||
import { TOOLBAR_HEIGHT } from "../constants";
|
import { TOOLBAR_HEIGHT } from "../constants";
|
||||||
|
|
||||||
type ToolbarProperties = {
|
type ToolbarProperties = {
|
||||||
@@ -89,7 +87,6 @@ type ToolbarProperties = {
|
|||||||
numFmt: string;
|
numFmt: string;
|
||||||
showGridLines: boolean;
|
showGridLines: boolean;
|
||||||
onToggleShowGridLines: (show: boolean) => void;
|
onToggleShowGridLines: (show: boolean) => void;
|
||||||
nameManagerProperties: NameManagerProperties;
|
|
||||||
openDrawer: () => void;
|
openDrawer: () => void;
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -97,7 +94,6 @@ function Toolbar(properties: ToolbarProperties) {
|
|||||||
const [fontColorPickerOpen, setFontColorPickerOpen] = useState(false);
|
const [fontColorPickerOpen, setFontColorPickerOpen] = useState(false);
|
||||||
const [fillColorPickerOpen, setFillColorPickerOpen] = useState(false);
|
const [fillColorPickerOpen, setFillColorPickerOpen] = useState(false);
|
||||||
const [borderPickerOpen, setBorderPickerOpen] = useState(false);
|
const [borderPickerOpen, setBorderPickerOpen] = useState(false);
|
||||||
const [nameManagerDialogOpen, setNameManagerDialogOpen] = useState(false);
|
|
||||||
const [showLeftArrow, setShowLeftArrow] = useState(false);
|
const [showLeftArrow, setShowLeftArrow] = useState(false);
|
||||||
const [showRightArrow, setShowRightArrow] = useState(false);
|
const [showRightArrow, setShowRightArrow] = useState(false);
|
||||||
|
|
||||||
@@ -588,13 +584,6 @@ function Toolbar(properties: ToolbarProperties) {
|
|||||||
anchorEl={borderButton}
|
anchorEl={borderButton}
|
||||||
open={borderPickerOpen}
|
open={borderPickerOpen}
|
||||||
/>
|
/>
|
||||||
<NameManagerDialog
|
|
||||||
open={nameManagerDialogOpen}
|
|
||||||
onClose={() => {
|
|
||||||
setNameManagerDialogOpen(false);
|
|
||||||
}}
|
|
||||||
model={properties.nameManagerProperties}
|
|
||||||
/>
|
|
||||||
</ToolbarContainer>
|
</ToolbarContainer>
|
||||||
{showRightArrow && (
|
{showRightArrow && (
|
||||||
<Tooltip
|
<Tooltip
|
||||||
|
|||||||
@@ -665,38 +665,6 @@ const Workbook = (props: { model: Model; workbookState: WorkbookState }) => {
|
|||||||
model.setShowGridLines(sheet, show);
|
model.setShowGridLines(sheet, show);
|
||||||
setRedrawId((id) => id + 1);
|
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={() => {
|
openDrawer={() => {
|
||||||
setDrawerOpen(true);
|
setDrawerOpen(true);
|
||||||
}}
|
}}
|
||||||
|
|||||||
Reference in New Issue
Block a user