feat: optmize type interface

DTStack · Dec 18, 2020 · f299d4e · f299d4e
1 parent eb68f89
commit f299d4e
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 8 deletions.
diff --git a/src/components/tabs/index.tsx b/src/components/tabs/index.tsx
@@ -25,11 +25,13 @@ export interface ITab {
     label?: React.ReactNode;
     renderPanel?: React.ReactNode;
 }
+
+export type TabsType = 'line' | 'card';
 export interface ITabsProps {
     closable?: boolean;
     data: ITab[];
     activeTab?: string;
-    type?: 'line' | 'editable-card';
+    type?: TabsType;
     onCloseTab?: (key?: string) => void;
     onMoveTab?: (tabs: ITab[]) => void;
     onSelectTab?: (key?: string) => void;
@@ -45,7 +47,7 @@ const Tabs = (props: ITabsProps) => {
     const {
         activeTab,
         data,
-        type = 'line', //TODO type logic
+        type = 'line',
         onMoveTab,
         ...resetProps
     } = props;
@@ -70,7 +72,7 @@ const Tabs = (props: ITabsProps) => {
             <div
                 className={classNames(
                     tabsClassName,
-                    getBEMModifier(tabsClassName, `${type}`)
+                    getBEMModifier(tabsClassName, type as string)
                 )}
             >
                 <div className={tabsHeader}>

diff --git a/src/services/workbench/editorService.ts b/src/services/workbench/editorService.ts
@@ -1,5 +1,4 @@
 import { singleton, container } from 'tsyringe';
-import { isEmpty } from 'loadsh';
 
 import { Component } from 'mo/react';
 import { emit } from 'mo/common/event';
@@ -73,9 +72,10 @@ export class EditorService
         this.subscribe(
             EditorEvent.OnMoveTab,
             (tabs: ITab[], groupId?: number) => {
+                debugger
                 let { groups } = this.state;
                 let group;
-                if (isEmpty(groupId)) return;
+                if (groupId === undefined) return;
                 group = groups?.find(
                     (group: IEditorGroup) => group.id === groupId
                 );

diff --git a/src/style/theme.scss b/src/style/theme.scss
@@ -169,7 +169,7 @@
         color: #fff;
     }
 
-    &--editable-card {
+    &--card {
         #{$tabs}__header {
             border-bottom: 1px solid transparent;
         }
@@ -186,6 +186,14 @@
         background: #232323;
         color: #888;
 
+        &__op {
+            &__dot {
+                &::after {
+                    background: #fff;
+                }
+            }
+        }
+
         &--active {
             background: #1e1e1e;
             border-bottom: 1px solid #e7e7e7;

diff --git a/src/workbench/editor/editor.tsx b/src/workbench/editor/editor.tsx
@@ -49,7 +49,7 @@ function renderEditorGroup(
         <div className={groupClassName} key={`group-${group.id}`}>
             <Tabs
                 closable={true}
-                type="editable-card"
+                type="card"
                 data={tabs}
                 onMoveTab={onMoveTab}
                 onSelectTab={onSelectTab}

diff --git a/stories/components/3-Tabs.stories.tsx b/stories/components/3-Tabs.stories.tsx
@@ -96,10 +96,10 @@ stories.add('Basic Usage', () => {
                 <h3>使用示例2 - 带关闭状态的tab</h3>
                 <div style={{ height: 300 }}>
                     <Tabs
+                        type="card"
                         data={tabs1}
                         activeTab={activeTab1}
                         onMoveTab={onMoveTab1}
-                        closable={true}
                         onSelectTab={onSelectTab1}
                         onCloseTab={onCloseTab1}
                     />