Skip to content

Commit b26c532

Browse files
mumiaomumiao
authored
feat: support show or hide statusBar when rightClik statusBar panel (#154)
* feat: support show or hide statusBar when rightClik statusBar panel * feat: support show or hide barPanel based on setting.json * ci: fix ci error
1 parent b9899f0 commit b26c532

File tree

9 files changed

+127
-13
lines changed

9 files changed

+127
-13
lines changed

‎src/common/id.ts

+1
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,4 @@ export const ID_ACTIVITY_BAR = 'activityBar';
33
export const ID_MENU_BAR = 'menuBar';
44
export const ID_SIDE_BAR = 'sidebar';
55
export const ID_EXPLORER = 'explorer';
6+
export const ID_STATUS_BAR = 'statusBar';

‎src/controller/index.ts

+2
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,11 @@ import { SearchController } from './search/search';
55
import { NotificationController } from './notification';
66
import { SettingsController } from './settings';
77
import { ProblemsController } from './problems';
8+
import { MenuBarController } from './menuBar';
89
export const explorerController = container.resolve(ExplorerController);
910
export const searchController = container.resolve(SearchController);
1011
export const folderTreeController = container.resolve(FolderTreeController);
1112
export const notificationController = container.resolve(NotificationController);
1213
export const settingController = container.resolve(SettingsController);
1314
export const problemsController = container.resolve(ProblemsController);
15+
export const menuBarController = container.resolve(MenuBarController);

‎src/controller/statusBar.tsx

+19
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,16 @@ import 'reflect-metadata';
22
import * as React from 'react';
33
import { IStatusBarItem, StatusBarEvent } from 'mo/model';
44
import { Controller } from 'mo/react/controller';
5+
import { menuBarController } from 'mo/controller';
6+
import { IMenuItem } from 'mo/components/menu';
7+
import { CONTEXT_MENU_HIDE_STATUS_BAR } from 'mo/model/workbench/statusBar';
58
import { singleton } from 'tsyringe';
69
export interface IStatusBarController {
710
onClick?: (e: React.MouseEvent, item: IStatusBarItem) => void;
11+
onContextMenuClick?: (
12+
e: React.MouseEvent,
13+
item: IMenuItem | undefined
14+
) => void;
815
}
916
@singleton()
1017
export class StatusBarController
@@ -17,4 +24,16 @@ export class StatusBarController
1724
public onClick = (e: React.MouseEvent, item: IStatusBarItem) => {
1825
this.emit(StatusBarEvent.onClick, e, item);
1926
};
27+
28+
public readonly onContextMenuClick = (
29+
e: React.MouseEvent,
30+
item: IMenuItem | undefined
31+
) => {
32+
const menuId = item?.id;
33+
switch (menuId) {
34+
case CONTEXT_MENU_HIDE_STATUS_BAR.id:
35+
menuBarController.updateStatusBar();
36+
break;
37+
}
38+
};
2039
}

‎src/model/workbench/statusBar.tsx

+10
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import * as React from 'react';
22
import EditorStatusBarView from 'mo/workbench/editor/statusBarView';
3+
import { IMenuItem } from 'mo/components/menu';
34
export interface IStatusBarItem<T = any> extends HTMLElementProps {
45
id: string;
56
sortIndex: number;
@@ -12,6 +13,7 @@ export interface IStatusBarItem<T = any> extends HTMLElementProps {
1213
export interface IStatusBar {
1314
rightItems: IStatusBarItem[];
1415
leftItems: IStatusBarItem[];
16+
contextMenu?: IMenuItem[];
1517
hidden?: boolean;
1618
}
1719

@@ -39,18 +41,26 @@ export enum StatusBarEvent {
3941
*/
4042
DataChanged = 'statusBar.data',
4143
}
44+
45+
export const CONTEXT_MENU_HIDE_STATUS_BAR = {
46+
id: 'hide',
47+
name: 'Hide Status Bar',
48+
};
4249
export class StatusBarModel implements IStatusBar {
4350
public leftItems: IStatusBarItem[] = [];
4451
public rightItems: IStatusBarItem[] = [];
52+
public contextMenu: IMenuItem[];
4553
public hidden = false;
4654

4755
constructor(
4856
leftItems: IStatusBarItem[] = [],
4957
rightItems: IStatusBarItem[] = [STATUS_EDITOR_INFO],
58+
contextMenu: IMenuItem[] = [CONTEXT_MENU_HIDE_STATUS_BAR],
5059
hidden = false
5160
) {
5261
this.leftItems = leftItems;
5362
this.rightItems = rightItems;
63+
this.contextMenu = contextMenu;
5464
this.hidden = hidden;
5565
}
5666
}

‎src/services/settingsService.ts

-1
Original file line numberDiff line numberDiff line change
@@ -123,7 +123,6 @@ export class SettingsService extends GlobalEvent implements ISettingsService {
123123
if (workbench.colorTheme) {
124124
this.colorThemeService.applyTheme(workbench.colorTheme);
125125
}
126-
127126
this.editorService.editorInstance?.updateOptions({
128127
...editor,
129128
});

‎src/workbench/statusBar/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import 'reflect-metadata';
2+
import { container } from 'tsyringe';
23
import { connect } from 'mo/react';
34
import StatusBar from './statusBar';
45
import { StatusBarService } from 'mo/services';
5-
import { container } from 'tsyringe';
66
import { StatusBarController } from 'mo/controller/statusBar';
77

88
export * from './statusBar';

‎src/workbench/statusBar/item.tsx

+6-5
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
1-
import { classNames } from 'mo/common/className';
2-
import { IStatusBarItem } from 'mo/model/workbench/statusBar';
31
import * as React from 'react';
42
import { memo } from 'react';
3+
import { classNames } from 'mo/common/className';
4+
import { IStatusBarItem } from 'mo/model/workbench/statusBar';
5+
import { IStatusBarController } from 'mo/controller/statusBar';
56
import { itemClassName } from './base';
67

7-
function StatusItem(props: IStatusBarItem) {
8-
const { className, onClick, name, data, render, ...extra } = props;
8+
function StatusItem(props: IStatusBarItem & IStatusBarController) {
9+
const { className, onClick, id, name, data, render, ...extra } = props;
910
const clsName = classNames(itemClassName, className);
1011
const events = {
1112
onClick: function (e: React.MouseEvent) {
@@ -14,7 +15,7 @@ function StatusItem(props: IStatusBarItem) {
1415
};
1516

1617
return (
17-
<div className={clsName} {...extra}>
18+
<div className={clsName} id={id} {...extra}>
1819
<a tabIndex={-1} title={name} {...events}>
1920
{render ? render(props) : name}
2021
</a>

‎src/workbench/statusBar/statusBar.tsx

+36-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import * as React from 'react';
2-
import { memo } from 'react';
3-
2+
import { memo, useEffect, useCallback } from 'react';
43
import { IStatusBar, IStatusBarItem } from 'mo/model/workbench/statusBar';
54
import StatusItem from './item';
65
import { mergeFunctions } from 'mo/common/utils';
@@ -11,9 +10,42 @@ import {
1110
sortByIndex,
1211
statusBarClassName,
1312
} from './base';
13+
import { useContextMenu } from 'mo/components/contextMenu';
14+
import { IMenuItem, Menu } from 'mo/components/menu';
15+
import { ID_STATUS_BAR } from 'mo/common/id';
16+
import { select } from 'mo/common/dom';
1417

1518
function StatusBar(props: IStatusBar & IStatusBarController) {
16-
const { leftItems = [], onClick, rightItems = [] } = props;
19+
const {
20+
leftItems = [],
21+
contextMenu = [],
22+
onContextMenuClick,
23+
onClick,
24+
rightItems = [],
25+
} = props;
26+
27+
let contextViewMenu;
28+
const onClickMenuItem = useCallback(
29+
(e: React.MouseEvent, item: IMenuItem | undefined) => {
30+
onContextMenuClick?.(e, item);
31+
contextViewMenu?.dispose();
32+
},
33+
[contextMenu]
34+
);
35+
const renderContextMenu = () => (
36+
<Menu onClick={onClickMenuItem} data={contextMenu} />
37+
);
38+
useEffect(() => {
39+
if (contextMenu.length > 0) {
40+
contextViewMenu = useContextMenu({
41+
anchor: select(`#${ID_STATUS_BAR}`),
42+
render: renderContextMenu,
43+
});
44+
}
45+
return function cleanup() {
46+
contextViewMenu?.dispose();
47+
};
48+
});
1749

1850
const renderItems = (data: IStatusBarItem[]) => {
1951
return data
@@ -28,7 +60,7 @@ function StatusBar(props: IStatusBar & IStatusBarController) {
2860
};
2961

3062
return (
31-
<div className={statusBarClassName}>
63+
<div className={statusBarClassName} id={ID_STATUS_BAR}>
3264
<div className={leftItemsClassName}>{renderItems(leftItems)}</div>
3365
<div className={rightItemsClassName}>{renderItems(rightItems)}</div>
3466
</div>

‎stories/extensions/test/index.tsx

+52-2
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,17 @@ import * as React from 'react';
22
import {
33
activityBarService,
44
IActivityBarItem,
5+
menuBarService,
56
sidebarService,
7+
statusBarService,
68
settingsService,
79
} from 'mo';
10+
import {
11+
MENU_VIEW_ACTIVITYBAR,
12+
MENU_VIEW_MENUBAR,
13+
MENU_VIEW_SIDEBAR,
14+
MENU_VIEW_STATUSBAR,
15+
} from 'mo/model/workbench/menuBar';
816
import { IExtension } from 'mo/model/extension';
917

1018
import TestPane from './testPane';
@@ -35,8 +43,50 @@ export const ExtendTestPane: IExtension = {
3543
}
3644
});
3745

38-
settingsService.onChangeConfiguration((value) => {
39-
console.log('onChangeConfiguration:', value);
46+
settingsService.onChangeConfiguration(async (value) => {
47+
settingsService.update(value);
48+
const config = await settingsService.getConfiguration();
49+
let workbench: any = config.workbench;
50+
if (workbench?.activityBar) {
51+
let hidden = workbench?.activityBar.hidden;
52+
activityBarService.setState({
53+
...activityBarService.getState(),
54+
hidden,
55+
});
56+
menuBarService.update(MENU_VIEW_ACTIVITYBAR, {
57+
icon: hidden ? '' : 'check',
58+
});
59+
}
60+
if (workbench?.menuBar) {
61+
let hidden = workbench?.menuBar.hidden;
62+
menuBarService.setState({
63+
...menuBarService.getState(),
64+
hidden,
65+
});
66+
menuBarService.update(MENU_VIEW_MENUBAR, {
67+
icon: hidden ? '' : 'check',
68+
});
69+
}
70+
if (workbench?.sidebar) {
71+
let hidden = workbench?.sidebar.hidden;
72+
sidebarService.setState({
73+
...sidebarService.getState(),
74+
hidden,
75+
});
76+
menuBarService.update(MENU_VIEW_SIDEBAR, {
77+
icon: hidden ? '' : 'check',
78+
});
79+
}
80+
if (workbench?.statusBar) {
81+
let hidden = workbench?.statusBar.hidden;
82+
statusBarService.setState({
83+
...statusBarService.getState(),
84+
hidden,
85+
});
86+
menuBarService.update(MENU_VIEW_STATUSBAR, {
87+
icon: hidden ? '' : 'check',
88+
});
89+
}
4090
});
4191
},
4292
};

0 commit comments

Comments
 (0)