diff options
Diffstat (limited to 'language-web/src/main/js/editor/EditorButtons.tsx')
-rw-r--r-- | language-web/src/main/js/editor/EditorButtons.tsx | 23 |
1 files changed, 21 insertions, 2 deletions
diff --git a/language-web/src/main/js/editor/EditorButtons.tsx b/language-web/src/main/js/editor/EditorButtons.tsx index 9622475c..bd843dfe 100644 --- a/language-web/src/main/js/editor/EditorButtons.tsx +++ b/language-web/src/main/js/editor/EditorButtons.tsx | |||
@@ -1,16 +1,35 @@ | |||
1 | import type { Diagnostic } from '@codemirror/lint'; | ||
1 | import { observer } from 'mobx-react-lite'; | 2 | import { observer } from 'mobx-react-lite'; |
2 | import Stack from '@mui/material/Stack'; | 3 | import Stack from '@mui/material/Stack'; |
3 | import ToggleButton from '@mui/material/ToggleButton'; | 4 | import ToggleButton from '@mui/material/ToggleButton'; |
4 | import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; | 5 | import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; |
5 | import CheckIcon from '@mui/icons-material/Check'; | 6 | import CheckIcon from '@mui/icons-material/Check'; |
7 | import ErrorIcon from '@mui/icons-material/Error'; | ||
6 | import FormatListNumberedIcon from '@mui/icons-material/FormatListNumbered'; | 8 | import FormatListNumberedIcon from '@mui/icons-material/FormatListNumbered'; |
9 | import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined'; | ||
7 | import RedoIcon from '@mui/icons-material/Redo'; | 10 | import RedoIcon from '@mui/icons-material/Redo'; |
8 | import SearchIcon from '@mui/icons-material/Search'; | 11 | import SearchIcon from '@mui/icons-material/Search'; |
9 | import UndoIcon from '@mui/icons-material/Undo'; | 12 | import UndoIcon from '@mui/icons-material/Undo'; |
13 | import WarningIcon from '@mui/icons-material/Warning'; | ||
10 | import React from 'react'; | 14 | import React from 'react'; |
11 | 15 | ||
12 | import { useRootStore } from '../RootStore'; | 16 | import { useRootStore } from '../RootStore'; |
13 | 17 | ||
18 | // Exhastive switch as proven by TypeScript. | ||
19 | // eslint-disable-next-line consistent-return | ||
20 | function getLintIcon(severity: Diagnostic['severity'] | null) { | ||
21 | switch (severity) { | ||
22 | case 'error': | ||
23 | return <ErrorIcon fontSize="small" />; | ||
24 | case 'warning': | ||
25 | return <WarningIcon fontSize="small" />; | ||
26 | case 'info': | ||
27 | return <InfoOutlinedIcon fontSize="small" />; | ||
28 | case null: | ||
29 | return <CheckIcon fontSize="small" />; | ||
30 | } | ||
31 | } | ||
32 | |||
14 | export const EditorButtons = observer(() => { | 33 | export const EditorButtons = observer(() => { |
15 | const { editorStore } = useRootStore(); | 34 | const { editorStore } = useRootStore(); |
16 | 35 | ||
@@ -61,10 +80,10 @@ export const EditorButtons = observer(() => { | |||
61 | <ToggleButton | 80 | <ToggleButton |
62 | selected={editorStore.showLintPanel} | 81 | selected={editorStore.showLintPanel} |
63 | onClick={() => editorStore.toggleLintPanel()} | 82 | onClick={() => editorStore.toggleLintPanel()} |
64 | aria-label="Show errors and warnings" | 83 | aria-label={`${editorStore.errorCount} errors, ${editorStore.warningCount} warnings, ${editorStore.infoCount} info`} |
65 | value="show-lint-panel" | 84 | value="show-lint-panel" |
66 | > | 85 | > |
67 | <CheckIcon fontSize="small" /> | 86 | {getLintIcon(editorStore.highestDiagnosticLevel)} |
68 | </ToggleButton> | 87 | </ToggleButton> |
69 | </ToggleButtonGroup> | 88 | </ToggleButtonGroup> |
70 | </Stack> | 89 | </Stack> |