devextreme
Version:
JavaScript/TypeScript Component Suite for Responsive Web Development
897 lines (896 loc) • 44.8 kB
JavaScript
/**
* DevExtreme (esm/__internal/ui/file_manager/ui.file_manager.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 messageLocalization from "../../../common/core/localization/message";
import registerComponent from "../../../core/component_registrator";
import {
normalizeOptions
} from "../../../core/options/utils";
import $ from "../../../core/renderer";
import {
ensureDefined,
equalByValue
} from "../../../core/utils/common";
import {
equals
} from "../../../core/utils/comparator";
import {
Deferred,
when
} from "../../../core/utils/deferred";
import {
extend
} from "../../../core/utils/extend";
import {
isDefined,
isEmptyObject,
isFunction,
type
} from "../../../core/utils/type";
import Widget from "../../core/widget/widget";
import {
FileItemsController,
OPERATIONS
} from "../../ui/file_manager/file_items_controller";
import FileManagerAdaptivityControl from "../../ui/file_manager/ui.file_manager.adaptivity";
import FileManagerBreadcrumbs from "../../ui/file_manager/ui.file_manager.breadcrumbs";
import {
defaultPermissions,
FileManagerCommandManager
} from "../../ui/file_manager/ui.file_manager.command_manager";
import {
extendAttributes,
findItemsByKeys
} from "../../ui/file_manager/ui.file_manager.common";
import FileManagerContextMenu from "../../ui/file_manager/ui.file_manager.context_menu";
import FileManagerEditingControl from "../../ui/file_manager/ui.file_manager.editing";
import FileManagerFilesTreeView from "../../ui/file_manager/ui.file_manager.files_tree_view";
import FileManagerDetailsItemList from "../../ui/file_manager/ui.file_manager.item_list.details";
import FileManagerThumbnailsItemList from "../../ui/file_manager/ui.file_manager.item_list.thumbnails";
import FileManagerNotificationControl from "../../ui/file_manager/ui.file_manager.notification";
import FileManagerToolbar from "../../ui/file_manager/ui.file_manager.toolbar";
import notify from "../../ui/notify";
const FILE_MANAGER_CLASS = "dx-filemanager";
const FILE_MANAGER_WRAPPER_CLASS = "dx-filemanager-wrapper";
const FILE_MANAGER_CONTAINER_CLASS = "dx-filemanager-container";
const FILE_MANAGER_DIRS_PANEL_CLASS = "dx-filemanager-dirs-panel";
const FILE_MANAGER_EDITING_CONTAINER_CLASS = "dx-filemanager-editing-container";
const FILE_MANAGER_ITEMS_PANEL_CLASS = "dx-filemanager-items-panel";
const FILE_MANAGER_ITEM_CUSTOM_THUMBNAIL_CLASS = "dx-filemanager-item-custom-thumbnail";
const PARENT_DIRECTORY_KEY_PREFIX = "[*DXPDK*]$40F96F03-FBD8-43DF-91BE-F55F4B8BA871$";
const VIEW_AREAS = {
folders: "navPane",
items: "itemView"
};
class FileManager extends Widget {
_initTemplates() {}
_init() {
super._init();
this._initActions();
this._providerUpdateDeferred = null;
this._lockCurrentPathProcessing = false;
this._wasRendered = false;
const {
currentPath: currentPath,
currentPathKeys: currentPathKeys,
rootFolderName: rootFolderName,
fileSystemProvider: fileSystemProvider,
allowedFileExtensions: allowedFileExtensions,
upload: upload
} = this.option();
this._controller = new FileItemsController({
currentPath: currentPath,
currentPathKeys: currentPathKeys,
rootText: rootFolderName,
fileProvider: fileSystemProvider,
allowedFileExtensions: allowedFileExtensions,
uploadMaxFileSize: null === upload || void 0 === upload ? void 0 : upload.maxFileSize,
uploadChunkSize: null === upload || void 0 === upload ? void 0 : upload.chunkSize,
onInitialized: this._onControllerInitialized.bind(this),
onDataLoading: this._onDataLoading.bind(this),
onSelectedDirectoryChanged: this._onSelectedDirectoryChanged.bind(this),
onPathPotentiallyChanged: this._checkPathActuality.bind(this),
editingEvents: this._actions.editing
})
}
_initMarkup() {
super._initMarkup();
this._firstItemViewLoad = true;
this._lockSelectionProcessing = false;
this._lockFocusedItemProcessing = false;
this._itemKeyToFocus = void 0;
this._loadedWidgets = [];
const {
permissions: permissions
} = this.option();
this._commandManager = new FileManagerCommandManager(permissions);
this.$element().addClass("dx-filemanager");
if (this._wasRendered) {
this._prepareToLoad()
} else {
this._wasRendered = true
}
this._createNotificationControl();
this._initCommandManager()
}
_createNotificationControl() {
const $notificationControl = $("<div>").addClass("dx-filemanager-notification-container").appendTo(this.$element());
const {
notifications: notifications
} = this.option();
this._notificationControl = this._createComponent($notificationControl, FileManagerNotificationControl, {
progressPanelContainer: this.$element(),
contentTemplate: (container, notificationControl) => this._createWrapper(container, notificationControl),
onActionProgress: e => this._onActionProgress(e),
positionTargetSelector: ".dx-filemanager-container",
showProgressPanel: null === notifications || void 0 === notifications ? void 0 : notifications.showPanel,
showNotificationPopup: null === notifications || void 0 === notifications ? void 0 : notifications.showPopup
})
}
_createWrapper(container, notificationControl) {
this._$wrapper = $("<div>").addClass("dx-filemanager-wrapper").appendTo(container);
this._createEditing(notificationControl);
const {
toolbar: toolbar,
itemView: itemView
} = this.option();
const $toolbar = $("<div>").appendTo(this._$wrapper);
this._toolbar = this._createComponent($toolbar, FileManagerToolbar, {
commandManager: this._commandManager,
generalItems: null === toolbar || void 0 === toolbar ? void 0 : toolbar.items,
fileItems: null === toolbar || void 0 === toolbar ? void 0 : toolbar.fileSelectionItems,
itemViewMode: null === itemView || void 0 === itemView ? void 0 : itemView.mode,
onItemClick: args => {
var _this$_actions$onTool, _this$_actions;
return null === (_this$_actions$onTool = (_this$_actions = this._actions).onToolbarItemClick) || void 0 === _this$_actions$onTool ? void 0 : _this$_actions$onTool.call(_this$_actions, args)
}
});
this._createAdaptivityControl()
}
_createAdaptivityControl() {
var _this$_editing;
const $container = $("<div>").addClass("dx-filemanager-container").appendTo(this._$wrapper);
this._adaptivityControl = this._createComponent($container, FileManagerAdaptivityControl, {
drawerTemplate: container => this._createFilesTreeView(container),
contentTemplate: container => this._createItemsPanel(container),
onAdaptiveStateChanged: e => this._onAdaptiveStateChanged(e)
});
null === (_this$_editing = this._editing) || void 0 === _this$_editing || _this$_editing.setUploaderSplitterElement(this._adaptivityControl.getSplitterElement())
}
_createEditing(notificationControl) {
const $editingContainer = $("<div>").addClass("dx-filemanager-editing-container").appendTo(this.$element());
const {
rtlEnabled: rtlEnabled
} = this.option();
this._editing = this._createComponent($editingContainer, FileManagerEditingControl, {
controller: this._controller,
model: {
getMultipleSelectedItems: this._getSelectedItemInfos.bind(this)
},
getItemThumbnail: this._getItemThumbnailInfo.bind(this),
notificationControl: notificationControl,
uploadDropZonePlaceholderContainer: this.$element(),
rtlEnabled: rtlEnabled,
onSuccess: _ref => {
let {
updatedOnlyFiles: updatedOnlyFiles
} = _ref;
return this._redrawComponent(updatedOnlyFiles)
},
onError: e => this._onEditingError(e)
})
}
_createItemsPanel($container) {
this._$itemsPanel = $("<div>").addClass("dx-filemanager-items-panel").appendTo($container);
this._createBreadcrumbs(this._$itemsPanel);
this._createItemView(this._$itemsPanel);
this._updateUploadDropZone()
}
_updateUploadDropZone() {
var _this$_commandManager, _this$_editing2;
const dropZone = null !== (_this$_commandManager = this._commandManager) && void 0 !== _this$_commandManager && _this$_commandManager.isCommandAvailable("upload") ? this._$itemsPanel : $();
null === (_this$_editing2 = this._editing) || void 0 === _this$_editing2 || _this$_editing2.setUploaderDropZone(dropZone)
}
_createFilesTreeView(container) {
this._filesTreeViewContextMenu = this._createContextMenu(false, VIEW_AREAS.folders);
const $filesTreeView = $("<div>").addClass("dx-filemanager-dirs-panel").appendTo(container);
this._filesTreeView = this._createComponent($filesTreeView, FileManagerFilesTreeView, {
storeExpandedState: true,
contextMenu: this._filesTreeViewContextMenu,
getDirectories: this.getDirectories.bind(this),
getCurrentDirectory: this._getCurrentDirectory.bind(this),
onDirectoryClick: _ref2 => {
let {
itemData: itemData
} = _ref2;
return this._setCurrentDirectory(itemData)
},
onItemListDataLoaded: () => this._tryEndLoading(VIEW_AREAS.folders)
});
this._filesTreeView.updateCurrentDirectory()
}
_createItemView($container, viewMode) {
var _itemView$details;
this._itemViewContextMenu = this._createContextMenu(true, VIEW_AREAS.items);
const {
itemView: itemView,
selectionMode: selectionMode,
selectedItemKeys: selectedItemKeys,
focusedItemKey: focusedItemKey,
customizeDetailColumns: customizeDetailColumns
} = this.option();
const options = {
selectionMode: selectionMode,
selectedItemKeys: selectedItemKeys,
focusedItemKey: focusedItemKey,
contextMenu: this._itemViewContextMenu,
getItems: this._getItemViewItems.bind(this),
onError: _ref3 => {
let {
error: error
} = _ref3;
return this._showError(error)
},
onSelectionChanged: this._onItemViewSelectionChanged.bind(this),
onFocusedItemChanged: this._onItemViewFocusedItemChanged.bind(this),
onSelectedItemOpened: this._onSelectedItemOpened.bind(this),
onContextMenuShowing: e => this._onContextMenuShowing(VIEW_AREAS.items, e),
onItemListItemsLoaded: () => this._tryEndLoading(VIEW_AREAS.items),
getItemThumbnail: this._getItemThumbnailInfo.bind(this),
customizeDetailColumns: customizeDetailColumns,
detailColumns: null === itemView || void 0 === itemView || null === (_itemView$details = itemView.details) || void 0 === _itemView$details ? void 0 : _itemView$details.columns
};
const $itemView = $("<div>").appendTo($container);
viewMode = viewMode || (null === itemView || void 0 === itemView ? void 0 : itemView.mode);
const widgetClass = "thumbnails" === viewMode ? FileManagerThumbnailsItemList : FileManagerDetailsItemList;
this._itemView = this._createComponent($itemView, widgetClass, options)
}
_createBreadcrumbs($container) {
const $breadcrumbs = $("<div>").appendTo($container);
const {
rootFolderName: rootFolderName
} = this.option();
this._breadcrumbs = this._createComponent($breadcrumbs, FileManagerBreadcrumbs, {
rootFolderDisplayName: rootFolderName,
onCurrentDirectoryChanging: _ref4 => {
let {
currentDirectory: currentDirectory
} = _ref4;
return this._setCurrentDirectory(currentDirectory, true)
}
});
this._breadcrumbs.setCurrentDirectory(this._getCurrentDirectory())
}
_createContextMenu(isolateCreationItemCommands, viewArea) {
const $contextMenu = $("<div>").appendTo(this._$wrapper);
const {
contextMenu: contextMenu
} = this.option();
return this._createComponent($contextMenu, FileManagerContextMenu, {
commandManager: this._commandManager,
items: null === contextMenu || void 0 === contextMenu ? void 0 : contextMenu.items,
onItemClick: args => {
var _this$_actions$onCont, _this$_actions2;
return null === (_this$_actions$onCont = (_this$_actions2 = this._actions).onContextMenuItemClick) || void 0 === _this$_actions$onCont ? void 0 : _this$_actions$onCont.call(_this$_actions2, args)
},
onContextMenuShowing: e => this._onContextMenuShowing(viewArea, e),
isolateCreationItemCommands: isolateCreationItemCommands,
viewArea: viewArea
})
}
_initCommandManager() {
var _this$_editing3, _this$_commandManager2;
const actions = extend(null === (_this$_editing3 = this._editing) || void 0 === _this$_editing3 ? void 0 : _this$_editing3.getCommandActions(), {
refresh: () => this._refreshAndShowProgress(),
thumbnails: () => this.option("itemView.mode", "thumbnails"),
details: () => this.option("itemView.mode", "details"),
clearSelection: () => this._clearSelection(),
showNavPane: () => {
var _this$_adaptivityCont;
return null === (_this$_adaptivityCont = this._adaptivityControl) || void 0 === _this$_adaptivityCont ? void 0 : _this$_adaptivityCont.toggleDrawer()
}
});
null === (_this$_commandManager2 = this._commandManager) || void 0 === _this$_commandManager2 || _this$_commandManager2.registerActions(actions)
}
_onItemViewSelectionChanged(_ref5) {
var _this$_actions$onSele, _this$_actions3;
let {
selectedItemInfos: selectedItemInfos,
selectedItems: selectedItems,
selectedItemKeys: selectedItemKeys,
currentSelectedItemKeys: currentSelectedItemKeys,
currentDeselectedItemKeys: currentDeselectedItemKeys
} = _ref5;
this._lockSelectionProcessing = true;
this.option("selectedItemKeys", selectedItemKeys);
this._lockSelectionProcessing = false;
null === (_this$_actions$onSele = (_this$_actions3 = this._actions).onSelectionChanged) || void 0 === _this$_actions$onSele || _this$_actions$onSele.call(_this$_actions3, {
selectedItems: selectedItems,
selectedItemKeys: selectedItemKeys,
currentSelectedItemKeys: currentSelectedItemKeys,
currentDeselectedItemKeys: currentDeselectedItemKeys
});
this._updateToolbar(selectedItemInfos)
}
_onItemViewFocusedItemChanged(e) {
var _this$_actions$onFocu, _this$_actions4;
this._lockFocusedItemProcessing = true;
this.option("focusedItemKey", e.itemKey);
this._lockFocusedItemProcessing = false;
null === (_this$_actions$onFocu = (_this$_actions4 = this._actions).onFocusedItemChanged) || void 0 === _this$_actions$onFocu || _this$_actions$onFocu.call(_this$_actions4, {
item: e.item,
itemElement: e.itemElement
})
}
_onAdaptiveStateChanged(_ref6) {
var _this$_commandManager3;
let {
enabled: enabled
} = _ref6;
null === (_this$_commandManager3 = this._commandManager) || void 0 === _this$_commandManager3 || _this$_commandManager3.setCommandEnabled("showNavPane", enabled);
this._updateToolbar()
}
_onActionProgress(_ref7) {
var _this$_toolbar;
let {
message: message,
status: status
} = _ref7;
null === (_this$_toolbar = this._toolbar) || void 0 === _this$_toolbar || _this$_toolbar.updateRefreshItem(message, status);
this._updateToolbar()
}
_onEditingError(e) {
var _this$_actions$onErro, _this$_actions5;
const args = extendAttributes({}, e, ["errorCode", "errorText", "fileSystemItem"]);
null === (_this$_actions$onErro = (_this$_actions5 = this._actions).onErrorOccurred) || void 0 === _this$_actions$onErro || _this$_actions$onErro.call(_this$_actions5, args);
e.errorText = args.errorText
}
_refreshAndShowProgress() {
var _this$_notificationCo, _this$_controller;
this._prepareToLoad();
return when(null === (_this$_notificationCo = this._notificationControl) || void 0 === _this$_notificationCo ? void 0 : _this$_notificationCo.tryShowProgressPanel(), null === (_this$_controller = this._controller) || void 0 === _this$_controller ? void 0 : _this$_controller.refresh()).then((() => {
var _this$_filesTreeView;
return null === (_this$_filesTreeView = this._filesTreeView) || void 0 === _this$_filesTreeView ? void 0 : _this$_filesTreeView.refresh()
}))
}
_isAllWidgetsLoaded() {
var _this$_loadedWidgets, _this$_loadedWidgets2, _this$_loadedWidgets3;
return 2 === (null === (_this$_loadedWidgets = this._loadedWidgets) || void 0 === _this$_loadedWidgets ? void 0 : _this$_loadedWidgets.length) && (null === (_this$_loadedWidgets2 = this._loadedWidgets) || void 0 === _this$_loadedWidgets2 ? void 0 : _this$_loadedWidgets2.includes(VIEW_AREAS.folders)) && (null === (_this$_loadedWidgets3 = this._loadedWidgets) || void 0 === _this$_loadedWidgets3 ? void 0 : _this$_loadedWidgets3.includes(VIEW_AREAS.items))
}
_tryEndLoading(area) {
var _this$_loadedWidgets4;
null === (_this$_loadedWidgets4 = this._loadedWidgets) || void 0 === _this$_loadedWidgets4 || _this$_loadedWidgets4.push(area);
if (this._isAllWidgetsLoaded()) {
var _this$_controller2;
null === (_this$_controller2 = this._controller) || void 0 === _this$_controller2 || _this$_controller2.endSingleLoad()
}
}
_prepareToLoad() {
var _this$_controller3;
this._loadedWidgets = [];
null === (_this$_controller3 = this._controller) || void 0 === _this$_controller3 || _this$_controller3.startSingleLoad()
}
_updateToolbar(selectedItems) {
var _this$_toolbar2;
const items = selectedItems || this._getSelectedItemInfos();
null === (_this$_toolbar2 = this._toolbar) || void 0 === _this$_toolbar2 || _this$_toolbar2.option("contextItems", ensureDefined(items, []))
}
_switchView(viewMode) {
var _this$_itemView, _this$_toolbar3;
this._disposeWidget(null === (_this$_itemView = this._itemView) || void 0 === _this$_itemView ? void 0 : _this$_itemView.option("contextMenu"));
this._disposeWidget(this._itemView);
this._createItemView(this._$itemsPanel, viewMode);
null === (_this$_toolbar3 = this._toolbar) || void 0 === _this$_toolbar3 || _this$_toolbar3.option({
itemViewMode: viewMode
})
}
_disposeWidget(widget) {
widget.dispose();
widget.$element().remove()
}
_clearSelection() {
var _this$_itemView2;
null === (_this$_itemView2 = this._itemView) || void 0 === _this$_itemView2 || _this$_itemView2.clearSelection()
}
_showError(message) {
this._showNotification(message, false)
}
_showNotification(message, isSuccess) {
notify({
message: message,
width: 450
}, isSuccess ? "success" : "error", 5e3)
}
_redrawComponent(onlyFileItemsView) {
var _this$_itemView3;
null === (_this$_itemView3 = this._itemView) || void 0 === _this$_itemView3 || null === (_this$_itemView3 = _this$_itemView3.refresh()) || void 0 === _this$_itemView3 || _this$_itemView3.then((() => {
var _this$_filesTreeView2;
return !onlyFileItemsView && (null === (_this$_filesTreeView2 = this._filesTreeView) || void 0 === _this$_filesTreeView2 ? void 0 : _this$_filesTreeView2.refresh())
}))
}
_getItemViewItems() {
var _this$_controller4;
const {
itemView: itemView
} = this.option();
let result = null === (_this$_controller4 = this._controller) || void 0 === _this$_controller4 ? void 0 : _this$_controller4.getCurrentItems(!(null !== itemView && void 0 !== itemView && itemView.showFolders));
this._updateToolbarWithSelectionOnFirstLoad(result);
if (null !== itemView && void 0 !== itemView && itemView.showParentFolder) {
result = when(result).then((items => this._getPreparedItemViewItems(items)))
}
return result
}
_updateToolbarWithSelectionOnFirstLoad(itemsResult) {
if (!this._firstItemViewLoad) {
return
}
this._firstItemViewLoad = false;
const {
selectedItemKeys: selectedItemKeys
} = this.option();
if (null !== selectedItemKeys && void 0 !== selectedItemKeys && selectedItemKeys.length && selectedItemKeys.length > 0) {
when(itemsResult).done((items => {
const selectedItems = findItemsByKeys(items, selectedItemKeys);
if (selectedItems.length > 0) {
this._updateToolbar(selectedItems)
}
}))
}
}
_getPreparedItemViewItems(items) {
const selectedDir = this._getCurrentDirectory();
if (selectedDir.fileItem.isRoot()) {
return items
}
const parentDirItem = selectedDir.fileItem.createClone();
parentDirItem.isParentFolder = true;
parentDirItem.name = "..";
parentDirItem.relativeName = "..";
parentDirItem.key = `${PARENT_DIRECTORY_KEY_PREFIX}${selectedDir.fileItem.key}`;
const itemsCopy = [...items];
itemsCopy.unshift({
fileItem: parentDirItem,
icon: "parentfolder"
});
return itemsCopy
}
_onContextMenuShowing(viewArea, e) {
var _e$itemData, _this$_actions$onCont2, _this$_actions6;
let eventArgs = extendAttributes({}, e, ["targetElement", "cancel", "event"]);
eventArgs = extend(eventArgs, {
viewArea: viewArea,
fileSystemItem: null === (_e$itemData = e.itemData) || void 0 === _e$itemData ? void 0 : _e$itemData.fileItem,
_isActionButton: e.isActionButton
});
null === (_this$_actions$onCont2 = (_this$_actions6 = this._actions).onContextMenuShowing) || void 0 === _this$_actions$onCont2 || _this$_actions$onCont2.call(_this$_actions6, eventArgs);
e.cancel = ensureDefined(eventArgs.cancel, false)
}
_getItemThumbnailInfo(fileInfo) {
const {
customizeThumbnail: customizeThumbnail
} = this.option();
const thumbnail = isFunction(customizeThumbnail) ? customizeThumbnail(fileInfo.fileItem) : fileInfo.fileItem.thumbnail;
if (thumbnail) {
return {
thumbnail: thumbnail,
cssClass: "dx-filemanager-item-custom-thumbnail"
}
}
return {
thumbnail: fileInfo.icon
}
}
_getDefaultOptions() {
return Object.assign({}, super._getDefaultOptions(), {
fileSystemProvider: null,
currentPath: "",
currentPathKeys: [],
rootFolderName: messageLocalization.format("dxFileManager-rootDirectoryName"),
selectionMode: "multiple",
selectedItemKeys: [],
focusedItemKey: void 0,
toolbar: {
items: ["showNavPane", "create", "upload", "switchView", {
name: "separator",
location: "after"
}, "refresh"],
fileSelectionItems: ["download", "separator", "move", "copy", "rename", "separator", "delete", "clearSelection", {
name: "separator",
location: "after"
}, "refresh"]
},
contextMenu: {
items: ["create", "upload", "rename", "move", "copy", "delete", "refresh", "download"]
},
itemView: {
details: {
columns: ["thumbnail", "name", "dateModified", "size"]
},
mode: "details",
showFolders: true,
showParentFolder: true
},
customizeThumbnail: void 0,
customizeDetailColumns: void 0,
onContextMenuItemClick: void 0,
onContextMenuShowing: void 0,
onCurrentDirectoryChanged: void 0,
onSelectedFileOpened: void 0,
onSelectionChanged: void 0,
onFocusedItemChanged: void 0,
onToolbarItemClick: void 0,
onErrorOccurred: void 0,
onDirectoryCreating: void 0,
onDirectoryCreated: void 0,
onItemRenaming: void 0,
onItemRenamed: void 0,
onItemDeleting: void 0,
onItemDeleted: void 0,
onItemCopying: void 0,
onItemCopied: void 0,
onItemMoving: void 0,
onItemMoved: void 0,
onFileUploading: void 0,
onFileUploaded: void 0,
onItemDownloading: void 0,
allowedFileExtensions: [],
upload: {
maxFileSize: 0,
chunkSize: 2e5
},
permissions: extend({}, defaultPermissions),
notifications: {
showPanel: true,
showPopup: true
}
})
}
option(options, value) {
const optionsToCheck = normalizeOptions(options, value);
const isGetter = arguments.length < 2 && "object" !== type(options);
const isOptionDefined = name => isDefined(optionsToCheck[name]);
const isOptionValueDiffers = name => {
if (!isOptionDefined(name)) {
return false
}
const previousValue = this.option(name);
const value = optionsToCheck[name];
return !equals(previousValue, value)
};
if (!isGetter && isOptionDefined("fileSystemProvider")) {
this._providerUpdateDeferred = new Deferred;
if (isOptionValueDiffers("currentPath") || isOptionValueDiffers("currentPathKeys")) {
this._lockCurrentPathProcessing = true
}
}
return super.option(...arguments)
}
_optionChanged(args) {
var _this$_controller7, _this$_controller9, _this$_notificationCo2, _this$_notificationCo3, _this$_editing4;
const {
name: name,
fullName: fullName,
value: value
} = args;
switch (name) {
case "currentPath": {
const updateFunc = () => {
var _this$_controller5;
this._lockCurrentPathProcessing = false;
return null === (_this$_controller5 = this._controller) || void 0 === _this$_controller5 ? void 0 : _this$_controller5.setCurrentPath(value)
};
this._lockCurrentPathProcessing = true;
if (this._providerUpdateDeferred) {
this._providerUpdateDeferred.then(updateFunc)
} else {
updateFunc()
}
break
}
case "currentPathKeys": {
const updateFunc = () => {
var _this$_controller6;
this._lockCurrentPathProcessing = false;
return null === (_this$_controller6 = this._controller) || void 0 === _this$_controller6 ? void 0 : _this$_controller6.setCurrentPathByKeys(value)
};
this._lockCurrentPathProcessing = true;
if (this._providerUpdateDeferred) {
this._providerUpdateDeferred.then(updateFunc)
} else {
updateFunc()
}
break
}
case "selectedItemKeys":
if (!this._lockSelectionProcessing && this._itemView) {
this._itemView.option("selectedItemKeys", value)
}
break;
case "focusedItemKey":
if (!this._lockFocusedItemProcessing && this._itemView) {
this._itemView.option("focusedItemKey", value)
}
break;
case "rootFolderName":
null === (_this$_controller7 = this._controller) || void 0 === _this$_controller7 || _this$_controller7.setRootText(value);
this._invalidate();
break;
case "fileSystemProvider": {
var _this$_controller8;
if (!this._lockCurrentPathProcessing) {
this._providerUpdateDeferred = new Deferred
}
const {
currentPathKeys: currentPathKeys
} = this.option();
const pathKeys = this._lockCurrentPathProcessing ? void 0 : currentPathKeys;
null === (_this$_controller8 = this._controller) || void 0 === _this$_controller8 || _this$_controller8.updateProvider(value, pathKeys).then((() => {
var _this$_providerUpdate;
return null === (_this$_providerUpdate = this._providerUpdateDeferred) || void 0 === _this$_providerUpdate ? void 0 : _this$_providerUpdate.resolve()
})).always((() => {
this._providerUpdateDeferred = null;
this.repaint()
}));
break
}
case "allowedFileExtensions":
null === (_this$_controller9 = this._controller) || void 0 === _this$_controller9 || _this$_controller9.setAllowedFileExtensions(value);
this._invalidate();
break;
case "upload": {
var _this$_controller0;
const {
upload: upload
} = this.option();
null === (_this$_controller0 = this._controller) || void 0 === _this$_controller0 || _this$_controller0.setUploadOptions(upload);
this._invalidate();
break
}
case "permissions": {
var _this$_commandManager4, _this$_filesTreeViewC, _this$_itemViewContex, _this$_toolbar4;
const {
permissions: permissions
} = this.option();
null === (_this$_commandManager4 = this._commandManager) || void 0 === _this$_commandManager4 || _this$_commandManager4.updatePermissions(permissions);
null === (_this$_filesTreeViewC = this._filesTreeViewContextMenu) || void 0 === _this$_filesTreeViewC || _this$_filesTreeViewC.tryUpdateVisibleContextMenu();
null === (_this$_itemViewContex = this._itemViewContextMenu) || void 0 === _this$_itemViewContex || _this$_itemViewContex.tryUpdateVisibleContextMenu();
null === (_this$_toolbar4 = this._toolbar) || void 0 === _this$_toolbar4 || _this$_toolbar4.updateItemPermissions();
this._updateUploadDropZone();
break
}
case "selectionMode":
case "customizeThumbnail":
case "customizeDetailColumns":
this._invalidate();
break;
case "itemView":
if ("itemView.mode" === fullName) {
this._switchView(value)
} else {
this._invalidate()
}
break;
case "toolbar": {
var _this$_toolbar5;
const toolbarOptions = {};
if ("toolbar" === fullName) {
if (null !== value && void 0 !== value && value.items) {
toolbarOptions.generalItems = null === value || void 0 === value ? void 0 : value.items
}
if (null !== value && void 0 !== value && value.fileSelectionItems) {
toolbarOptions.fileItems = null === value || void 0 === value ? void 0 : value.fileSelectionItems
}
}
const {
toolbar: toolbar
} = this.option();
if (fullName.startsWith("toolbar.items")) {
toolbarOptions.generalItems = null === toolbar || void 0 === toolbar ? void 0 : toolbar.items
}
if (fullName.startsWith("toolbar.fileSelectionItems")) {
toolbarOptions.fileItems = null === toolbar || void 0 === toolbar ? void 0 : toolbar.fileSelectionItems
}
null === (_this$_toolbar5 = this._toolbar) || void 0 === _this$_toolbar5 || _this$_toolbar5.option(toolbarOptions);
break
}
case "contextMenu":
if ("contextMenu" === fullName && null !== value && void 0 !== value && value.items || fullName.startsWith("contextMenu.items")) {
var _this$_filesTreeViewC2, _this$_itemViewContex2;
const {
contextMenu: contextMenu
} = this.option();
null === (_this$_filesTreeViewC2 = this._filesTreeViewContextMenu) || void 0 === _this$_filesTreeViewC2 || _this$_filesTreeViewC2.option("items", null === contextMenu || void 0 === contextMenu ? void 0 : contextMenu.items);
null === (_this$_itemViewContex2 = this._itemViewContextMenu) || void 0 === _this$_itemViewContex2 || _this$_itemViewContex2.option("items", null === contextMenu || void 0 === contextMenu ? void 0 : contextMenu.items)
}
break;
case "notifications":
null === (_this$_notificationCo2 = this._notificationControl) || void 0 === _this$_notificationCo2 || _this$_notificationCo2.option("showProgressPanel", this.option("notifications.showPanel"));
null === (_this$_notificationCo3 = this._notificationControl) || void 0 === _this$_notificationCo3 || _this$_notificationCo3.option("showNotificationPopup", this.option("notifications.showPopup"));
break;
case "onContextMenuItemClick":
case "onContextMenuShowing":
case "onCurrentDirectoryChanged":
case "onSelectedFileOpened":
case "onSelectionChanged":
case "onFocusedItemChanged":
case "onToolbarItemClick":
case "onErrorOccurred":
this._actions[name] = this._createActionByOption(name);
break;
case "onDirectoryCreating":
case "onDirectoryCreated":
case "onItemRenaming":
case "onItemRenamed":
case "onItemDeleting":
case "onItemDeleted":
case "onItemCopying":
case "onItemCopied":
case "onItemMoving":
case "onItemMoved":
case "onFileUploading":
case "onFileUploaded":
case "onItemDownloading":
this._actions.editing[name] = this._createActionByOption(name);
break;
case "rtlEnabled":
null === (_this$_editing4 = this._editing) || void 0 === _this$_editing4 || _this$_editing4.updateDialogRtl(value);
super._optionChanged(args);
break;
default:
super._optionChanged(args)
}
}
_initActions() {
this._actions = {
onContextMenuItemClick: this._createActionByOption("onContextMenuItemClick"),
onContextMenuShowing: this._createActionByOption("onContextMenuShowing"),
onCurrentDirectoryChanged: this._createActionByOption("onCurrentDirectoryChanged"),
onSelectedFileOpened: this._createActionByOption("onSelectedFileOpened"),
onSelectionChanged: this._createActionByOption("onSelectionChanged"),
onFocusedItemChanged: this._createActionByOption("onFocusedItemChanged"),
onToolbarItemClick: this._createActionByOption("onToolbarItemClick"),
onErrorOccurred: this._createActionByOption("onErrorOccurred"),
editing: {
onDirectoryCreating: this._createActionByOption("onDirectoryCreating"),
onDirectoryCreated: this._createActionByOption("onDirectoryCreated"),
onItemRenaming: this._createActionByOption("onItemRenaming"),
onItemRenamed: this._createActionByOption("onItemRenamed"),
onItemDeleting: this._createActionByOption("onItemDeleting"),
onItemDeleted: this._createActionByOption("onItemDeleted"),
onItemCopying: this._createActionByOption("onItemCopying"),
onItemCopied: this._createActionByOption("onItemCopied"),
onItemMoving: this._createActionByOption("onItemMoving"),
onItemMoved: this._createActionByOption("onItemMoved"),
onFileUploading: this._createActionByOption("onFileUploading"),
onFileUploaded: this._createActionByOption("onFileUploaded"),
onItemDownloading: this._createActionByOption("onItemDownloading")
}
}
}
executeCommand(commandName) {
var _this$_commandManager5;
return null === (_this$_commandManager5 = this._commandManager) || void 0 === _this$_commandManager5 ? void 0 : _this$_commandManager5.executeCommand(commandName)
}
_setCurrentDirectory(directoryInfo, checkActuality) {
var _this$_controller1;
null === (_this$_controller1 = this._controller) || void 0 === _this$_controller1 || _this$_controller1.setCurrentDirectory(directoryInfo, checkActuality)
}
_getCurrentDirectory() {
var _this$_controller10;
return null === (_this$_controller10 = this._controller) || void 0 === _this$_controller10 ? void 0 : _this$_controller10.getCurrentDirectory()
}
_onControllerInitialized(_ref8) {
let {
controller: controller
} = _ref8;
this._controller = this._controller || controller;
this._syncToCurrentDirectory()
}
_onDataLoading(_ref9) {
var _this$_itemView4;
let {
operation: operation
} = _ref9;
let options = null;
const {
selectedItemKeys: selectedItemKeys
} = this.option();
if (operation === OPERATIONS.NAVIGATION) {
options = {
focusedItemKey: this._itemKeyToFocus,
selectedItemKeys: selectedItemKeys
};
this._itemKeyToFocus = void 0
}
null === (_this$_itemView4 = this._itemView) || void 0 === _this$_itemView4 || _this$_itemView4.refresh(options, operation)
}
_onSelectedDirectoryChanged() {
var _this$_actions$onCurr, _this$_actions7;
const currentDirectory = this._getCurrentDirectory();
this._syncToCurrentDirectory();
null === (_this$_actions$onCurr = (_this$_actions7 = this._actions).onCurrentDirectoryChanged) || void 0 === _this$_actions$onCurr || _this$_actions$onCurr.call(_this$_actions7, {
directory: currentDirectory.fileItem
})
}
_syncToCurrentDirectory() {
const currentDirectory = this._getCurrentDirectory();
if (this._filesTreeView) {
this._filesTreeView.updateCurrentDirectory()
}
if (this._breadcrumbs) {
this._breadcrumbs.setCurrentDirectory(currentDirectory)
}
this._checkPathActuality()
}
_checkPathActuality() {
var _this$_controller11, _this$_controller12;
if (this._lockCurrentPathProcessing) {
return
}
const currentPath = null === (_this$_controller11 = this._controller) || void 0 === _this$_controller11 ? void 0 : _this$_controller11.getCurrentPath();
const currentPathKeys = null === (_this$_controller12 = this._controller) || void 0 === _this$_controller12 ? void 0 : _this$_controller12.getCurrentPathKeys();
const options = {};
const {
currentPath: currentPathOption,
currentPathKeys: currentPathKeysOption
} = this.option();
if (currentPathOption !== currentPath) {
options.currentPath = currentPath
}
if (!equalByValue(currentPathKeysOption, currentPathKeys)) {
options.currentPathKeys = currentPathKeys
}
if (!isEmptyObject(options)) {
this.option(options)
}
}
getDirectories(parentDirectoryInfo, skipNavigationOnError) {
var _this$_controller13;
return null === (_this$_controller13 = this._controller) || void 0 === _this$_controller13 ? void 0 : _this$_controller13.getDirectories(parentDirectoryInfo, skipNavigationOnError)
}
_getSelectedItemInfos() {
return this._itemView ? this._itemView.getSelectedItems() : []
}
refresh() {
return this.executeCommand("refresh")
}
getCurrentDirectory() {
const directoryInfo = this._getCurrentDirectory();
return (null === directoryInfo || void 0 === directoryInfo ? void 0 : directoryInfo.fileItem) || null
}
getSelectedItems() {
var _this$_getSelectedIte;
return null === (_this$_getSelectedIte = this._getSelectedItemInfos()) || void 0 === _this$_getSelectedIte ? void 0 : _this$_getSelectedIte.map((itemInfo => itemInfo.fileItem))
}
_onSelectedItemOpened(_ref0) {
let {
fileItemInfo: fileItemInfo
} = _ref0;
const {
fileItem: fileItem
} = fileItemInfo;
if (!fileItem.isDirectory) {
var _this$_actions$onSele2, _this$_actions8;
null === (_this$_actions$onSele2 = (_this$_actions8 = this._actions).onSelectedFileOpened) || void 0 === _this$_actions$onSele2 || _this$_actions$onSele2.call(_this$_actions8, {
file: fileItem
});
return
}
if (fileItem.isParentFolder) {
this._itemKeyToFocus = this._getCurrentDirectory().fileItem.key
}
const newCurrentDirectory = fileItem.isParentFolder ? this._getCurrentDirectory().parentDirectory : fileItemInfo;
this._setCurrentDirectory(newCurrentDirectory);
if (newCurrentDirectory) {
var _this$_filesTreeView3;
null === (_this$_filesTreeView3 = this._filesTreeView) || void 0 === _this$_filesTreeView3 || _this$_filesTreeView3.toggleDirectoryExpandedState(newCurrentDirectory.parentDirectory, true)
}
}
}
registerComponent("dxFileManager", FileManager);
export default FileManager;