feat: resolve #37

Author: mumiao

src/components/tabs/index.tsx

@@ -16,13 +16,13 @@ import { Tab, ITab, tabItemClassName } from './tab';
 import './style.scss';
 
 export type TabsType = 'line' | 'card';
-export interface ITabsProps {
+export interface ITabsProps<T>{
     closable?: boolean;
-    data: ITab[];
+    data: (ITab<T>)[];
     activeTab?: string;
     type?: TabsType;
     onCloseTab?: (key?: string) => void;
-    onMoveTab?: (tabs: ITab[]) => void;
+    onMoveTab?: (tabs: (ITab<T>)[]) => void;
     onSelectTab?: (key?: string) => void;
 }
 
@@ -32,7 +32,7 @@ export const tabsContent = getBEMElement(tabsClassName, 'content');
 export const tabsContentItem = getBEMElement(tabsContent, 'item');
 export const tabItemCloseClassName = getBEMElement(tabItemClassName, 'close');
 
-const Tabs = (props: ITabsProps) => {
+export function Tabs<T>(props: ITabsProps<T>) {
     const { activeTab, data, type = 'line', onMoveTab, ...resetProps } = props;
 
     const onChangeTab = useCallback(
@@ -59,24 +59,23 @@ const Tabs = (props: ITabsProps) => {
                 )}
             >
                 <div className={tabsHeader}>
-                    {data?.map((tab: ITab, index: number) => {
+                    {data?.map((tab: (ITab<T>), index: number) => {
                         return (
                             <Tab
                                 active={activeTab === tab.key}
                                 index={index}
                                 label={tab.label}
-                                modified={tab.modified}
+                                data={tab.data}
                                 key={tab.key}
                                 propsKey={tab.key}
-                                title={tab.tip}
                                 onMoveTab={onChangeTab}
                                 {...resetProps}
                             ></Tab>
                         );
                     })}
                 </div>
                 <div className={tabsContent}>
-                    {data?.map((tab: ITab) => {
+                    {data?.map((tab: ITab<T>) => {
                         return (
                             <div
                                 className={classNames(tabsContentItem, {
@@ -92,6 +91,4 @@ const Tabs = (props: ITabsProps) => {
             </div>
         </DndProvider>
     );
-};
-
-export default Tabs;
+};

src/components/tabs/tab.tsx

@@ -15,25 +15,28 @@ import {
     prefixClaName,
 } from 'mo/common/className';
 import TabDot from './tabDot';
-
-export interface TabData<T = any> {
-    modified?: boolean;
-    language?: string | undefined;
-    path?: string;
-    value?: string;
-}
-export interface ITab extends TabData {
+export interface ITab<T> {
+    active?: boolean;
+    closable?: boolean;
+    index?: number;
     key?: string;
+    propsKey?: string;
     name?: string;
     label?: React.ReactNode;
     tip?: string | React.ReactNode;
     renderPanel?: React.ReactNode;
+    data?: T
 }
 
+export interface ITabEvent {
+    onMoveTab?: (dragIndex: number, hoverIndex: number) => void;
+    onCloseTab?: (key?: string) => void;
+    onSelectTab?: (key?: string) => void;
+}
 export const tabClassName = prefixClaName('tab');
 export const tabItemClassName = getBEMElement(tabClassName, 'item');
 
-export const Tab = (props) => {
+export function Tab<T> (props: ITab<T> & ITabEvent) {
     const {
         closable,
         index,
@@ -67,7 +70,7 @@ export const Tab = (props) => {
             if (!ref.current) return;
             const component = ref.current;
             const dragIndex = monitor.getItem().index;
-            let hoverIndex = index;
+            let hoverIndex = index!;
             // Don't replace items with themselves
             if (dragIndex === hoverIndex) {
                 return;
@@ -89,7 +92,7 @@ export const Tab = (props) => {
             if (dragIndex > hoverIndex && hoverClientX > hoverMiddleX) {
                 return;
             }
-            onMoveTab(dragIndex, hoverIndex);
+            onMoveTab?.(dragIndex, hoverIndex);
             monitor.getItem().index = hoverIndex;
         },
     });
@@ -101,7 +104,7 @@ export const Tab = (props) => {
             className={classNames(tabItemClassName, {
                 [getBEMModifier(tabItemClassName, 'active')]: active,
             })}
-            onClick={(event: React.MouseEvent) => onSelectTab(propsKey)}
+            onClick={(event: React.MouseEvent) => onSelectTab?.(propsKey)}
             onMouseOver={handleMouseOver}
             onMouseOut={handleMouseOut}
         >
@@ -118,5 +121,3 @@ export const Tab = (props) => {
         </div>
     );
 };
-
-export default Tab;

src/extensions/search/searchPane.tsx

@@ -84,9 +84,12 @@ export default class SearchPane extends React.Component<
             const tabData = {
                 key: `${key}`,
                 name: `editor.js`,
-                modified: false,
-                value: `hello javascript ${key}`,
-                path: 'desktop/molecule/editor1',
+                data: {
+                    modified: false,
+                    value: `hello javascript ${key}`,
+                    path: 'desktop/molecule/editor1',
+                    language: 'javascript',
+                }
             };
             console.log('open editor:', tabData);
             editorService.open(tabData, 1);

src/workbench/editor/editor.tsx

@@ -4,12 +4,19 @@ 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 { Tabs } from 'mo/components/tabs';
 import { tabItemClassName } from 'mo/components/tabs/tab';
 import { Icon } from 'mo/components/icon';
 import Welcome from './welcome';
 import { IEditor, IEditorGroup } from 'mo/model';
 
+interface dataType {
+    modified?: boolean;
+    language?: string | undefined;
+    path?: string;
+    value?: string;
+}
+
 const defaultEditorClassName = prefixClaName('editor');
 const groupClassName = getBEMElement(defaultEditorClassName, 'group');
 
@@ -22,8 +29,6 @@ function renderEditorGroup(
     const editor = group.activeTab;
     const tabs = group.tabs?.map((item, index) => {
         return Object.assign({}, item, {
-            key: item.key,
-            tip: item.path,
             label: [
                 <Icon type="new-file" />,
                 <span className={getBEMElement(tabItemClassName, 'name')}>
@@ -33,8 +38,8 @@ function renderEditorGroup(
             renderPanel: (
                 <MonacoEditor
                     options={{
-                        value: item.value,
-                        language: item.language || 'sql',
+                        value: item?.data?.value,
+                        language: item?.data?.language || 'sql',
                         automaticLayout: true,
                     }}
                     editorInstanceRef={(editorInstance) => {
@@ -48,6 +53,7 @@ function renderEditorGroup(
     return (
         <div className={groupClassName} key={`group-${group.id}`}>
             <Tabs
+                <dataType>
                 closable={true}
                 type="card"
                 data={tabs}

stories/components/3-Tabs.stories.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useState } from 'react';
-import Tabs from 'mo/components/tabs';
+import { Tabs } from 'mo/components/tabs';
 import { storiesOf } from '@storybook/react';
 import { withKnobs } from '@storybook/addon-knobs';
 const stories = storiesOf('Tab', module);