devextreme/cjs/__internal/ui/collection/search_box_controller.js

HTML5 JavaScript Component Suite for Responsive Web Development

/**
 * DevExtreme (cjs/__internal/ui/collection/search_box_controller.js)
 * Version: 25.1.5
 * Build date: Wed Sep 03 2025
 *
 * Copyright (c) 2012 - 2025 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.getOperationBySearchMode = exports.default = void 0;
var _message = _interopRequireDefault(require("../../../common/core/localization/message"));
var _renderer = _interopRequireDefault(require("../../../core/renderer"));
var _deferred = require("../../../core/utils/deferred");
var _m_stubs = require("../../core/utils/m_stubs");

function _interopRequireDefault(e) {
    return e && e.__esModule ? e : {
        default: e
    }
}

function _extends() {
    return _extends = Object.assign ? Object.assign.bind() : function(n) {
        for (var e = 1; e < arguments.length; e++) {
            var t = arguments[e];
            for (var r in t) {
                ({}).hasOwnProperty.call(t, r) && (n[r] = t[r])
            }
        }
        return n
    }, _extends.apply(null, arguments)
}
const getOperationBySearchMode = searchMode => "equals" === searchMode ? "=" : searchMode;
exports.getOperationBySearchMode = getOperationBySearchMode;
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 = (0, _renderer.default)("<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 = _message.default.format("Search");
        return _extends({
            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 = (0, _deferred.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 = (0, _m_stubs.stubComponent)("TextBox");
var _default = exports.default = SearchBoxController;