Convert CollectionItem class into ES6 class (#28832)

Author: EugeniyKiyashko

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

@@ -91,7 +91,11 @@ export interface CollectionWidgetBaseProperties<
 
   focusOnSelectedItem?: boolean;
 
+  encodeNoDataText?: boolean;
+
   _itemAttributes?: Record<string, string>;
+
+  selectOnFocus?: boolean;
 }
 
 class CollectionWidget<
@@ -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);
 
@@ -685,12 +689,10 @@ class CollectionWidget<
       case 'dataSource':
         // @ts-expect-error ts-error
         this._refreshDataSource();
-        // @ts-expect-error ts-error
         this._renderEmptyMessage();
         break;
       case 'noDataText':
       case 'encodeNoDataText':
-        // @ts-expect-error ts-error
         this._renderEmptyMessage();
         break;
       case 'itemTemplate':
@@ -1084,7 +1086,6 @@ class CollectionWidget<
         this._renderItem(this._renderedItemsCount + index, itemData);
       });
     }
-    // @ts-expect-error ts-error
     this._renderEmptyMessage();
   }
 
@@ -1352,9 +1353,9 @@ class CollectionWidget<
     return this._itemContainer();
   }
 
-  _renderEmptyMessage(items: TItem[]): void {
+  _renderEmptyMessage(rootNodes?: TItem[]): void {
     // eslint-disable-next-line no-param-reassign
-    items = items || this.option('items');
+    const items = rootNodes ?? this.option('items');
     const noDataText = this.option('noDataText');
     // @ts-expect-error ts-error
     // eslint-disable-next-line @typescript-eslint/prefer-optional-chain

packages/devextreme/js/__internal/ui/collection/m_item.ts

@@ -1,109 +1,171 @@
 import Class from '@js/core/class';
+import type { dxElementWrapper } from '@js/core/renderer';
 import $ from '@js/core/renderer';
 import { each } from '@js/core/utils/iterator';
 import { attachInstanceToElement, getInstanceByElement } from '@js/core/utils/public_component';
+import type { CollectionWidgetItem } from '@js/ui/collection/ui.collection_widget.base';
 
 const INVISIBLE_STATE_CLASS = 'dx-state-invisible';
 const DISABLED_STATE_CLASS = 'dx-state-disabled';
 const ITEM_CONTENT_PLACEHOLDER_CLASS = 'dx-item-content-placeholder';
 
-const forcibleWatcher = function (watchMethod, fn, callback) {
-  const filteredCallback = (function () {
-    let oldValue;
-    return function (value) {
+interface Watcher {
+  dispose: () => void;
+  force: () => void;
+}
+
+const forcibleWatcher = <T>(
+  watchMethod: (
+    fn: () => void,
+    callback: (value: T) => void
+  ) => () => void,
+  fn: () => T,
+  callback: (value: T, oldValue: T) => void,
+): Watcher => {
+  const filteredCallback = ((): ((value: T) => void) => {
+    // eslint-disable-next-line @typescript-eslint/init-declarations
+    let oldValue: T;
+    return (value: T): void => {
       if (oldValue !== value) {
         callback(value, oldValue);
         oldValue = value;
       }
     };
-  }());
+  })();
 
   return {
     dispose: watchMethod(fn, filteredCallback),
-    force() {
+    force(): void {
       filteredCallback(fn());
     },
   };
 };
 
-const CollectionItem = Class.inherit({
-
-  ctor($element, options, rawData) {
+export interface ItemExtraOption<TProperties, T = boolean> {
+  owner: Record<string, unknown>;
+  fieldGetter: (
+    field: keyof TProperties
+  ) => (rawData: TProperties | undefined) => T;
+  watchMethod: () => (
+    fn: () => void,
+    callback: (value: T) => void
+  ) => () => void;
+}
+
+class CollectionItem<
+  TProperties extends CollectionWidgetItem = CollectionWidgetItem,
+  // @ts-expect-error dxClass inheritance issue
+  // eslint-disable-next-line @typescript-eslint/ban-types
+> extends (Class.inherit({}) as new() => {}) {
+  _dirty?: boolean;
+
+  _watchers!: Watcher[];
+
+  _$element!: dxElementWrapper;
+
+  _options!: ItemExtraOption<TProperties>;
+
+  _rawData?: TProperties;
+
+  ctor(
+    $element: dxElementWrapper,
+    options: ItemExtraOption<TProperties>,
+    rawData: TProperties,
+  ): void {
     this._$element = $element;
     this._options = options;
     this._rawData = rawData;
 
     attachInstanceToElement($element, this, this._dispose);
 
     this._render();
-  },
+  }
 
-  _render() {
+  _render(): void {
     const $placeholder = $('<div>').addClass(ITEM_CONTENT_PLACEHOLDER_CLASS);
     this._$element.append($placeholder);
 
     this._watchers = [];
     this._renderWatchers();
-  },
+  }
 
-  _renderWatchers() {
+  _renderWatchers(): void {
     this._startWatcher('disabled', this._renderDisabled.bind(this));
     this._startWatcher('visible', this._renderVisible.bind(this));
-  },
-
-  _startWatcher(field, render) {
+  }
+
+  _startWatcher(
+    field: keyof TProperties,
+    render: (
+      value: boolean | undefined,
+      oldValue: boolean | undefined,
+    ) => void,
+  ): void {
     const rawData = this._rawData;
     const exprGetter = this._options.fieldGetter(field);
 
-    const watcher = forcibleWatcher(this._options.watchMethod(), () => exprGetter(rawData), (value, oldValue) => {
-      this._dirty = true;
-      render(value, oldValue);
-    });
+    const watcher = forcibleWatcher<boolean>(
+      this._options.watchMethod(),
+      () => exprGetter(rawData),
+      (value, oldValue) => {
+        this._dirty = true;
+        render(value, oldValue);
+      },
+    );
 
     this._watchers.push(watcher);
-  },
-  // @ts-expect-error
-  setDataField() {
+  }
+
+  setDataField(): boolean {
     this._dirty = false;
+
     each(this._watchers, (_, watcher) => {
       watcher.force();
     });
-    if (this._dirty) {
-      return true;
-    }
-  },
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  _renderDisabled(value, oldValue) {
+    return this._dirty;
+  }
+
+  _renderDisabled(
+    value: boolean | undefined,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    oldValue?: boolean | undefined,
+  ): void {
     this._$element.toggleClass(DISABLED_STATE_CLASS, !!value);
     this._$element.attr('aria-disabled', !!value);
 
     this._updateOwnerFocus(value);
-  },
+  }
 
-  _updateOwnerFocus(isDisabled) {
+  _updateOwnerFocus(isDisabled: boolean | undefined): void {
     const ownerComponent = this._options.owner;
 
     if (ownerComponent && isDisabled) {
+      // @ts-expect-error ts-error
       ownerComponent._resetItemFocus(this._$element);
     }
-  },
+  }
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  _renderVisible(value, oldValue) {
+  _renderVisible(
+    value: boolean | undefined,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    oldValue?: boolean | undefined,
+  ): void {
     this._$element.toggleClass(INVISIBLE_STATE_CLASS, value !== undefined && !value);
-  },
+  }
 
-  _dispose() {
+  _dispose(): void {
     each(this._watchers, (_, watcher) => {
       watcher.dispose();
     });
-  },
-
-});
-// @ts-expect-error
-CollectionItem.getInstance = function ($element) {
-  return getInstanceByElement($element, this);
-};
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  static getInstance<T = CollectionItem<any>>($element: dxElementWrapper): T {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+    return getInstanceByElement($element, this);
+  }
+}
 
 export default CollectionItem;

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

@@ -8,6 +8,7 @@ const BADGE_CLASS = 'dx-badge';
 const LIST_ITEM_CHEVRON_CONTAINER_CLASS = 'dx-list-item-chevron-container';
 const LIST_ITEM_CHEVRON_CLASS = 'dx-list-item-chevron';
 
+// @ts-expect-error
 const ListItem = CollectionWidgetItem.inherit({
 
   _renderWatchers() {

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

@@ -10,6 +10,8 @@ import {
 import { isDefined } from '@js/core/utils/type';
 import { hasWindow } from '@js/core/utils/window';
 import CollectionWidget from '@js/ui//collection/ui.collection_widget.edit';
+import type { Item } from '@js/ui/box';
+import type { ItemExtraOption } from '@ts/ui/collection/m_item';
 import CollectionWidgetItem from '@ts/ui/collection/m_item';
 
 const BOX_CLASS = 'dx-box';
@@ -62,12 +64,21 @@ const setFlexProp = (element, prop, value) => {
   }
 };
 
-// @ts-expect-error dxClass inheritance issue
-class BoxItem extends CollectionWidgetItem {
-  _renderVisible(value, oldValue) {
+class BoxItem extends CollectionWidgetItem<Item> {
+  _options!: ItemExtraOption<Item> & {
+    fireItemStateChangedAction: ((args: {
+      name: string;
+      state: unknown;
+      oldState: unknown;
+    }) => void);
+  };
+
+  _renderVisible(
+    value: boolean | undefined,
+    oldValue: boolean | undefined,
+  ): void {
     super._renderVisible(value);
     if (isDefined(oldValue)) {
-      // @ts-expect-error
       this._options.fireItemStateChangedAction({
         name: 'visible',
         state: value,

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

@@ -314,9 +314,7 @@ class Splitter extends CollectionWidget<Properties> {
   }
 
   _getItemInstance($item: dxElementWrapper): SplitterItem {
-    // @ts-expect-error badly typed base class
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
-    return Splitter.ItemClass.getInstance($item);
+    return SplitterItem.getInstance<SplitterItem>($item);
   }
 
   _updateResizeHandlesResizableState(): void {

packages/devextreme/js/__internal/ui/splitter/splitter_item.ts

@@ -7,10 +7,7 @@ import CollectionWidgetItem from '@ts/ui/collection/m_item';
 import ResizeHandle from './resize_handle';
 import type Splitter from './splitter';
 
-// @ts-expect-error dxClass inheritance issue
-class SplitterItem extends CollectionWidgetItem {
-  private readonly _$element?: dxElementWrapper;
-
+class SplitterItem extends CollectionWidgetItem<Item> {
   _owner: Splitter;
 
   _rawData?: Item;
@@ -24,6 +21,7 @@ class SplitterItem extends CollectionWidgetItem {
     },
     rawData: Item,
   ) {
+    // @ts-expect-error
     super($element, options, rawData);
 
     this._owner = options.owner;
@@ -46,7 +44,7 @@ class SplitterItem extends CollectionWidgetItem {
   }
 
   _setIdAttr(id: string): void {
-    this._$element?.attr('id', id);
+    this._$element.attr('id', id);
   }
 
   getIndex(): number {

packages/devextreme/js/__internal/ui/tab_panel/m_item.ts

@@ -1,12 +1,11 @@
 import { noop } from '@js/core/utils/common';
+import type { Item } from '@js/ui/tab_panel';
 import CollectionWidgetItem from '@ts/ui/collection/m_item';
 
-// @ts-expect-error dxClass inheritance issue
-export default class TabPanelItem extends CollectionWidgetItem {
-  _renderWatchers() {
-    // @ts-expect-error
+export default class TabPanelItem extends CollectionWidgetItem<Item> {
+  _renderWatchers(): void {
     this._startWatcher('badge', noop);
 
-    return super._renderWatchers();
+    super._renderWatchers();
   }
 }

packages/devextreme/js/__internal/ui/tabs/m_item.ts

@@ -3,7 +3,7 @@ import CollectionWidgetItem from '@ts/ui/collection/m_item';
 
 const TABS_ITEM_BADGE_CLASS = 'dx-tabs-item-badge';
 const BADGE_CLASS = 'dx-badge';
-
+// @ts-expect-error
 const TabsItem = CollectionWidgetItem.inherit({
 
   _renderWatchers() {