blob: d3825c075af7820df231002ef86e3ba8bbbbe707 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
|
import { observer } from 'mobx-react-lite';
import React from 'react';
import Button from '@material-ui/core/Button';
import ButtonGroup from '@material-ui/core/ButtonGroup';
import ToggleButton from '@material-ui/core/ToggleButton';
import Divider from '@material-ui/core/Divider';
import FormatListNumberedIcon from '@material-ui/icons/FormatListNumbered';
import RedoIcon from '@material-ui/icons/Redo';
import UndoIcon from '@material-ui/icons/Undo';
import { makeStyles } from '../makeStyles';
import { useRootStore } from '../RootStore';
const useStyles = makeStyles()((theme) => ({
iconButton: {
padding: 7,
border: 0,
color: theme.palette.text.primary,
'&, &.MuiButtonGroup-grouped': {
minWidth: 36,
},
'&.MuiButtonGroup-grouped:not(:last-of-type)': {
borderRight: 0,
},
},
divider: {
margin: theme.spacing(0.5),
},
}));
export const EditorButtons = observer(() => {
const { editorStore } = useRootStore();
const { classes, cx } = useStyles();
return (
<>
<ButtonGroup
variant="text"
>
<Button
disabled={!editorStore.canUndo}
onClick={() => editorStore.undo()}
className={cx(classes.iconButton)}
color="inherit"
aria-label="Undo"
>
<UndoIcon fontSize="small" />
</Button>
<Button
disabled={!editorStore.canRedo}
onClick={() => editorStore.redo()}
className={cx(classes.iconButton)}
color="inherit"
aria-label="Redo"
>
<RedoIcon fontSize="small" />
</Button>
</ButtonGroup>
<Divider
flexItem
orientation="vertical"
className={classes.divider}
/>
<ToggleButton
selected={editorStore.showLineNumbers}
onChange={() => editorStore.toggleLineNumbers()}
size="small"
className={cx(classes.iconButton)}
aria-label="Show line numbers"
value="show-line-numbers"
>
<FormatListNumberedIcon fontSize="small" />
</ToggleButton>
</>
);
});
|