-
-
Notifications
You must be signed in to change notification settings - Fork 9
/
ScenarioEditor.tsx
78 lines (70 loc) · 1.94 KB
/
ScenarioEditor.tsx
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
77
78
import React, { useCallback, useContext, useEffect, useState } from 'react';
import AceEditor from 'react-ace';
import 'ace-builds/src-noconflict/mode-java';
import 'ace-builds/src-noconflict/theme-github';
import { ipcRenderer } from 'electron';
import { ACTIONS_IDS } from '../../Editor/constants';
// Example style, you can use another
function ScenarioEditor({ EditorState, dispatch }): JSX.Element {
const [EditorContent, setContent] = useState('myScenario:');
const getContent = useCallback(() => {
return EditorContent;
}, [EditorContent]);
const setUpForVisualization = useCallback(
(value) => {
EditorState.visualizationRequested = value;
},
[EditorState]
);
useEffect(() => {
function getCurrentScenario() {
return getContent();
}
function updateVisualizationObj(_event: any, obj: any) {
dispatch({
type: ACTIONS_IDS.setCurrentScenarioFile,
payload: obj,
});
}
console.log('effectara');
if (EditorState.visualizationRequested === true) {
ipcRenderer.on('editor/visualizationReady', updateVisualizationObj);
ipcRenderer.send('editor/visualizeRequest', getCurrentScenario());
setUpForVisualization(false);
}
// TODO add case for save scenario action
return function onUnmount() {
ipcRenderer.removeListener(
'editor/visualizationReady',
updateVisualizationObj
);
};
}, [
setUpForVisualization,
getContent,
EditorState.visualizationRequested,
EditorState,
dispatch,
]);
return (
<div
style={{
height: '100%',
left: '48px',
width: '50%',
overflow: 'hidden',
}}
>
<>
<AceEditor
mode="java"
theme="github"
onChange={(code) => setContent(code)}
name="UNIQUE_ID_OF_DIV"
editorProps={{ $blockScrolling: true }}
/>
</>
</div>
);
}
export default ScenarioEditor;