From 05a5d0f3064f9927d78ffa6be4dd6e1a37af11de Mon Sep 17 00:00:00 2001 From: jiming Date: Thu, 24 Feb 2022 17:59:23 +0800 Subject: [PATCH 1/2] feat: improve usage examples in Workbench of Storybook --- stories/extensions/test/testPane.tsx | 205 ++++++++++++++++++--------- 1 file changed, 136 insertions(+), 69 deletions(-) diff --git a/stories/extensions/test/testPane.tsx b/stories/extensions/test/testPane.tsx index db94fe32d..635f99030 100644 --- a/stories/extensions/test/testPane.tsx +++ b/stories/extensions/test/testPane.tsx @@ -6,10 +6,13 @@ import { Select, Option } from 'mo/components/select'; import { IColorTheme } from 'mo/model/colorTheme'; import { FileTypes, Float, IEditorTab, TreeNodeModel } from 'mo/model'; import { ILocale } from 'mo/i18n/localization'; -import { localize } from 'mo/i18n/localize'; import { Scrollable } from 'mo/components'; import { randomId } from 'mo/common/utils'; +function shortRandomId() { + return Math.round(Math.random() * 1000); +} + export default class TestPane extends React.Component { constructor(props) { super(props); @@ -72,22 +75,20 @@ export default class TestPane extends React.Component { render() { const addABar = function () { - const id = Math.random() * 10 + 1; + const id = shortRandomId(); molecule.activityBar.add({ id: id + '', - name: 'folder' + id, + name: 'ActivityBarItem-' + id, icon: 'edit', }); }; - let globalTempId; - const addStatusBar = function () { - globalTempId = randomId(); + const id = shortRandomId(); molecule.statusBar.add( { - id: globalTempId, - name: 'test' + globalTempId, + id, + name: 'StatusBarItem-' + id, sortIndex: 2, }, Float.right @@ -95,24 +96,34 @@ export default class TestPane extends React.Component { }; const removeStatusBar = function () { - molecule.statusBar.remove(globalTempId); + const { rightItems } = molecule.statusBar.getState(); + const lastItem = rightItems[rightItems.length - 1]; + if (lastItem?.id && lastItem.name?.includes('-')) { + molecule.statusBar.remove(lastItem?.id); + } }; const updateStatusBar = function () { - globalTempId = randomId(); - molecule.statusBar.update({ - id: globalTempId, - name: 'testUpdate' + randomId(), - }); + const { rightItems } = molecule.statusBar.getState(); + const lastItem = rightItems[rightItems.length - 1]; + if (lastItem?.id) { + molecule.statusBar.update({ + id: lastItem?.id, + name: 'TestUpdate-' + lastItem?.id, + }); + } }; const addPanel = function () { - const id = Math.random() * 10 + 1; + const id = shortRandomId(); + const panelId = `Panel-${id}`; molecule.panel.open({ - id: 'Pane' + id, - name: 'Panel' + id, + id: panelId, + name: panelId, closable: true, - renderPane: () =>

Test Pane

, + renderPane: () => ( +
Test {panelId}
+ ), }); }; @@ -121,15 +132,20 @@ export default class TestPane extends React.Component { }; const updateOutput = () => { + const { PANEL_OUTPUT } = molecule.builtin.getConstants(); const editorIns = molecule.panel.outputEditorInstance; console.log('outputEditorInstance:', editorIns); + molecule.panel.setActive(PANEL_OUTPUT!); molecule.panel.appendOutput('Number: ' + Math.random() * 10 + '\n'); }; const updateProblem = () => { + const { PANEL_PROBLEMS } = molecule.builtin.getConstants(); + molecule.panel.setActive(PANEL_PROBLEMS!); molecule.problems.add({ id: randomId(), name: 'text.tsx', + isLeaf: false, value: { code: 'text.tsx', message: '文件夹', @@ -143,9 +159,10 @@ export default class TestPane extends React.Component { { id: randomId(), name: '0-1', + isLeaf: true, value: { code: 'endLineNumber', - message: '语法错误', + message: '提示信息', startLineNumber: 0, startColumn: 1, endLineNumber: 0, @@ -163,19 +180,21 @@ export default class TestPane extends React.Component { }; const newEditor = function () { - const key = (Math.random() * 10 + 1).toFixed(2); + const key = shortRandomId(); + const name = `editor-${key}.ts`; const tabData: IEditorTab = { id: `${key}`, - name: `editor${key}.ts`, - icon: Math.random() >= 0.5 ? 'selection' : undefined, + name, + icon: 'selection', data: { - value: `${key}export interface Type { new(...args: any[]): T;} + value: `// editor-${key} +export interface Type { new (...args: any[]): T; } export type GenericClassDecorator = (target: T) => void;`, - path: 'desktop/molecule/editor1', + path: `desktop/molecule/${name}`, language: 'typescript', modified: false, }, - breadcrumb: [{ id: `${key}`, name: `editor.ts` }], + breadcrumb: [{ id: `${key}`, name }], }; console.log('open editor:', tabData); molecule.editor.open(tabData); @@ -213,17 +232,25 @@ export type GenericClassDecorator = (target: T) => void;`, // ); }); const addANotification = function () { + const { showNotifications } = molecule.notification.getState(); + if (!showNotifications) { + toggleNotification(); + } molecule.notification.add([ { - id: 'test', + id: randomId(), value: 'Test Notification!', }, ]); }; const removeNotification = function () { - const { data = [] } = molecule.notification.getState(); + const { data = [], showNotifications } = + molecule.notification.getState(); const lastItemId = data[data.length - 1]?.id; + if (!showNotifications) { + toggleNotification(); + } if (lastItemId) { molecule.notification.remove(lastItemId); } @@ -233,26 +260,50 @@ export type GenericClassDecorator = (target: T) => void;`, molecule.notification.toggleNotification(); }; - const openCommand = function () {}; + const notice = function (msg: string) { + const { showNotifications } = molecule.notification.getState(); + molecule.notification.clear(); + if (!showNotifications) { + toggleNotification(); + } + molecule.notification.add([ + { + id: randomId(), + value: msg, + }, + ]); + }; const appendMenu = function () { - const id = Math.random() * 10 + 1; + const id = shortRandomId(); + const name = `MenuBarItem-${id}`; molecule.menuBar.append( { id: id + '', - name: 'menuBar' + id, + name, icon: '', }, 'Edit' ); + notice( + `${name} has been added to MenuBar's Edit menu and \n you can open the menu to view it` + ); }; const removeMenu = function () { - molecule.menuBar.remove('SelectAll'); + const { ACTION_QUICK_SELECT_ALL } = molecule.builtin.getConstants(); + molecule.menuBar.remove(ACTION_QUICK_SELECT_ALL!); + notice( + `The SelectAll menu item under the MenuBar's Selection menu has been removed` + ); }; const updateMenu = function () { - molecule.menuBar.update('SelectAll', { icon: 'check' }); + const { ACTION_QUICK_UNDO } = molecule.builtin.getConstants(); + molecule.menuBar.update(ACTION_QUICK_UNDO!, { icon: 'check' }); + notice( + `The Undo menu item under the MenuBar's Edit menu has been updated` + ); }; const addSettingsItem = function () { @@ -263,6 +314,10 @@ export type GenericClassDecorator = (target: T) => void;`, }, }, }); + molecule.settings.openSettingsInEditor(); + notice( + `The "project.a.name" property has been added to the settings.json file` + ); }; const addExplorer = () => { @@ -281,6 +336,9 @@ export type GenericClassDecorator = (target: T) => void;`, }, ]; molecule.explorer.addPanel(panels); + notice( + `Panel-${id} has been added to Explorer and you can switch to Explorer to view it` + ); }; const addRootFolder = () => { @@ -288,32 +346,38 @@ export type GenericClassDecorator = (target: T) => void;`, (_, index) => new TreeNodeModel({ id: index, - name: `test_sql_${index}.txt`, + name: `test_sql_${index}.sql`, fileType: FileTypes.File, isLeaf: true, - content: `show tables; + content: `SHOW TABLES; + SELECT 1; + DESC 6d_target_test; -create table if not exists ods_order_header1213 ( -order_header_id string comment '订单头id' -,order_date bigint comment '订单日期' -,shop_id string comment '店铺id' -,customer_id string comment '客户id' -,order_status bigint comment '订单状态' -,pay_date bigint comment '支付日期' -)comment '销售订单明细表' -PARTITIONED BY (ds string) lifecycle 1000; + +CREATE TABLE IF NOT EXISTS ods_order_header1213 ( +order_header_id STRING COMMENT '订单头id', +order_date STRING COMMENT '订单日期', +shop_id STRING COMMENT '店铺id', +customer_id STRING COMMENT '客户id', +order_status BIGINT COMMENT '订单状态', +pay_date BIGINT COMMENT '支付日期' +) COMMENT '销售订单明细表' +PARTITIONED BY (DE STRING) LIFECYCLE 1000; `, }) ); molecule.folderTree.add( new TreeNodeModel({ id: randomId(), - name: 'molecule_temp', + name: 'Sample SQLs', fileType: FileTypes.RootFolder, children, }) ); + notice( + `The root folder has been added to Explorer and you can switch to Explorer to view it` + ); }; const toggleMenuBarMode = () => { @@ -325,54 +389,57 @@ PARTITIONED BY (ds string) lifecycle 1000; return ( -
-
- +
+
+

Simple examples:

- + +
-
-

Select a ColorTheme:

+
+

Select a ColorTheme:

{this.renderColorThemes()}
-
-

Select a localization language:

+
+

Select a localization language:

{this.renderLocales()} - {localize('test.id', 'aaaa')}
-
-

Add a new Panel:

+
+

Panel:

-
+

Notification:

-
+

MenuBar:

- - - - + +
-
+

Exploer:

From 395f6b1bbc5771a30a4ce3fc2e4f38b8e1124ec5 Mon Sep 17 00:00:00 2001 From: jiming Date: Fri, 25 Feb 2022 14:02:32 +0800 Subject: [PATCH 2/2] feat: add some samples --- stories/extensions/test/testPane.tsx | 115 ++++++++++++++++----------- 1 file changed, 69 insertions(+), 46 deletions(-) diff --git a/stories/extensions/test/testPane.tsx b/stories/extensions/test/testPane.tsx index 635f99030..dc760f77a 100644 --- a/stories/extensions/test/testPane.tsx +++ b/stories/extensions/test/testPane.tsx @@ -83,6 +83,10 @@ export default class TestPane extends React.Component { }); }; + const showHideActivityBar = function () { + molecule.layout.toggleActivityBarVisibility(); + }; + const addStatusBar = function () { const id = shortRandomId(); molecule.statusBar.add( @@ -114,6 +118,10 @@ export default class TestPane extends React.Component { } }; + const showHideStatusBar = () => { + molecule.layout.toggleStatusBarVisibility(); + }; + const addPanel = function () { const id = shortRandomId(); const panelId = `Panel-${id}`; @@ -200,37 +208,19 @@ export type GenericClassDecorator = (target: T) => void;`, molecule.editor.open(tabData); }; - molecule.editor.onUpdateTab((newTab) => { - // const { current } = molecule.editor.getState(); - // const tab = current?.tab!; - // molecule.editor.updateTab( - // { - // id: tab.id, - // data: { - // ...tab.data, - // modified: true, - // }, - // }, - // current?.id || -1 - // ); - // // TODO editorService add onSaveEditor() event. - // current?.editorInstance.addCommand( - // monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_S, - // () => { - // // ctrl + s - // molecule.editor.updateTab( - // { - // id: tab.id, - // data: { - // ...tab.data, - // modified: false, - // }, - // }, - // current?.id || -1 - // ); - // } - // ); - }); + const updateEntryPage = () => { + const style: React.CSSProperties = { + display: 'flex', + width: '100%', + height: '100%', + fontSize: 48, + alignItems: 'center', + justifyContent: 'center', + }; + const entry =
Welcome
; + molecule.editor.setEntry(entry); + }; + const addANotification = function () { const { showNotifications } = molecule.notification.getState(); if (!showNotifications) { @@ -306,6 +296,28 @@ export type GenericClassDecorator = (target: T) => void;`, ); }; + const toggleMenuBarMode = () => { + const currentMode = molecule.layout.getMenuBarMode(); + const newMode = + currentMode === 'horizontal' ? 'vertical' : 'horizontal'; + molecule.layout.setMenuBarMode(newMode); + }; + + const updateMenuBarLogo = () => { + const randomColor = `hsl(${Math.floor( + Math.random() * 360 + )}, 100%, 50%)`; + const logo = ( + MO + ); + molecule.layout.setMenuBarMode('horizontal'); + molecule.menuBar.setState({ logo }); + }; + + const showHideMenuBar = () => { + molecule.layout.toggleMenuBarVisibility(); + }; + const addSettingsItem = function () { molecule.settings.append({ project: { @@ -380,20 +392,15 @@ PARTITIONED BY (DE STRING) LIFECYCLE 1000; ); }; - const toggleMenuBarMode = () => { - const currentMode = molecule.layout.getMenuBarMode(); - const newMode = - currentMode === 'horizontal' ? 'vertical' : 'horizontal'; - molecule.layout.setMenuBarMode(newMode); - }; - return (

Simple examples:

- + @@ -406,6 +413,13 @@ PARTITIONED BY (DE STRING) LIFECYCLE 1000;

Select a localization language:

{this.renderLocales()}
+
+

ActivityBar:

+ + +

Panel:

@@ -430,7 +444,7 @@ PARTITIONED BY (DE STRING) LIFECYCLE 1000;

MenuBar:

+ +

Exploer:

@@ -448,15 +468,18 @@ PARTITIONED BY (DE STRING) LIFECYCLE 1000;

StatusBar:

- + + + +