feat: extract overside logic

Author: mumiao

src/components/tabs/index.tsx

@@ -11,7 +11,7 @@ import {
     classNames,
 } from 'mo/common/className';
 
-import { Tab, tabItemClassName } from './tab';
+import { Tab, tabItemClassName } from './tabItem';
 
 import './style.scss';
 export interface ITab {
@@ -43,17 +43,17 @@ export const tabItemCloseClassName = getBEMElement(tabItemClassName, 'close');
 
 const Tabs = (props: ITabsProps) => {
     const {
-        closable,
-        data,
         activeTab,
-        type = 'line',
-        onCloseTab,
-        onSelectTab,
+        data,
+        type = 'line', //TODO type logic
+        onMoveTab,
+        ...resetProps
     } = props;
-    const onMoveTab = useCallback(
+
+    const onChangeTab = useCallback(
         (dragIndex, hoverIndex) => {
             const dragTab = data[dragIndex];
-            props.onMoveTab?.(
+            onMoveTab?.(
                 update(data, {
                     $splice: [
                         [dragIndex, 1],
@@ -77,16 +77,15 @@ const Tabs = (props: ITabsProps) => {
                     {data?.map((tab: ITab, index: number) => {
                         return (
                             <Tab
-                                onMoveTab={onMoveTab}
-                                onTabChange={onSelectTab}
-                                onTabClose={onCloseTab}
+                                active={activeTab === tab.key}
                                 index={index}
-                                propsKey={tab.key}
+                                label={tab.label}
+                                modified={tab.modified}
                                 key={tab.key}
-                                active={activeTab === tab.key}
+                                propsKey={tab.key}
                                 title={tab.tip}
-                                closable={closable}
-                                {...tab}
+                                onMoveTab={onChangeTab}
+                                {...resetProps}
                             ></Tab>
                         );
                     })}

src/components/tabs/Tab.tsx src/components/tabs/tabItem.tsx

@@ -23,13 +23,13 @@ export const Tab = (props) => {
     const {
         closable,
         index,
-        modified,
         propsKey,
         active,
         label,
-        onTabClose,
+        onCloseTab,
         onMoveTab,
-        onTabChange,
+        onSelectTab,
+        ...resetProps
     } = props;
     const ref = useRef<HTMLDivElement>(null);
 
@@ -87,18 +87,18 @@ export const Tab = (props) => {
             className={classNames(tabItemClassName, {
                 [getBEMModifier(tabItemClassName, 'active')]: active,
             })}
-            onClick={(event: React.MouseEvent) => onTabChange(propsKey)}
+            onClick={(event: React.MouseEvent) => onSelectTab(propsKey)}
             onMouseOver={handleMouseOver}
             onMouseOut={handleMouseOut}
         >
             {label}
             {closable && (
                 <TabDot
                     classNames={getBEMElement(tabItemClassName, 'op')}
-                    modified={modified}
                     active={active}
                     buttonHover={hover}
-                    onClick={(e) => onTabClose?.(propsKey)}
+                    onClick={(e) => onCloseTab?.(propsKey)}
+                    {...resetProps}
                 />
             )}
         </div>

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/tabItem';
 import { Icon } from 'mo/components/icon';
 import Welcome from './welcome';
 import { IEditor, IEditorGroup } from 'mo/model';

stories/components/3-Tabs.stories.tsx

@@ -54,7 +54,9 @@ stories.add('Basic Usage', () => {
     const onSelectTab1 = (tabKey) => {
         setActiveTab1(tabKey);
     };
-    const onMoveTab = (data) => setTabs(data);
+    const onMoveTab = (data) => {
+        setTabs(data);
+    }
 
     const onMoveTab1 = (data) => setTabs1(data);
 
@@ -71,7 +73,7 @@ stories.add('Basic Usage', () => {
             if (lastIndex >= 0) {
                 newActiveKey = newPanes[lastIndex].key;
             } else {
-                newActiveKey = newPanes[0].key;
+                newActiveKey = newPanes[0]?.key;
             }
         }
         setTabs1(newPanes);