fix: panels support to close (#257)

* fix: panels support to close

* feat: panel close event support subscribe

Author: mortalYoung

src/components/tabs/index.tsx

@@ -77,6 +77,7 @@ export function Tabs<T>(props: ITabsProps<T>) {
                                 index={index}
                                 name={tab.name}
                                 data={tab.data}
+                                closable={tab.closable}
                                 onMoveTab={onChangeTab}
                                 {...resetProps}
                             />

src/components/tabs/style.scss

@@ -85,6 +85,10 @@
                 height: 18px;
                 width: 18px;
             }
+
+            &__button {
+                font-size: 0;
+            }
         }
     }
 }

src/controller/panel.tsx

@@ -15,6 +15,7 @@ import { QuickTogglePanelAction } from 'mo/monaco/quickTogglePanelAction';
 export interface IPanelController {
     onTabChange(key: string | undefined): void;
     onToolbarClick(e: React.MouseEvent, item: IActionBarItemProps): void;
+    onClose(key?: string): void;
 }
 
 @singleton()
@@ -38,6 +39,12 @@ export class PanelController extends Controller implements IPanelController {
         this.emit(PanelEvent.onTabChange, key);
     };
 
+    public readonly onClose = (key?: string) => {
+        if (key) {
+            this.emit(PanelEvent.onTabClose, key);
+        }
+    };
+
     public readonly onToolbarClick = (
         e: React.MouseEvent,
         item: IActionBarItemProps

src/extensions/panel/index.ts

@@ -11,5 +11,20 @@ export const ExtendsPanel: IExtension = {
             toolbox: builtInPanelToolbox(),
         });
         molecule.panel.add(output);
+
+        molecule.panel.onTabClose((key) => {
+            const { data = [], current } = molecule.panel.getState();
+            if (current?.id === key) {
+                const index = data.findIndex((item) => item.id === key);
+                const next =
+                    index === data.length - 1 ? data.length - 2 : index + 1;
+                const nextPanel = data[next];
+                if (nextPanel) {
+                    molecule.panel.open(nextPanel);
+                }
+            }
+
+            molecule.panel.remove(key);
+        });
     },
 };

src/model/workbench/panel.tsx

@@ -14,6 +14,7 @@ export interface IPanelItem<T = any> extends ITabProps<any> {
 export enum PanelEvent {
     onTabChange = 'panel.onTabChange',
     onToolbarClick = 'panel.onToolbarClick',
+    onTabClose = 'panel.onTabClose',
 }
 
 export const PANEL_TOOLBOX_CLOSE = 'panel.toolbox.closePanel';

src/services/workbench/panelService.ts

@@ -37,6 +37,7 @@ export interface IPanelService extends Component<IPanel> {
     onToolbarClick(
         callback: (e: React.MouseEvent, item: IActionBarItemProps) => void
     ): void;
+    onTabClose(callback: (key: string) => void): void;
 }
 
 @singleton()
@@ -161,4 +162,8 @@ export class PanelService extends Component<IPanel> implements IPanelService {
     ) {
         this.subscribe(PanelEvent.onToolbarClick, callback);
     }
+
+    public onTabClose(callback: (key: string) => void) {
+        this.subscribe(PanelEvent.onTabClose, callback);
+    }
 }

src/workbench/panel/panel.tsx

@@ -11,7 +11,14 @@ const panelToolbarClassName = getBEMElement(defaultClassName, 'toolbar');
 const panelContainerClassName = getBEMElement(defaultClassName, 'container');
 
 export function Panel(props: IPanel & IPanelController) {
-    const { data, current, toolbox = [], onTabChange, onToolbarClick } = props;
+    const {
+        data,
+        current,
+        toolbox = [],
+        onTabChange,
+        onToolbarClick,
+        onClose,
+    } = props;
     let toolboxData = toolbox;
     if (current && current.toolbox) {
         toolboxData = current.toolbox.concat(toolbox);
@@ -29,6 +36,7 @@ export function Panel(props: IPanel & IPanelController) {
                     activeTab={current?.id}
                     data={data}
                     onSelectTab={onTabChange}
+                    onCloseTab={onClose}
                 />
                 <ActionBar
                     className={panelToolbarClassName}

stories/extensions/test/testPane.tsx

@@ -84,6 +84,7 @@ export default class TestPane extends React.Component {
             molecule.panel.open({
                 id: 'Pane' + id,
                 name: 'Panel' + id,
+                closable: true,
                 render: () => <h1>Test Pane</h1>,
             });
         };