DataHelper: try extending the component from mixin instead of using inclide

Author: EugeniyKiyashko

packages/devextreme/js/__internal/data/m_data_helper.ts

@@ -1,8 +1,6 @@
 import { DataSource } from '@js/common/data/data_source/data_source';
 import { normalizeDataSourceOptions } from '@js/common/data/data_source/utils';
 import { extend } from '@js/core/utils/extend';
-import type { Controller } from '@ts/grids/grid_core/m_modules';
-import type { ModuleType } from '@ts/grids/grid_core/m_types';
 import DataController from '@ts/ui/collection/m_data_controller';
 
 const DATA_SOURCE_OPTIONS_METHOD = '_dataSourceOptions';
@@ -13,7 +11,8 @@ const DATA_SOURCE_FROM_URL_LOAD_MODE_METHOD = '_dataSourceFromUrlLoadMode';
 const SPECIFIC_DATA_SOURCE_OPTION = '_getSpecificDataSourceOption';
 const NORMALIZE_DATA_SOURCE = '_normalizeDataSource';
 
-export const DataHelperMixin = <T extends ModuleType<Controller>>(Base: T) => class DataHelperMixin extends Base {
+export type Constructor<T> = (new (...args: any[]) => T);
+export const DataHelperMixin = <T extends Constructor<object>>(Base: T) => class DataHelperMixin extends Base {
   public _dataSource: any;
 
   protected _dataController: any;
@@ -31,6 +30,7 @@ export const DataHelperMixin = <T extends ModuleType<Controller>>(Base: T) => cl
   private readonly _dataSourceType: any;
 
   public postCtor() {
+    // @ts-expect-error ts-error
     this.on('disposing', () => {
       this._disposeDataSource();
     });
@@ -41,9 +41,11 @@ export const DataHelperMixin = <T extends ModuleType<Controller>>(Base: T) => cl
     this._loadDataSource();
   }
 
-  protected _initDataSource() {
+  protected _initDataSource(): void {
     let dataSourceOptions = SPECIFIC_DATA_SOURCE_OPTION in this
-      ? (this[SPECIFIC_DATA_SOURCE_OPTION] as any)()
+      // @ts-expect-error ts-error
+      ? this[SPECIFIC_DATA_SOURCE_OPTION]()
+      // @ts-expect-error ts-error
       : this.option('dataSource');
 
     let widgetDataSourceOptions;
@@ -57,29 +59,33 @@ export const DataHelperMixin = <T extends ModuleType<Controller>>(Base: T) => cl
         this._dataSource = dataSourceOptions;
       } else {
         widgetDataSourceOptions = DATA_SOURCE_OPTIONS_METHOD in this
-          ? (this[DATA_SOURCE_OPTIONS_METHOD] as any)()
+          // @ts-expect-error ts-error
+          ? this[DATA_SOURCE_OPTIONS_METHOD]()
           : {};
 
         dataSourceType = this._dataSourceType ? this._dataSourceType() : DataSource;
 
         dataSourceOptions = normalizeDataSourceOptions(dataSourceOptions, {
-          fromUrlLoadMode: (DATA_SOURCE_FROM_URL_LOAD_MODE_METHOD in this) && (this[DATA_SOURCE_FROM_URL_LOAD_MODE_METHOD] as any)(),
+          // @ts-expect-error ts-error
+          fromUrlLoadMode: (DATA_SOURCE_FROM_URL_LOAD_MODE_METHOD in this) && this[DATA_SOURCE_FROM_URL_LOAD_MODE_METHOD](),
         });
 
         // eslint-disable-next-line new-cap
         this._dataSource = new dataSourceType(extend(true, {}, widgetDataSourceOptions, dataSourceOptions));
       }
 
       if (NORMALIZE_DATA_SOURCE in this) {
-        this._dataSource = (this[NORMALIZE_DATA_SOURCE] as any)(this._dataSource);
+        // @ts-expect-error ts-error
+        this._dataSource = this[NORMALIZE_DATA_SOURCE](this._dataSource);
       }
 
       this._addDataSourceHandlers();
       this._initDataController();
     }
   }
 
-  private _initDataController() {
+  protected _initDataController() {
+    // @ts-expect-error
     const dataController = this.option?.('_dataController');
     const dataSource = this._dataSource;
 
@@ -183,5 +189,3 @@ export const DataHelperMixin = <T extends ModuleType<Controller>>(Base: T) => cl
     return this._dataSource || null;
   }
 };
-
-export default DataHelperMixin;

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

@@ -26,7 +26,6 @@ import { getOuterHeight, getOuterWidth } from '@js/core/utils/size';
 import { findTemplates } from '@js/core/utils/template_manager';
 import { isDefined, isFunction, isPlainObject } from '@js/core/utils/type';
 import type { DataSourceOptions } from '@js/data/data_source';
-import DataHelperMixin from '@js/data_helper';
 import type {
   Cancelable, DxEvent, EventInfo, ItemInfo,
 } from '@js/events';
@@ -35,6 +34,7 @@ import { focusable } from '@js/ui/widget/selectors';
 import { getPublicElement } from '@ts/core/m_element';
 import type { OptionChanged } from '@ts/core/widget/types';
 import Widget from '@ts/core/widget/widget';
+import { DataHelperMixin } from '@ts/data/m_data_helper';
 import CollectionWidgetItem from '@ts/ui/collection/m_item';
 
 const COLLECTION_CLASS = 'dx-collection';
@@ -91,7 +91,11 @@ export interface CollectionWidgetBaseProperties<
 
   focusOnSelectedItem?: boolean;
 
+  encodeNoDataText?: boolean;
+
   _itemAttributes?: Record<string, string>;
+
+  selectOnFocus?: boolean;
 }
 
 class CollectionWidget<
@@ -101,7 +105,7 @@ class CollectionWidget<
   TItem extends ItemLike = any,
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   TKey = any,
-> extends Widget<TProperties> {
+> extends DataHelperMixin(Widget)<TProperties> {
   private _focusedItemId?: string;
 
   // eslint-disable-next-line no-restricted-globals
@@ -121,6 +125,8 @@ class CollectionWidget<
 
   _itemFocusHandler?: () => void;
 
+  onFocusedItemChanged?: (event?: Partial<EventInfo<unknown> & ItemInfo<TItem>>) => void;
+
   _inkRipple?: {
     showWave: (config: {
       element: dxElementWrapper;
@@ -234,14 +240,12 @@ class CollectionWidget<
 
   _init(): void {
     this._compileDisplayGetter();
-    // @ts-expect-error ts-error
     this._initDataController();
     super._init();
 
     this._activeStateUnit = `.${ITEM_CLASS}`;
 
     this._cleanRenderedItems();
-    // @ts-expect-error ts-error
     this._refreshDataSource();
   }
 
@@ -575,7 +579,7 @@ class CollectionWidget<
     this._updateFocusedItemState($target, true);
     // @ts-expect-error ts-error
     this.onFocusedItemChanged(this.getFocusedItemId());
-    // @ts-expect-error ts-error
+
     const { selectOnFocus } = this.option();
     const isTargetDisabled = this._isDisabled($target);
 
@@ -683,7 +687,6 @@ class CollectionWidget<
         this._invalidate();
         break;
       case 'dataSource':
-        // @ts-expect-error ts-error
         this._refreshDataSource();
         // @ts-expect-error ts-error
         this._renderEmptyMessage();
@@ -709,7 +712,6 @@ class CollectionWidget<
         this._attachContextMenuEvent();
         break;
       case 'onFocusedItemChanged':
-        // @ts-expect-error ts-error
         this.onFocusedItemChanged = this._createActionByOption('onFocusedItemChanged');
         break;
       case 'selectOnFocus':
@@ -742,7 +744,6 @@ class CollectionWidget<
 
   _loadNextPage(): Promise<unknown> {
     this._expectNextPageLoading();
-    // @ts-expect-error ts-error
     // eslint-disable-next-line @typescript-eslint/no-unsafe-return
     return this._dataController.loadNextPage();
   }
@@ -866,7 +867,6 @@ class CollectionWidget<
 
   _initMarkup(): void {
     super._initMarkup();
-    // @ts-expect-error ts-error
     this.onFocusedItemChanged = this._createActionByOption('onFocusedItemChanged');
 
     this.$element().addClass(COLLECTION_CLASS);
@@ -1355,8 +1355,8 @@ class CollectionWidget<
   _renderEmptyMessage(items: TItem[]): void {
     // eslint-disable-next-line no-param-reassign
     items = items || this.option('items');
-    const noDataText = this.option('noDataText');
-    // @ts-expect-error ts-error
+    const { noDataText } = this.option();
+
     // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
     const hideNoData = !noDataText || (items && items.length) || this._dataController.isLoading();
 
@@ -1371,11 +1371,11 @@ class CollectionWidget<
       this._$noData = this._$noData ?? $('<div>').addClass('dx-empty-message');
       this._$noData.appendTo(this._emptyMessageContainer());
 
-      if (this.option('encodeNoDataText')) {
-        // @ts-expect-error ts-error
+      const { encodeNoDataText } = this.option();
+
+      if (encodeNoDataText) {
         this._$noData.text(noDataText);
       } else {
-        // @ts-expect-error ts-error
         this._$noData.html(noDataText);
       }
     }
@@ -1483,9 +1483,6 @@ class CollectionWidget<
   }
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-(CollectionWidget as any).include(DataHelperMixin);
-
 // @ts-expect-error ts-error
 CollectionWidget.ItemClass = CollectionWidgetItem;
 

packages/devextreme/js/__internal/ui/menu/m_menu.ts

@@ -427,7 +427,6 @@ class Menu extends MenuBase {
     });
 
     return extend(menuOptions, {
-      // @ts-expect-error
       dataSource: this.getDataSource(),
       animationEnabled: !!this.option('animation'),
       onItemClick: this._treeviewItemClickHandler.bind(this),