sussudio
Version:
An unofficial VS Code Internal API
168 lines (167 loc) • 7.36 kB
JavaScript
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
import { ActionBar } from "../actionbar/actionbar.mjs";
import { DropdownMenuActionViewItem } from "../dropdown/dropdownActionViewItem.mjs";
import { Action, SubmenuAction } from "../../../common/actions.mjs";
import { Codicon, CSSIcon } from "../../../common/codicons.mjs";
import { EventMultiplexer } from "../../../common/event.mjs";
import { Disposable, DisposableStore } from "../../../common/lifecycle.mjs";
import { withNullAsUndefined } from "../../../common/types.mjs";
import "../../../../css!./toolbar.mjs";
import * as nls from "../../../../nls.mjs";
/**
* A widget that combines an action bar for primary actions and a dropdown for secondary actions.
*/
export class ToolBar extends Disposable {
options;
actionBar;
toggleMenuAction;
toggleMenuActionViewItem;
submenuActionViewItems = [];
hasSecondaryActions = false;
lookupKeybindings;
element;
_onDidChangeDropdownVisibility = this._register(new EventMultiplexer());
onDidChangeDropdownVisibility = this._onDidChangeDropdownVisibility.event;
disposables = new DisposableStore();
constructor(container, contextMenuProvider, options = { orientation: 0 /* ActionsOrientation.HORIZONTAL */ }) {
super();
this.options = options;
this.lookupKeybindings = typeof this.options.getKeyBinding === 'function';
this.toggleMenuAction = this._register(new ToggleMenuAction(() => this.toggleMenuActionViewItem?.show(), options.toggleMenuTitle));
this.element = document.createElement('div');
this.element.className = 'monaco-toolbar';
container.appendChild(this.element);
this.actionBar = this._register(new ActionBar(this.element, {
orientation: options.orientation,
ariaLabel: options.ariaLabel,
actionRunner: options.actionRunner,
allowContextMenu: options.allowContextMenu,
actionViewItemProvider: (action) => {
if (action.id === ToggleMenuAction.ID) {
this.toggleMenuActionViewItem = new DropdownMenuActionViewItem(action, action.menuActions, contextMenuProvider, {
actionViewItemProvider: this.options.actionViewItemProvider,
actionRunner: this.actionRunner,
keybindingProvider: this.options.getKeyBinding,
classNames: CSSIcon.asClassNameArray(options.moreIcon ?? Codicon.toolBarMore),
anchorAlignmentProvider: this.options.anchorAlignmentProvider,
menuAsChild: !!this.options.renderDropdownAsChildElement
});
this.toggleMenuActionViewItem.setActionContext(this.actionBar.context);
this.disposables.add(this._onDidChangeDropdownVisibility.add(this.toggleMenuActionViewItem.onDidChangeVisibility));
return this.toggleMenuActionViewItem;
}
if (options.actionViewItemProvider) {
const result = options.actionViewItemProvider(action);
if (result) {
return result;
}
}
if (action instanceof SubmenuAction) {
const result = new DropdownMenuActionViewItem(action, action.actions, contextMenuProvider, {
actionViewItemProvider: this.options.actionViewItemProvider,
actionRunner: this.actionRunner,
keybindingProvider: this.options.getKeyBinding,
classNames: action.class,
anchorAlignmentProvider: this.options.anchorAlignmentProvider,
menuAsChild: !!this.options.renderDropdownAsChildElement
});
result.setActionContext(this.actionBar.context);
this.submenuActionViewItems.push(result);
this.disposables.add(this._onDidChangeDropdownVisibility.add(result.onDidChangeVisibility));
return result;
}
return undefined;
}
}));
}
set actionRunner(actionRunner) {
this.actionBar.actionRunner = actionRunner;
}
get actionRunner() {
return this.actionBar.actionRunner;
}
set context(context) {
this.actionBar.context = context;
this.toggleMenuActionViewItem?.setActionContext(context);
for (const actionViewItem of this.submenuActionViewItems) {
actionViewItem.setActionContext(context);
}
}
getElement() {
return this.element;
}
focus() {
this.actionBar.focus();
}
getItemsWidth() {
let itemsWidth = 0;
for (let i = 0; i < this.actionBar.length(); i++) {
itemsWidth += this.actionBar.getWidth(i);
}
return itemsWidth;
}
getItemAction(indexOrElement) {
return this.actionBar.getAction(indexOrElement);
}
getItemWidth(index) {
return this.actionBar.getWidth(index);
}
getItemsLength() {
return this.actionBar.length();
}
setAriaLabel(label) {
this.actionBar.setAriaLabel(label);
}
setActions(primaryActions, secondaryActions) {
this.clear();
const primaryActionsToSet = primaryActions ? primaryActions.slice(0) : [];
// Inject additional action to open secondary actions if present
this.hasSecondaryActions = !!(secondaryActions && secondaryActions.length > 0);
if (this.hasSecondaryActions && secondaryActions) {
this.toggleMenuAction.menuActions = secondaryActions.slice(0);
primaryActionsToSet.push(this.toggleMenuAction);
}
primaryActionsToSet.forEach(action => {
this.actionBar.push(action, { icon: true, label: false, keybinding: this.getKeybindingLabel(action) });
});
}
isEmpty() {
return this.actionBar.isEmpty();
}
getKeybindingLabel(action) {
const key = this.lookupKeybindings ? this.options.getKeyBinding?.(action) : undefined;
return withNullAsUndefined(key?.getLabel());
}
clear() {
this.submenuActionViewItems = [];
this.disposables.clear();
this.actionBar.clear();
}
dispose() {
this.clear();
super.dispose();
}
}
export class ToggleMenuAction extends Action {
static ID = 'toolbar.toggle.more';
_menuActions;
toggleDropdownMenu;
constructor(toggleDropdownMenu, title) {
title = title || nls.localize('moreActions', "More Actions...");
super(ToggleMenuAction.ID, title, undefined, true);
this._menuActions = [];
this.toggleDropdownMenu = toggleDropdownMenu;
}
async run() {
this.toggleDropdownMenu();
}
get menuActions() {
return this._menuActions;
}
set menuActions(actions) {
this._menuActions = actions;
}
}