feat: test editor logic

Author: mumiao

src/components/tabs/index.tsx

@@ -12,6 +12,7 @@ import TabButton from './tabButton';
 
 import './style.scss';
 export interface ITab {
+    path?: string;
     key?: string;
     name?: string;
     modified?: boolean;
@@ -25,8 +26,7 @@ export interface ITabsProps {
     closable?: boolean;
     data: ITab[];
     activeTab?: string;
-    // TODO 支持Card editable-card 默认 inline
-    type?: 'line' | 'card' |'editable-card';
+    type?: 'line' | 'editable-card';
     onCloseTab?: (key?: string) => void ;
     onMoveTab?: (tabs: ITab[]) => void;
     onSelectTab?: (event: React.MouseEvent, key?: string) => void;
@@ -40,7 +40,6 @@ export const tabItemCloseClassName = getBEMElement(tabItemClassName, 'close')
 
 const Tabs = (props: ITabsProps) => {
     const { closable, data, activeTab, type = 'line', onCloseTab, onSelectTab } = props;
-    // const [activeTab, setActiveTab] = useState<string | number | void>(newActiveTab)
     const onMoveTab = useCallback(
         (dragIndex, hoverIndex) => {
             const dragTab = data[dragIndex];

src/extensions/search/searchPane.tsx

@@ -80,20 +80,19 @@ export default class SearchPane extends React.Component<
         };
 
         const newEditor = function () {
-            const id = Math.random() * 10 + 1;
+            const key = Math.random() * 10 + 1;
             const tabData = {
-                activeTab: `${0}`,
-                id: id,
+                key: `${key}`,
                 name: `editor.js`,
                 modified: true,
-                value: 'hello javascript',
+                value: `hello javascript${key}`,
+                path: 'desktop/molecule/editor1'
             };
             console.log('open editor:', tabData);
             editorService.open(tabData, 1);
         };
 
         const openCommand = function () {
-            // MonacoEditor.editor.getModel().
         };
         return (
             <div className={prefixClaName('search-pane', 'sidebar')}>

src/style/theme.scss

@@ -169,11 +169,10 @@
         color: #fff;
     }
 
-    &--line {
+    &--editable-card {
         #{$tab}__item {
             &--active {
-                border-bottom: 1px solid #e7e7e7;
-                color: #e7e7e7;
+                
             }
         }
     }
@@ -186,7 +185,8 @@
 
         &--active {
             background: #1e1e1e;
-            color: #fff;
+            border-bottom: 1px solid #e7e7e7;
+            color: #e7e7e7;
         }
 
         &--close {

src/workbench/editor/editor.tsx

@@ -2,64 +2,46 @@ import 'mo/workbench/editor/style.scss';
 import * as React from 'react';
 import SplitPane from 'react-split-pane';
 
-import MonacoEditor from 'mo/components/monaco-editor';
 import { getBEMElement, prefixClaName } from 'mo/common/className';
-
+import MonacoEditor from 'mo/components/monaco-editor';
 import Tabs from 'mo/components/tabs';
+
 import Welcome from './welcome';
 import { IEditor, IEditorGroup } from 'mo/model';
 
 const defaultEditorClassName = prefixClaName('editor');
 const groupClassName = getBEMElement(defaultEditorClassName, 'group');
-const groupContainerClassName = getBEMElement(
-    defaultEditorClassName,
-    'group-container'
-);
-const groupHeaderClassName = getBEMElement(
-    defaultEditorClassName,
-    'group-header'
-);
-const groupTabsClassName = getBEMElement(defaultEditorClassName, 'group-tabs');
-const groupBreadcrumbsClassName = getBEMElement(
-    defaultEditorClassName,
-    'group-breadcrumbs'
-);
 
 function renderEditorGroup(group: IEditorGroup, onMoveTab, onSelectTab) {
     const editor = group.activeTab;
-    // Todo 测试editor tabs
+
+    const tabs = group.tabs.map((item, index) => {
+        return Object.assign({}, item, {
+          key: item.key,
+          tip: item.path,
+          renderPanel:  <MonacoEditor
+          options={{
+              value: item.value,
+              language: item.language || 'sql',
+              automaticLayout: true,
+          }}
+          editorInstanceRef={(editorInstance) => {
+              // This assignment will trigger moleculeCtx update, and subNodes update
+              group.editorInstance = editorInstance;
+          }}
+      />
+        })
+      })
     return (
         <div className={groupClassName} key={`group-${group.id}`}>
-            <div className={groupHeaderClassName}>
-                <div className={groupTabsClassName}>
-                    <Tabs
-                        data={group.tabs}
-                        onMoveTab={onMoveTab}
-                        onTabChange={onSelectTab}
-                    />
-                </div>
-                <div className={groupBreadcrumbsClassName}></div>
-            </div>
-            <div className={groupContainerClassName}>
-                {
-                    // Default we use monaco editor, but also you can customize by renderPane() function
-                    editor.renderPanel ? (
-                        editor.renderPanel()
-                    ) : (
-                        <MonacoEditor
-                            options={{
-                                value: editor.value,
-                                language: editor.language || 'sql',
-                                automaticLayout: true,
-                            }}
-                            editorInstanceRef={(editorInstance) => {
-                                // This assignment will trigger moleculeCtx update, and subNodes update
-                                group.editorInstance = editorInstance;
-                            }}
-                        />
-                    )
-                }
-            </div>
+            <Tabs
+                type="editable-card"
+                data={tabs}
+                onMoveTab={onMoveTab}
+                onSelectTab={onSelectTab}
+                activeTab={editor.key}
+                onCloseTab={(tabKey) => console.log(tabKey)}
+            />
         </div>
     );
 }