feat: add first version of tabComponent

Author: mumiao

package.json

@@ -5,7 +5,7 @@
     "main": "dist/index.js",
     "scripts": {
         "test": "jest --coverage",
-        "dev": "tsc --skipLibCheck && start-storybook -s ./public -p 6006",
+        "dev": "start-storybook -s ./public -p 6006",
         "build-storybook": "build-storybook",
         "check-types": "tsc --skipLibCheck",
         "build": "tsc --project tsconfig.build.json",
@@ -27,11 +27,15 @@
         "@types/react": "^16.9.35",
         "@types/react-dom": "^16.9.9",
         "dt-utils": "^1.0.1",
+        "immutability-helper": "^3.1.1",
         "loadsh": "^0.0.4",
         "monaco-editor": "^0.21.2",
         "rc-collapse": "^2.0.1",
         "rc-tree": "^3.10.0",
         "react": "^16.13.1",
+        "react-dnd": "^9.3.4",
+        "react-dnd-html5-backend": "^9.3.4",
+        "rc-tabs": "11.7.0",
         "react-dom": "^16.13.1",
         "react-split-pane": "^0.1.92",
         "reflect-metadata": "^0.1.13",

src/components/tabs/Tab.tsx

@@ -0,0 +1,65 @@
+import * as React from 'react'
+import { useRef } from 'react';
+import { findDOMNode } from 'react-dom';
+import { DragSourceMonitor, DropTargetMonitor, useDrag, useDrop } from 'react-dnd';
+
+interface ITabProps {
+    active?: string;
+    content?: React.ReactNode;
+    index?: number;
+    id?: number | string;
+    name?: any;
+    moveTab: (dragIndex?: number, hoverIndex?: number | string) => void;
+}
+
+const WrapTabNode: React.FC<ITabProps> = (props) => {
+  const { id, index, moveTab, children } = props
+  const ref = useRef<HTMLDivElement>(null)
+
+  const [, drag] = useDrag({
+    collect: (monitor: DragSourceMonitor) => ({
+        isDragging: monitor.isDragging(),
+    }),
+    item: { type: 'DND_NODE', id, index }
+  });
+
+  const [, drop] = useDrop({
+    accept: 'DND_NODE',
+    hover (item: { type: string; index: number }, monitor: DropTargetMonitor) {
+      debugger
+      if (!ref.current) return
+      let hoverIndex
+      const component = ref.current
+      const dragIndex = monitor.getItem().index
+      hoverIndex = index
+      // Don't replace items with themselves
+      if (dragIndex === hoverIndex) {
+        return;
+      }
+      const hoverBoundingRect = (findDOMNode(component) as Element)?.getBoundingClientRect();
+      const hoverMiddleX = (hoverBoundingRect.right - hoverBoundingRect.left) / 2;
+      const clientOffset = monitor.getClientOffset();
+      const hoverClientX = (clientOffset as { x: number; y: number; }).x - hoverBoundingRect.left;
+      // 往下拖动
+      if (dragIndex < hoverIndex && hoverClientX < hoverMiddleX) {
+        return;
+      }
+      // 往上拖动
+      if (dragIndex > hoverIndex && hoverClientX > hoverMiddleX) {
+        return;
+      }
+      moveTab(dragIndex, hoverIndex);
+      monitor.getItem().index = hoverIndex;
+    }
+  })
+  drag(drop(ref))
+
+  return (
+    <div ref={ref} >
+      {children}
+    </div>
+  )
+}
+
+export default WrapTabNode
+

src/components/tabs/index.tsx

@@ -1,33 +1,75 @@
 import * as React from 'react';
+import { useCallback } from 'react'
+import update from 'immutability-helper';
+import { DndProvider } from 'react-dnd';
+import HTML5Backend from 'react-dnd-html5-backend';
 
+import Tabs, { TabPane } from 'rc-tabs';
+
+import WrapTabNode from './Tab';
 import { prefixClaName } from 'mo/common/className';
+import './style.scss'
 
-export interface ITab<T = any, K = any> {
+export interface ITab {
+    active?: string;
     id?: number;
     name?: string;
     mode?: string;
-    data?: T;
-    options?: K;
+    data?: [];
     value?: string;
-    renderPane?: () => React.ReactElement;
+    renderPane?: string | React.ReactNode;
 }
-
 interface ITabsProps {
     data: ITab[];
-    onClose?: (item: ITab, index: number) => void;
+    closeTab?: (index: number) => void;
+    changeTab?: (tabs: ITab[]) => void;
+    selectTab: (index: number) => void;
+    children: React.ReactNode | JSX.Element
 }
 
-const Tabs: React.FunctionComponent<ITabsProps> = (props: ITabsProps) => {
-    const { data, onClose } = props;
-    const tabs = data.map((tab: ITab, index: number) => {
-        return (
-            <a key={tab.id}>
-                {tab.name}{' '}
-                <button onClick={(e) => onClose!(tab, index)}>Close</button>
-            </a>
-        );
-    });
-    return <div className={prefixClaName('tabs')}>{tabs}</div>;
+const DraggleTabs: React.FC<ITabsProps> = (props: ITabsProps) => {
+
+    const { data, changeTab, selectTab } = props;
+
+    const moveTab = useCallback((dragIndex, hoverIndex) => {
+      const dragTab = data[dragIndex]
+      changeTab?.(update(data, {
+        $splice: [[dragIndex, 1], [ hoverIndex, 0, dragTab]],
+      }))
+    }, [data])
+
+    const onTabClick = key => {
+      console.log(`onTabClick ${key}`)
+      selectTab(key)
+    }
+  
+    const renderTabBar = (props, DefaultTabBar) => {
+      return ( <DefaultTabBar {...props}>
+          {node => {
+            return (<WrapTabNode key={node.key} index={node.key} moveTab={moveTab}>{node}
+            </WrapTabNode>)
+          }}
+        </DefaultTabBar>
+      )
+    }
+
+    return (
+        <div className={prefixClaName('tabs-container')}>
+          <DndProvider backend={HTML5Backend}>
+            <Tabs   
+              renderTabBar={renderTabBar}
+              onChange={onTabClick}
+              editable={{ showAdd: false, onEdit: () => { console.log(1)} }}
+            >
+              {data?.map(({ active, id, name }: ITab, index) => {
+                return (
+                  <TabPane tab={`${name}`} key={index}/>
+                )
+              })}
+            </Tabs>
+          </DndProvider>
+        </div>
+    );
 };
 
-export default Tabs;
+export default DraggleTabs

src/components/tabs/style.scss

@@ -1,4 +1,77 @@
-.scroll {
-    pointer-events: none;
-    width: 10px;
+.mo-tabs-container {
+    display: flex;
+    overflow: hidden;
+    font-size: 14px;
+    box-sizing: border-box;
+    .rc-tabs-nav {
+        display: flex;
+        align-items: center;
+        .rc-tabs-nav-wrap {
+            position: relative;
+            display: inline-block;
+            display: -webkit-box;
+            display: -ms-flexbox;
+            display: flex;
+            -webkit-box-flex: 1;
+            -ms-flex: auto;
+            flex: auto;
+            -ms-flex-item-align: stretch;
+            align-self: stretch;
+            overflow: hidden;
+            white-space: nowrap;
+        }
+        .rc-tabs-nav-operations {
+            display: -webkit-box;
+            display: -ms-flexbox;
+            display: flex;
+            -ms-flex-item-align: stretch;
+            align-self: stretch;
+        }
+    }
+}
+.rc-tabs-nav-list {
+    height: 35px;
+    background-color: #001f27;
+    border-color: #002b36;
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: flex-start;
+    align-items: center;
+    overflow: hidden;
+}
+
+.rc-tabs-tab {
+    position: relative;
+    display: -webkit-inline-box;
+    display: -ms-inline-flexbox;
+    display: inline-flex;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    margin: 0 32px 0 0;
+    padding: 12px 0;
+    font-size: 14px;
+    background: transparent;
+    border: 0;
+    outline: none;
+    cursor: pointer;
+    &:hover {
+        .rc-tabs-tab-remove {
+            visibility: visible;
+        }
+    }
+}
+.rc-tabs-tab-btn {
+    outline: none;
+}
+.rc-tabs-tab-remove {
+    margin-right: -4px;
+    margin-left: 8px;
+    color: #999999;
+    font-size: 16px;
+    background: transparent;
+    border: none;
+    outline: none;
+    cursor: pointer;
+    visibility: hidden;
 }

src/extensions/explore/explore.tsx

@@ -21,7 +21,7 @@ export const Explorer: React.FunctionComponent<IExplorerProps> = (
         const id = Math.random() * 10 + 1;
         const tabData = {
             id: id,
-            name: 'test-tab1',
+            name: `test-tab${id.toFixed(2)}`,
             value: 'just test tab data',
         };
         console.log('open editor:', tabData);

src/extensions/explore/index.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { activityBarService, IActivityBarItem, sidebarService } from 'mo';
+import { activityBarService, IActivityBarItem, sidebarService, editorService } from 'mo';
 
 import { Explorer } from './explore';
 import { ExtensionService } from 'mo/services/extensionService';
@@ -19,7 +19,12 @@ function init(extensionCtx: ExtensionService) {
         selected: exploreActiveItem.id,
         data: [...state.data, exploreActiveItem],
     });
-
+    editorService.changeTab((data ) => {
+        console.log(data)
+    })
+    editorService.selectTab(tab =>{
+        console.log(`selected tabs${tab}`)
+    })
     const explorePane = {
         id: 'explore',
         title: 'EXPLORER',

src/model/workbench/editor.ts

@@ -1,14 +1,24 @@
 /* eslint-disable no-invalid-this */
+import 'reflect-metadata';
+import { EventBus } from 'mo/common/event';
 import { observable } from 'mo/common/observable';
 import { ITab } from 'mo/components/tabs';
 import { container, inject, injectable } from 'tsyringe';
 
+export enum EditorEvent {
+    CloseTab = 'editor.close',
+    ChangeTab = 'editor.changeTab',
+    OpenTab = 'editor.openTab',
+    SelectTab = 'editor.selectTab'
+}
 export interface IEditor {
     current: IEditorGroup | undefined;
     groups: IEditorGroup[];
     closeAll?: () => void;
     onClose?: () => void;
     render?: () => React.ReactNode;
+    changeTab: (tabs: ITab[], group?: number) => void;
+    selectTab: (tab: ITab) => void;
 }
 
 export interface IEditorGroup<E = any> {
@@ -64,6 +74,16 @@ export class EditorModel implements IEditor {
     }
 
     public render!: () => React.ReactNode;
+
+    public readonly selectTab = (tab: ITab) => {
+        EventBus.emit(EditorEvent.ChangeTab, tab);
+    }
+    public readonly changeTab = (
+        updateTabs: ITab[],
+        groupId?: number
+    ) => {
+        EventBus.emit(EditorEvent.ChangeTab, updateTabs, groupId);
+    }
 }
 
 container.register('CurrentEditorGroup', { useValue: '' });