-
Notifications
You must be signed in to change notification settings - Fork 611
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
SearchBoxMixin: fix errors after migration to TS
- Loading branch information
1 parent
7311780
commit 7e09670
Showing
2 changed files
with
158 additions
and
160 deletions.
There are no files selected for viewing
315 changes: 155 additions & 160 deletions
315
packages/devextreme/js/__internal/ui/collection/m_search_box_mixin.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,183 +1,178 @@ | ||
| import $ from '../../core/renderer'; | ||
| import { extend } from '../../core/utils/extend'; | ||
| import messageLocalization from '../../common/core/localization/message'; | ||
| import errors from '../widget/ui.errors'; | ||
| import { Deferred } from '../../core/utils/deferred'; | ||
| import { stubComponent } from '../../core/utils/stubs'; | ||
| import messageLocalization from '@js/common/core/localization/message'; | ||
| import $ from '@js/core/renderer'; | ||
| import { Deferred } from '@js/core/utils/deferred'; | ||
| import { extend } from '@js/core/utils/extend'; | ||
| import { stubComponent } from '@js/core/utils/stubs'; | ||
| import errors from '@js/ui/widget/ui.errors'; | ||
|
|
||
| let EditorClass = stubComponent('TextBox'); | ||
|
|
||
| export default { | ||
| _getDefaultOptions: function() { | ||
| return extend(this.callBase(), { | ||
| searchMode: '', | ||
|
|
||
| searchExpr: null, | ||
|
|
||
| searchValue: '', | ||
|
|
||
| searchEnabled: false, | ||
|
|
||
| searchEditorOptions: {}, | ||
|
|
||
| }); | ||
| }, | ||
|
|
||
| _initMarkup: function() { | ||
| this._renderSearch(); | ||
| this.callBase(); | ||
| }, | ||
|
|
||
| _renderSearch: function() { | ||
| const $element = this.$element(); | ||
| const searchEnabled = this.option('searchEnabled'); | ||
| const searchBoxClassName = this._addWidgetPrefix('search'); | ||
| const rootElementClassName = this._addWidgetPrefix('with-search'); | ||
|
|
||
| if(!searchEnabled) { | ||
| $element.removeClass(rootElementClassName); | ||
| this._removeSearchBox(); | ||
| return; | ||
| } | ||
| _getDefaultOptions() { | ||
| return extend(this.callBase(), { | ||
| searchMode: '', | ||
| searchExpr: null, | ||
| searchValue: '', | ||
| searchEnabled: false, | ||
| searchEditorOptions: {}, | ||
| }); | ||
| }, | ||
|
|
||
| _initMarkup(): void { | ||
| this._renderSearch(); | ||
| this.callBase(); | ||
| }, | ||
|
|
||
| _renderSearch(): void { | ||
| const $element = this.$element(); | ||
| const searchEnabled = this.option('searchEnabled'); | ||
| const searchBoxClassName = this._addWidgetPrefix('search'); | ||
| const rootElementClassName = this._addWidgetPrefix('with-search'); | ||
|
|
||
| if (!searchEnabled) { | ||
| $element.removeClass(rootElementClassName); | ||
| this._removeSearchBox(); | ||
| return; | ||
| } | ||
|
|
||
| const editorOptions = this._getSearchEditorOptions(); | ||
| const editorOptions = this._getSearchEditorOptions(); | ||
|
|
||
| if(this._searchEditor) { | ||
| this._searchEditor.option(editorOptions); | ||
| if (this._searchEditor) { | ||
| this._searchEditor.option(editorOptions); | ||
| } else { | ||
| $element.addClass(rootElementClassName); | ||
| this._$searchEditorElement = $('<div>').addClass(searchBoxClassName).prependTo($element); | ||
| this._searchEditor = this._createComponent(this._$searchEditorElement, EditorClass, editorOptions); | ||
| } | ||
| }, | ||
|
|
||
| _removeSearchBox(): void { | ||
| this._$searchEditorElement && this._$searchEditorElement.remove(); | ||
| delete this._$searchEditorElement; | ||
| delete this._searchEditor; | ||
| }, | ||
|
|
||
| _getSearchEditorOptions() { | ||
| const that = this; | ||
| const userEditorOptions = that.option('searchEditorOptions'); | ||
| const searchText = messageLocalization.format('Search'); | ||
|
|
||
| return extend({ | ||
| mode: 'search', | ||
| placeholder: searchText, | ||
| tabIndex: that.option('tabIndex'), | ||
| value: that.option('searchValue'), | ||
| valueChangeEvent: 'input', | ||
| inputAttr: { | ||
| 'aria-label': searchText, | ||
| }, | ||
| onValueChanged(e) { | ||
| const searchTimeout = that.option('searchTimeout'); | ||
| that._valueChangeDeferred = Deferred(); | ||
| clearTimeout(that._valueChangeTimeout); | ||
|
|
||
| that._valueChangeDeferred.done(function () { | ||
| this.option('searchValue', e.value); | ||
| }.bind(that)); | ||
|
|
||
| if (e.event && e.event.type === 'input' && searchTimeout) { | ||
| that._valueChangeTimeout = setTimeout(() => { | ||
| that._valueChangeDeferred.resolve(); | ||
| }, searchTimeout); | ||
| } else { | ||
| $element.addClass(rootElementClassName); | ||
| this._$searchEditorElement = $('<div>').addClass(searchBoxClassName).prependTo($element); | ||
| this._searchEditor = this._createComponent(this._$searchEditorElement, EditorClass, editorOptions); | ||
| } | ||
| }, | ||
|
|
||
| _removeSearchBox: function() { | ||
| this._$searchEditorElement && this._$searchEditorElement.remove(); | ||
| delete this._$searchEditorElement; | ||
| delete this._searchEditor; | ||
| }, | ||
|
|
||
| _getSearchEditorOptions: function() { | ||
| const that = this; | ||
| const userEditorOptions = that.option('searchEditorOptions'); | ||
| const searchText = messageLocalization.format('Search'); | ||
|
|
||
| return extend({ | ||
| mode: 'search', | ||
| placeholder: searchText, | ||
| tabIndex: that.option('tabIndex'), | ||
| value: that.option('searchValue'), | ||
| valueChangeEvent: 'input', | ||
| inputAttr: { | ||
| 'aria-label': searchText | ||
| }, | ||
| onValueChanged: function(e) { | ||
| const searchTimeout = that.option('searchTimeout'); | ||
| that._valueChangeDeferred = new Deferred(); | ||
| clearTimeout(that._valueChangeTimeout); | ||
|
|
||
| that._valueChangeDeferred.done(function() { | ||
| this.option('searchValue', e.value); | ||
| }.bind(that)); | ||
|
|
||
| if(e.event && e.event.type === 'input' && searchTimeout) { | ||
| that._valueChangeTimeout = setTimeout(function() { | ||
| that._valueChangeDeferred.resolve(); | ||
| }, searchTimeout); | ||
| } else { | ||
| that._valueChangeDeferred.resolve(); | ||
| } | ||
| } | ||
| }, userEditorOptions); | ||
| }, | ||
|
|
||
| _getAriaTarget: function() { | ||
| if(this.option('searchEnabled')) { | ||
| return this._itemContainer(true); | ||
| that._valueChangeDeferred.resolve(); | ||
| } | ||
| return this.callBase(); | ||
| }, | ||
| }, | ||
| }, userEditorOptions); | ||
| }, | ||
|
|
||
| _focusTarget: function() { | ||
| if(this.option('searchEnabled')) { | ||
| return this._itemContainer(true); | ||
| } | ||
| _getAriaTarget() { | ||
| if (this.option('searchEnabled')) { | ||
| return this._itemContainer(true); | ||
| } | ||
| return this.callBase(); | ||
| }, | ||
|
|
||
| _focusTarget() { | ||
| if (this.option('searchEnabled')) { | ||
| return this._itemContainer(true); | ||
| } | ||
|
|
||
| return this.callBase(); | ||
| }, | ||
| return this.callBase(); | ||
| }, | ||
|
|
||
| _updateFocusState: function(e, isFocused) { | ||
| if(this.option('searchEnabled')) { | ||
| this._toggleFocusClass(isFocused, this.$element()); | ||
| _updateFocusState(e, isFocused): void { | ||
| if (this.option('searchEnabled')) { | ||
| this._toggleFocusClass(isFocused, this.$element()); | ||
| } | ||
| this.callBase(e, isFocused); | ||
| }, | ||
|
|
||
| getOperationBySearchMode(searchMode) { | ||
| return searchMode === 'equals' ? '=' : searchMode; | ||
| }, | ||
|
|
||
| _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.callBase(e, isFocused); | ||
| }, | ||
|
|
||
| getOperationBySearchMode: function(searchMode) { | ||
| return searchMode === 'equals' ? '=' : searchMode; | ||
| }, | ||
|
|
||
| _optionChanged: function(args) { | ||
| switch(args.name) { | ||
| case 'searchEnabled': | ||
| case 'searchEditorOptions': | ||
| this._invalidate(); | ||
| break; | ||
| case 'searchExpr': | ||
| case 'searchMode': | ||
| case 'searchValue': | ||
| if(!this._dataSource) { | ||
| errors.log('W1009'); | ||
| return; | ||
| } | ||
| if(args.name === 'searchMode') { | ||
| this._dataSource.searchOperation(this.getOperationBySearchMode(args.value)); | ||
| } else { | ||
| this._dataSource[args.name](args.value); | ||
| } | ||
| this._dataSource.load(); | ||
| break; | ||
| case 'searchTimeout': | ||
| break; | ||
| default: | ||
| this.callBase(args); | ||
| if (args.name === 'searchMode') { | ||
| this._dataSource.searchOperation(this.getOperationBySearchMode(args.value)); | ||
| } else { | ||
| this._dataSource[args.name](args.value); | ||
| } | ||
| }, | ||
| this._dataSource.load(); | ||
| break; | ||
| case 'searchTimeout': | ||
| break; | ||
| default: | ||
| this.callBase(args); | ||
| } | ||
| }, | ||
|
|
||
| focus: function() { | ||
| if(!this.option('focusedElement') && this.option('searchEnabled')) { | ||
| this._searchEditor && this._searchEditor.focus(); | ||
| return; | ||
| } | ||
| focus() { | ||
| if (!this.option('focusedElement') && this.option('searchEnabled')) { | ||
| this._searchEditor && this._searchEditor.focus(); | ||
| return; | ||
| } | ||
|
|
||
| this.callBase(); | ||
| }, | ||
| this.callBase(); | ||
| }, | ||
|
|
||
| _cleanAria: function() { | ||
| const $element = this.$element(); | ||
| _cleanAria(): void { | ||
| const $element = this.$element(); | ||
|
|
||
| this.setAria({ | ||
| 'role': null, | ||
| 'activedescendant': null | ||
| }, $element); | ||
| this.setAria({ | ||
| role: null, | ||
| activedescendant: null, | ||
| }, $element); | ||
|
|
||
| $element.attr('tabIndex', null); | ||
| }, | ||
| $element.attr('tabIndex', null); | ||
| }, | ||
|
|
||
| _clean() { | ||
| this.callBase(); | ||
| this._cleanAria(); | ||
| }, | ||
| _clean(): void { | ||
| this.callBase(); | ||
| this._cleanAria(); | ||
| }, | ||
|
|
||
| _refresh: function() { | ||
| if(this._valueChangeDeferred) { | ||
| this._valueChangeDeferred.resolve(); | ||
| } | ||
| _refresh(): void { | ||
| if (this._valueChangeDeferred) { | ||
| this._valueChangeDeferred.resolve(); | ||
| } | ||
|
|
||
| this.callBase(); | ||
| }, | ||
| this.callBase(); | ||
| }, | ||
|
|
||
| setEditorClass: function(value) { | ||
| EditorClass = value; | ||
| } | ||
| setEditorClass(value): void { | ||
| EditorClass = value; | ||
| }, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| import SearchBoxMixin from '../../__internal/ui/collection/m_search_box_mixin'; | ||
|
|
||
| export default SearchBoxMixin; |