devextreme
Version:
HTML5 JavaScript Component Suite for Responsive Web Development
179 lines (155 loc) • 5.52 kB
JavaScript
"use strict";
var $ = require("../../core/renderer"),
extend = require("../../core/utils/extend").extend,
messageLocalization = require("../../localization/message"),
TextBox = require("../text_box"),
errors = require("../widget/ui.errors");
/**
* @name SearchBoxMixin
* @publicName SearchBoxMixin
* @module ui/widget/ui.search_box_mixin
* @export default
* @hidden
*/
module.exports = {
_getDefaultOptions: function _getDefaultOptions() {
return extend(this.callBase(), {
/**
* @name SearchBoxMixinOptions.searchMode
* @publicName searchMode
* @type Enums.CollectionSearchMode
* @default 'contains'
*/
searchMode: "",
/**
* @name SearchBoxMixinOptions.searchExpr
* @publicName searchExpr
* @type getter|Array<getter>
* @default null
*/
searchExpr: null,
/**
* @name SearchBoxMixinOptions.searchValue
* @type String
* @publicName searchValue
* @default ""
*/
searchValue: "",
/**
* @name SearchBoxMixinOptions.searchEnabled
* @publicName searchEnabled
* @type boolean
* @default false
*/
searchEnabled: false,
/**
* @name SearchBoxMixinOptions.searchEditorOptions
* @publicName searchEditorOptions
* @type dxTextBoxOptions
* @default {}
*/
searchEditorOptions: {}
/**
* @name SearchBoxMixinOptions.searchTimeout
* @publicName searchTimeout
* @type number
* @default undefined
*/
});
},
_initMarkup: function _initMarkup() {
this._renderSearch();
this.callBase();
},
_renderSearch: function _renderSearch() {
var editorOptions,
$element = this.$element(),
searchEnabled = this.option("searchEnabled"),
searchBoxClassName = this._addWidgetPrefix("search"),
rootElementClassName = this._addWidgetPrefix("with-search");
if (!searchEnabled) {
$element.removeClass(rootElementClassName);
this._removeSearchBox();
return;
}
editorOptions = this._getSearchEditorOptions();
if (this._searchEditor) {
this._searchEditor.option(editorOptions);
} else {
$element.addClass(rootElementClassName);
this._$searchEditorElement = $("<div>").addClass(searchBoxClassName).prependTo($element);
this._searchEditor = this._createComponent(this._$searchEditorElement, TextBox, editorOptions);
}
},
_removeSearchBox: function _removeSearchBox() {
this._$searchEditorElement && this._$searchEditorElement.remove();
delete this._$searchEditorElement;
delete this._searchEditor;
},
_getSearchEditorOptions: function _getSearchEditorOptions() {
var that = this,
userEditorOptions = that.option("searchEditorOptions");
return extend({
mode: "search",
placeholder: messageLocalization.format("Search"),
tabIndex: that.option("tabIndex"),
value: that.option("searchValue"),
valueChangeEvent: "input",
onValueChanged: function onValueChanged(e) {
var searchTimeout = that.option("searchTimeout");
clearTimeout(that._valueChangeTimeout);
if (e.event && e.event.type === "input" && searchTimeout) {
that._valueChangeTimeout = setTimeout(function () {
that.option("searchValue", e.value);
}, searchTimeout);
} else {
that.option("searchValue", e.value);
}
}
}, userEditorOptions);
},
_getAriaTarget: function _getAriaTarget() {
return this.$element();
},
_focusTarget: function _focusTarget() {
if (this.option("searchEnabled")) {
return this._itemContainer();
}
return this.callBase();
},
_updateFocusState: function _updateFocusState(e, isFocused) {
if (this.option("searchEnabled")) {
this._toggleFocusClass(isFocused, this.$element());
}
this.callBase(e, isFocused);
},
_optionChanged: function _optionChanged(args) {
switch (args.name) {
case "searchEnabled":
case "searchEditorOptions":
this._invalidate();
break;
case "searchExpr":
case "searchMode":
case "searchValue":
if (!this._dataSource) {
errors.log("W1009");
return;
}
this._dataSource[args.name === "searchMode" ? "searchOperation" : args.name](args.value);
this._dataSource.load();
break;
case "searchTimeout":
break;
default:
this.callBase(args);
}
},
focus: function focus() {
if (!this.option("focusedElement") && this.option("searchEnabled")) {
this._searchEditor && this._searchEditor.focus();
return;
}
this.callBase();
}
};