160 lines
3.6 KiB
TypeScript
160 lines
3.6 KiB
TypeScript
import type { Model } from "@ironcalc/wasm";
|
|
import { styled } from "@mui/material";
|
|
import { Fx } from "../../icons";
|
|
import { theme } from "../../theme";
|
|
import Editor from "../Editor/Editor";
|
|
import {
|
|
COLUMN_WIDTH_SCALE,
|
|
ROW_HEIGH_SCALE,
|
|
} from "../WorksheetCanvas/constants";
|
|
import { FORMULA_BAR_HEIGHT } from "../constants";
|
|
import type { WorkbookState } from "../workbookState";
|
|
|
|
type FormulaBarProps = {
|
|
cellAddress: string;
|
|
formulaValue: string;
|
|
model: Model;
|
|
workbookState: WorkbookState;
|
|
onChange: () => void;
|
|
onTextUpdated: () => void;
|
|
};
|
|
|
|
function FormulaBar(properties: FormulaBarProps) {
|
|
const {
|
|
cellAddress,
|
|
formulaValue,
|
|
model,
|
|
onChange,
|
|
onTextUpdated,
|
|
workbookState,
|
|
} = properties;
|
|
return (
|
|
<Container>
|
|
<AddressContainer>
|
|
<CellBarAddress>{cellAddress}</CellBarAddress>
|
|
</AddressContainer>
|
|
<Divider />
|
|
<FormulaContainer>
|
|
<FormulaSymbolButton>
|
|
<Fx />
|
|
</FormulaSymbolButton>
|
|
<EditorWrapper
|
|
onClick={(event) => {
|
|
const [sheet, row, column] = model.getSelectedCell();
|
|
const editorWidth =
|
|
model.getColumnWidth(sheet, column) * COLUMN_WIDTH_SCALE;
|
|
const editorHeight =
|
|
model.getRowHeight(sheet, row) * ROW_HEIGH_SCALE;
|
|
workbookState.setEditingCell({
|
|
sheet,
|
|
row,
|
|
column,
|
|
text: formulaValue,
|
|
referencedRange: null,
|
|
cursorStart: formulaValue.length,
|
|
cursorEnd: formulaValue.length,
|
|
focus: "formula-bar",
|
|
activeRanges: [],
|
|
mode: "edit",
|
|
editorWidth,
|
|
editorHeight,
|
|
});
|
|
event.stopPropagation();
|
|
event.preventDefault();
|
|
}}
|
|
>
|
|
<Editor
|
|
originalText={formulaValue}
|
|
model={model}
|
|
workbookState={workbookState}
|
|
onEditEnd={() => {
|
|
onChange();
|
|
}}
|
|
onTextUpdated={onTextUpdated}
|
|
type="formula-bar"
|
|
/>
|
|
</EditorWrapper>
|
|
</FormulaContainer>
|
|
</Container>
|
|
);
|
|
}
|
|
|
|
const StyledButton = styled("div")`
|
|
display: inline-flex;
|
|
align-items: center;
|
|
width: 15px;
|
|
min-width: 0px;
|
|
padding: 0px;
|
|
color: inherit;
|
|
font-weight: inherit;
|
|
svg {
|
|
width: 15px;
|
|
height: 15px;
|
|
}
|
|
`;
|
|
|
|
const FormulaSymbolButton = styled(StyledButton)`
|
|
margin-right: 8px;
|
|
`;
|
|
|
|
const Divider = styled("div")`
|
|
background-color: ${theme.palette.grey["300"]};
|
|
min-width: 1px;
|
|
height: 16px;
|
|
margin: 0px 16px;
|
|
`;
|
|
|
|
const FormulaContainer = styled("div")`
|
|
margin-left: 0px;
|
|
line-height: 22px;
|
|
font-weight: normal;
|
|
width: 100%;
|
|
height: 22px;
|
|
display: flex;
|
|
`;
|
|
|
|
const Container = styled("div")`
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
background: ${(properties): string =>
|
|
properties.theme.palette.background.default};
|
|
height: ${FORMULA_BAR_HEIGHT}px;
|
|
`;
|
|
|
|
const AddressContainer = styled("div")`
|
|
padding-left: 16px;
|
|
color: ${theme.palette.common.black};
|
|
font-style: normal;
|
|
font-weight: normal;
|
|
font-size: 12px;
|
|
display: flex;
|
|
font-weight: 600;
|
|
flex-grow: row;
|
|
`;
|
|
|
|
const CellBarAddress = styled("div")`
|
|
width: 100%;
|
|
text-align: "center";
|
|
`;
|
|
|
|
const EditorWrapper = styled("div")`
|
|
position: relative;
|
|
width: 100%;
|
|
padding: 0px;
|
|
border-width: 0px;
|
|
outline: none;
|
|
resize: none;
|
|
white-space: pre-wrap;
|
|
vertical-align: bottom;
|
|
overflow: hidden;
|
|
text-align: left;
|
|
span {
|
|
min-width: 1px;
|
|
}
|
|
font-family: monospace;
|
|
`;
|
|
|
|
export default FormulaBar;
|