devextreme
Version:
JavaScript/TypeScript Component Suite for Responsive Web Development
109 lines (108 loc) • 4.58 kB
JavaScript
/**
* DevExtreme (esm/__internal/ui/collection/search_box_controller.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 $ from "../../../core/renderer";
import {
Deferred
} from "../../../core/utils/deferred";
import {
stubComponent
} from "../../core/utils/m_stubs";
export const getOperationBySearchMode = searchMode => "equals" === searchMode ? "=" : searchMode;
class SearchBoxController {
static setEditorClass(value) {
SearchBoxController.EditorClass = value
}
render(widgetPrefix, $container, options, createEditorCallback) {
const rootElementClassName = `${widgetPrefix}-with-search`;
const searchBoxClassName = `${widgetPrefix}-search`;
const {
searchEnabled: searchEnabled,
onValueChanged: onValueChanged
} = options;
this._onSearchBoxValueChanged = onValueChanged;
if (!searchEnabled) {
$container.removeClass(rootElementClassName);
this.remove();
return
}
if (this._editor) {
this.updateEditorOptions(options)
} else {
const editorOptions = this._getEditorOptions(options);
$container.addClass(rootElementClassName);
const $editor = $("<div>").addClass(searchBoxClassName).prependTo($container);
this._editor = createEditorCallback($editor, SearchBoxController.EditorClass, editorOptions)
}
}
updateEditorOptions(options) {
var _this$_editor;
const editorOptions = this._getEditorOptions(options);
null === (_this$_editor = this._editor) || void 0 === _this$_editor || _this$_editor.option(editorOptions)
}
_getEditorOptions(options) {
const {
tabIndex: tabIndex,
searchValue: searchValue,
searchEditorOptions: searchEditorOptions,
searchTimeout: searchTimeout
} = options;
const placeholder = messageLocalization.format("Search");
return Object.assign({
mode: "search",
placeholder: placeholder,
tabIndex: tabIndex,
value: searchValue,
valueChangeEvent: "input",
inputAttr: {
"aria-label": placeholder
},
onValueChanged: e => {
this._onValueChanged(e, searchTimeout)
}
}, searchEditorOptions)
}
_onValueChanged(e) {
var _e$event;
let searchTimeout = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : 0;
this._valueChangeDeferred = Deferred();
clearTimeout(this._valueChangeTimeout);
this._valueChangeDeferred.done((() => {
var _this$_onSearchBoxVal;
null === (_this$_onSearchBoxVal = this._onSearchBoxValueChanged) || void 0 === _this$_onSearchBoxVal || _this$_onSearchBoxVal.call(this, e.value)
}));
if ("input" === (null === (_e$event = e.event) || void 0 === _e$event ? void 0 : _e$event.type) && searchTimeout) {
this._valueChangeTimeout = setTimeout((() => {
var _this$_valueChangeDef;
null === (_this$_valueChangeDef = this._valueChangeDeferred) || void 0 === _this$_valueChangeDef || _this$_valueChangeDef.resolve()
}), searchTimeout)
} else {
var _this$_valueChangeDef2;
null === (_this$_valueChangeDef2 = this._valueChangeDeferred) || void 0 === _this$_valueChangeDef2 || _this$_valueChangeDef2.resolve()
}
}
resolveValueChange() {
var _this$_valueChangeDef3;
null === (_this$_valueChangeDef3 = this._valueChangeDeferred) || void 0 === _this$_valueChangeDef3 || _this$_valueChangeDef3.resolve()
}
remove() {
var _this$_editor2;
null === (_this$_editor2 = this._editor) || void 0 === _this$_editor2 || _this$_editor2.$element().remove();
this._editor = null
}
focus() {
var _this$_editor3;
null === (_this$_editor3 = this._editor) || void 0 === _this$_editor3 || _this$_editor3.focus()
}
dispose() {
this.remove()
}
}
SearchBoxController.EditorClass = stubComponent("TextBox");
export default SearchBoxController;