Skip to content

Commit 7785734

Browse files
author
guqiankun.gqk
committed
chore: update
1 parent 62d57dc commit 7785734

6 files changed

Lines changed: 111 additions & 142 deletions

File tree

‎packages/alex/src/api/renderApp.tsx‎

Lines changed: 0 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -128,42 +128,6 @@ export const AppRenderer: React.FC<IAppRendererProps> = ({ onLoad, Landing, ...o
128128
);
129129
};
130130

131-
const appContainer = document.createElement('div')
132-
appContainer.style.width = '100%'
133-
appContainer.style.height = '100%'
134-
135-
let appMounted = false
136-
137-
export const KeepAlive: React.FC<{ visible: boolean }> = (props) => {
138-
const anchorRef = useRef<HTMLDivElement>(null)
139-
140-
useEffect(() => {
141-
if (!appMounted) {
142-
appMounted = true
143-
ReactDOM.render(<>{props.children}</>, appContainer)
144-
}
145-
}, [])
146-
147-
useEffect(() => {
148-
if (props.visible) {
149-
anchorRef?.current?.insertAdjacentElement('afterend', appContainer)
150-
}
151-
152-
// return () => {
153-
// try {
154-
// if (anchorRef?.current?.parentNode !== null) {
155-
// anchorRef?.current?.parentNode.removeChild(appContainer);
156-
// }
157-
// } catch (error) {
158-
// console.error(error)
159-
// }
160-
// }
161-
}, [props.visible])
162-
163-
return <div ref={anchorRef} />
164-
}
165-
166-
167131

168132
// 缓存apprender 每次渲染都不卸载组件
169133
export const AppRenderer2: React.FC<IAppRendererProps> = ({ onLoad, Landing, ...opts }) => {

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

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import React, { useState, useEffect, useRef, useMemo } from 'react';
2+
import ReactDOM from 'react-dom';
3+
const appContainer = document.createElement('div')
4+
appContainer.style.width = '100%'
5+
appContainer.style.height = '100%'
6+
7+
let appMounted = false
8+
9+
export const KeepAlive: React.FC<{ visible: boolean }> = (props) => {
10+
const anchorRef = useRef<HTMLDivElement>(null)
11+
12+
useEffect(() => {
13+
if (!appMounted) {
14+
appMounted = true
15+
ReactDOM.render(<>{props.children}</>, appContainer)
16+
}
17+
}, [])
18+
19+
useEffect(() => {
20+
if (props.visible) {
21+
anchorRef?.current?.insertAdjacentElement('afterend', appContainer)
22+
}
23+
24+
// return () => {
25+
// try {
26+
// if (anchorRef?.current?.parentNode !== null) {
27+
// anchorRef?.current?.parentNode.removeChild(appContainer);
28+
// }
29+
// } catch (error) {
30+
// console.error(error)
31+
// }
32+
// }
33+
}, [props.visible])
34+
35+
return <div ref={anchorRef} />
36+
}

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

Lines changed: 20 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useMemo, useRef, useState } from 'react';
22
import ReactDOM from 'react-dom';
3-
import { IAppInstance, AppRenderer, SlotLocation, AppRenderer2, KeepAlive } from '@alipay/alex';
3+
import { IAppInstance, AppRenderer, SlotLocation } from '@alipay/alex';
44
import '@alipay/alex/languages/sql';
55
import {
66
CompletionItemKind,
@@ -9,28 +9,16 @@ import {
99
setMonacoEnvironment,
1010
} from '@alipay/alex-sql-service';
1111
import { Button } from '@opensumi/ide-components';
12-
import SqlPlugin from './sql.plugin';
12+
import * as SQLPlugin from './sql.plugin';
1313
import { IEditor } from '@opensumi/ide-editor';
1414
import { Popover, Radio, Menu } from 'antd';
1515
import 'antd/dist/antd.css';
1616
import odcTheme from '@alipay/alex/extensions/alex.odc-theme';
1717
import { SQLRender } from './sqlRender';
18-
import { Tabs } from 'antd';
1918

2019
setMonacoEnvironment();
2120

22-
const layoutConfig = {
23-
[SlotLocation.main]: {
24-
modules: ['@opensumi/ide-editor'],
25-
},
26-
};
27-
2821
const App = () => {
29-
const PluginID = '';
30-
31-
const SQLPlugin = useMemo(() => {
32-
return new SqlPlugin(PluginID);
33-
}, []);
3422

3523
const [fontValue, setFontValue] = useState(16);
3624
const [encoding, setEncoding] = useState('utf8');
@@ -76,16 +64,16 @@ const App = () => {
7664
}
7765

7866
function format() {
79-
SQLPlugin.commands?.executeCommand('editor.action.formatDocument');
67+
SQLPlugin.api.commands?.executeCommand('editor.action.formatDocument');
8068
}
8169

8270
function updatePrefeence(perferenceName, value) {
8371
// 设置首选项
84-
SQLPlugin.commands?.executeCommand('alex.setDefaultPreference', perferenceName, value);
72+
SQLPlugin.api.commands?.executeCommand('alex.setDefaultPreference', perferenceName, value);
8573
}
8674

8775
async function addLine() {
88-
const editor = (await SQLPlugin.commands?.executeCommand('alex.sql.editor')) as IEditor;
76+
const editor = (await SQLPlugin.api.commands?.executeCommand('alex.sql.editor')) as IEditor;
8977
editor?.monacoEditor.trigger('editor', 'type', { text: '\n' });
9078
}
9179

@@ -94,11 +82,11 @@ const App = () => {
9482
* @param {string} uri - 文件uri
9583
* @param {string} content - 文件内容 无内容时创建并注入默认内容
9684
*/
97-
SQLPlugin.commands?.executeCommand('alex.sql.open', 'test1.sql', '默认内容');
85+
SQLPlugin.api.commands?.executeCommand('alex.sql.open', 'test1.sql', '默认内容');
9886
}
9987

10088
async function editor() {
101-
const editor = (await SQLPlugin.commands?.executeCommand('alex.sql.editor')) as IEditor;
89+
const editor = (await SQLPlugin.api.commands?.executeCommand('alex.sql.editor')) as IEditor;
10290
console.log(editor?.monacoEditor.getValue());
10391
}
10492

@@ -132,29 +120,36 @@ const App = () => {
132120
const menuCick = (e) => {
133121
console.log('click ', e);
134122
setCurrent(e.key);
123+
// 每次切换tab 打开对应的文件
124+
if(e.key === '1') {
125+
SQLPlugin.api.commands?.executeCommand('alex.sql.open', 'test_uri1/test.sql');
126+
}else {
127+
SQLPlugin.api.commands?.executeCommand('alex.sql.open', 'test_uri2/test.sql');
128+
129+
}
135130
};
136131

137132
return (
138133
<div style={{ height: '100%', overflow: 'scroll' }}>
139134
<div style={{ height: '300px' }}>
140135
<div style={{ margin: '20px' }}>
141-
{/* <Button onClick={() => format()}>格式化</Button>
136+
<Button onClick={() => format()}>格式化</Button>
142137
<Button onClick={() => addLine()}>添加行</Button>
143138
<Button onClick={() => openFile()}>打开文件</Button>
144139
<Button onClick={() => editor()}>获取当前内容</Button>
145-
<Button onClick={() => changeTables()}>change suggest Tables</Button>
140+
{/* <Button onClick={() => changeTables()}>change suggest Tables</Button> */}
146141
<Popover content={content} placement="top">
147142
<Button>设置</Button>
148143
</Popover>
149-
<Button onClick={() => changeTables()}>change suggest Tables</Button>
144+
{/* <Button onClick={() => changeTables()}>change suggest Tables</Button> */}
150145
<Button onClick={() => window.reset()}>reset </Button>
151-
<Button onClick={() => editorNumberUpdate()}>添加编辑器</Button> */}
146+
{/* <Button onClick={() => editorNumberUpdate()}>添加编辑器</Button> */}
152147
<Menu onClick={menuCick} selectedKeys={[current]} mode="horizontal" items={items} />
153148
<div style={{ display: `${current === '1' ? 'block' : 'none'}` }}>
154-
<SQLRender id="1" visible={current === '1'} />
149+
<SQLRender id={current} visible={current === '1'} />
155150
</div>
156151
<div style={{ display: `${current === '2' ? 'block' : 'none'}` }}>
157-
<SQLRender id="2" visible={current === '2'} />
152+
<SQLRender id={current} visible={current === '2'} />
158153
</div>
159154
</div>
160155

‎packages/integrations/src/sql/sql.plugin.ts‎

Lines changed: 12 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,15 @@
1-
import { commands } from 'vscode';
2-
import type { IPluginAPI, IPluginModule } from '@alipay/alex/lib/editor';
1+
import type { IPluginAPI } from '@alipay/alex';
32

3+
export const PLUGIN_ID = 'sql-plugin';
4+
let _commands: IPluginAPI['commands'] | null = null;
45

5-
export default class SQLPlugin implements IPluginModule {
6-
/**
7-
* 插件 ID，用于唯一标识插件
8-
*/
9-
PLUGIN_ID = 'sql-plugin';
10-
private _id: string;
11-
commands: IPluginAPI['commands'];
12-
static api: any;
6+
export const api = {
7+
get commands() {
8+
return _commands;
9+
},
10+
};
1311

14-
constructor(
15-
id: string
16-
) {
17-
this._id = id;
18-
}
19-
20-
/**
21-
* 激活插件
22-
*/
23-
activate = ({ commands }: IPluginAPI) => {
24-
this.commands = commands;
25-
commands.registerCommand('alex.update.perference', async (key) => {
26-
return commands.executeCommand('')
27-
});
28-
console.log(commands)
29-
};
30-
31-
/**
32-
* 注销插件，可在此时机清理副作用
33-
*/
34-
deactivate() {}
35-
}
12+
export const activate = ({ commands }: IPluginAPI) => {
13+
// 只需获取command 方法
14+
_commands = commands;
15+
};

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

Lines changed: 43 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { AppRenderer, AppRenderer2, KeepAlive, SlotLocation } from '@alipay/alex';
2-
import React, { useMemo, useRef, useState } from 'react';
1+
import { AppRenderer, SlotLocation } from '@alipay/alex';
2+
import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
33
import ReactDOM from 'react-dom';
44
import '@alipay/alex/languages/sql';
55
import {
@@ -8,32 +8,51 @@ import {
88
supportLanguage,
99
setMonacoEnvironment,
1010
} from '@alipay/alex-sql-service';
11-
import SqlPlugin from './sql.plugin';
11+
import * as SQLPlugin from './sql.plugin';
1212
import { Popover, Radio } from 'antd';
1313
import 'antd/dist/antd.css';
1414
import odcTheme from '@alipay/alex/extensions/alex.odc-theme';
1515
import { Button } from '@opensumi/ide-components';
1616
import { IEditor } from '@opensumi/ide-editor';
1717

18+
import { KeepAlive } from './KeepAlive';
1819

20+
21+
let tableID = 1;
22+
23+
const tableMap = {
24+
1: [],
25+
2: []
26+
}
1927
export const SQLRender = (props) => {
2028

21-
const PluginID = props.id
22-
const SQLPlugin = useMemo(() => {
23-
return new SqlPlugin(PluginID);
24-
}, []);
2529

26-
let tableID = 'table1';
30+
const id = useRef(props.id)
2731

28-
const suggestTables = [
29-
{
30-
label: `sample_two_table_${tableID}`,
31-
type: 'SAMPLE_TYPE_TWO',
32-
insertText: 'LD.sample_one_table1',
33-
kind: CompletionItemKind.Method,
34-
sortText: 'a',
35-
},
36-
];
32+
const suggestTables = useRef(tableMap);
33+
34+
useEffect(() => {
35+
id.current = props.id;
36+
37+
console.log('id', id)
38+
}, [props.id])
39+
40+
console.log('props',props);
41+
42+
function changeTables() {
43+
tableID++;
44+
suggestTables.current[id.current] = suggestTables.current[id.current].concat([
45+
{
46+
label: `sample_one_table_${tableID}`,
47+
type: 'SAMPLE_TYPE_ONE',
48+
insertText: 'LD.sample_one_table1',
49+
kind: CompletionItemKind.Method,
50+
sortText: 'a',
51+
},
52+
])
53+
console.log('suggestTables ==> ',suggestTables)
54+
}
55+
const PluginID = props.id
3756
const layoutConfig = {
3857
[SlotLocation.main]: {
3958
modules: ['@opensumi/ide-editor'],
@@ -45,33 +64,11 @@ export const SQLRender = (props) => {
4564

4665
console.log('render sql ==>',props)
4766

48-
49-
async function addLine() {
50-
const editor = (await SQLPlugin.commands?.executeCommand('alex.sql.editor')) as IEditor;
51-
editor?.monacoEditor.trigger('editor', 'type', { text: '\n' });
52-
}
53-
function format() {
54-
SQLPlugin.commands?.executeCommand('editor.action.formatDocument');
55-
}
56-
function openFile() {
57-
/** COMMAND alex.sql.open
58-
* @param {string} uri - 文件uri
59-
* @param {string} content - 文件内容 无内容时创建并注入默认内容
60-
*/
61-
SQLPlugin.commands?.executeCommand('alex.sql.open', 'test1.sql', '默认内容');
62-
}
63-
async function getEditor() {
64-
const editor = (await SQLPlugin.commands?.executeCommand('alex.sql.editor')) as IEditor;
65-
console.log(editor?.monacoEditor.getValue());
66-
}
6767

6868
return (
6969
<div style={{ height: '200px', display: 'flex' }}>
7070
<Button style={{ zIndex: '100' }} onClick={() => setEditor(false)}>销毁editor</Button>
71-
<Button style={{ zIndex: '100' }} onClick={() => format()}>格式化</Button>
72-
<Button style={{ zIndex: '100' }} onClick={() => addLine()}>添加行</Button>
73-
<Button style={{ zIndex: '100' }} onClick={() => openFile()}>打开文件</Button>
74-
<Button style={{ zIndex: '100' }} onClick={() => getEditor()}>获取当前内容</Button>
71+
<Button onClick={() => changeTables()}>change suggest Tables</Button>
7572

7673
{editor && (
7774
<div style={{ border: '2px solid red', zIndex: '10', width: '100%'}}>
@@ -119,8 +116,8 @@ export const SQLRender = (props) => {
119116
},
120117
],
121118
onSuggestTables: (keyword, options) => {
122-
console.log('suggest', keyword, options, suggestTables);
123-
return suggestTables;
119+
console.log('suggest', keyword, options, suggestTables, id);
120+
return suggestTables.current[id.current];
124121
},
125122
onSuggestFields: (prefix, options) => {
126123
console.log('files', prefix, options);
@@ -210,7 +207,7 @@ export const SQLRender = (props) => {
210207
}),
211208
],
212209
extensionMetadata: [odcTheme],
213-
workspaceDir: `sql-service-${PluginID}`,
210+
workspaceDir: `sql-service`,
214211
layoutConfig,
215212
defaultPreferences: {
216213
'general.theme': 'odc-light',
@@ -228,7 +225,7 @@ export const SQLRender = (props) => {
228225
biz: 'sql-service',
229226
// hideEditorTab: true,
230227
scenario: 'ALEX_TEST',
231-
defaultOpenFile: 'test.sql',
228+
// defaultOpenFile: 'test.sql',
232229
hideBreadcrumb: true,
233230
hideLeftTabBar: true,
234231
registerKeybindings: [
@@ -244,7 +241,8 @@ export const SQLRender = (props) => {
244241
// 初始全量文件索引
245242
requestFileIndex() {
246243
return Promise.resolve({
247-
'test.sql': 'select * from',
244+
'test_uri1/test.sql': 'select * from 111',
245+
'test_uri2/test.sql': 'select * from 222',
248246
});
249247
},
250248
},

0 commit comments

Comments
 (0)