devextreme
Version:
JavaScript/TypeScript Component Suite for Responsive Web Development
240 lines (239 loc) • 8.6 kB
JavaScript
/**
* DevExtreme (esm/__internal/ui/tree_view/tree_view.search.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 registerComponent from "../../../core/component_registrator";
import $ from "../../../core/renderer";
import SearchBoxController from "../../ui/collection/search_box_controller";
import TextBox from "../../ui/text_box/m_text_box";
import TreeViewBase from "../../ui/tree_view/tree_view.base";
export const TREEVIEW_CLASS_PREFIX = "dx-treeview";
const TREEVIEW_NODE_CONTAINER_CLASS = "dx-treeview-node-container";
SearchBoxController.setEditorClass(TextBox);
class TreeViewSearch extends TreeViewBase {
_getDefaultOptions() {
return Object.assign({}, super._getDefaultOptions(), {
searchValue: "",
searchEnabled: false,
searchEditorOptions: {}
})
}
_getSearchBoxControllerOptions() {
const {
tabIndex: tabIndex,
searchEnabled: searchEnabled,
searchValue: searchValue,
searchTimeout: searchTimeout,
searchEditorOptions: searchEditorOptions
} = this.option();
return {
tabIndex: tabIndex,
searchEnabled: searchEnabled,
searchValue: searchValue,
searchTimeout: searchTimeout,
searchEditorOptions: searchEditorOptions,
onValueChanged: value => {
this.option("searchValue", value)
}
}
}
_init() {
this._searchBoxController = new SearchBoxController;
super._init()
}
_initMarkup() {
this._searchBoxController.render("dx-treeview", this.$element(), this._getSearchBoxControllerOptions(), this._createComponent.bind(this));
super._initMarkup()
}
_getAriaTarget() {
const {
searchEnabled: searchEnabled
} = this.option();
if (searchEnabled) {
return this._itemContainer(true)
}
return super._getAriaTarget()
}
getSearchBoxController() {
return this._searchBoxController
}
_optionChanged(args) {
const {
name: name
} = args;
switch (name) {
case "searchEnabled":
case "searchEditorOptions":
this._invalidate();
break;
case "searchValue":
if (this._showCheckboxes() && this._isRecursiveSelection()) {
this._removeSelection()
}
this._initDataAdapter();
this._updateSearch();
this._repaintContainer();
this.option("focusedElement", null);
break;
case "searchExpr":
this._initDataAdapter();
this.repaint();
break;
case "searchMode": {
const {
expandNodesRecursive: expandNodesRecursive
} = this.option();
if (expandNodesRecursive) {
this._updateDataAdapter()
} else {
this._initDataAdapter()
}
this.repaint();
break
}
case "searchTimeout":
break;
default:
super._optionChanged(args)
}
}
_updateDataAdapter() {
this._setOptionWithoutOptionChange("expandNodesRecursive", false);
this._initDataAdapter();
this._setOptionWithoutOptionChange("expandNodesRecursive", true)
}
_getDataAdapterOptions() {
const {
searchValue: searchValue = "",
searchMode: searchMode = "contains",
searchExpr: searchExpr
} = this.option();
return Object.assign({}, super._getDataAdapterOptions(), {
searchValue: searchValue,
searchMode: searchMode,
searchExpr: searchExpr
})
}
_getNodeContainer() {
return this.$element().find(".dx-treeview-node-container").first()
}
_updateSearch() {
var _this$_searchBoxContr;
const searchBoxControllerOptions = this._getSearchBoxControllerOptions();
null === (_this$_searchBoxContr = this._searchBoxController) || void 0 === _this$_searchBoxContr || _this$_searchBoxContr.updateEditorOptions(searchBoxControllerOptions)
}
_repaintContainer() {
const $container = this._getNodeContainer();
let rootNodes = [];
if ($container.length) {
$container.empty();
rootNodes = this._dataAdapter.getRootNodes();
this._renderEmptyMessage(rootNodes);
this._renderNodes(rootNodes, $container);
this._fireContentReadyAction()
}
}
_updateFocusState(e, isFocused) {
if (this.option("searchEnabled")) {
this._toggleFocusClass(isFocused, this.$element())
}
super._updateFocusState(e, isFocused)
}
_focusTarget() {
const {
searchEnabled: searchEnabled
} = this.option();
return this._itemContainer(searchEnabled)
}
focus() {
if (!this.option("focusedElement") && this.option("searchEnabled")) {
var _this$_searchBoxContr2;
null === (_this$_searchBoxContr2 = this._searchBoxController) || void 0 === _this$_searchBoxContr2 || _this$_searchBoxContr2.focus();
return
}
super.focus()
}
_cleanItemContainer() {
var _this$_searchBoxContr3;
null === (_this$_searchBoxContr3 = this._searchBoxController) || void 0 === _this$_searchBoxContr3 || _this$_searchBoxContr3.remove();
this.$element().empty()
}
_itemContainer(isSearchMode, selectAllEnabled) {
const isSelectAllEnabled = selectAllEnabled ?? this._selectAllEnabled();
const {
items: items = []
} = this.option();
if (isSelectAllEnabled && items.length) {
return this._getNodeContainer()
}
if (this.getScrollable() && isSearchMode) {
return $(this.getScrollable().content())
}
return super._itemContainer()
}
_applyToAllItemContainers(callback) {
if (this.getScrollable()) {
callback($(this.getScrollable().content()))
}
const nodeContainer = this._getNodeContainer();
if (nodeContainer.length) {
callback(nodeContainer)
}
callback(this.$element())
}
_attachClickEvent() {
if (this._selectAllEnabled()) {
this._applyToAllItemContainers(itemsContainer => {
this._detachClickEvent(itemsContainer)
})
}
super._attachClickEvent()
}
_attachHoldEvent() {
if (this._selectAllEnabled()) {
this._applyToAllItemContainers(itemsContainer => {
this._detachHoldEvent(itemsContainer)
})
}
super._attachHoldEvent()
}
_attachContextMenuEvent() {
if (this._selectAllEnabled()) {
this._applyToAllItemContainers(itemsContainer => {
this._detachContextMenuEvent(itemsContainer)
})
}
super._attachContextMenuEvent()
}
_addWidgetClass() {
this.$element().addClass(this._widgetClass())
}
_cleanAria() {
const $element = this.$element();
this.setAria({
role: null,
activedescendant: null
}, $element);
$element.attr("tabIndex", null)
}
_refresh() {
var _this$_searchBoxContr4;
null === (_this$_searchBoxContr4 = this._searchBoxController) || void 0 === _this$_searchBoxContr4 || _this$_searchBoxContr4.resolveValueChange();
super._refresh()
}
_clean() {
this._cleanAria();
super._clean()
}
dispose() {
var _this$_searchBoxContr5;
null === (_this$_searchBoxContr5 = this._searchBoxController) || void 0 === _this$_searchBoxContr5 || _this$_searchBoxContr5.dispose();
super.dispose()
}
}
registerComponent("dxTreeView", TreeViewSearch);
export default TreeViewSearch;