devextreme
Version:
JavaScript/TypeScript Component Suite for Responsive Web Development
134 lines (133 loc) • 6.14 kB
JavaScript
/**
* DevExtreme (esm/__internal/ui/file_manager/ui.file_manager.dialog.folder_chooser.js)
* Version: 25.2.7
* Build date: Tue May 05 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 $ from "../../../core/renderer";
import {
extend
} from "../../../core/utils/extend";
import {
getMapFromObject
} from "../../ui/file_manager/ui.file_manager.common";
import FileManagerDialogBase from "../../ui/file_manager/ui.file_manager.dialog";
import FileManagerFilesTreeView from "../../ui/file_manager/ui.file_manager.files_tree_view";
const FILE_MANAGER_DIALOG_FOLDER_CHOOSER = "dx-filemanager-dialog-folder-chooser";
const FILE_MANAGER_DIALOG_FOLDER_CHOOSER_POPUP = "dx-filemanager-dialog-folder-chooser-popup";
class FileManagerFolderChooserDialog extends FileManagerDialogBase {
show() {
var _this$_filesTreeView;
this._setSelectedDirInfo(null);
null === (_this$_filesTreeView = this._filesTreeView) || void 0 === _this$_filesTreeView || _this$_filesTreeView.refresh();
super.show()
}
switchToCopyDialog(targetItemInfos) {
this._targetItemInfos = targetItemInfos;
this._setTitle(messageLocalization.format("dxFileManager-dialogDirectoryChooserCopyTitle"));
this._setApplyButtonOptions({
text: messageLocalization.format("dxFileManager-dialogDirectoryChooserCopyButtonText"),
disabled: true
})
}
switchToMoveDialog(targetItemInfos) {
this._targetItemInfos = targetItemInfos;
this._setTitle(messageLocalization.format("dxFileManager-dialogDirectoryChooserMoveTitle"));
this._setApplyButtonOptions({
text: messageLocalization.format("dxFileManager-dialogDirectoryChooserMoveButtonText"),
disabled: true
})
}
_getDialogOptions() {
return Object.assign({}, super._getDialogOptions(), {
contentCssClass: FILE_MANAGER_DIALOG_FOLDER_CHOOSER,
popupCssClass: FILE_MANAGER_DIALOG_FOLDER_CHOOSER_POPUP
})
}
_createContentTemplate(element) {
var _this$_$contentElemen, _this$_filesTreeView2;
super._createContentTemplate(element);
const {
getDirectories: getDirectories
} = this.option();
this._filesTreeView = this._createComponent($("<div>"), FileManagerFilesTreeView, {
getDirectories: getDirectories,
getCurrentDirectory: () => this._getDialogSelectedDirectory(),
onDirectoryClick: e => this._onFilesTreeViewDirectoryClick(e),
onFilesTreeViewContentReady: () => this._toggleUnavailableLocationsDisabled(true)
});
null === (_this$_$contentElemen = this._$contentElement) || void 0 === _this$_$contentElemen || _this$_$contentElemen.append($(null === (_this$_filesTreeView2 = this._filesTreeView) || void 0 === _this$_filesTreeView2 ? void 0 : _this$_filesTreeView2.$element()))
}
_getDialogResult() {
const result = this._getDialogSelectedDirectory();
return result ? {
folder: result
} : result
}
_getDefaultOptions() {
return extend(super._getDefaultOptions(), {
getItems: null
})
}
_getDialogSelectedDirectory() {
return this._selectedDirectoryInfo
}
_onFilesTreeViewDirectoryClick(_ref) {
var _this$_filesTreeView3;
let {
itemData: itemData
} = _ref;
this._setSelectedDirInfo(itemData);
null === (_this$_filesTreeView3 = this._filesTreeView) || void 0 === _this$_filesTreeView3 || _this$_filesTreeView3.updateCurrentDirectory()
}
_setSelectedDirInfo(dirInfo) {
this._selectedDirectoryInfo = dirInfo;
this._setApplyButtonOptions({
disabled: !dirInfo
})
}
_onPopupShown() {
this._toggleUnavailableLocationsDisabled(true);
super._onPopupShown()
}
_onPopupHiding() {
this._toggleUnavailableLocationsDisabled(false);
super._onPopupHiding()
}
_toggleUnavailableLocationsDisabled(isDisabled) {
if (!this._filesTreeView) {
return
}
const locations = this._getLocationsToProcess(isDisabled);
this._filesTreeView.toggleDirectoryExpandedStateRecursive(locations.locationsToExpand[0], isDisabled).then(() => {
var _this$_filesTreeView4;
return null === (_this$_filesTreeView4 = this._filesTreeView) || void 0 === _this$_filesTreeView4 ? void 0 : _this$_filesTreeView4.toggleDirectoryLineExpandedState(locations.locationsToCollapse, !isDisabled).then(() => locations.locationKeysToDisable.forEach(key => {
var _this$_filesTreeView5;
return null === (_this$_filesTreeView5 = this._filesTreeView) || void 0 === _this$_filesTreeView5 ? void 0 : _this$_filesTreeView5.toggleNodeDisabledState(key, isDisabled)
}))
})
}
_getLocationsToProcess(isDisabled) {
const expandLocations = {};
const collapseLocations = {};
this._targetItemInfos.forEach(itemInfo => {
if (itemInfo.parentDirectory) {
expandLocations[itemInfo.parentDirectory.getInternalKey()] = itemInfo.parentDirectory
}
if (itemInfo.fileItem.isDirectory) {
collapseLocations[itemInfo.getInternalKey()] = itemInfo
}
});
const expandMap = getMapFromObject(expandLocations);
const collapseMap = getMapFromObject(collapseLocations);
return {
locationsToExpand: isDisabled ? expandMap.values : [],
locationsToCollapse: isDisabled ? collapseMap.values : [],
locationKeysToDisable: expandMap.keys.concat(...collapseMap.keys)
}
}
}
export default FileManagerFolderChooserDialog;