Widget: get rid of using _activeStateUnit, _feedbackHideTimeout, _feedbackShowTimeout as class member (#31015)

Author: pharret31

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

@@ -31,6 +31,10 @@ export const FOCUSED_STATE_CLASS = 'dx-state-focused';
 export const HOVER_STATE_CLASS = 'dx-state-hover';
 const INVISIBLE_STATE_CLASS = 'dx-state-invisible';
 
+export const EMPTY_ACTIVE_STATE_UNIT = '';
+const DEFAULT_FEEDBACK_HIDE_TIMEOUT = 400;
+const DEFAULT_FEEDBACK_SHOW_TIMEOUT = 30;
+
 export type SupportedKeyHandler = (
   e: DxEvent<KeyboardEvent>,
   options?: KeyboardKeyDownEvent
@@ -70,12 +74,6 @@ export interface WidgetProperties<TComponent = any> extends WidgetOptions<TCompo
 class Widget<
   TProperties extends WidgetProperties = WidgetProperties,
 > extends DOMComponent<Widget<TProperties>, TProperties> {
-  public _activeStateUnit!: string;
-
-  public _feedbackHideTimeout = 400;
-
-  private readonly _feedbackShowTimeout: number = 30;
-
   _contentReadyAction?: ((event?: Record<string, unknown>) => void) | null;
 
   protected _keyboardListenerId?: string | null;
@@ -97,6 +95,18 @@ class Widget<
     return options;
   }
 
+  protected _activeStateUnit(): string {
+    return EMPTY_ACTIVE_STATE_UNIT;
+  }
+
+  protected _feedbackHideTimeout(): number {
+    return DEFAULT_FEEDBACK_HIDE_TIMEOUT;
+  }
+
+  protected _feedbackShowTimeout(): number {
+    return DEFAULT_FEEDBACK_SHOW_TIMEOUT;
+  }
+
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   _supportedKeys(e?: DxEvent<KeyboardEvent>): SupportedKeys {
     return {};
@@ -285,13 +295,13 @@ class Widget<
   }
 
   _findActiveTarget($element: dxElementWrapper): dxElementWrapper {
-    return $element.find(this._activeStateUnit).not(`.${DISABLED_STATE_CLASS}`);
+    return $element.find(this._activeStateUnit()).not(`.${DISABLED_STATE_CLASS}`);
   }
 
   _getActiveElement(): dxElementWrapper {
     const activeElement = this._eventBindingTarget();
 
-    if (this._activeStateUnit) {
+    if (this._activeStateUnit()) {
       return this._findActiveTarget(activeElement);
     }
 
@@ -434,7 +444,7 @@ class Widget<
 
   _attachHoverEvents(): void {
     const { hoverStateEnabled } = this.option();
-    const selector = this._activeStateUnit;
+    const selector = this._activeStateUnit();
     const namespace = 'UIFeedback';
     const $el = this._eventBindingTarget();
 
@@ -453,7 +463,7 @@ class Widget<
 
   _attachFeedbackEvents(): void {
     const { activeStateEnabled } = this.option();
-    const selector = this._activeStateUnit;
+    const selector = this._activeStateUnit();
     const namespace = 'UIFeedback';
     const $el = this._eventBindingTarget();
 
@@ -468,8 +478,8 @@ class Widget<
           { excludeValidators: ['disabled', 'readOnly'] },
         ),
         {
-          showTimeout: this._feedbackShowTimeout,
-          hideTimeout: this._feedbackHideTimeout,
+          showTimeout: this._feedbackShowTimeout(),
+          hideTimeout: this._feedbackHideTimeout(),
           selector,
           namespace,
         },
@@ -521,7 +531,7 @@ class Widget<
   }
 
   _findHoverTarget($el?: dxElementWrapper): dxElementWrapper | undefined {
-    return $el?.closest(this._activeStateUnit || this._eventBindingTarget());
+    return $el?.closest(this._activeStateUnit() || this._eventBindingTarget());
   }
 
   _hover($el: dxElementWrapper | undefined, $previous: dxElementWrapper | undefined): void {

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

@@ -7,12 +7,15 @@ import Widget from '@js/ui/widget/ui.widget';
 const GRID_CORE_ROW_SELECTOR = '.dx-row';
 
 export default class GridCoreWidget<TProperties> extends Widget<TProperties> {
-  private _activeStateUnit;
-
   private readonly _controllers: any;
 
   private readonly _views: any;
 
+  // eslint-disable-next-line class-methods-use-this
+  protected _activeStateUnit(): string {
+    return GRID_CORE_ROW_SELECTOR;
+  }
+
   private _getDefaultOptions() {
     // @ts-expect-error
     const result = super._getDefaultOptions();
@@ -27,7 +30,6 @@ export default class GridCoreWidget<TProperties> extends Widget<TProperties> {
   }
 
   protected _init() {
-    this._activeStateUnit = GRID_CORE_ROW_SELECTOR;
     // @ts-expect-error
     super._init();
   }

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

@@ -8,6 +8,7 @@ import dateUtils from '@js/core/utils/date';
 import { extend } from '@js/core/utils/extend';
 import { each } from '@js/core/utils/iterator';
 import { setHeight, setOuterHeight } from '@js/core/utils/size';
+import { EMPTY_ACTIVE_STATE_UNIT } from '@ts/core/widget/widget';
 
 import {
   DATE_TABLE_CLASS,
@@ -47,6 +48,11 @@ class SchedulerAgenda extends WorkSpace {
 
   _$noDataContainer: any;
 
+  // eslint-disable-next-line class-methods-use-this
+  protected _activeStateUnit(): string {
+    return EMPTY_ACTIVE_STATE_UNIT;
+  }
+
   get type() { return VIEWS.AGENDA; }
 
   get renderingStrategy() { return (this.invoke as any)('getLayoutManager').getRenderingStrategyInstance(); }
@@ -57,7 +63,6 @@ class SchedulerAgenda extends WorkSpace {
 
   _init() {
     super._init();
-    this._activeStateUnit = undefined;
   }
 
   _getDefaultOptions() {

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

@@ -273,8 +273,6 @@ class SchedulerWorkSpace extends Widget<WorkspaceOptionsInternal> {
 
   _$timePanel: any;
 
-  _activeStateUnit: any;
-
   positionHelper!: PositionHelper;
 
   _$headerPanelContainer: any;
@@ -313,6 +311,13 @@ class SchedulerWorkSpace extends Widget<WorkspaceOptionsInternal> {
 
   renovatedHeaderPanel: any;
 
+  readonly viewDirection: 'vertical' | 'horizontal' = 'vertical';
+
+  // eslint-disable-next-line class-methods-use-this
+  protected _activeStateUnit(): string {
+    return CELL_SELECTOR;
+  }
+
   // eslint-disable-next-line @typescript-eslint/class-literal-property-style
   get type(): string {
     return '';
@@ -383,8 +388,6 @@ class SchedulerWorkSpace extends Widget<WorkspaceOptionsInternal> {
 
   get verticalGroupTableClass() { return WORKSPACE_VERTICAL_GROUP_TABLE_CLASS; }
 
-  readonly viewDirection: 'vertical' | 'horizontal' = 'vertical';
-
   get renovatedHeaderPanelComponent() { return HeaderPanelComponent; }
 
   get timeZoneCalculator(): any {
@@ -2436,7 +2439,6 @@ class SchedulerWorkSpace extends Widget<WorkspaceOptionsInternal> {
     this._scrollSync = {};
     this._viewDataProvider = null;
     this._cellsSelectionState = null;
-    this._activeStateUnit = CELL_SELECTOR;
 
     // @ts-expect-error
     super._init();

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

@@ -53,6 +53,10 @@ class Accordion extends CollectionWidgetLiveUpdate<AccordionProperties, Item, Co
 
   _deferredItems!: DeferredObj<unknown>[];
 
+  protected _activeStateUnit(): string {
+    return `.${ACCORDION_ITEM_CLASS}`;
+  }
+
   _getDefaultOptions(): AccordionProperties {
     return {
       ...super._getDefaultOptions(),
@@ -101,7 +105,6 @@ class Accordion extends CollectionWidgetLiveUpdate<AccordionProperties, Item, Co
   _init(): void {
     super._init();
 
-    this._activeStateUnit = `.${ACCORDION_ITEM_CLASS}`;
     const { collapsible, multiple } = this.option();
 
     this.option('selectionRequired', !collapsible);

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

@@ -155,6 +155,10 @@ class Calendar<
 
   _valueSelected?: boolean;
 
+  protected _activeStateUnit(): string {
+    return `.${CALENDAR_CELL_CLASS}`;
+  }
+
   _getDefaultOptions(): TProperties {
     return {
       ...super._getDefaultOptions(),
@@ -547,7 +551,6 @@ class Calendar<
   _init(): void {
     super._init();
 
-    this._activeStateUnit = `.${CALENDAR_CELL_CLASS}`;
     this._initSelectionStrategy();
     this._correctZoomLevel();
     this._initCurrentDate();

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

@@ -179,6 +179,10 @@ class CollectionWidget<
     }) => void;
   };
 
+  protected _activeStateUnit(): string {
+    return `.${ITEM_CLASS}`;
+  }
+
   _supportedKeys(): SupportedKeys {
     const space = (e: DxEvent<KeyboardEvent>): void => {
       e.preventDefault();
@@ -282,8 +286,6 @@ class CollectionWidget<
     this._initDataController();
     super._init();
 
-    this._activeStateUnit = `.${ITEM_CLASS}`;
-
     this._cleanRenderedItems();
     // @ts-expect-error ts-error
     this._refreshDataSource();
@@ -432,7 +434,7 @@ class CollectionWidget<
   }
 
   _findActiveTarget($element: dxElementWrapper): dxElementWrapper {
-    return $element.find(this._activeStateUnit);
+    return $element.find(this._activeStateUnit());
   }
 
   _getActiveItem(last?: boolean): dxElementWrapper {

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

@@ -81,6 +81,10 @@ class MenuBase<
   // eslint-disable-next-line no-restricted-globals
   _showSubmenusTimeout?: ReturnType<typeof setTimeout>;
 
+  protected _activeStateUnit(): string {
+    return `.${ITEM_CLASS}`;
+  }
+
   _getDefaultOptions(): TProperties {
     return {
       ...super._getDefaultOptions(),
@@ -176,7 +180,6 @@ class MenuBase<
 
   _init(): void {
     super._init();
-    this._activeStateUnit = `.${ITEM_CLASS}`;
 
     this._renderSelectedItem();
     this._initActions();

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

@@ -150,6 +150,10 @@ class Gallery extends CollectionWidget<GalleryProperties, Item, CollectionItemKe
 
   _$indicator?: dxElementWrapper;
 
+  protected _activeStateUnit(): string {
+    return GALLERY_ITEM_SELECTOR;
+  }
+
   _getDefaultOptions(): GalleryProperties {
     return {
       ...super._getDefaultOptions(),
@@ -196,7 +200,6 @@ class Gallery extends CollectionWidget<GalleryProperties, Item, CollectionItemKe
 
     const { loop } = this.option();
 
-    this._activeStateUnit = GALLERY_ITEM_SELECTOR;
     this.option('loopItemFocus', loop);
   }
 

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

@@ -162,6 +162,10 @@ export class ListBase extends CollectionWidget<ListBaseProperties, Item> {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   _selectionChangeEventInstance?: any;
 
+  protected _feedbackShowTimeout(): number {
+    return LIST_FEEDBACK_SHOW_TIMEOUT;
+  }
+
   _supportedKeys(): SupportedKeys {
     return {
       ...super._supportedKeys(),
@@ -495,7 +499,7 @@ export class ListBase extends CollectionWidget<ListBaseProperties, Item> {
     return true;
   }
 
-  _updateActiveStateUnit(): void {
+  protected _activeStateUnit(): string {
     const { collapsibleGroups } = this.option();
 
     const selectors = [
@@ -507,20 +511,17 @@ export class ListBase extends CollectionWidget<ListBaseProperties, Item> {
       selectors.push(`.${LIST_GROUP_HEADER_CLASS}`);
     }
 
-    this._activeStateUnit = selectors.join(',');
+    return selectors.join(',');
   }
 
   _init(): void {
     super._init();
 
-    this._updateActiveStateUnit();
     this._dataController.resetDataSourcePageIndex();
     this._$container = this.$element();
 
     this._$listContainer = $('<div>').addClass(LIST_ITEMS_CLASS);
     this._initScrollView();
-    // @ts-expect-error ts-error
-    this._feedbackShowTimeout = LIST_FEEDBACK_SHOW_TIMEOUT;
     this._createGroupRenderAction();
   }
 
@@ -1364,7 +1365,6 @@ export class ListBase extends CollectionWidget<ListBaseProperties, Item> {
         this._invalidate();
         break;
       case 'collapsibleGroups':
-        this._updateActiveStateUnit();
         this._invalidate();
         break;
       case 'wrapItemText':