From 748562fce121ca7959965e7093c130e0fb7f1dd7 Mon Sep 17 00:00:00 2001 From: martin Date: Mon, 26 Oct 2020 09:54:30 +0100 Subject: [PATCH] updating ui --- package-lock.json | 33 +++++++++++++++++++ package.json | 1 + pages/test/test-input.tsx | 52 ++++++++++++++---------------- pages/test/test.tsx | 26 ++------------- resources/ui/codeEditor.tsx | 48 +++++++++++++++++++++++++++ resources/ui/forms/dynamicForm.tsx | 3 +- resources/ui/graph/editor.tsx | 32 ++++++++++++++---- resources/ui/layout/layout.tsx | 2 +- 8 files changed, 136 insertions(+), 61 deletions(-) create mode 100644 resources/ui/codeEditor.tsx diff --git a/package-lock.json b/package-lock.json index 79bece2..9e31a74 100644 --- a/package-lock.json +++ b/package-lock.json @@ -34,6 +34,7 @@ "react-bootstrap": "^1.3.0", "react-dom": "^16.13.1", "react-icons": "^3.11.0", + "react-monaco-editor": "^0.40.0", "reflect-metadata": "^0.1.13", "rxjs": "^6.6.3", "simple-undo": "^1.0.2", @@ -7191,6 +7192,11 @@ "minimist": "^1.2.5" } }, + "node_modules/monaco-editor": { + "version": "0.21.2", + "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.21.2.tgz", + "integrity": "sha512-jS51RLuzMaoJpYbu7F6TPuWpnWTLD4kjRW0+AZzcryvbxrTwhNy1KC9yboyKpgMTahpUbDUsuQULoo0GV1EPqg==" + }, "node_modules/move-concurrently": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz", @@ -9309,6 +9315,19 @@ "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" }, + "node_modules/react-monaco-editor": { + "version": "0.40.0", + "resolved": "https://registry.npmjs.org/react-monaco-editor/-/react-monaco-editor-0.40.0.tgz", + "integrity": "sha512-IG322vOwKc/yjhn91xbqHONyAVxjv5L0YOUBU+hDwfswlglm/sGsqGhK9n1lD5d3l3kegMO/ZeZaMHC2LGgNRw==", + "dependencies": { + "monaco-editor": "*", + "prop-types": "^15.7.2" + }, + "peerDependencies": { + "@types/react": "^16.x", + "react": "^16.x" + } + }, "node_modules/react-motion": { "version": "0.5.2", "resolved": "https://registry.npmjs.org/react-motion/-/react-motion-0.5.2.tgz", @@ -19489,6 +19508,11 @@ "minimist": "^1.2.5" } }, + "monaco-editor": { + "version": "0.21.2", + "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.21.2.tgz", + "integrity": "sha512-jS51RLuzMaoJpYbu7F6TPuWpnWTLD4kjRW0+AZzcryvbxrTwhNy1KC9yboyKpgMTahpUbDUsuQULoo0GV1EPqg==" + }, "move-concurrently": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz", @@ -21644,6 +21668,15 @@ "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" }, + "react-monaco-editor": { + "version": "0.40.0", + "resolved": "https://registry.npmjs.org/react-monaco-editor/-/react-monaco-editor-0.40.0.tgz", + "integrity": "sha512-IG322vOwKc/yjhn91xbqHONyAVxjv5L0YOUBU+hDwfswlglm/sGsqGhK9n1lD5d3l3kegMO/ZeZaMHC2LGgNRw==", + "requires": { + "monaco-editor": "*", + "prop-types": "^15.7.2" + } + }, "react-motion": { "version": "0.5.2", "resolved": "https://registry.npmjs.org/react-motion/-/react-motion-0.5.2.tgz", diff --git a/package.json b/package.json index 71045cf..c9b31a3 100644 --- a/package.json +++ b/package.json @@ -52,6 +52,7 @@ "react-bootstrap": "^1.3.0", "react-dom": "^16.13.1", "react-icons": "^3.11.0", + "react-monaco-editor": "^0.40.0", "reflect-metadata": "^0.1.13", "rxjs": "^6.6.3", "simple-undo": "^1.0.2", diff --git a/pages/test/test-input.tsx b/pages/test/test-input.tsx index c1f094f..2d3d5e9 100644 --- a/pages/test/test-input.tsx +++ b/pages/test/test-input.tsx @@ -1,31 +1,27 @@ -// https://react-jsonschema-form.readthedocs.io/en/latest/ - -import Form from "@rjsf/bootstrap-4"; -import DynamicForm from '../../resources/ui/forms/dynamicForm' - -const schema = { - "type": "object", - "properties": { - "hello": { - "type": "string" - } - }, - "required": [ - "hello" - ] -} as any; - -const formData = {hello:"world"}; -const log = (type) => console.log.bind(console, type); +import DynamicRenderer from '../../resources/ui/dynamic/dynamicRenderer' const test = () => { - const onSubmit = async data => { - console.log(data); + const props = { + schema: { + "type": "object", + "properties": { + "hello": { + "type": "string" + } + }, + "required": [ + "hello" + ] + }, + onSubmit: async data => { + console.log(data); + }, + onCancel: async err => { + console.log('canceled',err) + } } - const onCancel = async err => { - console.log('canceled',err) - } - return ( - -)}; -export default test; \ No newline at end of file + + + return (); +}; +export default test diff --git a/pages/test/test.tsx b/pages/test/test.tsx index 3926d28..7c5c1c9 100644 --- a/pages/test/test.tsx +++ b/pages/test/test.tsx @@ -1,28 +1,6 @@ -import DynamicRenderer from '../../resources/ui/dynamic/dynamicRenderer' -import DynamicForm from '../../resources/ui/forms/dynamicForm' +import DynamicRenderer from '../../resources/ui/codeEditor' const test = () => { - const props = { - schema: { - "type": "object", - "properties": { - "hello": { - "type": "string" - } - }, - "required": [ - "hello" - ] - }, - onSubmit: async data => { - console.log(data); - }, - onCancel: async err => { - console.log('canceled',err) - } - } - - - return (); + return (); }; export default test diff --git a/resources/ui/codeEditor.tsx b/resources/ui/codeEditor.tsx new file mode 100644 index 0000000..169cb40 --- /dev/null +++ b/resources/ui/codeEditor.tsx @@ -0,0 +1,48 @@ +import React from 'react'; +import MonacoEditor from 'react-monaco-editor'; + +export interface CodeEditorProps { + code: string +} + +export interface CodeEditorState { + code: string +} + +class CodeEditor extends React.Component { + constructor(props) { + super(props); + this.state = { + code: '// type your code...', + } + } + editorDidMount(editor, monaco) { + console.log('editorDidMount', editor); + editor.focus(); + } + onChange(newValue, e) { + console.log('onChange', newValue, e); + } + render() { + const code = this.state.code; + const options = { + selectOnLineNumbers: true + }; + + const _this = this; + return ( + _this.onChange(...args)} + editorDidMount={(...args) => _this.editorDidMount(...args)} + /> + ); + } +} + +export default CodeEditor; \ No newline at end of file diff --git a/resources/ui/forms/dynamicForm.tsx b/resources/ui/forms/dynamicForm.tsx index 5acef9c..569d08a 100644 --- a/resources/ui/forms/dynamicForm.tsx +++ b/resources/ui/forms/dynamicForm.tsx @@ -1,6 +1,5 @@ import React from 'react'; import Form from "@rjsf/bootstrap-4"; -import { deepClone } from '../../../lib/helpers/objectMethods'; import { IJsonSchema } from '../../types/IJSONSchema' import { Button } from 'react-bootstrap'; @@ -39,7 +38,7 @@ class DynamicForm extends React.Component, DynamicF return (
this._submitButtonPressed(e.formData)}> {' '} - {' '} + {' '}
); } diff --git a/resources/ui/graph/editor.tsx b/resources/ui/graph/editor.tsx index b29c534..89897ec 100644 --- a/resources/ui/graph/editor.tsx +++ b/resources/ui/graph/editor.tsx @@ -14,6 +14,7 @@ import { generateGraphOptions } from './defaults/default.graph-options'; import { makeMeMultiSelect } from './addons/selectionbox.extension'; import DynamicRenderer from '../dynamic/dynamicRenderer'; import { rgetattr, rsetattr } from '../../../lib/helpers/objectMethods'; +import { Button } from 'react-bootstrap'; export interface GraphicalEditorComponentProps extends Partial>{ @@ -308,11 +309,7 @@ class GraphicalEditorComponent extends React.Component extends React.Component({ + header: 'Close Tab', + content: { + component: (props) => { + return (<> +

+ You are about to close the tab. Do you want to save changes? +

+ {' '} + {' '} + {' '} + ) + }, + props: {} + } + }); + + // The variable save Data contains the info, whether the user wants to save or discard the changes + return true; + + } catch(error) { + return false + } }, async onNoTabSelected() { diff --git a/resources/ui/layout/layout.tsx b/resources/ui/layout/layout.tsx index 1235c71..1c44e41 100644 --- a/resources/ui/layout/layout.tsx +++ b/resources/ui/layout/layout.tsx @@ -205,7 +205,7 @@ class Layout extends React.Component, LayoutState> { { selectTab(tab.id); - }} eventKey={tab.id}>{tab.label} + }} eventKey={tab.id}>{tab.label + ' '} { e.preventDefault();