devextreme
Version:
JavaScript/TypeScript Component Suite for Responsive Web Development
262 lines (261 loc) • 11.1 kB
JavaScript
/**
* DevExtreme (esm/__internal/ui/file_manager/ui.file_manager.context_menu.js)
* Version: 25.2.5
* Build date: Fri Feb 20 2026
*
* Copyright (c) 2012 - 2026 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
import $ from "../../../core/renderer";
import {
ensureDefined
} from "../../../core/utils/common";
import {
extend
} from "../../../core/utils/extend";
import {
isDefined,
isString
} from "../../../core/utils/type";
import ContextMenu from "../../../ui/context_menu";
import Widget from "../../core/widget/widget";
import {
extendAttributes
} from "../../ui/file_manager/ui.file_manager.common";
const FILEMANAGER_CONTEXT_MEMU_CLASS = "dx-filemanager-context-menu";
const DEFAULT_CONTEXT_MENU_ITEMS = {
create: {},
upload: {},
download: {},
rename: {},
move: {},
copy: {},
delete: {},
refresh: {
beginGroup: true
}
};
const DEFAULT_ITEM_ALLOWED_PROPERTIES = ["beginGroup", "closeMenuOnClick", "disabled", "icon", "selectable", "selected", "text", "visible"];
class FileManagerContextMenu extends Widget {
_initMarkup() {
this._initActions();
this._isVisible = false;
const $menu = $("<div>").appendTo(this.$element());
this._contextMenu = this._createComponent($menu, ContextMenu, {
cssClass: "dx-filemanager-context-menu",
showEvent: "",
onItemClick: args => this._onContextMenuItemClick(args.itemData.name, args),
onShowing: e => this._onContextMenuShowing(e),
onShown: () => this._onContextMenuShown(),
onHidden: () => this._onContextMenuHidden()
});
super._initMarkup()
}
showAt(fileItems, element, event, target) {
var _this$_contextMenu, _this$_contextMenu2;
const {
itemData: itemData,
itemElement: itemElement,
isActionButton: isActionButton = false
} = target;
if (this._isVisible) {
this._onContextMenuHidden()
}
this._menuShowingContext = {
targetElement: itemElement,
itemData: itemData,
fileItems: fileItems,
event: event,
isActionButton: isActionButton
};
const position = {
of: element,
at: "top left",
my: "top left",
offset: ""
};
if (event) {
position.offset = `${event.offsetX} ${event.offsetY}`
} else {
position.my = "left top";
position.at = "left bottom";
position.boundaryOffset = "1"
}
null === (_this$_contextMenu = this._contextMenu) || void 0 === _this$_contextMenu || _this$_contextMenu.option({
target: element,
position: position
});
null === (_this$_contextMenu2 = this._contextMenu) || void 0 === _this$_contextMenu2 || _this$_contextMenu2.show()
}
createContextMenuItems(fileItems, contextMenuItems, targetFileItem) {
this._targetFileItems = fileItems;
this._targetFileItem = isDefined(targetFileItem) ? targetFileItem : null === fileItems || void 0 === fileItems ? void 0 : fileItems[0];
const result = [];
const itemArray = contextMenuItems || this.option("items");
itemArray.forEach((srcItem => {
const commandName = isString(srcItem) ? srcItem : srcItem.name;
const item = this._configureItemByCommandName(commandName, srcItem, fileItems, this._targetFileItem);
if (this._isContextMenuItemAvailable(item, fileItems)) {
result.push(item)
}
}));
return result
}
_isContextMenuItemAvailable(menuItem, fileItems) {
var _this$_commandManager;
if (!this._isDefaultItem(menuItem.name) || !menuItem._autoHide) {
return ensureDefined(menuItem.visible, true)
}
if (this._isIsolatedCreationItemCommand(menuItem.name) && null !== fileItems && void 0 !== fileItems && fileItems.length) {
return false
}
return null === (_this$_commandManager = this._commandManager) || void 0 === _this$_commandManager ? void 0 : _this$_commandManager.isCommandAvailable(menuItem.name, fileItems)
}
_isIsolatedCreationItemCommand(commandName) {
const {
isolateCreationItemCommands: isolateCreationItemCommands
} = this.option();
return ("create" === commandName || "upload" === commandName) && isolateCreationItemCommands
}
_isDefaultItem(commandName) {
return !!DEFAULT_CONTEXT_MENU_ITEMS[commandName]
}
_configureItemByCommandName(commandName, item, fileItems, targetFileItem) {
if (!this._isDefaultItem(commandName)) {
const res = extend(true, {}, item);
res.originalItemData = item;
this._addItemClickHandler(commandName, res);
if (Array.isArray(item.items)) {
res.items = this.createContextMenuItems(fileItems, item.items, targetFileItem)
}
return res
}
const result = this._createMenuItemByCommandName(commandName);
const defaultConfig = DEFAULT_CONTEXT_MENU_ITEMS[commandName];
extend(result, defaultConfig);
result.originalItemData = item;
extendAttributes(result, item, DEFAULT_ITEM_ALLOWED_PROPERTIES);
if (!isDefined(result.visible)) {
result._autoHide = true
}
if (commandName && !result.name) {
extend(result, {
name: commandName
})
}
return result
}
_createMenuItemByCommandName(commandName) {
var _this$_commandManager2;
const {
text: text,
icon: icon
} = (null === (_this$_commandManager2 = this._commandManager) || void 0 === _this$_commandManager2 ? void 0 : _this$_commandManager2.getCommandByName(commandName)) ?? {};
const menuItem = {
name: commandName,
text: text,
icon: icon
};
this._addItemClickHandler(commandName, menuItem);
return menuItem
}
_addItemClickHandler(commandName, contextMenuItem) {
contextMenuItem.onItemClick = args => this._onContextMenuItemClick(commandName, args)
}
_onContextMenuItemClick(commandName, args) {
var _this$_targetFileItem, _this$_actions, _this$_actions$onItem;
const changedArgs = extend(true, {}, args);
changedArgs.itemData = args.itemData.originalItemData;
changedArgs.fileSystemItem = null === (_this$_targetFileItem = this._targetFileItem) || void 0 === _this$_targetFileItem ? void 0 : _this$_targetFileItem.fileItem;
const {
viewArea: viewArea
} = this.option();
changedArgs.viewArea = viewArea;
null === (_this$_actions = this._actions) || void 0 === _this$_actions || null === (_this$_actions$onItem = _this$_actions.onItemClick) || void 0 === _this$_actions$onItem || _this$_actions$onItem.call(_this$_actions, changedArgs);
if (this._isDefaultItem(commandName)) {
var _this$_commandManager3;
const targetFileItems = this._isIsolatedCreationItemCommand(commandName) ? null : this._targetFileItems;
null === (_this$_commandManager3 = this._commandManager) || void 0 === _this$_commandManager3 || _this$_commandManager3.executeCommand(commandName, targetFileItems)
}
}
_initActions() {
this._actions = {
onContextMenuHidden: this._createActionByOption("onContextMenuHidden"),
onContextMenuShowing: this._createActionByOption("onContextMenuShowing"),
onItemClick: this._createActionByOption("onItemClick")
}
}
_onContextMenuShowing(e) {
var _this$_actions2, _this$_actions2$onCon;
if (this._isVisible) {
this._onContextMenuHidden(true)
}
e = extend(e, this._menuShowingContext, {
options: this.option(),
cancel: false
});
null === (_this$_actions2 = this._actions) || void 0 === _this$_actions2 || null === (_this$_actions2$onCon = _this$_actions2.onContextMenuShowing) || void 0 === _this$_actions2$onCon || _this$_actions2$onCon.call(_this$_actions2, e);
if (!e.cancel) {
var _this$_contextMenu3;
const items = this.createContextMenuItems(this._menuShowingContext.fileItems, null, this._menuShowingContext.fileSystemItem);
null === (_this$_contextMenu3 = this._contextMenu) || void 0 === _this$_contextMenu3 || _this$_contextMenu3.option("dataSource", items)
}
}
tryUpdateVisibleContextMenu() {
if (this._isVisible) {
var _this$_contextMenu4;
const items = this.createContextMenuItems(this._targetFileItems);
null === (_this$_contextMenu4 = this._contextMenu) || void 0 === _this$_contextMenu4 || _this$_contextMenu4.option("dataSource", items)
}
}
_onContextMenuShown() {
this._isVisible = true
}
_onContextMenuHidden(preserveContext) {
var _this$_contextMenu5;
this._isVisible = false;
if (!preserveContext) {
this._menuShowingContext = {}
}
null === (_this$_contextMenu5 = this._contextMenu) || void 0 === _this$_contextMenu5 || _this$_contextMenu5.option("visible", false);
this._raiseContextMenuHidden()
}
_raiseContextMenuHidden() {
var _this$_actions3, _this$_actions3$onCon;
null === (_this$_actions3 = this._actions) || void 0 === _this$_actions3 || null === (_this$_actions3$onCon = _this$_actions3.onContextMenuHidden) || void 0 === _this$_actions3$onCon || _this$_actions3$onCon.call(_this$_actions3)
}
_getDefaultOptions() {
return Object.assign({}, super._getDefaultOptions(), {
commandManager: void 0,
onContextMenuHidden: void 0,
onItemClick: void 0
})
}
_optionChanged(args) {
const {
name: name
} = args;
switch (name) {
case "commandManager":
this.repaint();
break;
case "items":
this.tryUpdateVisibleContextMenu();
break;
case "onItemClick":
case "onContextMenuShowing":
case "onContextMenuHidden":
this._actions[name] = this._createActionByOption(name);
break;
default:
super._optionChanged(args)
}
}
get _commandManager() {
const {
commandManager: commandManager
} = this.option();
return commandManager
}
}
export default FileManagerContextMenu;