diff options
author | 2021-08-22 21:35:53 +0200 | |
---|---|---|
committer | 2021-08-22 21:36:34 +0200 | |
commit | c644cb26384cd126a1e71ce652b358e0a87e3b59 (patch) | |
tree | 19f29cb466098af0cbb742cb18a88d2a632643ec /language-web/src/main/js/editor | |
parent | Covert language-web to TypeScript (diff) | |
download | refinery-c644cb26384cd126a1e71ce652b358e0a87e3b59.tar.gz refinery-c644cb26384cd126a1e71ce652b358e0a87e3b59.tar.zst refinery-c644cb26384cd126a1e71ce652b358e0a87e3b59.zip |
Add ESLint config
Diffstat (limited to 'language-web/src/main/js/editor')
-rw-r--r-- | language-web/src/main/js/editor/Editor.tsx | 2 | ||||
-rw-r--r-- | language-web/src/main/js/editor/EditorButtons.tsx | 29 | ||||
-rw-r--r-- | language-web/src/main/js/editor/EditorStore.ts | 40 |
3 files changed, 38 insertions, 33 deletions
diff --git a/language-web/src/main/js/editor/Editor.tsx b/language-web/src/main/js/editor/Editor.tsx index f81c5c37..9badb6a3 100644 --- a/language-web/src/main/js/editor/Editor.tsx +++ b/language-web/src/main/js/editor/Editor.tsx | |||
@@ -4,7 +4,7 @@ import { Controlled as CodeMirror } from 'react-codemirror2'; | |||
4 | 4 | ||
5 | import { useRootStore } from '../RootStore'; | 5 | import { useRootStore } from '../RootStore'; |
6 | 6 | ||
7 | export default observer(() => { | 7 | export const Editor = observer(() => { |
8 | const { editorStore } = useRootStore(); | 8 | const { editorStore } = useRootStore(); |
9 | 9 | ||
10 | return ( | 10 | return ( |
diff --git a/language-web/src/main/js/editor/EditorButtons.tsx b/language-web/src/main/js/editor/EditorButtons.tsx index 1a187635..d3825c07 100644 --- a/language-web/src/main/js/editor/EditorButtons.tsx +++ b/language-web/src/main/js/editor/EditorButtons.tsx | |||
@@ -11,7 +11,7 @@ import UndoIcon from '@material-ui/icons/Undo'; | |||
11 | import { makeStyles } from '../makeStyles'; | 11 | import { makeStyles } from '../makeStyles'; |
12 | import { useRootStore } from '../RootStore'; | 12 | import { useRootStore } from '../RootStore'; |
13 | 13 | ||
14 | const useStyles = makeStyles()(theme => ({ | 14 | const useStyles = makeStyles()((theme) => ({ |
15 | iconButton: { | 15 | iconButton: { |
16 | padding: 7, | 16 | padding: 7, |
17 | border: 0, | 17 | border: 0, |
@@ -28,47 +28,48 @@ const useStyles = makeStyles()(theme => ({ | |||
28 | }, | 28 | }, |
29 | })); | 29 | })); |
30 | 30 | ||
31 | export default observer(() => { | 31 | export const EditorButtons = observer(() => { |
32 | const { editorStore } = useRootStore(); | 32 | const { editorStore } = useRootStore(); |
33 | const { classes, cx } = useStyles(); | 33 | const { classes, cx } = useStyles(); |
34 | |||
34 | return ( | 35 | return ( |
35 | <> | 36 | <> |
36 | <ButtonGroup | 37 | <ButtonGroup |
37 | variant='text' | 38 | variant="text" |
38 | > | 39 | > |
39 | <Button | 40 | <Button |
40 | disabled={!editorStore.canUndo} | 41 | disabled={!editorStore.canUndo} |
41 | onClick={() => editorStore.undo()} | 42 | onClick={() => editorStore.undo()} |
42 | className={cx(classes.iconButton)} | 43 | className={cx(classes.iconButton)} |
43 | color='inherit' | 44 | color="inherit" |
44 | aria-label='Undo' | 45 | aria-label="Undo" |
45 | > | 46 | > |
46 | <UndoIcon fontSize='small'/> | 47 | <UndoIcon fontSize="small" /> |
47 | </Button> | 48 | </Button> |
48 | <Button | 49 | <Button |
49 | disabled={!editorStore.canRedo} | 50 | disabled={!editorStore.canRedo} |
50 | onClick={() => editorStore.redo()} | 51 | onClick={() => editorStore.redo()} |
51 | className={cx(classes.iconButton)} | 52 | className={cx(classes.iconButton)} |
52 | color='inherit' | 53 | color="inherit" |
53 | aria-label='Redo' | 54 | aria-label="Redo" |
54 | > | 55 | > |
55 | <RedoIcon fontSize='small'/> | 56 | <RedoIcon fontSize="small" /> |
56 | </Button> | 57 | </Button> |
57 | </ButtonGroup> | 58 | </ButtonGroup> |
58 | <Divider | 59 | <Divider |
59 | flexItem | 60 | flexItem |
60 | orientation='vertical' | 61 | orientation="vertical" |
61 | className={classes.divider} | 62 | className={classes.divider} |
62 | /> | 63 | /> |
63 | <ToggleButton | 64 | <ToggleButton |
64 | selected={editorStore.showLineNumbers} | 65 | selected={editorStore.showLineNumbers} |
65 | onChange={() => editorStore.toggleLineNumbers()} | 66 | onChange={() => editorStore.toggleLineNumbers()} |
66 | size='small' | 67 | size="small" |
67 | className={cx(classes.iconButton)} | 68 | className={cx(classes.iconButton)} |
68 | aria-label='Show line numbers' | 69 | aria-label="Show line numbers" |
69 | value='show-line-numbers' | 70 | value="show-line-numbers" |
70 | > | 71 | > |
71 | <FormatListNumberedIcon fontSize='small'/> | 72 | <FormatListNumberedIcon fontSize="small" /> |
72 | </ToggleButton> | 73 | </ToggleButton> |
73 | </> | 74 | </> |
74 | ); | 75 | ); |
diff --git a/language-web/src/main/js/editor/EditorStore.ts b/language-web/src/main/js/editor/EditorStore.ts index 167e1ade..3a0c6f87 100644 --- a/language-web/src/main/js/editor/EditorStore.ts +++ b/language-web/src/main/js/editor/EditorStore.ts | |||
@@ -25,17 +25,21 @@ const codeMirrorGlobalOptions: EditorConfiguration = { | |||
25 | theme: 'material-darker', | 25 | theme: 'material-darker', |
26 | }; | 26 | }; |
27 | 27 | ||
28 | export default class EditorStore { | 28 | export class EditorStore { |
29 | _atom; | 29 | atom; |
30 | |||
30 | editor?: Editor; | 31 | editor?: Editor; |
32 | |||
31 | xtextServices?: IXtextServices; | 33 | xtextServices?: IXtextServices; |
34 | |||
32 | value = ''; | 35 | value = ''; |
36 | |||
33 | showLineNumbers = false; | 37 | showLineNumbers = false; |
34 | 38 | ||
35 | constructor() { | 39 | constructor() { |
36 | this._atom = createAtom('EditorStore'); | 40 | this.atom = createAtom('EditorStore'); |
37 | makeAutoObservable(this, { | 41 | makeAutoObservable(this, { |
38 | _atom: false, | 42 | atom: false, |
39 | editor: observable.ref, | 43 | editor: observable.ref, |
40 | xtextServices: observable.ref, | 44 | xtextServices: observable.ref, |
41 | }); | 45 | }); |
@@ -49,7 +53,7 @@ export default class EditorStore { | |||
49 | * | 53 | * |
50 | * @param newEditor The new CodeMirror instance | 54 | * @param newEditor The new CodeMirror instance |
51 | */ | 55 | */ |
52 | editorDidMount(newEditor: Editor) { | 56 | editorDidMount(newEditor: Editor): void { |
53 | if (this.editor) { | 57 | if (this.editor) { |
54 | throw new Error('CoreMirror editor mounted before unmounting'); | 58 | throw new Error('CoreMirror editor mounted before unmounting'); |
55 | } | 59 | } |
@@ -57,7 +61,7 @@ export default class EditorStore { | |||
57 | this.xtextServices = createServices(newEditor, xtextOptions); | 61 | this.xtextServices = createServices(newEditor, xtextOptions); |
58 | } | 62 | } |
59 | 63 | ||
60 | editorWillUnmount() { | 64 | editorWillUnmount(): void { |
61 | if (this.editor) { | 65 | if (this.editor) { |
62 | removeServices(this.editor); | 66 | removeServices(this.editor); |
63 | } | 67 | } |
@@ -70,16 +74,16 @@ export default class EditorStore { | |||
70 | * | 74 | * |
71 | * @param newValue The new contents of the editor | 75 | * @param newValue The new contents of the editor |
72 | */ | 76 | */ |
73 | updateValue(newValue: string) { | 77 | updateValue(newValue: string): void { |
74 | this.value = newValue; | 78 | this.value = newValue; |
75 | } | 79 | } |
76 | 80 | ||
77 | reportChanged() { | 81 | reportChanged(): void { |
78 | this._atom.reportChanged(); | 82 | this.atom.reportChanged(); |
79 | } | 83 | } |
80 | 84 | ||
81 | _observeEditorChanges() { | 85 | protected observeEditorChanges(): void { |
82 | this._atom.reportObserved(); | 86 | this.atom.reportObserved(); |
83 | } | 87 | } |
84 | 88 | ||
85 | get codeMirrorOptions(): EditorConfiguration { | 89 | get codeMirrorOptions(): EditorConfiguration { |
@@ -92,8 +96,8 @@ export default class EditorStore { | |||
92 | /** | 96 | /** |
93 | * @returns `true` if there is history to undo | 97 | * @returns `true` if there is history to undo |
94 | */ | 98 | */ |
95 | get canUndo() { | 99 | get canUndo(): boolean { |
96 | this._observeEditorChanges(); | 100 | this.observeEditorChanges(); |
97 | if (!this.editor) { | 101 | if (!this.editor) { |
98 | return false; | 102 | return false; |
99 | } | 103 | } |
@@ -101,15 +105,15 @@ export default class EditorStore { | |||
101 | return undoSize > 0; | 105 | return undoSize > 0; |
102 | } | 106 | } |
103 | 107 | ||
104 | undo() { | 108 | undo(): void { |
105 | this.editor?.undo(); | 109 | this.editor?.undo(); |
106 | } | 110 | } |
107 | 111 | ||
108 | /** | 112 | /** |
109 | * @returns `true` if there is history to redo | 113 | * @returns `true` if there is history to redo |
110 | */ | 114 | */ |
111 | get canRedo() { | 115 | get canRedo(): boolean { |
112 | this._observeEditorChanges(); | 116 | this.observeEditorChanges(); |
113 | if (!this.editor) { | 117 | if (!this.editor) { |
114 | return false; | 118 | return false; |
115 | } | 119 | } |
@@ -117,11 +121,11 @@ export default class EditorStore { | |||
117 | return redoSize > 0; | 121 | return redoSize > 0; |
118 | } | 122 | } |
119 | 123 | ||
120 | redo() { | 124 | redo(): void { |
121 | this.editor?.redo(); | 125 | this.editor?.redo(); |
122 | } | 126 | } |
123 | 127 | ||
124 | toggleLineNumbers() { | 128 | toggleLineNumbers(): void { |
125 | this.showLineNumbers = !this.showLineNumbers; | 129 | this.showLineNumbers = !this.showLineNumbers; |
126 | } | 130 | } |
127 | } | 131 | } |