diff options
Diffstat (limited to 'language-web/src/main/js/editor/EditorButtons.tsx')
-rw-r--r-- | language-web/src/main/js/editor/EditorButtons.tsx | 75 |
1 files changed, 75 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..1a187635 --- /dev/null +++ b/language-web/src/main/js/editor/EditorButtons.tsx | |||
@@ -0,0 +1,75 @@ | |||
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 default observer(() => { | ||
32 | const { editorStore } = useRootStore(); | ||
33 | const { classes, cx } = useStyles(); | ||
34 | return ( | ||
35 | <> | ||
36 | <ButtonGroup | ||
37 | variant='text' | ||
38 | > | ||
39 | <Button | ||
40 | disabled={!editorStore.canUndo} | ||
41 | onClick={() => editorStore.undo()} | ||
42 | className={cx(classes.iconButton)} | ||
43 | color='inherit' | ||
44 | aria-label='Undo' | ||
45 | > | ||
46 | <UndoIcon fontSize='small'/> | ||
47 | </Button> | ||
48 | <Button | ||
49 | disabled={!editorStore.canRedo} | ||
50 | onClick={() => editorStore.redo()} | ||
51 | className={cx(classes.iconButton)} | ||
52 | color='inherit' | ||
53 | aria-label='Redo' | ||
54 | > | ||
55 | <RedoIcon fontSize='small'/> | ||
56 | </Button> | ||
57 | </ButtonGroup> | ||
58 | <Divider | ||
59 | flexItem | ||
60 | orientation='vertical' | ||
61 | className={classes.divider} | ||
62 | /> | ||
63 | <ToggleButton | ||
64 | selected={editorStore.showLineNumbers} | ||
65 | onChange={() => editorStore.toggleLineNumbers()} | ||
66 | size='small' | ||
67 | className={cx(classes.iconButton)} | ||
68 | aria-label='Show line numbers' | ||
69 | value='show-line-numbers' | ||
70 | > | ||
71 | <FormatListNumberedIcon fontSize='small'/> | ||
72 | </ToggleButton> | ||
73 | </> | ||
74 | ); | ||
75 | }); | ||