feat: refactor closeTab logic

Author: mumiao

src/components/tabs/index.tsx

@@ -25,21 +25,22 @@ export interface ITabsProps {
     closable?: boolean;
     data: ITab[];
     activeTab?: string;
-    type?: 'line' | 'editable-card';
-    onCloseTab?: (item?: ITab) => void ;
+    // TODO 支持Card editable-card 默认 inline
+    type?: 'line' | 'card' |'editable-card';
+    onCloseTab?: (key?: string) => void ;
     onMoveTab?: (tabs: ITab[]) => void;
     onSelectTab?: (event: React.MouseEvent, key?: string) => void;
-    onTabChange: (index: string) => void;
 }
 
 export const tabsClassName = prefixClaName('tabs')
 export const tabsHeader = getBEMElement(tabsClassName, 'header')
 export const tabsContent = getBEMElement(tabsClassName, 'content')
 export const tabsContentItem = getBEMElement(tabsContent, 'item')
+export const tabItemCloseClassName = getBEMElement(tabItemClassName, 'close')
 
 const Tabs = (props: ITabsProps) => {
-    const { closable, data, activeTab: newActiveTab, type = 'line', onCloseTab, onSelectTab } = props;
-    const [activeTab, setActiveTab] = useState<string | number | void>(newActiveTab)
+    const { closable, data, activeTab, type = 'line', onCloseTab, onSelectTab } = props;
+    // const [activeTab, setActiveTab] = useState<string | number | void>(newActiveTab)
     const onMoveTab = useCallback(
         (dragIndex, hoverIndex) => {
             const dragTab = data[dragIndex];
@@ -56,14 +57,11 @@ const Tabs = (props: ITabsProps) => {
     );
 
     const onTabClick = (event: React.MouseEvent, key?: string) => {
-        setActiveTab(key)
         onSelectTab?.(event, key);
     };
 
     const onTabClose = (item: ITab) => {
-        let activekey = (data.filter(tab => item.key === tab.key))?.[0]?.key
-        setActiveTab(activekey)
-        onCloseTab?.(item)
+        onCloseTab?.(item.key)
     };
 
     const renderTabBar = (tab) => (
@@ -72,8 +70,7 @@ const Tabs = (props: ITabsProps) => {
         name={tab.name}
         modified={tab.modified}
         active={activeTab === tab.key}
-        onClose={() => onCloseTab?.(tab)}
-        className={'tab-button'}
+        onClose={() => onCloseTab?.(tab.key)}
     />)
     return (
         <DndProvider backend={HTML5Backend}>
@@ -92,7 +89,7 @@ const Tabs = (props: ITabsProps) => {
                             >
                                 {type === 'editable-card' ? renderTabBar?.(tab) : tab.label}
                                 {closable && (
-                                    <div className={getBEMModifier(tabItemClassName, 'close')} onClick={(e) => {
+                                    <div className={classNames(tabItemCloseClassName, {[getBEMModifier(tabItemCloseClassName, 'active')]: activeTab === tab.key })} onClick={(e) => {
                                         e.stopPropagation()
                                         onTabClose(tab)
                                     }}>

src/components/tabs/style.scss

@@ -53,20 +53,13 @@
             justify-content: flex-start;
         }
 
-        &--close {
+        &__close {
             font-size: 13px;
             font-weight: 700;
             height: 14px;
             margin-left: 8px;
+            visibility: visible;
             width: 14px;
-
-            &:hover {
-                visibility: hidden;
-            }
-
-            &:active {
-                transform: scale(1.1);
-            }
         }
 
         &__button {
@@ -134,10 +127,3 @@
         }
     }
 }
-
-
-.mo-ta {
-    margin-bottom: auto;
-    overflow: hidden;
-    overflow-y: auto;
-}

src/workbench/editor/editor.tsx

@@ -27,6 +27,7 @@ const groupBreadcrumbsClassName = getBEMElement(
 
 function renderEditorGroup(group: IEditorGroup, onMoveTab, onSelectTab) {
     const editor = group.activeTab;
+    // Todo 测试editor tabs
     return (
         <div className={groupClassName} key={`group-${group.id}`}>
             <div className={groupHeaderClassName}>

stories/components/3-Tabs.stories.tsx

@@ -19,7 +19,7 @@ stories.add('Basic Usage', () => {
             renderPanel: 'this is a workSpace'
         },
     ];
-    const tabs = [
+    const tabArr = [
         {
             key: '1',
             label: 'Tab1',
@@ -30,17 +30,53 @@ stories.add('Basic Usage', () => {
             label: 'Tab2',
             renderPanel: 'this is a tab2'
         },
+        {
+            key: '3',
+            label: 'Tab3',
+            renderPanel: 'this is a tab3'
+        },
+        {
+            key: '4',
+            label: 'Tab4',
+            renderPanel: 'this is a tab4'
+        }
     ];
 
-    const [tabs1, setTabs1] = useState(userSetting);
-    const [tabs2, setTabs2] = useState(tabs)
+    const [tabs, setTabs] = useState(userSetting);
+    const [tabs1, setTabs1] = useState(tabArr)
+    const [activeTab, setActiveTab] = useState('1')
+    const [activeTab1, setActiveTab1] = useState('2')
 
     const onSelectTab = (e, tabKey) => {
-        console.log(tabKey)
+        setActiveTab(tabKey)
     }
-    const onMoveTab = data => setTabs1(data)
+
+    const onSelectTab1 = (e, tabKey) => {
+        setActiveTab1(tabKey)
+    }
+    const onMoveTab = data => setTabs(data)
 
-    const onMoveTab1 = data => setTabs2(data)
+    const onMoveTab1 = data => setTabs1(data)
+
+    const onCloseTab1 = targetKey => {
+        let newActiveKey = activeTab;
+        let lastIndex;
+        tabs1.forEach((pane, i) => {
+          if (pane.key === targetKey) {
+            lastIndex = i - 1;
+          }
+        });
+        const newPanes = tabs1.filter(pane => pane.key !== targetKey);
+        if (newPanes.length && newActiveKey === targetKey) {
+          if (lastIndex >= 0) {
+            newActiveKey = newPanes[lastIndex].key;
+          } else {
+            newActiveKey = newPanes[0].key;
+          }
+        }
+        setTabs1(newPanes)
+        setActiveTab1(newActiveKey)
+    }
     return (
         <div>
             <h2>简述</h2>
@@ -49,22 +85,21 @@ stories.add('Basic Usage', () => {
                 <h3>使用示例 1 - 基本使用</h3>
                 <div style={{ height: 300 }}>
                     <Tabs
-                        data={tabs1}
-                        activeTab={'1'}
+                        data={tabs}
+                        activeTab={activeTab}
                         onMoveTab={onMoveTab}
                         onSelectTab={onSelectTab}
-                        onTabChange={(data) => console.log(data)}
                     />
                 </div>
                 <h3>使用示例2 - 带关闭状态的tab</h3>
-                <div style={{ height: 400 }}>
+                <div style={{ height: 300 }}>
                     <Tabs
-                        data={tabs2}
-                        activeTab={'2'}
+                        data={tabs1}
+                        activeTab={activeTab1}
                         onMoveTab={onMoveTab1}
-                        onSelectTab={onSelectTab}
-                        onTabChange={(data) => console.log(data)}
+                        onSelectTab={onSelectTab1}
                         closable={true}
+                        onCloseTab={onCloseTab1}
                     />
                 </div>
             </div>