92 lines
2.2 KiB
TypeScript
92 lines
2.2 KiB
TypeScript
import type { Model, WorksheetProperties } from "@ironcalc/wasm";
|
|
import { Box, IconButton, MenuItem, TextField, styled } from "@mui/material";
|
|
import { Trash2 } from "lucide-react";
|
|
|
|
export type NamedRangeObject = {
|
|
id: string;
|
|
name: string;
|
|
scope: string;
|
|
range: string;
|
|
};
|
|
|
|
type NamedRangeProperties = {
|
|
name: string;
|
|
scope: string;
|
|
range: string;
|
|
model: Model;
|
|
worksheets: WorksheetProperties[];
|
|
// update namedRange in model
|
|
onChange: (field: string, value: string) => void;
|
|
};
|
|
|
|
function NamedRange(props: NamedRangeProperties) {
|
|
// define onChange in parent for updating the model and values
|
|
|
|
const handleDelete = () => {
|
|
// update model
|
|
console.log("deleted named range");
|
|
};
|
|
|
|
return (
|
|
<StyledBox>
|
|
<TextField
|
|
variant="outlined"
|
|
size="small"
|
|
margin="normal"
|
|
fullWidth
|
|
value={props.name}
|
|
onChange={(event) =>
|
|
props.onChange("name", event.target.value)
|
|
}
|
|
onKeyDown={(event) => {
|
|
event.stopPropagation();
|
|
}}
|
|
onClick={(event) => event.stopPropagation()}
|
|
/>
|
|
<TextField
|
|
variant="outlined"
|
|
select
|
|
defaultValue="Workbook"
|
|
size="small"
|
|
margin="normal"
|
|
fullWidth
|
|
value={props.scope}
|
|
onChange={(event) =>
|
|
props.onChange("scope", event.target.value)
|
|
}
|
|
>
|
|
{props.worksheets.map((option) => (
|
|
<MenuItem key={option.sheet_id} value={option.name}>
|
|
{option.name}
|
|
</MenuItem>
|
|
))}
|
|
</TextField>
|
|
<TextField
|
|
variant="outlined"
|
|
size="small"
|
|
margin="normal"
|
|
fullWidth
|
|
value={props.range}
|
|
onChange={(event) =>
|
|
props.onChange("range", event.target.value)
|
|
}
|
|
onKeyDown={(event) => {
|
|
event.stopPropagation();
|
|
}}
|
|
onClick={(event) => event.stopPropagation()}
|
|
/>
|
|
{/* remove round hover animation */}
|
|
<IconButton onClick={handleDelete}>
|
|
<Trash2 size={16} absoluteStrokeWidth />
|
|
</IconButton>
|
|
</StyledBox>
|
|
);
|
|
}
|
|
|
|
const StyledBox = styled(Box)`
|
|
display: flex;
|
|
gap: 15px;
|
|
`;
|
|
|
|
export default NamedRange;
|