feat: explorer headerToolBar feats add

explorer headerToolBar feats add
DTStack · Mar 11, 2021 · c3ac8af · c3ac8af
1 parent e2fb056
commit c3ac8af
Show file tree

Hide file tree

Showing 16 changed files with 231 additions and 167 deletions.
diff --git a/src/common/id.ts b/src/common/id.ts
@@ -1,3 +1,5 @@
 export const ID_APP = 'molecule';
 export const ID_ACTIVITY_BAR = 'activityBar';
 export const ID_MENU_BAR = 'menuBar';
+export const ID_SIDE_BAR = 'sidebar';
+export const ID_EXPLORER = 'explorer';
diff --git a/src/components/menu/menu.tsx b/src/components/menu/menu.tsx
@@ -8,7 +8,7 @@ import {
     verticalMenuClassName,
 } from './base';
 
-export interface IMenu extends ISubMenu {}
+export interface IMenu extends ISubMenu { }
 
 export function Menu(props: React.PropsWithChildren<IMenu>) {
     const {

diff --git a/src/components/menu/style.scss b/src/components/menu/style.scss
@@ -34,7 +34,7 @@
 
     &__content {
         align-items: center;
-        cursor: default;
+        cursor: pointer;
         display: flex;
         flex: 1 1 auto;
         font-size: inherit;

diff --git a/src/components/toolbar/index.tsx b/src/components/toolbar/index.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import { prefixClaName, classNames } from 'mo/common/className';
 import ActionBar, { IActionBar } from 'mo/components/actionBar';
 
-export interface IToolBar<T = any> extends IActionBar {}
+export interface IToolBar<T = any> extends IActionBar { }
 
 const rootClassName = 'tool-bar';
 

diff --git a/src/controller/explorer/explorer.tsx b/src/controller/explorer/explorer.tsx
@@ -13,7 +13,7 @@ import { IActionBarItem } from 'mo/components/actionBar';
 // TODO: 自依赖问题 connect 失效，暂时手动引入 Controller 往 View 层传递
 import { folderTreeController, explorerController } from 'mo/controller';
 export interface IExplorerController {
-    onHeaderToolbarClick?: (e: React.MouseEvent, item: IActionBarItem) => void;
+    onHeaderToolbarContextMenuClick?: (e: React.MouseEvent, item: IActionBarItem) => void;
 }
 
 @singleton()
@@ -62,39 +62,9 @@ export class ExplorerController
             panes: [...sideBarState.panes!, explorePane],
         });
 
-        /**
-         * explorer service
-         * includes collapse and tree
-         */
-        const editorPanel = {
-            id: 'editors',
-            name: 'OPEN EDITORS',
-            toolbar: [
-                {
-                    id: 'toggle',
-                    title: 'Toggle Vertical',
-                    disabled: true,
-                    iconName: 'codicon-editor-layout',
-                },
-                {
-                    id: 'save',
-                    title: 'Save All',
-                    disabled: true,
-                    iconName: 'codicon-save-all',
-                },
-                {
-                    id: 'close',
-                    title: 'Close All Editors',
-                    iconName: 'codicon-close-all',
-                },
-            ],
-            renderPanel: () => {
-                return <span>editors</span>;
-            },
-        };
-
+        // TODO: 这里初始化数据应提取到 model, 但由于 renderPanel return View 层，存在依赖关系.
         const sampleFolderPanel = {
-            id: 'sample_folder',
+            id: 'Folders',
             name: 'Sample Folder',
             toolbar: [
                 {
@@ -138,27 +108,8 @@ export class ExplorerController
             },
         };
 
-        const outlinePanel = {
-            id: 'outline',
-            name: 'OUTLINE',
-            toolbar: [
-                {
-                    id: 'outline-collapse',
-                    title: 'Collapse All',
-                    iconName: 'codicon-collapse-all',
-                },
-                {
-                    id: 'outline-more',
-                    title: 'More Actions...',
-                    iconName: 'codicon-ellipsis',
-                },
-            ],
-        };
-
         explorerService.addPanel([
-            editorPanel,
             sampleFolderPanel,
-            outlinePanel,
         ]);
     }
 
@@ -175,11 +126,14 @@ export class ExplorerController
         // console.log('onClick:', panelService);
     };
 
-    public readonly onHeaderToolbarClick = (
+    public readonly onHeaderToolbarContextMenuClick = (
         e: React.MouseEvent,
         item: IActionBarItem
     ) => {
         e.stopPropagation();
         console.log('onClick:', e, item);
+        const panelId = item.id;
+        if (panelId === 'Folders') return;
+        explorerService.addOrRemovePanel(panelId);
     };
 }
diff --git a/src/controller/explorer/folderTree.tsx b/src/controller/explorer/folderTree.tsx
@@ -34,7 +34,7 @@ export class FolderTreeController
         this.initView();
     }
 
-    private initView() {}
+    private initView() { }
 
     public readonly onSelectFile = (file: ITreeNodeItem) => {
         const tabData = {

diff --git a/src/model/workbench/activityBar.ts b/src/model/workbench/activityBar.ts
@@ -26,6 +26,7 @@ export interface IActivityBarItem {
     checked?: boolean;
     type?: 'normal' | 'global';
     contextMenu?: IMenuItem[];
+    className?: string;
     render?: () => React.ReactNode | JSX.Element;
 }
 

diff --git a/src/model/workbench/explorer.ts b/src/model/workbench/explorer.ts
diff --git a/src/model/workbench/explorer.tsx b/src/model/workbench/explorer.tsx
@@ -0,0 +1,145 @@
+import * as React from 'react';
+import 'reflect-metadata';
+import { injectable } from 'tsyringe';
+import { ITreeNodeItem, FileType, FileTypes } from 'mo/components/tree';
+import { IMenuItem } from 'mo/components/menu';
+import { IActivityBarItem } from './activityBar';
+
+export enum ExplorerEvent {
+    onClick = 'explorer.onClick',
+}
+export interface IPanelItem<T = any> extends IActivityBarItem {
+    renderPanel?: (props) => React.ReactNode | JSX.Element;
+    toolbar?: T;
+}
+
+export interface IFolderTree {
+    data?: ITreeNodeItem[];
+    contextMenu?: IMenuItem[];
+    current?: ITreeNodeItem | null;
+}
+export interface IExplorer {
+    data?: IPanelItem[];
+    headerToolBar?: IActivityBarItem[];
+    folderTree?: IFolderTree;
+}
+
+const builtInHeaderToolbar: IActivityBarItem[] = [{
+    id: 'explorer-more',
+    name: 'View and More Actions...',
+    iconName: 'codicon-ellipsis',
+    type: 'global',
+    contextMenu: [
+        {
+            id: 'OpenEditors',
+            name: 'Open Editors',
+            icon: 'check'
+        },
+        {
+            id: 'Folders',
+            name: 'Folders',
+            icon: 'check'
+        },
+        {
+            id: 'Outline',
+            name: 'Outline',
+            icon: 'check'
+        },
+    ],
+}]
+
+const commonContextMenu = [
+    {
+        id: 'rename',
+        name: 'Rename',
+    },
+    {
+        id: 'delete',
+        name: 'Delete',
+    },
+];
+// Dedault Panel
+export const EDITOR_PANEL = {
+    id: 'OpenEditors',
+    name: 'OPEN EDITORS',
+    toolbar: [
+        {
+            id: 'toggle',
+            title: 'Toggle Vertical',
+            disabled: true,
+            iconName: 'codicon-editor-layout',
+        },
+        {
+            id: 'save',
+            title: 'Save All',
+            disabled: true,
+            iconName: 'codicon-save-all',
+        },
+        {
+            id: 'close',
+            title: 'Close All Editors',
+            iconName: 'codicon-close-all',
+        },
+    ],
+    renderPanel: () => {
+        return <span>editors</span>;
+    },
+};
+
+export const OUTLINE_PANEL = {
+    id: 'Outline',
+    name: 'OUTLINE',
+    toolbar: [
+        {
+            id: 'outline-collapse',
+            title: 'Collapse All',
+            iconName: 'codicon-collapse-all',
+        },
+        {
+            id: 'outline-more',
+            title: 'More Actions...',
+            iconName: 'codicon-ellipsis',
+        },
+    ],
+};
+export const DEFAULT_PANELS = [EDITOR_PANEL, OUTLINE_PANEL];
+
+export class TreeNodeModel implements ITreeNodeItem {
+    id?: number;
+    name?: string;
+    location?: string;
+    fileType?: FileType;
+    children?: ITreeNodeItem[];
+    icon?: string | React.ReactNode;
+    modify?: boolean;
+
+    constructor(props: ITreeNodeItem = {}) {
+        const {
+            id,
+            name = '',
+            location = '',
+            fileType = FileTypes.file as FileType,
+            children = [],
+            icon = '',
+            modify = false,
+        } = props;
+        (this.fileType = fileType),
+            (this.modify = modify),
+            (this.name = name),
+            (this.id = id || Math.random() * 10 + 1),
+            (this.location = location),
+            (this.children = children),
+            (this.icon = icon);
+    }
+}
+
+@injectable()
+export class IExplorerModel implements IExplorer {
+    public data: IPanelItem[] = DEFAULT_PANELS;
+    public folderTree: IFolderTree = {
+        contextMenu: commonContextMenu,
+        current: null,
+        data: [],
+    };
+    public headerToolBar: IActivityBarItem[] = builtInHeaderToolbar;
+}