feat: resolve emitEvent params missing

DTStack · Dec 18, 2020 · fa829a7 · fa829a7
1 parent 9c38fee
commit fa829a7
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 86 deletions.
diff --git a/src/common/event/eventEmitter.ts b/src/common/event/eventEmitter.ts
@@ -6,6 +6,7 @@ export class EventEmitter {
         if (events && events.length > 0) {
             // The log for development
             events.forEach((callEvent) => {
+                console.log(...args)
                 callEvent(...args);
             });
         }

diff --git a/src/components/tabs/Tab.tsx b/src/components/tabs/Tab.tsx
@@ -67,11 +67,11 @@ export const Tab = (props) => {
             const hoverClientX =
                 (clientOffset as { x: number; y: number }).x -
                 hoverBoundingRect.left;
-            // 往下拖动
+            // drag down
             if (dragIndex < hoverIndex && hoverClientX < hoverMiddleX) {
                 return;
             }
-            // 往上拖动
+            // drag up
             if (dragIndex > hoverIndex && hoverClientX > hoverMiddleX) {
                 return;
             }
@@ -87,7 +87,7 @@ export const Tab = (props) => {
             className={classNames(tabItemClassName, {
                 [getBEMModifier(tabItemClassName, 'active')]: active,
             })}
-            onClick={(event: React.MouseEvent) => onTabChange(event, propsKey)}
+            onClick={(event: React.MouseEvent) => onTabChange(propsKey)}
             onMouseOver={handleMouseOver}
             onMouseOut={handleMouseOut}
         >

diff --git a/src/components/tabs/index.tsx b/src/components/tabs/index.tsx
@@ -11,7 +11,7 @@ import {
     classNames,
 } from 'mo/common/className';
 
-import { Tab, tabItemClassName } from './Tab';
+import { Tab, tabItemClassName } from './tab';
 
 import './style.scss';
 export interface ITab {
@@ -50,7 +50,6 @@ const Tabs = (props: ITabsProps) => {
         onCloseTab,
         onSelectTab,
     } = props;
-    debugger;
     const onMoveTab = useCallback(
         (dragIndex, hoverIndex) => {
             const dragTab = data[dragIndex];
@@ -66,9 +65,6 @@ const Tabs = (props: ITabsProps) => {
         [data]
     );
 
-    const onTabClick = (e: React.MouseEvent, key?: string) => {
-        onSelectTab?.(key);
-    };
     return (
         <DndProvider backend={HTML5Backend}>
             <div
@@ -82,7 +78,7 @@ const Tabs = (props: ITabsProps) => {
                         return (
                             <Tab
                                 onMoveTab={onMoveTab}
-                                onTabChange={onTabClick}
+                                onTabChange={onSelectTab}
                                 onTabClose={onCloseTab}
                                 index={index}
                                 propsKey={tab.key}

diff --git a/src/components/tabs/style.scss b/src/components/tabs/style.scss
@@ -38,21 +38,15 @@
 
 #{$tab} {
     &__item {
-        align-items: center;
-
         align-items: center;
         box-sizing: border-box;
         cursor: pointer;
-        cursor: pointer;
         display: flex;
-        display: inline-flex;
         font-size: 13px;
         height: 100%;
-        height: 100%;
         max-width: 300px;
         min-width: 40px;
         padding: 0 20px;
-        padding: 0 14px;
         position: relative;
         user-select: none;
 
@@ -64,64 +58,38 @@
         &__op {
             margin-left: 10px;
             width: 20px;
-        }
 
-        &__dot {
-            display: block;
-            height: 18px;
-            position: relative;
-            width: 18px;
-
-            &::after {
-                border-radius: 50%;
-                content: '';
+            &__dot {
                 display: block;
-                height: 9px;
-                left: 5px;
+                height: 18px;
                 position: relative;
-                top: 5px;
-                width: 9px;
+                width: 18px;
+
+                &::after {
+                    border-radius: 50%;
+                    content: '';
+                    display: block;
+                    height: 9px;
+                    left: 5px;
+                    position: relative;
+                    top: 5px;
+                    width: 9px;
+                }
+            }
+
+            &__close {
+                cursor: pointer;
+                display: block;
+                font-weight: 500;
+                height: 18px;
+                width: 18px;
+            }
+
+            &__placeholder {
+                display: block;
+                height: 18px;
+                width: 18px;
             }
         }
-
-        &__close {
-            cursor: pointer;
-            display: block;
-            font-weight: 500;
-            height: 18px;
-            width: 18px;
-        }
-
-        &__placeholder {
-            display: block;
-            height: 18px;
-            width: 18px;
-        }
-
-        // &--active::after {
-        //     bottom: 0;
-        //     content: '';
-        //     height: 1px;
-        //     left: 0;
-        //     position: absolute;
-        //     width: 100%;
-        // }
-
-        // &__wrapper {
-        //     display: flex;
-        //     justify-content: flex-start;
-        // }
-
-        // &__close {
-        //     font-size: 13px;
-        //     font-weight: 700;
-        //     height: 14px;
-        //     margin-left: 8px;
-        //     visibility: visible;
-        //     width: 14px;
-        // }
-
-        // &__button {
-        // }
     }
 }
diff --git a/src/services/workbench/editorService.ts b/src/services/workbench/editorService.ts
@@ -1,8 +1,9 @@
-import { Component } from 'mo/react';
+import { singleton, container } from 'tsyringe';
+import { isEmpty } from 'loadsh';
 
-import { ITab } from 'mo/components/tabs';
+import { Component } from 'mo/react';
 import { emit } from 'mo/common/event';
-import { singleton, container } from 'tsyringe';
+import { ITab } from 'mo/components/tabs';
 import {
     EditorEvent,
     EditorModel,
@@ -35,12 +36,10 @@ export class EditorService
 
     @emit(EditorEvent.OnSelectTab)
     onSelectTab(callback: (tabKey: string) => void) {
-        this.subscribe(EditorEvent.OnSelectTab, (args) => {
+        this.subscribe(EditorEvent.OnSelectTab, (targetKey: string, groupId?: number) => {
             let group;
             let { groups } = this.state;
-            const groupId = args?.[1];
-            const targetKey = args?.[0];
-            if (!groupId) return;
+            if (groupId === undefined) return;
             group = groups?.find((group: IEditorGroup) => group.id === groupId);
             group.activeTab = { ...group.activeTab, key: targetKey };
             callback?.(targetKey);
@@ -66,26 +65,23 @@ export class EditorService
 
     @emit(EditorEvent.OnMoveTab)
     public onMoveTab(callback: (data) => void) {
-        this.subscribe(EditorEvent.OnMoveTab, (args) => {
+        this.subscribe(EditorEvent.OnMoveTab, (tabs: ITab[], groupId?: number) => {
             let { groups } = this.state;
             let group;
-            if (!args?.[1]) return;
-            const groupId = args?.[1];
+            if (isEmpty(groupId)) return;
             group = groups?.find((group: IEditorGroup) => group.id === groupId);
-            group.tabs = args?.[0];
-            callback?.(args?.[0]);
+            group.tabs = tabs;
+            callback?.(tabs);
         });
     }
     public closeAll() {}
 
     @emit(EditorEvent.OnCloseTab)
     public onCloseTab(callback: (data) => void) {
-        this.subscribe(EditorEvent.OnCloseTab, (args) => {
+        this.subscribe(EditorEvent.OnCloseTab, (targetKey: string, groupId?: number) => {
             let group, lastIndex;
             let { groups } = this.state;
-            const groupId = args?.[1];
-            const targetKey = args?.[0];
-            if (!groupId) return;
+            if (groupId === undefined) return;
             group = groups?.find((group: IEditorGroup) => group.id === groupId);
             let newActiveKey = group?.activeTab?.key;
             const groupTabs = group.tabs;

diff --git a/src/workbench/editor/editor.tsx b/src/workbench/editor/editor.tsx
@@ -5,7 +5,7 @@ import SplitPane from 'react-split-pane';
 import { getBEMElement, prefixClaName } from 'mo/common/className';
 import MonacoEditor from 'mo/components/monaco-editor';
 import Tabs from 'mo/components/tabs';
-import { tabItemClassName } from 'mo/components/tabs/Tab';
+import { tabItemClassName } from 'mo/components/tabs/tab';
 import { Icon } from 'mo/components/icon';
 import Welcome from './welcome';
 import { IEditor, IEditorGroup } from 'mo/model';