Skip to content

Commit 4fea145

Browse files
author
guqiankun.gqk
committed
chore: update
1 parent 7a3c673 commit 4fea145

4 files changed

Lines changed: 247 additions & 6 deletions

File tree

‎packages/integrations/src/sql/index.tsx‎

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import { IEditor } from '@opensumi/ide-editor';
1414
import { Popover, Radio } from 'antd';
1515
import 'antd/dist/antd.css';
1616
import odcTheme from '@alipay/alex/extensions/alex.odc-theme';
17+
import {SQLRender} from './sqlRender'
1718

1819
setMonacoEnvironment();
1920

@@ -53,6 +54,7 @@ async function editor() {
5354
const App = () => {
5455
const [fontValue, setFontValue] = useState(16);
5556
const [encoding, setEncoding] = useState('utf8');
57+
const [editorNumber, setEditorNumber] = useState(1);
5658

5759
let tableID = 1;
5860

@@ -87,6 +89,11 @@ const App = () => {
8789
updatePrefeence('files.encoding', e.target.value);
8890
};
8991

92+
function editorNumberUpdate() {
93+
console.log('editorNumberUpdate', editorNumber);
94+
setEditorNumber(editorNumber+1)
95+
}
96+
9097
const content = () => (
9198
<div>
9299
<p>编码</p>
@@ -104,8 +111,8 @@ const App = () => {
104111
);
105112

106113
return (
107-
<div style={{ height: '100%' }}>
108-
<div style={{ height: '50%' }}>
114+
<div style={{ height: '100%', overflow: 'scroll' }}>
115+
<div style={{ height: '500px' }}>
109116
<div style={{ margin: '20px' }}>
110117
<Button onClick={() => format()}>格式化</Button>
111118
<Button onClick={() => addLine()}>添加行</Button>
@@ -116,6 +123,8 @@ const App = () => {
116123
<Button>设置</Button>
117124
</Popover>
118125
<Button onClick={() => changeTables()}>change suggest Tables</Button>
126+
<Button onClick={() => window.reset()}>reset </Button>
127+
<Button onClick={() => editorNumberUpdate()}>添加编辑器</Button>
119128
</div>
120129
<AppRenderer2
121130
onLoad={(app) => {
@@ -264,6 +273,7 @@ const App = () => {
264273
'editor.autoSaveDelay': 1000,
265274
'editor.fixedOverflowWidgets': true, // widget editor 默认改为 fixed
266275
'files.encoding': 'utf8', // 默认编码
276+
'editor.fontSize': 12
267277
},
268278
}}
269279
runtimeConfig={{
@@ -293,9 +303,12 @@ const App = () => {
293303
},
294304
},
295305
}}
296-
/>
297-
306+
/>
298307
</div>
308+
309+
{editorNumber > 1 ? <div><SQLRender/></div> : null }
310+
{editorNumber > 2 ? <div><SQLRender/></div> : null }
311+
299312
</div>
300313
);
301314
};

‎packages/integrations/src/sql/sql-editor.tsx‎

Whitespace-only changes.

‎packages/integrations/src/sql/sqlRender.tsx‎

Lines changed: 228 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,228 @@
1+
import { AppRenderer2, SlotLocation } from '@alipay/alex';
2+
import React, { useRef, useState } from 'react';
3+
import ReactDOM from 'react-dom';
4+
import '@alipay/alex/languages/sql';
5+
import {
6+
CompletionItemKind,
7+
SqlServiceModule,
8+
supportLanguage,
9+
setMonacoEnvironment,
10+
} from '@alipay/alex-sql-service';
11+
import * as SQLPlugin from './sql.plugin';
12+
import { Popover, Radio } from 'antd';
13+
import 'antd/dist/antd.css';
14+
import odcTheme from '@alipay/alex/extensions/alex.odc-theme';
15+
import { Button } from '@opensumi/ide-components';
16+
17+
18+
let id = 1
19+
20+
export const SQLRender: React.FC = (props) => {
21+
let tableID = 123;
22+
23+
const suggestTables = [
24+
{
25+
label: `sample_two_table_${tableID}`,
26+
type: 'SAMPLE_TYPE_TWO',
27+
insertText: 'LD.sample_one_table1',
28+
kind: CompletionItemKind.Method,
29+
sortText: 'a',
30+
},
31+
];
32+
const layoutConfig = {
33+
[SlotLocation.main]: {
34+
modules: ['@opensumi/ide-editor'],
35+
},
36+
};
37+
38+
const [editor, setEditor] = useState(true);
39+
40+
id++
41+
42+
console.log('render sql ==>',id)
43+
44+
return (
45+
<div style={{ height: '300px', display: 'flex' }}>
46+
<Button style={{ zIndex: '100' }} onClick={() => setEditor(false)}>销毁editor</Button>
47+
{editor && (
48+
<div style={{ border: '2px solid red', zIndex: '10', width: '100%'}}>
49+
<AppRenderer2
50+
appConfig={{
51+
// plugins: [SQLPlugin],
52+
modules: [
53+
SqlServiceModule.Config({
54+
onValidation: (ast: any, markers: any) => {
55+
// console.log(ast, markers);
56+
// const filterMarkers = markers.filter((item, index) => {
57+
// if (item.message == 'SEMICOLON expected.') {
58+
// const markerText = editorIns.current.editor.getModel().getValueInRange({
59+
// startLineNumber: item.startLineNumber,
60+
// startColumn: item.startColumn,
61+
// endLineNumber: item.endLineNumber,
62+
// endColumn: item.endColumn,
63+
// });
64+
// if (!['by', 'from'].includes(markerText)) {
65+
// return true;
66+
// }
67+
// }
68+
// });
69+
return markers;
70+
},
71+
// onWokerLoad: ({language, loadTime}) => {
72+
// // worker 加载完成
73+
// console.log(language, loadTime);
74+
// },
75+
lowerCaseComplete: true,
76+
marks: [
77+
{
78+
message: '测试效果',
79+
startRow: 1,
80+
startCol: 1,
81+
},
82+
],
83+
formatRules: [
84+
// @ts-ignore
85+
{
86+
// regex: /\w/g,
87+
// value: 'select',
88+
},
89+
],
90+
onSuggestTables: (keyword, options) => {
91+
console.log('suggest', keyword, options, suggestTables);
92+
return suggestTables;
93+
},
94+
onSuggestFields: (prefix, options) => {
95+
console.log('files', prefix, options);
96+
97+
return Promise.resolve([
98+
{
99+
label: 'age',
100+
type: 'SAMPLE_TYPE_ONE',
101+
insertText: 'age',
102+
kind: CompletionItemKind.Field,
103+
sortText: 'b',
104+
},
105+
{
106+
label: 'banana',
107+
type: 'SAMPLE_TYPE_ONE',
108+
insertText: 'banana',
109+
kind: CompletionItemKind.Field,
110+
sortText: 'b',
111+
},
112+
{
113+
label: 'sample_one_table1',
114+
type: 'SAMPLE_TYPE_ONE',
115+
insertText: 'id_test',
116+
kind: CompletionItemKind.Field,
117+
sortText: 'b',
118+
},
119+
]);
120+
},
121+
options: {
122+
language: supportLanguage.ODPSSQL,
123+
disableAsyncItemCache: true,
124+
},
125+
sorter: (type) => {
126+
switch (type) {
127+
case 'TABLEALIAS':
128+
case 'TABLE':
129+
return 'c';
130+
case 'FIELD':
131+
case 'FIELDALIAS':
132+
return 'd';
133+
case 'KEYWORD':
134+
case 'CONSTS':
135+
return 'e';
136+
case 'FUNCTION':
137+
return 'f';
138+
default:
139+
return 'g';
140+
}
141+
},
142+
onChange: (data) => {
143+
// console.log('change',data);
144+
},
145+
completionTypes: {
146+
KEYWORD: {
147+
text: '关键词',
148+
kind: CompletionItemKind.Keyword,
149+
},
150+
CONSTS: {
151+
text: '常量',
152+
kind: CompletionItemKind.Snippet,
153+
},
154+
FUNCTION: {
155+
text: '函数',
156+
kind: CompletionItemKind.Function,
157+
},
158+
TABLE: {
159+
text: '表名',
160+
kind: CompletionItemKind.Method,
161+
},
162+
TABLEALIAS: {
163+
text: '表别名',
164+
kind: CompletionItemKind.Method,
165+
},
166+
SNIPPET: {
167+
text: '代码块',
168+
kind: CompletionItemKind.Snippet,
169+
},
170+
FIELD: {
171+
text: '表字段',
172+
kind: CompletionItemKind.Field,
173+
},
174+
FIELDALIAS: {
175+
text: '表字段别名',
176+
kind: CompletionItemKind.Field,
177+
},
178+
},
179+
}),
180+
],
181+
extensionMetadata: [odcTheme],
182+
workspaceDir: `sql-service-${id}`,
183+
layoutConfig,
184+
defaultPreferences: {
185+
'general.theme': 'odc-light',
186+
'application.confirmExit': 'never',
187+
'editor.autoSave': 'afterDelay',
188+
'editor.guides.bracketPairs': false,
189+
'editor.minimap': false,
190+
'editor.autoSaveDelay': 1000,
191+
'editor.fixedOverflowWidgets': true, // widget editor 默认改为 fixed
192+
'files.encoding': 'utf8', // 默认编码
193+
'editor.fontSize': 12,
194+
},
195+
}}
196+
runtimeConfig={{
197+
biz: 'sql-service',
198+
// hideEditorTab: true,
199+
scenario: 'ALEX_TEST',
200+
// defaultOpenFile: 'test.sql',
201+
hideBreadcrumb: true,
202+
hideLeftTabBar: true,
203+
registerKeybindings: [
204+
{
205+
command: '',
206+
keybinding: 'f8',
207+
},
208+
],
209+
workspace: {
210+
filesystem: {
211+
fs: 'FileIndexSystem',
212+
options: {
213+
// 初始全量文件索引
214+
requestFileIndex() {
215+
return Promise.resolve({
216+
'test.sql': 'select * from',
217+
});
218+
},
219+
},
220+
},
221+
},
222+
}}
223+
/>
224+
</div>
225+
)}
226+
</div>
227+
);
228+
};

‎packages/toolkit/public/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@
1212
margin: 0;
1313
}
1414
#main {
15-
width: 100vw;
16-
height: 100vh;
15+
/* width: 100vw;
16+
height: 100vh; */
1717
margin: 0;
1818
padding: 0;
1919
overflow: hidden;

0 commit comments

Comments
 (0)