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-09-25 05:36:28 +02:00
|
|
|
|
|
|
|
function save(): void {
|
|
|
|
props.save({
|
|
|
|
theme: theme,
|
|
|
|
insertSpaces: insertSpaces,
|
2021-10-05 03:06:55 +02:00
|
|
|
fontSize: fontSize,
|
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-09-29 07:49:22 +02:00
|
|
|
<Select onChange={(event) => setTheme(event.target.value)} defaultValue={props.options.theme}>
|
2021-09-25 05:36:28 +02:00
|
|
|
<MenuItem value="vs-dark">dark</MenuItem>
|
|
|
|
<MenuItem value="light">light</MenuItem>
|
2021-10-10 01:00:27 +02:00
|
|
|
<MenuItem value="monokai">monokai</MenuItem>
|
2021-10-18 22:41:26 +02:00
|
|
|
<MenuItem value="solarish-dark">solarish-dark</MenuItem>
|
|
|
|
<MenuItem value="solarish-light">solarish-light</MenuItem>
|
|
|
|
</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-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>
|
|
|
|
);
|
|
|
|
}
|