forked from alibaba/lowcode-plugins
-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy patheditor.tsx
More file actions
111 lines (102 loc) · 3.44 KB
/
editor.tsx
File metadata and controls
111 lines (102 loc) · 3.44 KB
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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
import * as React from 'react';
import { useState, useRef, useCallback, useEffect, useLayoutEffect } from 'react';
import MonacoEditor from '@alilc/lowcode-plugin-base-monaco-editor';
import { Dialog, Message, Button } from '@alifd/next';
import { IPublicEnumTransformStage, IPublicModelPluginContext } from '@alilc/lowcode-types';
import { IEditorInstance } from '@alilc/lowcode-plugin-base-monaco-editor/lib/helper';
interface PluginCodeDiffProps {
pluginContext: IPublicModelPluginContext;
// 是否显示项目级 schema
showProjectSchema: boolean;
}
export default function PluginSchema({ pluginContext, showProjectSchema = false }: PluginCodeDiffProps) {
const { project, skeleton } = pluginContext;
const [editorSize, setEditorSize] = useState({ width: 0, height: 0 });
const getSchemaStr = useCallback(() => {
const schema = project.exportSchema(IPublicEnumTransformStage.Save);
const schemaToShow = showProjectSchema? schema : schema?.componentsTree?.[0];
return schemaToShow ? JSON.stringify(schemaToShow, null, 2) : '';
}, []);
const [schemaValue, setSchemaValue] = useState(() => {
return getSchemaStr();
});
const monacoEditorRef = useRef<IEditorInstance>();
const resize = useCallback(() => {
setEditorSize({
width: document.documentElement.clientWidth - 60,
height: document.documentElement.clientHeight - 100,
});
}, []);
useLayoutEffect(() => {
const cancelListenShowPanel = skeleton.onShowPanel((pluginName: string) => {
if (pluginName == 'LowcodePluginAliLowcodePluginSchema') {
setSchemaValue(getSchemaStr());
}
})
return cancelListenShowPanel;
}, []);
useEffect(() => {
resize();
window.addEventListener('resize', resize);
return () => {
window.removeEventListener('resize', resize);
};
}, [resize]);
const onSave = () => {
Dialog.alert({
content: 'Are you 100% sure? Lowcode editor may crash.',
footerActions: ['cancel', 'ok'],
onOk: () => {
let json;
try {
json = JSON.parse(monacoEditorRef.current?.getValue() ?? schemaValue);
} catch (err) {
Message.error('Cannot save schema. Schema Parse Error.' + err.message);
return;
}
if (showProjectSchema) {
// 当前操作项目级 schema
project.importSchema(json);
} else {
// 当前操作页面级 schema
project.importSchema({
...project.exportSchema(IPublicEnumTransformStage.Save),
componentsTree: [json],
});
}
Message.success('Schema Saved!');
skeleton.hidePanel('LowcodePluginAliLowcodePluginSchema');
}
});
}
return (
<>
<Button
onClick={onSave}
style={{ position: 'absolute', right: 68, zIndex: 100, top: -38 }}
>
{pluginContext.intl('Save Schema')}
</Button>
<MonacoEditor
height={editorSize.height}
language="json"
theme="vs-light"
value={schemaValue}
onChange={(input) => {
setSchemaValue(input);
}}
editorDidMount={(_, monacoEditor) => {
monacoEditorRef.current = monacoEditor
monacoEditor.addAction({
id: 'my-unique-id',
label: 'Save Schema',
keybindingContext: null,
contextMenuGroupId: 'navigation',
contextMenuOrder: 1.5,
run: onSave,
});
}}
/>
</>
)
}