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