Skip to content

Commit 4423bd5

Browse files
pharret31pharret31
authored
Widget: get rid of using _activeStateUnit, _feedbackHideTimeout, _feedbackShowTimeout as class member (DevExpress#31015)
1 parent bb7ecf5 commit 4423bd5

File tree

24 files changed

+122
-66
lines changed

24 files changed

+122
-66
lines changed

‎packages/devextreme/js/__internal/core/widget/widget.ts‎

Lines changed: 23 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,10 @@ export const FOCUSED_STATE_CLASS = 'dx-state-focused';
3131
export const HOVER_STATE_CLASS = 'dx-state-hover';
3232
const INVISIBLE_STATE_CLASS = 'dx-state-invisible';
3333

34+
export const EMPTY_ACTIVE_STATE_UNIT = '';
35+
const DEFAULT_FEEDBACK_HIDE_TIMEOUT = 400;
36+
const DEFAULT_FEEDBACK_SHOW_TIMEOUT = 30;
37+
3438
export type SupportedKeyHandler = (
3539
e: DxEvent<KeyboardEvent>,
3640
options?: KeyboardKeyDownEvent
@@ -70,12 +74,6 @@ export interface WidgetProperties<TComponent = any> extends WidgetOptions<TCompo
7074
class Widget<
7175
TProperties extends WidgetProperties = WidgetProperties,
7276
> extends DOMComponent<Widget<TProperties>, TProperties> {
73-
public _activeStateUnit!: string;
74-
75-
public _feedbackHideTimeout = 400;
76-
77-
private readonly _feedbackShowTimeout: number = 30;
78-
7977
_contentReadyAction?: ((event?: Record<string, unknown>) => void) | null;
8078

8179
protected _keyboardListenerId?: string | null;
@@ -97,6 +95,18 @@ class Widget<
9795
return options;
9896
}
9997

98+
protected _activeStateUnit(): string {
99+
return EMPTY_ACTIVE_STATE_UNIT;
100+
}
101+
102+
protected _feedbackHideTimeout(): number {
103+
return DEFAULT_FEEDBACK_HIDE_TIMEOUT;
104+
}
105+
106+
protected _feedbackShowTimeout(): number {
107+
return DEFAULT_FEEDBACK_SHOW_TIMEOUT;
108+
}
109+
100110
// eslint-disable-next-line @typescript-eslint/no-unused-vars
101111
_supportedKeys(e?: DxEvent<KeyboardEvent>): SupportedKeys {
102112
return {};
@@ -285,13 +295,13 @@ class Widget<
285295
}
286296

287297
_findActiveTarget($element: dxElementWrapper): dxElementWrapper {
288-
return $element.find(this._activeStateUnit).not(`.${DISABLED_STATE_CLASS}`);
298+
return $element.find(this._activeStateUnit()).not(`.${DISABLED_STATE_CLASS}`);
289299
}
290300

291301
_getActiveElement(): dxElementWrapper {
292302
const activeElement = this._eventBindingTarget();
293303

294-
if (this._activeStateUnit) {
304+
if (this._activeStateUnit()) {
295305
return this._findActiveTarget(activeElement);
296306
}
297307

@@ -434,7 +444,7 @@ class Widget<
434444

435445
_attachHoverEvents(): void {
436446
const { hoverStateEnabled } = this.option();
437-
const selector = this._activeStateUnit;
447+
const selector = this._activeStateUnit();
438448
const namespace = 'UIFeedback';
439449
const $el = this._eventBindingTarget();
440450

@@ -453,7 +463,7 @@ class Widget<
453463

454464
_attachFeedbackEvents(): void {
455465
const { activeStateEnabled } = this.option();
456-
const selector = this._activeStateUnit;
466+
const selector = this._activeStateUnit();
457467
const namespace = 'UIFeedback';
458468
const $el = this._eventBindingTarget();
459469

@@ -468,8 +478,8 @@ class Widget<
468478
{ excludeValidators: ['disabled', 'readOnly'] },
469479
),
470480
{
471-
showTimeout: this._feedbackShowTimeout,
472-
hideTimeout: this._feedbackHideTimeout,
481+
showTimeout: this._feedbackShowTimeout(),
482+
hideTimeout: this._feedbackHideTimeout(),
473483
selector,
474484
namespace,
475485
},
@@ -521,7 +531,7 @@ class Widget<
521531
}
522532

523533
_findHoverTarget($el?: dxElementWrapper): dxElementWrapper | undefined {
524-
return $el?.closest(this._activeStateUnit || this._eventBindingTarget());
534+
return $el?.closest(this._activeStateUnit() || this._eventBindingTarget());
525535
}
526536

527537
_hover($el: dxElementWrapper | undefined, $previous: dxElementWrapper | undefined): void {

‎packages/devextreme/js/__internal/grids/grid_core/m_widget_base.ts‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,15 @@ import Widget from '@js/ui/widget/ui.widget';
77
const GRID_CORE_ROW_SELECTOR = '.dx-row';
88

99
export default class GridCoreWidget<TProperties> extends Widget<TProperties> {
10-
private _activeStateUnit;
11-
1210
private readonly _controllers: any;
1311

1412
private readonly _views: any;
1513

14+
// eslint-disable-next-line class-methods-use-this
15+
protected _activeStateUnit(): string {
16+
return GRID_CORE_ROW_SELECTOR;
17+
}
18+
1619
private _getDefaultOptions() {
1720
// @ts-expect-error
1821
const result = super._getDefaultOptions();
@@ -27,7 +30,6 @@ export default class GridCoreWidget<TProperties> extends Widget<TProperties> {
2730
}
2831

2932
protected _init() {
30-
this._activeStateUnit = GRID_CORE_ROW_SELECTOR;
3133
// @ts-expect-error
3234
super._init();
3335
}

‎packages/devextreme/js/__internal/scheduler/workspaces/m_agenda.ts‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import dateUtils from '@js/core/utils/date';
88
import { extend } from '@js/core/utils/extend';
99
import { each } from '@js/core/utils/iterator';
1010
import { setHeight, setOuterHeight } from '@js/core/utils/size';
11+
import { EMPTY_ACTIVE_STATE_UNIT } from '@ts/core/widget/widget';
1112

1213
import {
1314
DATE_TABLE_CLASS,
@@ -47,6 +48,11 @@ class SchedulerAgenda extends WorkSpace {
4748

4849
_$noDataContainer: any;
4950

51+
// eslint-disable-next-line class-methods-use-this
52+
protected _activeStateUnit(): string {
53+
return EMPTY_ACTIVE_STATE_UNIT;
54+
}
55+
5056
get type() { return VIEWS.AGENDA; }
5157

5258
get renderingStrategy() { return (this.invoke as any)('getLayoutManager').getRenderingStrategyInstance(); }
@@ -57,7 +63,6 @@ class SchedulerAgenda extends WorkSpace {
5763

5864
_init() {
5965
super._init();
60-
this._activeStateUnit = undefined;
6166
}
6267

6368
_getDefaultOptions() {

‎packages/devextreme/js/__internal/scheduler/workspaces/m_work_space.ts‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -273,8 +273,6 @@ class SchedulerWorkSpace extends Widget<WorkspaceOptionsInternal> {
273273

274274
_$timePanel: any;
275275

276-
_activeStateUnit: any;
277-
278276
positionHelper!: PositionHelper;
279277

280278
_$headerPanelContainer: any;
@@ -313,6 +311,13 @@ class SchedulerWorkSpace extends Widget<WorkspaceOptionsInternal> {
313311

314312
renovatedHeaderPanel: any;
315313

314+
readonly viewDirection: 'vertical' | 'horizontal' = 'vertical';
315+
316+
// eslint-disable-next-line class-methods-use-this
317+
protected _activeStateUnit(): string {
318+
return CELL_SELECTOR;
319+
}
320+
316321
// eslint-disable-next-line @typescript-eslint/class-literal-property-style
317322
get type(): string {
318323
return '';
@@ -383,8 +388,6 @@ class SchedulerWorkSpace extends Widget<WorkspaceOptionsInternal> {
383388

384389
get verticalGroupTableClass() { return WORKSPACE_VERTICAL_GROUP_TABLE_CLASS; }
385390

386-
readonly viewDirection: 'vertical' | 'horizontal' = 'vertical';
387-
388391
get renovatedHeaderPanelComponent() { return HeaderPanelComponent; }
389392

390393
get timeZoneCalculator(): any {
@@ -2436,7 +2439,6 @@ class SchedulerWorkSpace extends Widget<WorkspaceOptionsInternal> {
24362439
this._scrollSync = {};
24372440
this._viewDataProvider = null;
24382441
this._cellsSelectionState = null;
2439-
this._activeStateUnit = CELL_SELECTOR;
24402442

24412443
// @ts-expect-error
24422444
super._init();

‎packages/devextreme/js/__internal/ui/accordion.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,10 @@ class Accordion extends CollectionWidgetLiveUpdate<AccordionProperties, Item, Co
5353

5454
_deferredItems!: DeferredObj<unknown>[];
5555

56+
protected _activeStateUnit(): string {
57+
return `.${ACCORDION_ITEM_CLASS}`;
58+
}
59+
5660
_getDefaultOptions(): AccordionProperties {
5761
return {
5862
...super._getDefaultOptions(),
@@ -101,7 +105,6 @@ class Accordion extends CollectionWidgetLiveUpdate<AccordionProperties, Item, Co
101105
_init(): void {
102106
super._init();
103107

104-
this._activeStateUnit = `.${ACCORDION_ITEM_CLASS}`;
105108
const { collapsible, multiple } = this.option();
106109

107110
this.option('selectionRequired', !collapsible);

‎packages/devextreme/js/__internal/ui/calendar/calendar.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -155,6 +155,10 @@ class Calendar<
155155

156156
_valueSelected?: boolean;
157157

158+
protected _activeStateUnit(): string {
159+
return `.${CALENDAR_CELL_CLASS}`;
160+
}
161+
158162
_getDefaultOptions(): TProperties {
159163
return {
160164
...super._getDefaultOptions(),
@@ -547,7 +551,6 @@ class Calendar<
547551
_init(): void {
548552
super._init();
549553

550-
this._activeStateUnit = `.${CALENDAR_CELL_CLASS}`;
551554
this._initSelectionStrategy();
552555
this._correctZoomLevel();
553556
this._initCurrentDate();

‎packages/devextreme/js/__internal/ui/collection/collection_widget.base.ts‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -179,6 +179,10 @@ class CollectionWidget<
179179
}) => void;
180180
};
181181

182+
protected _activeStateUnit(): string {
183+
return `.${ITEM_CLASS}`;
184+
}
185+
182186
_supportedKeys(): SupportedKeys {
183187
const space = (e: DxEvent<KeyboardEvent>): void => {
184188
e.preventDefault();
@@ -282,8 +286,6 @@ class CollectionWidget<
282286
this._initDataController();
283287
super._init();
284288

285-
this._activeStateUnit = `.${ITEM_CLASS}`;
286-
287289
this._cleanRenderedItems();
288290
// @ts-expect-error ts-error
289291
this._refreshDataSource();
@@ -432,7 +434,7 @@ class CollectionWidget<
432434
}
433435

434436
_findActiveTarget($element: dxElementWrapper): dxElementWrapper {
435-
return $element.find(this._activeStateUnit);
437+
return $element.find(this._activeStateUnit());
436438
}
437439

438440
_getActiveItem(last?: boolean): dxElementWrapper {

‎packages/devextreme/js/__internal/ui/context_menu/menu_base.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,10 @@ class MenuBase<
8181
// eslint-disable-next-line no-restricted-globals
8282
_showSubmenusTimeout?: ReturnType<typeof setTimeout>;
8383

84+
protected _activeStateUnit(): string {
85+
return `.${ITEM_CLASS}`;
86+
}
87+
8488
_getDefaultOptions(): TProperties {
8589
return {
8690
...super._getDefaultOptions(),
@@ -176,7 +180,6 @@ class MenuBase<
176180

177181
_init(): void {
178182
super._init();
179-
this._activeStateUnit = `.${ITEM_CLASS}`;
180183

181184
this._renderSelectedItem();
182185
this._initActions();

‎packages/devextreme/js/__internal/ui/gallery.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -150,6 +150,10 @@ class Gallery extends CollectionWidget<GalleryProperties, Item, CollectionItemKe
150150

151151
_$indicator?: dxElementWrapper;
152152

153+
protected _activeStateUnit(): string {
154+
return GALLERY_ITEM_SELECTOR;
155+
}
156+
153157
_getDefaultOptions(): GalleryProperties {
154158
return {
155159
...super._getDefaultOptions(),
@@ -196,7 +200,6 @@ class Gallery extends CollectionWidget<GalleryProperties, Item, CollectionItemKe
196200

197201
const { loop } = this.option();
198202

199-
this._activeStateUnit = GALLERY_ITEM_SELECTOR;
200203
this.option('loopItemFocus', loop);
201204
}
202205

‎packages/devextreme/js/__internal/ui/list/list.base.ts‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -162,6 +162,10 @@ export class ListBase extends CollectionWidget<ListBaseProperties, Item> {
162162
// eslint-disable-next-line @typescript-eslint/no-explicit-any
163163
_selectionChangeEventInstance?: any;
164164

165+
protected _feedbackShowTimeout(): number {
166+
return LIST_FEEDBACK_SHOW_TIMEOUT;
167+
}
168+
165169
_supportedKeys(): SupportedKeys {
166170
return {
167171
...super._supportedKeys(),
@@ -495,7 +499,7 @@ export class ListBase extends CollectionWidget<ListBaseProperties, Item> {
495499
return true;
496500
}
497501

498-
_updateActiveStateUnit(): void {
502+
protected _activeStateUnit(): string {
499503
const { collapsibleGroups } = this.option();
500504

501505
const selectors = [
@@ -507,20 +511,17 @@ export class ListBase extends CollectionWidget<ListBaseProperties, Item> {
507511
selectors.push(`.${LIST_GROUP_HEADER_CLASS}`);
508512
}
509513

510-
this._activeStateUnit = selectors.join(',');
514+
return selectors.join(',');
511515
}
512516

513517
_init(): void {
514518
super._init();
515519

516-
this._updateActiveStateUnit();
517520
this._dataController.resetDataSourcePageIndex();
518521
this._$container = this.$element();
519522

520523
this._$listContainer = $('<div>').addClass(LIST_ITEMS_CLASS);
521524
this._initScrollView();
522-
// @ts-expect-error ts-error
523-
this._feedbackShowTimeout = LIST_FEEDBACK_SHOW_TIMEOUT;
524525
this._createGroupRenderAction();
525526
}
526527

@@ -1364,7 +1365,6 @@ export class ListBase extends CollectionWidget<ListBaseProperties, Item> {
13641365
this._invalidate();
13651366
break;
13661367
case 'collapsibleGroups':
1367-
this._updateActiveStateUnit();
13681368
this._invalidate();
13691369
break;
13701370
case 'wrapItemText':

0 commit comments

Comments
 (0)