updating ui
This commit is contained in:
martin
parent
6327dd633e
commit
748562fce1
33
package-lock.json
generated
33
package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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 (
|
||||
<DynamicForm schema={schema} onSubmit={onSubmit} onCancel={onCancel}/>
|
||||
)};
|
||||
export default test;
|
||||
|
||||
|
||||
return (<DynamicRenderer component={'DynamicForm'} props={props}/>);
|
||||
};
|
||||
export default test
|
||||
|
||||
@ -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 (<DynamicRenderer component={'DynamicForm'} props={props}/>);
|
||||
return (<DynamicRenderer code={"// TEST CODE"}/>);
|
||||
};
|
||||
export default test
|
||||
|
||||
48
resources/ui/codeEditor.tsx
Normal file
48
resources/ui/codeEditor.tsx
Normal file
@ -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<CodeEditorProps, CodeEditorState> {
|
||||
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 (
|
||||
<MonacoEditor
|
||||
width="800"
|
||||
height="600"
|
||||
language="javascript"
|
||||
theme="vs-dark"
|
||||
value={code}
|
||||
options={options}
|
||||
onChange={(...args) => _this.onChange(...args)}
|
||||
editorDidMount={(...args) => _this.editorDidMount(...args)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default CodeEditor;
|
||||
@ -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<T = any> extends React.Component<DynamicFormProps<T>, DynamicF
|
||||
return (
|
||||
<Form schema={this.props.schema as any} formData={this.props.data} liveValidate onSubmit={e => this._submitButtonPressed(e.formData)}>
|
||||
<Button type="submit" variant="success">Submit</Button>{' '}
|
||||
<Button variant="warning" onClick={_ =>this._cancelButtonPressed()}>Cancel</Button>{' '}
|
||||
<Button variant="danger" onClick={_ =>this._cancelButtonPressed()}>Cancel</Button>{' '}
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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<N,E> extends Partial<LayoutProps<any>>{
|
||||
@ -308,11 +309,7 @@ class GraphicalEditorComponent<N,E> extends React.Component<GraphicalEditorCompo
|
||||
// const label = id;
|
||||
|
||||
_this.tabs[id] = {
|
||||
nodes: [{
|
||||
id: 'test',
|
||||
shape: 'ellipse',
|
||||
label
|
||||
}],
|
||||
nodes: [],
|
||||
edges: [],
|
||||
clusters: [],
|
||||
version: "20200713",
|
||||
@ -344,7 +341,30 @@ class GraphicalEditorComponent<N,E> extends React.Component<GraphicalEditorCompo
|
||||
async onTabDelete(tabId: string) {
|
||||
// A Tab should be deleted
|
||||
|
||||
return true;
|
||||
try {
|
||||
const saveData = await _this.getDialogData<boolean>({
|
||||
header: 'Close Tab',
|
||||
content: {
|
||||
component: (props) => {
|
||||
return (<>
|
||||
<p>
|
||||
You are about to close the tab. Do you want to save changes?
|
||||
</p>
|
||||
<Button variant="success"onClick={_ =>props.onSubmit(true)}>Yes</Button>{' '}
|
||||
<Button variant="danger" onClick={_ =>props.onSubmit(false)}>No</Button>{' '}
|
||||
<Button variant="secondary" onClick={_ =>props.onCancel(new Error("Canceled"))}>Cancel</Button>{' '}
|
||||
</>)
|
||||
},
|
||||
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() {
|
||||
|
||||
@ -205,7 +205,7 @@ class Layout<T> extends React.Component<LayoutProps<T>, LayoutState<T>> {
|
||||
<Nav.Item key={tab.id}>
|
||||
<Nav.Link onSelect={_ => {
|
||||
selectTab(tab.id);
|
||||
}} eventKey={tab.id}>{tab.label}
|
||||
}} eventKey={tab.id}>{tab.label + ' '}
|
||||
<FaTimesCircle onClick={
|
||||
(e) => {
|
||||
e.preventDefault();
|
||||
|
||||
Loading…
Reference in New Issue
Block a user