devextreme
Version:
JavaScript/TypeScript Component Suite for Responsive Web Development
217 lines (215 loc) • 10.5 kB
JavaScript
/**
* DevExtreme (cjs/__internal/ui/file_manager/ui.file_manager.item_list.thumbnails.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/
*/
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _contextmenu = require("../../../common/core/events/contextmenu");
var _events_engine = _interopRequireDefault(require("../../../common/core/events/core/events_engine"));
var _utils = require("../../../common/core/events/utils");
var _message = _interopRequireDefault(require("../../../common/core/localization/message"));
var _renderer = _interopRequireDefault(require("../../../core/renderer"));
var _deferred = require("../../../core/utils/deferred");
var _type = require("../../../core/utils/type");
var _file_items_controller = require("../../ui/file_manager/file_items_controller");
var _uiFile_manager = require("../../ui/file_manager/ui.file_manager.common");
var _uiFile_manager2 = _interopRequireDefault(require("../../ui/file_manager/ui.file_manager.item_list"));
var _uiFile_managerItems_listThumbnails = _interopRequireDefault(require("../../ui/file_manager/ui.file_manager.items_list.thumbnails.list_box"));
function _interopRequireDefault(e) {
return e && e.__esModule ? e : {
default: e
}
}
const FILE_MANAGER_THUMBNAILS_ITEM_LIST_CLASS = "dx-filemanager-thumbnails";
const FILE_MANAGER_THUMBNAILS_ITEM_CLASS = "dx-filemanager-thumbnails-item";
const FILE_MANAGER_THUMBNAILS_ITEM_THUMBNAIL_CLASS = "dx-filemanager-thumbnails-item-thumbnail";
const FILE_MANAGER_THUMBNAILS_EVENT_NAMESPACE = "dxFileManager_thumbnails";
class FileManagerThumbnailsItemList extends _uiFile_manager2.default {
_initMarkup() {
super._initMarkup();
this.$element().addClass("dx-filemanager-thumbnails");
const contextMenuEvent = (0, _utils.addNamespace)(_contextmenu.name, "dxFileManager_thumbnails");
_events_engine.default.on(this.$element(), contextMenuEvent, this._onContextMenu.bind(this));
this._createItemList()
}
_createItemList() {
const selectionMode = this._isMultipleSelectionMode() ? "multiple" : "single";
const {
selectedItemKeys: selectedItemKeys,
focusedItemKey: focusedItemKey
} = this.option();
const $itemListContainer = (0, _renderer.default)("<div>").appendTo(this.$element());
this._itemList = this._createComponent($itemListContainer, _uiFile_managerItems_listThumbnails.default, {
dataSource: this._createDataSource(),
selectionMode: selectionMode,
selectedItemKeys: selectedItemKeys,
focusedItemKey: focusedItemKey,
activeStateEnabled: true,
hoverStateEnabled: true,
loopItemFocus: false,
focusStateEnabled: true,
onItemEnterKeyPressed: this._tryOpen.bind(this),
itemThumbnailTemplate: this._getItemThumbnailContainer.bind(this),
getTooltipText: this._getTooltipText.bind(this),
onSelectionChanged: this._onItemListSelectionChanged.bind(this),
onFocusedItemChanged: this._onItemListFocusedItemChanged.bind(this),
onContentReady: this._onContentReady.bind(this)
})
}
_onContextMenu(e) {
e.preventDefault();
e.stopPropagation();
if (!this._isDesktop()) {
return
}
let items = null;
const targetItemElement = (0, _renderer.default)(e.target).closest(this._getItemSelector());
let targetItem = null;
if (targetItemElement.length > 0) {
var _this$_itemList, _this$_itemList2;
targetItem = null === (_this$_itemList = this._itemList) || void 0 === _this$_itemList ? void 0 : _this$_itemList.getItemByItemElement(targetItemElement);
null === (_this$_itemList2 = this._itemList) || void 0 === _this$_itemList2 || _this$_itemList2.selectItem(targetItem);
items = this._getFileItemsForContextMenu(targetItem)
}
const target = {
itemData: targetItem,
itemElement: targetItemElement.length ? targetItemElement : void 0
};
this._showContextMenu(items, e.target, e, target)
}
_getItemThumbnailCssClass() {
return "dx-filemanager-thumbnails-item-thumbnail"
}
_getItemSelector() {
return ".dx-filemanager-thumbnails-item"
}
_getTooltipText(fileItemInfo) {
const item = fileItemInfo.fileItem;
if (item.tooltipText) {
return item.tooltipText
}
let text = `${item.name}\r\n`;
if (!item.isDirectory) {
text += `${_message.default.format("dxFileManager-listThumbnailsTooltipTextSize")}: ${(0,_uiFile_manager.getDisplayFileSize)(item.size)}\r\n`
}
text += `${_message.default.format("dxFileManager-listThumbnailsTooltipTextDateModified")}: ${item.dateModified}`;
return text
}
_onItemDblClick(e) {
var _this$_itemList3;
const $item = (0, _renderer.default)(e.currentTarget);
const item = null === (_this$_itemList3 = this._itemList) || void 0 === _this$_itemList3 ? void 0 : _this$_itemList3.getItemByItemElement($item);
this._tryOpen(item)
}
_tryOpen(item) {
if (item) {
this._raiseSelectedItemOpened(item)
}
}
_getItemsInternal() {
return super._getItemsInternal().then(items => {
const deferred = new _deferred.Deferred;
setTimeout(() => deferred.resolve(items));
return deferred.promise()
})
}
_disableDragging() {
return false
}
_getDefaultOptions() {
return Object.assign({}, super._getDefaultOptions(), {
focusStateEnabled: true
})
}
_onItemListSelectionChanged(_ref) {
let {
addedItemKeys: addedItemKeys,
removedItemKeys: removedItemKeys
} = _ref;
const selectedItemInfos = this.getSelectedItems();
const selectedItems = null === selectedItemInfos || void 0 === selectedItemInfos ? void 0 : selectedItemInfos.map(itemInfo => itemInfo.fileItem);
const selectedItemKeys = null === selectedItems || void 0 === selectedItems ? void 0 : selectedItems.map(item => item.key);
this._tryRaiseSelectionChanged({
selectedItemInfos: selectedItemInfos,
selectedItems: selectedItems,
selectedItemKeys: selectedItemKeys,
currentSelectedItemKeys: addedItemKeys,
currentDeselectedItemKeys: removedItemKeys
})
}
_onItemListFocusedItemChanged(_ref2) {
let {
item: item,
itemElement: itemElement
} = _ref2;
if (!this._isMultipleSelectionMode()) {
this._selectItemSingleSelection(item)
}
const fileSystemItem = (null === item || void 0 === item ? void 0 : item.fileItem) || null;
this._onFocusedItemChanged({
item: fileSystemItem,
itemKey: null === fileSystemItem || void 0 === fileSystemItem ? void 0 : fileSystemItem.key,
itemElement: itemElement || void 0
})
}
_getScrollable() {
var _this$_itemList4;
return null === (_this$_itemList4 = this._itemList) || void 0 === _this$_itemList4 ? void 0 : _this$_itemList4.getScrollable()
}
_setSelectedItemKeys(itemKeys) {
var _this$_itemList5;
null === (_this$_itemList5 = this._itemList) || void 0 === _this$_itemList5 || _this$_itemList5.option("selectedItemKeys", itemKeys)
}
_setFocusedItemKey(itemKey) {
var _this$_itemList6;
null === (_this$_itemList6 = this._itemList) || void 0 === _this$_itemList6 || _this$_itemList6.option("focusedItemKey", itemKey)
}
refresh(options, operation) {
var _this$_itemList7, _this$_refreshDeferre;
const actualOptions = {
dataSource: this._createDataSource()
};
if (options && Object.prototype.hasOwnProperty.call(options, "focusedItemKey")) {
actualOptions.focusedItemKey = options.focusedItemKey
}
if (options && Object.prototype.hasOwnProperty.call(options, "selectedItemKeys")) {
actualOptions.selectedItemKeys = options.selectedItemKeys
}
if (!(0, _type.isDefined)(actualOptions.focusedItemKey) && operation === _file_items_controller.OPERATIONS.NAVIGATION) {
this._needResetScrollPosition = true
}
null === (_this$_itemList7 = this._itemList) || void 0 === _this$_itemList7 || _this$_itemList7.option(actualOptions);
this._refreshDeferred = new _deferred.Deferred;
return null === (_this$_refreshDeferre = this._refreshDeferred) || void 0 === _this$_refreshDeferre ? void 0 : _this$_refreshDeferre.promise()
}
_deselectItem(item) {
var _this$_itemList8, _this$_itemList9;
const itemElement = null === (_this$_itemList8 = this._itemList) || void 0 === _this$_itemList8 ? void 0 : _this$_itemList8.getItemElementByItem(item);
null === (_this$_itemList9 = this._itemList) || void 0 === _this$_itemList9 || _this$_itemList9.unselectItem(itemElement)
}
_selectItemSingleSelection(item) {
if (item) {
var _this$_itemList0;
null === (_this$_itemList0 = this._itemList) || void 0 === _this$_itemList0 || _this$_itemList0.selectItem(item)
} else {
var _this$_itemList1;
null === (_this$_itemList1 = this._itemList) || void 0 === _this$_itemList1 || _this$_itemList1.clearSelection()
}
}
clearSelection() {
var _this$_itemList10;
null === (_this$_itemList10 = this._itemList) || void 0 === _this$_itemList10 || _this$_itemList10.clearSelection()
}
getSelectedItems() {
var _this$_itemList11;
return null === (_this$_itemList11 = this._itemList) || void 0 === _this$_itemList11 ? void 0 : _this$_itemList11.getSelectedItems()
}
}
var _default = exports.default = FileManagerThumbnailsItemList;