devextreme
Version:
JavaScript/TypeScript Component Suite for Responsive Web Development
226 lines (224 loc) • 8.69 kB
JavaScript
/**
* DevExtreme (cjs/__internal/ui/hierarchical_collection/hierarchical_collection_widget.js)
* Version: 25.2.8
* Build date: Mon Jun 08 2026
*
* Copyright (c) 2012 - 2026 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _devices = _interopRequireDefault(require("../../../core/devices"));
var _renderer = _interopRequireDefault(require("../../../core/renderer"));
var _bindable_template = require("../../../core/templates/bindable_template");
var _common = require("../../../core/utils/common");
var _data = require("../../../core/utils/data");
var _icon = require("../../../core/utils/icon");
var _iterator = require("../../../core/utils/iterator");
var _type = require("../../../core/utils/type");
var _uiCollection_widget = _interopRequireDefault(require("../../../ui/collection/ui.collection_widget.async"));
var _data_adapter = _interopRequireDefault(require("./data_adapter"));
function _interopRequireDefault(e) {
return e && e.__esModule ? e : {
default: e
}
}
const DISABLED_STATE_CLASS = "dx-state-disabled";
const ITEM_URL_CLASS = "dx-item-url";
class HierarchicalCollectionWidget extends _uiCollection_widget.default {
_getDefaultOptions() {
return Object.assign({}, super._getDefaultOptions(), {
keyExpr: "id",
displayExpr: "text",
selectedExpr: "selected",
disabledExpr: "disabled",
itemsExpr: "items",
hoverStateEnabled: true,
parentIdExpr: "parentId",
expandedExpr: "expanded"
})
}
_defaultOptionsRules() {
return super._defaultOptionsRules().concat([{
device: () => "desktop" === _devices.default.real().deviceType && !_devices.default.isSimulator(),
options: {
focusStateEnabled: true
}
}])
}
_init() {
super._init();
this._initAccessors();
this._initDataAdapter();
this._initDynamicTemplates()
}
_initDataSource() {
var _this$_dataSource;
super._initDataSource();
null === (_this$_dataSource = this._dataSource) || void 0 === _this$_dataSource || _this$_dataSource.paginate(false)
}
_initDataAdapter() {
const accessors = this._createDataAdapterAccessors();
const {
items: items = []
} = this.option();
this._dataAdapter = new _data_adapter.default(Object.assign({
dataAccessors: {
getters: accessors.getters,
setters: accessors.setters
},
items: items
}, this._getDataAdapterOptions()))
}
_getDataAdapterOptions() {
return {}
}
_getItemExtraPropNames() {
return []
}
_initDynamicTemplates() {
const fields = ["text", "html", "items", "icon"].concat(this._getItemExtraPropNames());
this._templateManager.addDefaultTemplates({
item: new _bindable_template.BindableTemplate(this._addContent.bind(this), fields, this.option("integrationOptions.watchMethod"), {
text: this._displayGetter,
items: this._itemsGetter
})
})
}
_addContent($container, itemData) {
$container.html(itemData.html).append(this._getIconContainer(itemData)).append(this._getTextContainer(itemData))
}
_getLinkContainer(iconContainer, textContainer, itemData) {
const {
linkAttr: linkAttr,
url: url
} = itemData;
const linkAttributes = (0, _type.isObject)(linkAttr) ? linkAttr : {};
return (0, _renderer.default)("<a>").addClass("dx-item-url").attr(Object.assign({}, linkAttributes, {
href: url
})).append(iconContainer).append(textContainer)
}
_clickByLink(link) {
link.addEventListener("click", e => {
e.stopPropagation()
}, {
once: true
});
link.click()
}
_getIconContainer(itemData) {
if (!itemData.icon) {
return
}
const $imageContainer = (0, _icon.getImageContainer)(itemData.icon);
if ($imageContainer.is("img")) {
var _this$NAME;
const componentName = null !== (_this$NAME = this.NAME) && void 0 !== _this$NAME && _this$NAME.startsWith("dxPrivateComponent") ? "" : `${this.NAME} `;
$imageContainer.attr("alt", `${componentName}item icon`)
}
return $imageContainer
}
_getTextContainer(itemData) {
return (0, _renderer.default)("<span>").text(itemData.text)
}
_initAccessors() {
(0, _iterator.each)(this._getAccessors(), (_index, accessor) => {
this._compileAccessor(accessor)
});
this._compileDisplayGetter()
}
_getAccessors() {
return ["key", "selected", "items", "disabled", "parentId", "expanded"]
}
_getChildNodes(node) {
const arr = [];
(0, _iterator.each)(node.internalFields.childrenKeys, (_, key) => {
var _this$_dataAdapter;
const childNode = null === (_this$_dataAdapter = this._dataAdapter) || void 0 === _this$_dataAdapter ? void 0 : _this$_dataAdapter.getNodeByKey(key);
arr.push(childNode)
});
return arr
}
_hasChildren(node) {
var _node$internalFields;
return Boolean(null === node || void 0 === node || null === (_node$internalFields = node.internalFields) || void 0 === _node$internalFields || null === (_node$internalFields = _node$internalFields.childrenKeys) || void 0 === _node$internalFields ? void 0 : _node$internalFields.length)
}
_compileAccessor(optionName) {
const getter = `_${optionName}Getter`;
const setter = `_${optionName}Setter`;
const optionExpr = this.option(`${optionName}Expr`);
if (!optionExpr) {
this[getter] = _common.noop;
this[setter] = _common.noop;
return
}
if ((0, _type.isFunction)(optionExpr)) {
this[setter] = (obj, value) => {
obj[optionExpr()] = value
};
this[getter] = obj => obj[optionExpr()];
return
}
this[getter] = (0, _data.compileGetter)(optionExpr);
this[setter] = (0, _data.compileSetter)(optionExpr)
}
_createDataAdapterAccessors() {
const accessors = {
getters: {},
setters: {}
};
(0, _iterator.each)(this._getAccessors(), (_index, accessor) => {
const getterName = `_${accessor}Getter`;
const setterName = `_${accessor}Setter`;
const newAccessor = "parentId" === accessor ? "parentKey" : accessor;
accessors.getters[newAccessor] = this[getterName];
accessors.setters[newAccessor] = this[setterName]
});
accessors.getters.display = this._displayGetter ?? (itemData => itemData.text);
return accessors
}
_initMarkup() {
super._initMarkup();
this._addWidgetClass()
}
_addWidgetClass() {
this._focusTarget().addClass(this._widgetClass())
}
_widgetClass() {
return ""
}
_renderItemFrame(index, itemData, $itemContainer) {
const $itemFrame = super._renderItemFrame(index, itemData, $itemContainer);
$itemFrame.toggleClass("dx-state-disabled", !!this._disabledGetter(itemData));
return $itemFrame
}
_optionChanged(args) {
switch (args.name) {
case "displayExpr":
case "keyExpr":
this._initAccessors();
this._initDynamicTemplates();
this.repaint();
break;
case "itemsExpr":
case "selectedExpr":
case "disabledExpr":
case "expandedExpr":
case "parentIdExpr":
this._initAccessors();
this._initDataAdapter();
this.repaint();
break;
case "items":
this._initDataAdapter();
super._optionChanged(args);
break;
default:
super._optionChanged(args)
}
}
}
var _default = exports.default = HierarchicalCollectionWidget;