feat: support set the sorting of the panel (#351)

DTStack · Aug 21, 2021 · 95470fe · 95470fe
1 parent d2913e9
commit 95470fe
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 2 deletions.
diff --git a/src/model/problems.tsx b/src/model/problems.tsx
@@ -51,6 +51,7 @@ export function builtInPanelProblems(): IPanelItem {
         id: PANEL_PROBLEMS,
         name: localize(PANEL_PROBLEMS, 'problems'),
         data: null,
+        sortIndex: 1,
     };
 }
 

diff --git a/src/model/workbench/panel.tsx b/src/model/workbench/panel.tsx
@@ -13,6 +13,10 @@ export interface IPanelItem<T = any> extends ITabProps<T> {
     title?: string;
     toolbox?: IActionBarItemProps[];
     data?: T;
+    /**
+     * The sort of panel item
+     */
+    sortIndex?: number;
 }
 
 export enum PanelEvent {
@@ -44,6 +48,7 @@ export function builtInOutputPanel() {
         id: PANEL_OUTPUT,
         name: localize(PANEL_OUTPUT, 'output'),
         data: '',
+        sortIndex: 2,
     };
 
     function onUpdateEditorIns(

diff --git a/src/workbench/panel/panel.tsx b/src/workbench/panel/panel.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { getBEMElement, prefixClaName } from 'mo/common/className';
-import { IPanel } from 'mo/model/workbench/panel';
+import { IPanel, IPanelItem } from 'mo/model/workbench/panel';
 import { IPanelController } from 'mo/controller/panel';
 import { Tabs } from 'mo/components/tabs';
 import { ActionBar } from 'mo/components/actionBar';
@@ -30,13 +30,20 @@ export function Panel(props: IPanel & IPanelController) {
             ? current?.renderPane?.(current)
             : current?.renderPane;
 
+    const sortedPanels = data?.sort((a: IPanelItem, b: IPanelItem) => {
+        if (a.sortIndex && b.sortIndex) {
+            return a.sortIndex - b.sortIndex;
+        }
+        return 1;
+    });
+
     return (
         <div className={defaultClassName}>
             <div className={panelHeaderClassName}>
                 <Scrollable noScrollY isShowShadow>
                     <Tabs
                         activeTab={current?.id}
-                        data={data}
+                        data={sortedPanels}
                         onSelectTab={onTabChange}
                         onCloseTab={onClose}
                     />