feat(ui): add custom js editor in create test screen (#465) (#503)

Zooz · Oct 26, 2020 · 7138635 · 7138635
1 parent fa93612
commit 7138635
Show file tree

Hide file tree

Showing 5 changed files with 421 additions and 305 deletions.
diff --git a/ui/src/features/components/TestForm/JSEditor.js b/ui/src/features/components/TestForm/JSEditor.js
@@ -0,0 +1,35 @@
+import React from 'react';
+import MonacoEditor from '@uiw/react-monacoeditor';
+
+export default function JSEditor ({ javaScript, onInputCodeChange }) {
+  const options = {
+    selectOnLineNumbers: true,
+    roundedSelection: false,
+    readOnly: false,
+    cursorStyle: 'line',
+    automaticLayout: false,
+    theme: 'vs'
+  }
+  return (
+    <div style={{ border: '1px solid #557EFF', position: 'relative', width: '100%' }}>
+      <MonacoEditor
+        language='javascript'
+        value={javaScript}
+        options={options}
+        height='200px'
+        width='100%'
+        onChange={onInputCodeChange}
+        scrollbar={{
+          useShadows: false,
+          verticalHasArrows: false,
+          horizontalHasArrows: false,
+          vertical: 'hidden',
+          horizontal: 'hidden',
+          verticalScrollbarSize: 17,
+          horizontalScrollbarSize: 17,
+          arrowSize: 30
+        }}
+      />
+    </div>
+  )
+}