2021-09-25 05:36:28 +02:00
|
|
|
import React, { useState } from "react";
|
|
|
|
import { Options } from "./Options";
|
|
|
|
import { Modal } from "../../ui/React/Modal";
|
|
|
|
|
|
|
|
import Button from "@mui/material/Button";
|
|
|
|
import Box from "@mui/material/Box";
|
|
|
|
import Typography from "@mui/material/Typography";
|
|
|
|
import Select from "@mui/material/Select";
|
|
|
|
import Switch from "@mui/material/Switch";
|
|
|
|
import MenuItem from "@mui/material/MenuItem";
|
2021-10-05 03:06:55 +02:00
|
|
|
import TextField from "@mui/material/TextField";
|
2021-09-25 05:36:28 +02:00
|
|
|
|
|
|
|
interface IProps {
|
|
|
|
options: Options;
|
|
|
|
save: (options: Options) => void;
|
|
|
|
onClose: () => void;
|
|
|
|
open: boolean;
|
|
|
|
}
|
|
|
|
|
|
|
|
export function OptionsModal(props: IProps): React.ReactElement {
|
|
|
|
const [theme, setTheme] = useState(props.options.theme);
|
|
|
|
const [insertSpaces, setInsertSpaces] = useState(props.options.insertSpaces);
|
2021-10-05 03:06:55 +02:00
|
|
|
const [fontSize, setFontSize] = useState(props.options.fontSize);
|
2021-12-17 18:34:00 +01:00
|
|
|
const [vim, setVim] = useState(props.options.vim);
|
2021-09-25 05:36:28 +02:00
|
|
|
|
|
|
|
function save(): void {
|
|
|
|
props.save({
|
2021-12-17 18:34:00 +01:00
|
|
|
theme,
|
|
|
|
insertSpaces,
|
|
|
|
fontSize,
|
|
|
|
vim,
|
2021-09-25 05:36:28 +02:00
|
|
|
});
|
|
|
|
props.onClose();
|
|
|
|
}
|
|
|
|
|
2021-10-05 03:06:55 +02:00
|
|
|
function onFontChange(event: React.ChangeEvent<HTMLInputElement>): void {
|
|
|
|
const f = parseFloat(event.target.value);
|
|
|
|
if (isNaN(f)) return;
|
|
|
|
setFontSize(f);
|
|
|
|
}
|
|
|
|
|
2021-09-25 05:36:28 +02:00
|
|
|
return (
|
|
|
|
<Modal open={props.open} onClose={props.onClose}>
|
|
|
|
<Box display="flex" flexDirection="row" alignItems="center">
|
|
|
|
<Typography>Theme: </Typography>
|
2021-10-23 20:36:07 +02:00
|
|
|
<Select onChange={(event) => setTheme(event.target.value)} value={theme}>
|
2021-10-10 01:00:27 +02:00
|
|
|
<MenuItem value="monokai">monokai</MenuItem>
|
2021-10-23 20:36:07 +02:00
|
|
|
<MenuItem value="solarized-dark">solarized-dark</MenuItem>
|
|
|
|
<MenuItem value="solarized-light">solarized-light</MenuItem>
|
2021-11-11 01:28:20 +01:00
|
|
|
<MenuItem value="vs-dark">dark</MenuItem>
|
|
|
|
<MenuItem value="light">light</MenuItem>
|
2021-12-23 07:27:58 +01:00
|
|
|
<MenuItem value="dracula">dracula</MenuItem>
|
2021-10-23 20:36:07 +02:00
|
|
|
</Select>
|
2021-09-25 05:36:28 +02:00
|
|
|
</Box>
|
|
|
|
|
|
|
|
<Box display="flex" flexDirection="row" alignItems="center">
|
|
|
|
<Typography>Use whitespace over tabs: </Typography>
|
|
|
|
<Switch onChange={(event) => setInsertSpaces(event.target.checked)} checked={insertSpaces} />
|
|
|
|
</Box>
|
2021-12-17 18:34:00 +01:00
|
|
|
|
|
|
|
<Box display="flex" flexDirection="row" alignItems="center">
|
|
|
|
<Typography>Enable vim mode: </Typography>
|
|
|
|
<Switch onChange={(event) => setVim(event.target.checked)} checked={vim} />
|
|
|
|
</Box>
|
|
|
|
|
2021-10-05 03:06:55 +02:00
|
|
|
<Box display="flex" flexDirection="row" alignItems="center">
|
|
|
|
<TextField type="number" label="Font size" value={fontSize} onChange={onFontChange} />
|
|
|
|
</Box>
|
2021-09-25 05:36:28 +02:00
|
|
|
<br />
|
|
|
|
<Button onClick={save}>Save</Button>
|
|
|
|
</Modal>
|
|
|
|
);
|
|
|
|
}
|