Skip to content

Commit 6a669bb

Browse files
EugeniyKiyashkoEugeniyKiyashko
committed
SearchBoxMixin: fix errors after migration to TS
1 parent 394c17a commit 6a669bb

File tree

2 files changed

+158
-160
lines changed

2 files changed

+158
-160
lines changed

‎packages/devextreme/js/__internal/ui/collection/m_search_box_mixin.ts

Lines changed: 155 additions & 160 deletions
Original file line numberDiff line numberDiff line change
@@ -1,183 +1,178 @@
1-
import $ from '../../core/renderer';
2-
import { extend } from '../../core/utils/extend';
3-
import messageLocalization from '../../common/core/localization/message';
4-
import errors from '../widget/ui.errors';
5-
import { Deferred } from '../../core/utils/deferred';
6-
import { stubComponent } from '../../core/utils/stubs';
1+
import messageLocalization from '@js/common/core/localization/message';
2+
import $ from '@js/core/renderer';
3+
import { Deferred } from '@js/core/utils/deferred';
4+
import { extend } from '@js/core/utils/extend';
5+
import { stubComponent } from '@js/core/utils/stubs';
6+
import errors from '@js/ui/widget/ui.errors';
77

88
let EditorClass = stubComponent('TextBox');
99

1010
export default {
11-
_getDefaultOptions: function() {
12-
return extend(this.callBase(), {
13-
searchMode: '',
14-
15-
searchExpr: null,
16-
17-
searchValue: '',
18-
19-
searchEnabled: false,
20-
21-
searchEditorOptions: {},
22-
23-
});
24-
},
25-
26-
_initMarkup: function() {
27-
this._renderSearch();
28-
this.callBase();
29-
},
30-
31-
_renderSearch: function() {
32-
const $element = this.$element();
33-
const searchEnabled = this.option('searchEnabled');
34-
const searchBoxClassName = this._addWidgetPrefix('search');
35-
const rootElementClassName = this._addWidgetPrefix('with-search');
36-
37-
if(!searchEnabled) {
38-
$element.removeClass(rootElementClassName);
39-
this._removeSearchBox();
40-
return;
41-
}
11+
_getDefaultOptions() {
12+
return extend(this.callBase(), {
13+
searchMode: '',
14+
searchExpr: null,
15+
searchValue: '',
16+
searchEnabled: false,
17+
searchEditorOptions: {},
18+
});
19+
},
20+
21+
_initMarkup(): void {
22+
this._renderSearch();
23+
this.callBase();
24+
},
25+
26+
_renderSearch(): void {
27+
const $element = this.$element();
28+
const searchEnabled = this.option('searchEnabled');
29+
const searchBoxClassName = this._addWidgetPrefix('search');
30+
const rootElementClassName = this._addWidgetPrefix('with-search');
31+
32+
if (!searchEnabled) {
33+
$element.removeClass(rootElementClassName);
34+
this._removeSearchBox();
35+
return;
36+
}
4237

43-
const editorOptions = this._getSearchEditorOptions();
38+
const editorOptions = this._getSearchEditorOptions();
4439

45-
if(this._searchEditor) {
46-
this._searchEditor.option(editorOptions);
40+
if (this._searchEditor) {
41+
this._searchEditor.option(editorOptions);
42+
} else {
43+
$element.addClass(rootElementClassName);
44+
this._$searchEditorElement = $('<div>').addClass(searchBoxClassName).prependTo($element);
45+
this._searchEditor = this._createComponent(this._$searchEditorElement, EditorClass, editorOptions);
46+
}
47+
},
48+
49+
_removeSearchBox(): void {
50+
this._$searchEditorElement && this._$searchEditorElement.remove();
51+
delete this._$searchEditorElement;
52+
delete this._searchEditor;
53+
},
54+
55+
_getSearchEditorOptions() {
56+
const that = this;
57+
const userEditorOptions = that.option('searchEditorOptions');
58+
const searchText = messageLocalization.format('Search');
59+
60+
return extend({
61+
mode: 'search',
62+
placeholder: searchText,
63+
tabIndex: that.option('tabIndex'),
64+
value: that.option('searchValue'),
65+
valueChangeEvent: 'input',
66+
inputAttr: {
67+
'aria-label': searchText,
68+
},
69+
onValueChanged(e) {
70+
const searchTimeout = that.option('searchTimeout');
71+
that._valueChangeDeferred = Deferred();
72+
clearTimeout(that._valueChangeTimeout);
73+
74+
that._valueChangeDeferred.done(function () {
75+
this.option('searchValue', e.value);
76+
}.bind(that));
77+
78+
if (e.event && e.event.type === 'input' && searchTimeout) {
79+
that._valueChangeTimeout = setTimeout(() => {
80+
that._valueChangeDeferred.resolve();
81+
}, searchTimeout);
4782
} else {
48-
$element.addClass(rootElementClassName);
49-
this._$searchEditorElement = $('<div>').addClass(searchBoxClassName).prependTo($element);
50-
this._searchEditor = this._createComponent(this._$searchEditorElement, EditorClass, editorOptions);
51-
}
52-
},
53-
54-
_removeSearchBox: function() {
55-
this._$searchEditorElement && this._$searchEditorElement.remove();
56-
delete this._$searchEditorElement;
57-
delete this._searchEditor;
58-
},
59-
60-
_getSearchEditorOptions: function() {
61-
const that = this;
62-
const userEditorOptions = that.option('searchEditorOptions');
63-
const searchText = messageLocalization.format('Search');
64-
65-
return extend({
66-
mode: 'search',
67-
placeholder: searchText,
68-
tabIndex: that.option('tabIndex'),
69-
value: that.option('searchValue'),
70-
valueChangeEvent: 'input',
71-
inputAttr: {
72-
'aria-label': searchText
73-
},
74-
onValueChanged: function(e) {
75-
const searchTimeout = that.option('searchTimeout');
76-
that._valueChangeDeferred = new Deferred();
77-
clearTimeout(that._valueChangeTimeout);
78-
79-
that._valueChangeDeferred.done(function() {
80-
this.option('searchValue', e.value);
81-
}.bind(that));
82-
83-
if(e.event && e.event.type === 'input' && searchTimeout) {
84-
that._valueChangeTimeout = setTimeout(function() {
85-
that._valueChangeDeferred.resolve();
86-
}, searchTimeout);
87-
} else {
88-
that._valueChangeDeferred.resolve();
89-
}
90-
}
91-
}, userEditorOptions);
92-
},
93-
94-
_getAriaTarget: function() {
95-
if(this.option('searchEnabled')) {
96-
return this._itemContainer(true);
83+
that._valueChangeDeferred.resolve();
9784
}
98-
return this.callBase();
99-
},
85+
},
86+
}, userEditorOptions);
87+
},
10088

101-
_focusTarget: function() {
102-
if(this.option('searchEnabled')) {
103-
return this._itemContainer(true);
104-
}
89+
_getAriaTarget() {
90+
if (this.option('searchEnabled')) {
91+
return this._itemContainer(true);
92+
}
93+
return this.callBase();
94+
},
95+
96+
_focusTarget() {
97+
if (this.option('searchEnabled')) {
98+
return this._itemContainer(true);
99+
}
105100

106-
return this.callBase();
107-
},
101+
return this.callBase();
102+
},
108103

109-
_updateFocusState: function(e, isFocused) {
110-
if(this.option('searchEnabled')) {
111-
this._toggleFocusClass(isFocused, this.$element());
104+
_updateFocusState(e, isFocused): void {
105+
if (this.option('searchEnabled')) {
106+
this._toggleFocusClass(isFocused, this.$element());
107+
}
108+
this.callBase(e, isFocused);
109+
},
110+
111+
getOperationBySearchMode(searchMode) {
112+
return searchMode === 'equals' ? '=' : searchMode;
113+
},
114+
115+
_optionChanged(args) {
116+
switch (args.name) {
117+
case 'searchEnabled':
118+
case 'searchEditorOptions':
119+
this._invalidate();
120+
break;
121+
case 'searchExpr':
122+
case 'searchMode':
123+
case 'searchValue':
124+
if (!this._dataSource) {
125+
errors.log('W1009');
126+
return;
112127
}
113-
this.callBase(e, isFocused);
114-
},
115-
116-
getOperationBySearchMode: function(searchMode) {
117-
return searchMode === 'equals' ? '=' : searchMode;
118-
},
119-
120-
_optionChanged: function(args) {
121-
switch(args.name) {
122-
case 'searchEnabled':
123-
case 'searchEditorOptions':
124-
this._invalidate();
125-
break;
126-
case 'searchExpr':
127-
case 'searchMode':
128-
case 'searchValue':
129-
if(!this._dataSource) {
130-
errors.log('W1009');
131-
return;
132-
}
133-
if(args.name === 'searchMode') {
134-
this._dataSource.searchOperation(this.getOperationBySearchMode(args.value));
135-
} else {
136-
this._dataSource[args.name](args.value);
137-
}
138-
this._dataSource.load();
139-
break;
140-
case 'searchTimeout':
141-
break;
142-
default:
143-
this.callBase(args);
128+
if (args.name === 'searchMode') {
129+
this._dataSource.searchOperation(this.getOperationBySearchMode(args.value));
130+
} else {
131+
this._dataSource[args.name](args.value);
144132
}
145-
},
133+
this._dataSource.load();
134+
break;
135+
case 'searchTimeout':
136+
break;
137+
default:
138+
this.callBase(args);
139+
}
140+
},
146141

147-
focus: function() {
148-
if(!this.option('focusedElement') && this.option('searchEnabled')) {
149-
this._searchEditor && this._searchEditor.focus();
150-
return;
151-
}
142+
focus() {
143+
if (!this.option('focusedElement') && this.option('searchEnabled')) {
144+
this._searchEditor && this._searchEditor.focus();
145+
return;
146+
}
152147

153-
this.callBase();
154-
},
148+
this.callBase();
149+
},
155150

156-
_cleanAria: function() {
157-
const $element = this.$element();
151+
_cleanAria(): void {
152+
const $element = this.$element();
158153

159-
this.setAria({
160-
'role': null,
161-
'activedescendant': null
162-
}, $element);
154+
this.setAria({
155+
role: null,
156+
activedescendant: null,
157+
}, $element);
163158

164-
$element.attr('tabIndex', null);
165-
},
159+
$element.attr('tabIndex', null);
160+
},
166161

167-
_clean() {
168-
this.callBase();
169-
this._cleanAria();
170-
},
162+
_clean(): void {
163+
this.callBase();
164+
this._cleanAria();
165+
},
171166

172-
_refresh: function() {
173-
if(this._valueChangeDeferred) {
174-
this._valueChangeDeferred.resolve();
175-
}
167+
_refresh(): void {
168+
if (this._valueChangeDeferred) {
169+
this._valueChangeDeferred.resolve();
170+
}
176171

177-
this.callBase();
178-
},
172+
this.callBase();
173+
},
179174

180-
setEditorClass: function(value) {
181-
EditorClass = value;
182-
}
175+
setEditorClass(value): void {
176+
EditorClass = value;
177+
},
183178
};

‎packages/devextreme/js/ui/widget/ui.search_box_mixin.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import SearchBoxMixin from '../../__internal/ui/collection/m_search_box_mixin';
2+
3+
export default SearchBoxMixin;

0 commit comments

Comments
 (0)